Add address composite form field (#9022)

- Create FormCountrySelectInput using the existing FormSelectFieldInput
- Create AddressFormFieldInput component
- Fix FormSelectFieldInput dropdown + add leftIcon

<img width="554" alt="Capture d’écran 2024-12-11 à 15 56 32"
src="https://github.com/user-attachments/assets/c3019f29-af76-44e1-96bd-a0c6283674e1"
/>

packages/twenty-front/src/modules/ui/field/display/components/SelectDisplay.tsx

@@ -1,10 +1,11 @@
-import { Tag, ThemeColor } from 'twenty-ui';
+import { IconComponent, Tag, ThemeColor } from 'twenty-ui';
 
 type SelectDisplayProps = {
-  color: ThemeColor;
+  color: ThemeColor | 'transparent';
   label: string;
+  Icon?: IconComponent;
 };
 
-export const SelectDisplay = ({ color, label }: SelectDisplayProps) => {
-  return <Tag preventShrink color={color} text={label} />;
+export const SelectDisplay = ({ color, label, Icon }: SelectDisplayProps) => {
+  return <Tag preventShrink color={color} text={label} Icon={Icon} />;
 };

packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx

@@ -260,6 +260,7 @@ export const AddressInput = ({
           onFocus={getFocusHandler('addressPostcode')}
         />
         <CountrySelect
+          label="COUNTRY"
           onChange={getChangeHandler('addressCountry')}
           selectedCountryName={internalValue.addressCountry ?? ''}
         />

packages/twenty-front/src/modules/ui/input/components/SelectInput.tsx

@@ -109,7 +109,7 @@ export const SelectInput = ({
             selected={false}
             text={`No ${clearLabel}`}
             color="transparent"
-            variant="outline"
+            variant={'outline'}
             onClick={() => {
               setSelectedOption(undefined);
               onClear();
@@ -122,8 +122,9 @@ export const SelectInput = ({
               key={option.value}
               selected={selectedOption?.value === option.value}
               text={option.label}
-              color={option.color as TagColor}
+              color={(option.color as TagColor) ?? 'transparent'}
               onClick={() => handleOptionChange(option)}
+              LeftIcon={option.icon}
             />
           );
         })}

packages/twenty-front/src/modules/ui/input/components/internal/country/components/CountrySelect.tsx

@@ -6,9 +6,11 @@ import { useCountries } from '@/ui/input/components/internal/hooks/useCountries'
 import { Select, SelectOption } from '@/ui/input/components/Select';
 
 export const CountrySelect = ({
+  label,
   selectedCountryName,
   onChange,
 }: {
+  label: string;
   selectedCountryName: string;
   onChange: (countryCode: string) => void;
 }) => {
@@ -36,7 +38,7 @@ export const CountrySelect = ({
       fullWidth
       dropdownId={SELECT_COUNTRY_DROPDOWN_ID}
       options={options}
-      label="COUNTRY"
+      label={label}
       withSearchInput
       onChange={onChange}
       value={selectedCountryName}