admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix dropdown input design (#9439)

Browse Source 
### Context
Update to match Figma design for dropdown input - [standard
input](https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=28562-75034&t=4FdGFZfPLtvNq8La-4)
/ [custom phone
input](https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=28562-74922&t=YIxM3jgx8kC9qiyQ-4)

### Preview
<img width="200" alt="Screenshot 2025-01-07 at 16 07 31"
src="https://github.com/user-attachments/assets/d61eb446-aa62-43e5-b3a4-95efc8e3997e"
/>

<img width="200" alt="Screenshot 2025-01-07 at 16 06 12"
src="https://github.com/user-attachments/assets/8e80658c-8e33-408c-96b7-733ca72de8cb"
/>

<img width="200" alt="Screenshot 2025-01-07 at 16 06 22"
src="https://github.com/user-attachments/assets/9c2b204d-aa97-4fb1-a884-54d64864c900"
/>

<img width="200" alt="Screenshot 2025-01-07 at 16 06 36"
src="https://github.com/user-attachments/assets/a47b0e49-3c25-4738-b6a6-c3f0af067bc7"
/>


closes #8904

---------

Co-authored-by: etiennejouan <jouan.etienne@gmail.com>
This commit is contained in:
Etienne
2025-01-08 16:16:46 +01:00
committed by GitHub
parent a1664fbc7b
commit 7036a8ccc3
7 changed files with 192 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemBaseInput.tsx Normal file
View File

@ -0,0 +1,142 @@
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { forwardRef, InputHTMLAttributes, ReactNode, useRef } from 'react';
import { TEXT_INPUT_STYLE } from 'twenty-ui';
import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
import { useCombinedRefs } from '~/hooks/useCombinedRefs';
const StyledInput = styled.input<{
withRightComponent?: boolean;
hasError?: boolean;
}>`
${TEXT_INPUT_STYLE}
background-color: ${({ theme }) => theme.background.transparent.lighter};
border-radius: 4px;
border: 1px solid ${({ theme }) => theme.border.color.medium};
box-sizing: border-box;
font-weight: ${({ theme }) => theme.font.weight.medium};
height: 32px;
position: relative;
width: 100%;
${({ withRightComponent }) =>
withRightComponent &&
css`
padding-right: 32px;
`}
`;
const StyledInputContainer = styled.div`
background-color: transparent;
box-sizing: border-box;
position: relative;
width: 100%;
&:not(:first-of-type) {
padding: ${({ theme }) => theme.spacing(1)};
}
`;
const StyledRightContainer = styled.div`
position: absolute;
right: ${({ theme }) => theme.spacing(2)};
top: 50%;
transform: translateY(-50%);
`;
const StyledErrorDiv = styled.div`
color: ${({ theme }) => theme.color.red};
padding: 0 ${({ theme }) => theme.spacing(2)};
`;
type HTMLInputProps = InputHTMLAttributes<HTMLInputElement>;
export type MultiItemBaseInputProps = HTMLInputProps & {
hotkeyScope?: string;
onClickOutside?: () => void;
onEnter?: () => void;
onEscape?: () => void;
onShiftTab?: () => void;
onTab?: () => void;
rightComponent?: ReactNode;
renderInput?: (props: {
value: HTMLInputProps['value'];
onChange: HTMLInputProps['onChange'];
autoFocus: HTMLInputProps['autoFocus'];
placeholder: HTMLInputProps['placeholder'];
}) => React.ReactNode;
error?: string | null;
hasError?: boolean;
};
export const MultiItemBaseInput = forwardRef<
HTMLInputElement,
MultiItemBaseInputProps
>(
(
{
autoFocus,
className,
value,
placeholder,
hotkeyScope = 'dropdown-menu-input',
onChange,
onClickOutside,
onEnter = () => {},
onEscape = () => {},
onShiftTab,
onTab,
rightComponent,
renderInput,
error = '',
hasError = false,
},
ref,
) => {
const inputRef = useRef<HTMLInputElement>(null);
const combinedRef = useCombinedRefs(ref, inputRef);
useRegisterInputEvents({
inputRef,
inputValue: value,
onEnter,
onEscape,
onClickOutside,
onTab,
onShiftTab,
hotkeyScope,
});
return (
<>
<StyledInputContainer className={className}>
{renderInput ? (
renderInput({
value,
onChange,
autoFocus,
placeholder,
})
) : (
<StyledInput
hasError={hasError}
autoFocus={autoFocus}
value={value}
placeholder={placeholder}
onChange={onChange}
ref={combinedRef}
withRightComponent={!!rightComponent}
/>
)}
{!!rightComponent && (
<StyledRightContainer>{rightComponent}</StyledRightContainer>
)}
</StyledInputContainer>
{error && <StyledErrorDiv>{error}</StyledErrorDiv>}
</>
);
},
);

12
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx
View File

@ -2,12 +2,12 @@ import React, { useRef, useState } from 'react';
import { Key } from 'ts-key-enum';
import { IconCheck, IconPlus, LightIconButton, MenuItem } from 'twenty-ui';
import {
MultiItemBaseInput,
MultiItemBaseInputProps,
} from '@/object-record/record-field/meta-types/input/components/MultiItemBaseInput';
import { PhoneRecord } from '@/object-record/record-field/types/FieldMetadata';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import {
DropdownMenuInput,
DropdownMenuInputProps,
} from '@/ui/layout/dropdown/components/DropdownMenuInput';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
@ -34,7 +34,7 @@ type MultiItemFieldInputProps<T> = {
hotkeyScope: string;
newItemLabel?: string;
fieldMetadataType: FieldMetadataType;
renderInput?: DropdownMenuInputProps['renderInput'];
renderInput?: MultiItemBaseInputProps['renderInput'];
onClickOutside?: (event: MouseEvent | TouchEvent) => void;
};
@ -176,7 +176,7 @@ export const MultiItemFieldInput = <T,>({
</>
)}
{isInputDisplayed || !items.length ? (
<DropdownMenuInput
<MultiItemBaseInput
autoFocus
placeholder={placeholder}
value={inputValue}

31
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx
View File

@ -15,10 +15,17 @@ import { stripSimpleQuotesFromString } from '~/utils/string/stripSimpleQuotesFro
export const DEFAULT_PHONE_CALLING_CODE = '1';
const StyledCustomPhoneInputContainer = styled.div`
background-color: ${({ theme }) => theme.background.transparent.lighter};
border-radius: 4px;
border: 1px solid ${({ theme }) => theme.border.color.medium};
height: 30px;
`;
const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)`
font-family: ${({ theme }) => theme.font.family};
${TEXT_INPUT_STYLE}
padding: 0;
height: 100%;
.PhoneInputInput {
background: none;
@ -123,16 +130,18 @@ export const PhonesFieldInput = ({
)}
renderInput={({ value, onChange, autoFocus, placeholder }) => {
return (
<StyledCustomPhoneInput
autoFocus={autoFocus}
placeholder={placeholder}
value={value as E164Number}
onChange={onChange as unknown as (newValue: E164Number) => void}
international={true}
withCountryCallingCode={true}
countrySelectComponent={PhoneCountryPickerDropdownButton}
defaultCountry={defaultCountry}
/>
<StyledCustomPhoneInputContainer>
<StyledCustomPhoneInput
autoFocus={autoFocus}
placeholder={placeholder}
value={value as E164Number}
onChange={onChange as unknown as (newValue: E164Number) => void}
international={true}
withCountryCallingCode={true}
countrySelectComponent={PhoneCountryPickerDropdownButton}
defaultCountry={defaultCountry}
/>
</StyledCustomPhoneInputContainer>
);
}}
hotkeyScope={hotkeyScope}

20
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/MultiItemBaseInput.stories.tsx Normal file
View File

@ -0,0 +1,20 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { MultiItemBaseInput } from '../MultiItemBaseInput';
const meta: Meta<typeof MultiItemBaseInput> = {
title: 'UI/Data/Field/Input/BaseFieldInput',
component: MultiItemBaseInput,
decorators: [ComponentDecorator],
args: { value: 'Lorem ipsum' },
};
export default meta;
type Story = StoryObj<typeof MultiItemBaseInput>;
export const Default: Story = {};
export const Focused: Story = {
args: { autoFocus: true },
};