From 4a8234d18c5b0c3ffa6d0c6d83812c0564948632 Mon Sep 17 00:00:00 2001
From: Guillim <guillim@users.noreply.github.com>
Date: Tue, 19 Nov 2024 12:47:33 +0100
Subject: [PATCH] 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>
---
 .../text/SettingsDataModelFieldTextForm.tsx   | 104 ++++++++----------
 .../display/icon/components/TablerIcons.ts    |   1 +
 2 files changed, 48 insertions(+), 57 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/text/SettingsDataModelFieldTextForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/text/SettingsDataModelFieldTextForm.tsx
index 2c10f1f1f2..4d67880825 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/text/SettingsDataModelFieldTextForm.tsx
+++ b/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,
+                },
+              ]}
+            />
+          </>
+        );
+      }}
+    />
   );
 };
diff --git a/packages/twenty-ui/src/display/icon/components/TablerIcons.ts b/packages/twenty-ui/src/display/icon/components/TablerIcons.ts
index 025d169f73..9b14477b2d 100644
--- a/packages/twenty-ui/src/display/icon/components/TablerIcons.ts
+++ b/packages/twenty-ui/src/display/icon/components/TablerIcons.ts
@@ -229,6 +229,7 @@ export {
   IconTargetArrow,
   IconTestPipe,
   IconTextSize,
+  IconTextWrap,
   IconTimelineEvent,
   IconTool,
   IconTrash,