Feature 7552 patch

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,53 +31,51 @@ export const SettingsDataModelFieldTextForm = ({
 }: SettingsDataModelFieldTextFormProps) => {
   const { control } = useFormContext<SettingsDataModelFieldTextFormValues>();
   return (
-    <CardContent>
-      <Controller
-        name="settings"
-        defaultValue={{
-          displayedMaxRows: fieldMetadataItem?.settings?.displayedMaxRows || 0,
-        }}
-        control={control}
-        render={({ field: { onChange, value } }) => {
-          const displayedMaxRows = value?.displayedMaxRows ?? 0;
+    <Controller
+      name="settings"
+      defaultValue={{
+        displayedMaxRows: fieldMetadataItem?.settings?.displayedMaxRows || 0,
+      }}
+      control={control}
+      render={({ field: { onChange, value } }) => {
+        const displayedMaxRows = value?.displayedMaxRows ?? 0;
 
-          return (
-            <>
-              <StyledFormCardTitle>Wrap on record pages</StyledFormCardTitle>
-              <Select
-                disabled={disabled}
-                dropdownId="selectTextWrap"
-                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,
-                  },
-                ]}
-                value={displayedMaxRows}
-                onChange={(value) => onChange({ displayedMaxRows: value })}
-                withSearchInput={false}
-                dropdownWidthAuto={true}
-              />
-            </>
-          );
-        }}
-      />
-    </CardContent>
+        return (
+          <>
+            <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,
+                },
+              ]}
+            />
+          </>
+        );
+      }}
+    />
   );
 };

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

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