From 11a47264a72a95fe2d6bb93f3c8d09cce3444ec8 Mon Sep 17 00:00:00 2001
From: Etienne <45695613+etiennejouan@users.noreply.github.com>
Date: Fri, 10 Jan 2025 18:32:52 +0100
Subject: [PATCH] fix: fix regression on multiItem input field when no item
 (#9543)

### Context
Fix on [8904 issue](https://github.com/twentyhq/twenty/issues/8904)
([PR](https://github.com/twentyhq/twenty/pull/9439)) introduces a
regression when field has no item.
Background should be lighter.
<img width="250" alt="Screenshot 2025-01-10 at 16 08 03"
src="https://github.com/user-attachments/assets/1eb39455-f24a-4301-9a72-7a9a8f5c8382"
/>


### Solution
Conditional styling, displayed only when MultiInput has item
<img width="250" alt="Screenshot 2025-01-10 at 16 08 20"
src="https://github.com/user-attachments/assets/6bc02aa0-0430-4207-8163-c31d66751f3e"
/>

Co-authored-by: etiennejouan <jouan.etienne@gmail.com>
---
 .../input/components/MultiItemBaseInput.tsx   | 14 +++++++++++---
 .../input/components/MultiItemFieldInput.tsx  |  1 +
 .../input/components/PhonesFieldInput.tsx     | 19 +++++++++++++------
 .../PhoneCountryPickerDropdownButton.tsx      |  2 +-
 4 files changed, 26 insertions(+), 10 deletions(-)

diff --git 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
index cc4678d2c..4663b3989 100644
--- 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
@@ -9,12 +9,17 @@ import { useCombinedRefs } from '~/hooks/useCombinedRefs';
 const StyledInput = styled.input<{
   withRightComponent?: boolean;
   hasError?: boolean;
+  hasItem: boolean;
 }>`
   ${TEXT_INPUT_STYLE}
 
-  background-color: ${({ theme }) => theme.background.transparent.lighter};
-  border-radius: 4px;
-  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  ${({ hasItem, theme }) =>
+    hasItem &&
+    css`
+      background-color: ${theme.background.transparent.lighter};
+      border-radius: 4px;
+      border: 1px solid ${theme.border.color.medium};
+    `}
 
   box-sizing: border-box;
   font-weight: ${({ theme }) => theme.font.weight.medium};
@@ -70,6 +75,7 @@ export type MultiItemBaseInputProps = HTMLInputProps & {
   }) => React.ReactNode;
   error?: string | null;
   hasError?: boolean;
+  hasItem: boolean;
 };
 
 export const MultiItemBaseInput = forwardRef<
@@ -93,6 +99,7 @@ export const MultiItemBaseInput = forwardRef<
       renderInput,
       error = '',
       hasError = false,
+      hasItem,
     },
     ref,
   ) => {
@@ -129,6 +136,7 @@ export const MultiItemBaseInput = forwardRef<
               onChange={onChange}
               ref={combinedRef}
               withRightComponent={!!rightComponent}
+              hasItem={hasItem}
             />
           )}
           {!!rightComponent && (
diff --git 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
index 224936435..e0848f415 100644
--- 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
@@ -199,6 +199,7 @@ export const MultiItemFieldInput = <T,>({
             )
           }
           onEnter={handleSubmitInput}
+          hasItem={!!items.length}
           rightComponent={
             items.length ? (
               <LightIconButton
diff --git 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
index d372b5edc..e5f08eea2 100644
--- 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
@@ -10,16 +10,23 @@ import { MultiItemFieldInput } from './MultiItemFieldInput';
 
 import { createPhonesFromFieldValue } from '@/object-record/record-field/meta-types/input/utils/phonesUtils';
 import { PhoneCountryPickerDropdownButton } from '@/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton';
+import { css } from '@emotion/react';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { stripSimpleQuotesFromString } from '~/utils/string/stripSimpleQuotesFromString';
 
 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 StyledCustomPhoneInputContainer = styled.div<{
+  hasItem: boolean;
+}>`
+  ${({ hasItem, theme }) =>
+    hasItem &&
+    css`
+      background-color: ${theme.background.transparent.lighter};
+      border-radius: 4px;
+      border: 1px solid ${theme.border.color.medium};
+      height: 30px;
+    `}
 `;
 
 const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)`
@@ -130,7 +137,7 @@ export const PhonesFieldInput = ({
       )}
       renderInput={({ value, onChange, autoFocus, placeholder }) => {
         return (
-          <StyledCustomPhoneInputContainer>
+          <StyledCustomPhoneInputContainer hasItem={!!phones.length}>
             <StyledCustomPhoneInput
               autoFocus={autoFocus}
               placeholder={placeholder}
diff --git 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
index 7a1c62681..8d8aba0b4 100644
--- 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,7 +27,7 @@ const StyledDropdownButtonContainer = styled.div<StyledDropdownButtonProps>`
   cursor: pointer;
   display: flex;
 
-  height: 30px;
+  height: 32px;
 
   padding-left: ${({ theme }) => theme.spacing(2)};
   padding-right: ${({ theme }) => theme.spacing(1)};