Settings Form Select refacto (#8875)

fixes #8751

packages/twenty-front/src/modules/settings/data-model/fields/forms/address/components/SettingsDataModelFieldAddressForm.tsx

@@ -4,11 +4,11 @@ import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { addressSchema as addressFieldDefaultValueSchema } from '@/object-record/record-field/types/guards/isFieldAddressValue';
 import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsOptions/SettingsOptionCardContentSelect';
 import { useCountries } from '@/ui/input/components/internal/hooks/useCountries';
+import { Select } from '@/ui/input/components/Select';
 import { IconMap } from 'twenty-ui';
 import { z } from 'zod';
 import { applySimpleQuotesToString } from '~/utils/string/applySimpleQuotesToString';
 import { stripSimpleQuotesFromString } from '~/utils/string/stripSimpleQuotesFromString';
-
 type SettingsDataModelFieldAddressFormProps = {
   disabled?: boolean;
   defaultCountry?: string;
@@ -63,22 +63,26 @@ export const SettingsDataModelFieldAddressForm = ({
       render={({ field: { onChange, value } }) => {
         const defaultCountry = value?.addressCountry || '';
         return (
-          <SettingsOptionCardContentSelect<string>
+          <SettingsOptionCardContentSelect
             Icon={IconMap}
-            dropdownId="selectDefaultCountry"
             title="Default Country"
             description="The default country for new addresses"
-            value={stripSimpleQuotesFromString(defaultCountry)}
-            onChange={(newCountry) =>
-              onChange({
-                ...value,
-                addressCountry: applySimpleQuotesToString(newCountry),
-              })
-            }
-            disabled={disabled}
-            options={countries}
-            fullWidth={true}
-          />
+          >
+            <Select<string>
+              dropdownWidth={'auto'}
+              disabled={disabled}
+              dropdownId="selectDefaultCountry"
+              value={stripSimpleQuotesFromString(defaultCountry)}
+              onChange={(newCountry) =>
+                onChange({
+                  ...value,
+                  addressCountry: applySimpleQuotesToString(newCountry),
+                })
+              }
+              options={countries}
+              selectSizeVariant="small"
+            />
+          </SettingsOptionCardContentSelect>
         );
       }}
     />

packages/twenty-front/src/modules/settings/data-model/fields/forms/boolean/components/SettingsDataModelFieldBooleanForm.tsx

@@ -5,6 +5,7 @@ import { z } from 'zod';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsOptions/SettingsOptionCardContentSelect';
 import { useBooleanSettingsFormInitialValues } from '@/settings/data-model/fields/forms/boolean/hooks/useBooleanSettingsFormInitialValues';
+import { Select } from '@/ui/input/components/Select';
 
 export const settingsDataModelFieldBooleanFormSchema = z.object({
   defaultValue: z.boolean(),
@@ -15,12 +16,10 @@ export type SettingsDataModelFieldBooleanFormValues = z.infer<
 >;
 
 type SettingsDataModelFieldBooleanFormProps = {
-  className?: string;
   fieldMetadataItem: Pick<FieldMetadataItem, 'defaultValue'>;
 };
 
 export const SettingsDataModelFieldBooleanForm = ({
-  className,
   fieldMetadataItem,
 }: SettingsDataModelFieldBooleanFormProps) => {
   const { control } = useFormContext<SettingsDataModelFieldBooleanFormValues>();
@@ -39,23 +38,27 @@ export const SettingsDataModelFieldBooleanForm = ({
           Icon={IconCheck}
           title="Default Value"
           description="Select the default value for this boolean field"
-          value={value}
-          onChange={onChange}
-          selectClassName={className}
-          dropdownId="object-field-default-value-select-boolean"
-          options={[
-            {
-              value: true,
-              label: 'True',
-              Icon: IconCheck,
-            },
-            {
-              value: false,
-              label: 'False',
-              Icon: IconX,
-            },
-          ]}
-        />
+        >
+          <Select<boolean>
+            value={value}
+            onChange={onChange}
+            dropdownId="object-field-default-value-select-boolean"
+            dropdownWidth={120}
+            options={[
+              {
+                value: true,
+                label: 'True',
+                Icon: IconCheck,
+              },
+              {
+                value: false,
+                label: 'False',
+                Icon: IconX,
+              },
+            ]}
+            selectSizeVariant="small"
+          />
+        </SettingsOptionCardContentSelect>
       )}
     />
   );

packages/twenty-front/src/modules/settings/data-model/fields/forms/components/text/SettingsDataModelFieldTextForm.tsx

@@ -2,6 +2,7 @@ import { Controller, useFormContext } from 'react-hook-form';
 
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsOptions/SettingsOptionCardContentSelect';
+import { Select } from '@/ui/input/components/Select';
 import { IconTextWrap } from 'twenty-ui';
 import { z } from 'zod';
 
@@ -44,35 +45,39 @@ export const SettingsDataModelFieldTextForm = ({
           <>
             <SettingsOptionCardContentSelect
               Icon={IconTextWrap}
-              dropdownId="text-wrap"
               title="Wrap on record pages"
               description="Display text on multiple lines"
-              value={displayedMaxRows}
-              onChange={(value) => onChange({ displayedMaxRows: value })}
-              disabled={disabled}
-              options={[
-                {
-                  label: 'Deactivated',
-                  value: 0,
-                },
-                {
-                  label: 'First 2 lines',
-                  value: 2,
-                },
-                {
-                  label: 'First 5 lines',
-                  value: 5,
-                },
-                {
-                  label: 'First 10 lines',
-                  value: 10,
-                },
-                {
-                  label: 'All lines',
-                  value: 99,
-                },
-              ]}
-            />
+            >
+              <Select<number>
+                dropdownId="text-wrap"
+                value={displayedMaxRows}
+                onChange={(value) => onChange({ displayedMaxRows: value })}
+                disabled={disabled}
+                options={[
+                  {
+                    label: 'Deactivated',
+                    value: 0,
+                  },
+                  {
+                    label: 'First 2 lines',
+                    value: 2,
+                  },
+                  {
+                    label: 'First 5 lines',
+                    value: 5,
+                  },
+                  {
+                    label: 'First 10 lines',
+                    value: 10,
+                  },
+                  {
+                    label: 'All lines',
+                    value: 99,
+                  },
+                ]}
+                selectSizeVariant="small"
+              />
+            </SettingsOptionCardContentSelect>
           </>
         );
       }}

packages/twenty-front/src/modules/settings/data-model/fields/forms/currency/components/SettingsDataModelFieldCurrencyForm.tsx

@@ -6,6 +6,7 @@ import { currencyFieldDefaultValueSchema } from '@/object-record/record-field/va
 import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsOptions/SettingsOptionCardContentSelect';
 import { SETTINGS_FIELD_CURRENCY_CODES } from '@/settings/data-model/constants/SettingsFieldCurrencyCodes';
 import { useCurrencySettingsFormInitialValues } from '@/settings/data-model/fields/forms/currency/hooks/useCurrencySettingsFormInitialValues';
+import { Select } from '@/ui/input/components/Select';
 import { IconCurrencyDollar } from 'twenty-ui';
 import { applySimpleQuotesToString } from '~/utils/string/applySimpleQuotesToString';
 
@@ -57,13 +58,17 @@ export const SettingsDataModelFieldCurrencyForm = ({
             Icon={IconCurrencyDollar}
             title="Default Value"
             description="Choose the default currency that will apply"
-            value={value}
-            onChange={onChange}
-            disabled={disabled}
-            fullWidth
-            dropdownId="object-field-default-value-select-currency"
-            options={OPTIONS}
-          />
+          >
+            <Select<string>
+              dropdownWidth={'auto'}
+              value={value}
+              onChange={onChange}
+              disabled={disabled}
+              dropdownId="object-field-default-value-select-currency"
+              options={OPTIONS}
+              selectSizeVariant="small"
+            />
+          </SettingsOptionCardContentSelect>
         )}
       />
     </>

packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberForm.tsx

@@ -5,6 +5,7 @@ import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { numberFieldDefaultValueSchema } from '@/object-record/record-field/validation-schemas/numberFieldDefaultValueSchema';
 import { SettingsOptionCardContentCounter } from '@/settings/components/SettingsOptions/SettingsOptionCardContentCounter';
 import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsOptions/SettingsOptionCardContentSelect';
+import { Select } from '@/ui/input/components/Select';
 import { IconDecimal, IconEye, IconNumber9, IconPercentage } from 'twenty-ui';
 import { DEFAULT_DECIMAL_VALUE } from '~/utils/format/number';
 
@@ -47,25 +48,30 @@ export const SettingsDataModelFieldNumberForm = ({
           <>
             <SettingsOptionCardContentSelect
               Icon={IconEye}
-              dropdownId="number-type"
               title="Number type"
               description="Display as a plain number or a percentage"
-              value={type}
-              onChange={(value) => onChange({ type: value, decimals: count })}
-              disabled={disabled}
-              options={[
-                {
-                  Icon: IconNumber9,
-                  label: 'Number',
-                  value: 'number',
-                },
-                {
-                  Icon: IconPercentage,
-                  label: 'Percentage',
-                  value: 'percentage',
-                },
-              ]}
-            />
+            >
+              <Select<string>
+                selectSizeVariant="small"
+                dropdownId="number-type"
+                dropdownWidth={120}
+                value={type}
+                onChange={(value) => onChange({ type: value, decimals: count })}
+                disabled={disabled}
+                options={[
+                  {
+                    Icon: IconNumber9,
+                    label: 'Number',
+                    value: 'number',
+                  },
+                  {
+                    Icon: IconPercentage,
+                    label: 'Percentage',
+                    value: 'percentage',
+                  },
+                ]}
+              />
+            </SettingsOptionCardContentSelect>
             <SettingsOptionCardContentCounter
               Icon={IconDecimal}
               title="Number of decimals"

packages/twenty-front/src/modules/settings/data-model/fields/forms/phones/components/SettingsDataModelFieldPhonesForm.tsx

@@ -4,6 +4,7 @@ import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { phonesSchema as phonesFieldDefaultValueSchema } from '@/object-record/record-field/types/guards/isFieldPhonesValue';
 import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsOptions/SettingsOptionCardContentSelect';
 import { useCountries } from '@/ui/input/components/internal/hooks/useCountries';
+import { Select } from '@/ui/input/components/Select';
 import { IconMap } from 'twenty-ui';
 import { z } from 'zod';
 import { applySimpleQuotesToString } from '~/utils/string/applySimpleQuotesToString';
@@ -56,23 +57,29 @@ export const SettingsDataModelFieldPhonesForm = ({
       control={control}
       render={({ field: { onChange, value } }) => {
         return (
-          <SettingsOptionCardContentSelect<string>
+          <SettingsOptionCardContentSelect
             Icon={IconMap}
-            dropdownId="selectDefaultCountryCode"
             title="Default Country Code"
             description="The default country code for new phone numbers."
-            value={stripSimpleQuotesFromString(value?.primaryPhoneCountryCode)}
-            onChange={(newPhoneCountryCode) =>
-              onChange({
-                ...value,
-                primaryPhoneCountryCode:
-                  applySimpleQuotesToString(newPhoneCountryCode),
-              })
-            }
-            disabled={disabled}
-            options={countries}
-            fullWidth={true}
-          />
+          >
+            <Select<string>
+              dropdownWidth={'auto'}
+              dropdownId="selectDefaultCountryCode"
+              value={stripSimpleQuotesFromString(
+                value?.primaryPhoneCountryCode,
+              )}
+              onChange={(newPhoneCountryCode) =>
+                onChange({
+                  ...value,
+                  primaryPhoneCountryCode:
+                    applySimpleQuotesToString(newPhoneCountryCode),
+                })
+              }
+              disabled={disabled}
+              options={countries}
+              selectSizeVariant="small"
+            />
+          </SettingsOptionCardContentSelect>
         );
       }}
     />