Rebase on main

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

@@ -4,12 +4,11 @@ import { z } from 'zod';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { numberFieldDefaultValueSchema } from '@/object-record/record-field/validation-schemas/numberFieldDefaultValueSchema';
 import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
-import styled from '@emotion/styled';
-import { type } from 'os';
 import {
   IconNumber9,
   IconPercentage,
   IllustrationIconDecimal,
+  IllustrationIconNumberType,
 } from 'twenty-ui';
 import { DEFAULT_DECIMAL_VALUE } from '~/utils/format/number';
 
@@ -21,13 +20,6 @@ export type SettingsDataModelFieldNumberFormValues = z.infer<
   typeof settingsDataModelFieldNumberFormSchema
 >;
 
-const StyledFormCardTitle = styled.div`
-  color: ${({ theme }) => theme.font.color.light};
-  font-size: ${({ theme }) => theme.font.size.xs};
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  margin-bottom: ${({ theme }) => theme.spacing(1)};
-`;
-
 type SettingsDataModelFieldNumberFormProps = {
   disabled?: boolean;
   fieldMetadataItem: Pick<
@@ -53,25 +45,16 @@ export const SettingsDataModelFieldNumberForm = ({
       control={control}
       render={({ field: { onChange, value } }) => {
         const count = value?.decimals ?? 0;
+        const type = value?.type ?? 'number';
 
         return (
           <>
-            <SettingsOptionCardContent
-              variant="counter"
-              Icon={IllustrationIconDecimal}
-              title="Number of decimals"
-              description="Set the number of decimal places"
-              value={count}
-              onChange={(value) => onChange({ type: type, decimals: value })}
-              disabled={disabled}
-              exampleValue={1000}
-            />
             <SettingsOptionCardContent
               variant="select"
-              Icon={IllustrationIconDecimal}
+              Icon={IllustrationIconNumberType}
               dropdownId="number-type"
-              title="Number of decimals"
-              description="Set the number of decimal places"
+              title="Number type"
+              description="The number type you want to use, e.g. percentage"
               value={type}
               onChange={(value) => onChange({ type: value, decimals: count })}
               disabled={disabled}
@@ -88,6 +71,16 @@ export const SettingsDataModelFieldNumberForm = ({
                 },
               ]}
             />
+            <SettingsOptionCardContent
+              variant="counter"
+              Icon={IllustrationIconDecimal}
+              title="Number of decimals"
+              description="Set the number of decimal places"
+              value={count}
+              onChange={(value) => onChange({ type: type, decimals: value })}
+              disabled={disabled}
+              exampleValue={1000}
+            />
           </>
         );
       }}

packages/twenty-ui/src/display/icon/components/IllustrationIconNumberType.tsx

@@ -0,0 +1,15 @@
+import { useTheme } from '@emotion/react';
+import { IconEye } from '@ui/display';
+
+import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
+
+type IllustrationIconNumberTypeProps = Pick<IconComponentProps, 'size'>;
+
+export const IllustrationIconNumberType = (
+  props: IllustrationIconNumberTypeProps,
+) => {
+  const theme = useTheme();
+  const size = props.size ?? theme.icon.size.lg;
+  const { color, fill } = theme.IllustrationIcon;
+  return <IconEye width={size} height={size} color={color.grey} />;
+};

packages/twenty-ui/src/display/index.ts

@@ -34,6 +34,7 @@ export * from './icon/components/IllustrationIconMail';
 export * from './icon/components/IllustrationIconManyToMany';
 export * from './icon/components/IllustrationIconMap';
 export * from './icon/components/IllustrationIconNumbers';
+export * from './icon/components/IllustrationIconNumberType';
 export * from './icon/components/IllustrationIconOneToMany';
 export * from './icon/components/IllustrationIconOneToOne';
 export * from './icon/components/IllustrationIconPhone';