Feature 7552 patch (#8574)

Related to #7552

<img width="556" alt="Screenshot 2024-11-18 at 17 57 30"
src="https://github.com/user-attachments/assets/e89e575b-9adb-4910-ab0d-b60079727f70">

---------

Co-authored-by: guillim <guillaume@twenty.com>

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

@@ -1,18 +1,10 @@
 import { Controller, useFormContext } from 'react-hook-form';
 
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
-import { Select } from '@/ui/input/components/Select';
-import styled from '@emotion/styled';
-import { CardContent } from 'twenty-ui';
+import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsOptions/SettingsOptionCardContentSelect';
+import { IconTextWrap } from 'twenty-ui';
 import { z } from 'zod';
 
-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 SettingsDataModelFieldTextFormProps = {
   disabled?: boolean;
   fieldMetadataItem: Pick<
@@ -39,7 +31,6 @@ export const SettingsDataModelFieldTextForm = ({
 }: SettingsDataModelFieldTextFormProps) => {
   const { control } = useFormContext<SettingsDataModelFieldTextFormValues>();
   return (
-    <CardContent>
     <Controller
       name="settings"
       defaultValue={{
@@ -51,10 +42,14 @@ export const SettingsDataModelFieldTextForm = ({
 
         return (
           <>
-              <StyledFormCardTitle>Wrap on record pages</StyledFormCardTitle>
-              <Select
+            <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}
-                dropdownId="selectTextWrap"
               options={[
                 {
                   label: 'Deactivated',
@@ -77,15 +72,10 @@ export const SettingsDataModelFieldTextForm = ({
                   value: 99,
                 },
               ]}
-                value={displayedMaxRows}
-                onChange={(value) => onChange({ displayedMaxRows: value })}
-                withSearchInput={false}
-                dropdownWidthAuto={true}
             />
           </>
         );
       }}
     />
-    </CardContent>
   );
 };

packages/twenty-ui/src/display/icon/components/TablerIcons.ts

@@ -229,6 +229,7 @@ export {
   IconTargetArrow,
   IconTestPipe,
   IconTextSize,
+  IconTextWrap,
   IconTimelineEvent,
   IconTool,
   IconTrash,