Fix dropdown input design (#9439)

### 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 <[email protected]>
twentyhq · Jan 8, 2025 · 7036a8c · 7036a8c
1 parent a1664fb
commit 7036a8c
Show file tree

Hide file tree

Showing 7 changed files with 192 additions and 153 deletions.
diff --git a/...src/modules/object-record/record-field/meta-types/input/components/MultiItemBaseInput.tsx b/...src/modules/object-record/record-field/meta-types/input/components/MultiItemBaseInput.tsx
@@ -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>}
+      </>
+    );
+  },
+);
diff --git a/...rc/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx b/...rc/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx
@@ -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}

diff --git a/...t/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx b/...t/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx
@@ -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}

diff --git a/...ecord/record-field/meta-types/input/components/__stories__/MultiItemBaseInput.stories.tsx b/...ecord/record-field/meta-types/input/components/__stories__/MultiItemBaseInput.stories.tsx
@@ -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 },
+};
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/PhoneInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/PhoneInput.tsx
diff --git a/...modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton.tsx b/...modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton.tsx
@@ -21,7 +21,7 @@ const StyledDropdownButtonContainer = styled.div`
   padding-right: ${({ theme }) => theme.spacing(2)};
   user-select: none;
   &:hover {
-    filter: brightness(0.95);
+    background-color: ${({ theme }) => theme.background.transparent.light};
   }
 `;