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 <jouan.etienne@gmail.com>
2025-01-08 16:16:46 +01:00
parent a1664fbc7b
commit 7036a8ccc3
7 changed files with 192 additions and 153 deletions
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemBaseInput.tsx
+++ b/packages/twenty-front/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>}
+      </>
+    );
+  },
+);
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx
+++ b/packages/twenty-front/src/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}
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx
+++ b/packages/twenty-front/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}
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/stories/MultiItemBaseInput.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/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 },
+};
--- a/packages/twenty-front/src/modules/ui/field/input/components/PhoneInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/PhoneInput.tsx
@ -1,132 +0,0 @@
-import styled from '@emotion/styled';
-import { useEffect, useRef, useState } from 'react';
-import ReactPhoneNumberInput from 'react-phone-number-input';
-import { TEXT_INPUT_STYLE } from 'twenty-ui';
-
-import { LightCopyIconButton } from '@/object-record/record-field/components/LightCopyIconButton';
-import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
-import { PhoneCountryPickerDropdownButton } from '@/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton';
-
-import { E164Number } from 'libphonenumber-js';
-import 'react-phone-number-input/style.css';
-
-const StyledContainer = styled.div`
-  align-items: center;
-
-  border: none;
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  box-shadow: ${({ theme }) => theme.boxShadow.strong};
-  width: 100%;
-
-  display: flex;
-  justify-content: start;
-`;
-
-const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)`
-  font-family: ${({ theme }) => theme.font.family};
-  height: 32px;
-  ${TEXT_INPUT_STYLE}
-  padding: 0;
-
-  .PhoneInputInput {
-    background: none;
-    border: none;
-    color: ${({ theme }) => theme.font.color.primary};
-
-    &::placeholder,
-    &::-webkit-input-placeholder {
-      color: ${({ theme }) => theme.font.color.light};
-      font-family: ${({ theme }) => theme.font.family};
-      font-weight: ${({ theme }) => theme.font.weight.medium};
-    }
-
-    :focus {
-      outline: none;
-    }
-  }
-
-  & svg {
-    border-radius: ${({ theme }) => theme.border.radius.xs};
-    height: 12px;
-  }
-  width: calc(100% - ${({ theme }) => theme.spacing(8)});
-`;
-
-const StyledLightIconButtonContainer = styled.div`
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  right: 0;
-`;
-
-export type PhoneInputProps = {
-  placeholder?: string;
-  autoFocus?: boolean;
-  value: string;
-  onEnter: (newText: string) => void;
-  onEscape: (newText: string) => void;
-  onTab?: (newText: string) => void;
-  onShiftTab?: (newText: string) => void;
-  onClickOutside: (event: MouseEvent | TouchEvent, inputValue: string) => void;
-  onChange?: (newText: string) => void;
-  hotkeyScope: string;
-  copyButton?: boolean;
-};
-
-export const PhoneInput = ({
-  autoFocus,
-  value,
-  onEnter,
-  onEscape,
-  onTab,
-  onShiftTab,
-  onClickOutside,
-  hotkeyScope,
-  onChange,
-  copyButton = true,
-}: PhoneInputProps) => {
-  const [internalValue, setInternalValue] = useState<string | undefined>(value);
-
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const copyRef = useRef<HTMLDivElement>(null);
-
-  const handleChange = (newValue: E164Number) => {
-    setInternalValue(newValue);
-    onChange?.(newValue as string);
-  };
-
-  useEffect(() => {
-    setInternalValue(value);
-  }, [value]);
-
-  useRegisterInputEvents({
-    inputRef: wrapperRef,
-    copyRef: copyRef,
-    inputValue: internalValue ?? '',
-    onEnter,
-    onEscape,
-    onClickOutside,
-    onTab,
-    onShiftTab,
-    hotkeyScope,
-  });
-
-  return (
-    <StyledContainer ref={wrapperRef}>
-      <StyledCustomPhoneInput
-        autoFocus={autoFocus}
-        placeholder="Phone number"
-        value={value}
-        onChange={handleChange}
-        international={true}
-        withCountryCallingCode={true}
-        countrySelectComponent={PhoneCountryPickerDropdownButton}
-      />
-      {copyButton && (
-        <StyledLightIconButtonContainer ref={copyRef}>
-          <LightCopyIconButton copyText={value} />
-        </StyledLightIconButtonContainer>
-      )}
-    </StyledContainer>
-  );
-};
--- a/packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton.tsx
+++ b/packages/twenty-front/src/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};
  }
 `;

--- a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx
@ -27,16 +27,16 @@ const StyledDropdownButtonContainer = styled.div<StyledDropdownButtonProps>`
  cursor: pointer;
  display: flex;

-  height: 32px;
+  height: 30px;

  padding-left: ${({ theme }) => theme.spacing(2)};
  padding-right: ${({ theme }) => theme.spacing(1)};
  user-select: none;

-  border-right: 1px solid ${({ theme }) => theme.border.color.light};
+  border-right: 1px solid ${({ theme }) => theme.border.color.medium};

  &:hover {
-    filter: brightness(0.95);
+    background-color: ${({ theme }) => theme.background.transparent.light};
  }
 `;