Wrap Long text fields (textarea) (#8557)

Here we add the option for Text inputs to be wrapped, and to select on
how many lines text should be displayed.

Fix #7552

---------

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

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/TextFieldDisplay.tsx

@@ -2,7 +2,12 @@ import { useTextFieldDisplay } from '@/object-record/record-field/meta-types/hoo
 import { TextDisplay } from '@/ui/field/display/components/TextDisplay';
 
 export const TextFieldDisplay = () => {
-  const { fieldValue } = useTextFieldDisplay();
+  const { fieldValue, fieldDefinition } = useTextFieldDisplay();
 
-  return <TextDisplay text={fieldValue} />;
+  return (
+    <TextDisplay
+      text={fieldValue}
+      displayedMaxRows={fieldDefinition.metadata?.settings?.displayedMaxRows}
+    />
+  );
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useTextFieldDisplay.ts

@@ -2,11 +2,15 @@ import { useContext } from 'react';
 
 import { useRecordFieldValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
 
+import { assertFieldMetadata } from '@/object-record/record-field/types/guards/assertFieldMetadata';
+import { isFieldText } from '@/object-record/record-field/types/guards/isFieldText';
+import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { FieldContext } from '../../contexts/FieldContext';
 
 export const useTextFieldDisplay = () => {
   const { recordId, fieldDefinition, hotkeyScope } = useContext(FieldContext);
 
+  assertFieldMetadata(FieldMetadataType.Text, isFieldText, fieldDefinition);
   const fieldName = fieldDefinition.metadata.fieldName;
 
   const fieldValue =

packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts

@@ -23,7 +23,9 @@ export type FieldTextMetadata = {
   objectMetadataNameSingular?: string;
   placeHolder: string;
   fieldName: string;
-  settings?: Record<string, never>;
+  settings?: {
+    displayedMaxRows?: number;
+  };
 };
 
 export type FieldDateTimeMetadata = {

packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx

@@ -14,6 +14,9 @@ import { RecordInlineCellValue } from '@/object-record/record-inline-cell/compon
 import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
+import { assertFieldMetadata } from '@/object-record/record-field/types/guards/assertFieldMetadata';
+import { isFieldText } from '@/object-record/record-field/types/guards/isFieldText';
+import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { useRecordInlineCellContext } from './RecordInlineCellContext';
 
 const StyledIconContainer = styled.div`
@@ -36,6 +39,7 @@ const StyledLabelAndIconContainer = styled.div`
   color: ${({ theme }) => theme.font.color.tertiary};
   display: flex;
   gap: ${({ theme }) => theme.spacing(1)};
+  height: 24px;
 `;
 
 const StyledValueContainer = styled.div`
@@ -52,11 +56,12 @@ const StyledLabelContainer = styled.div<{ width?: number }>`
 `;
 
 const StyledInlineCellBaseContainer = styled.div`
-  align-items: center;
+  align-items: flex-start;
   box-sizing: border-box;
   width: 100%;
   display: flex;
-  height: 24px;
+  height: fit-content;
+  line-height: 24px;
   gap: ${({ theme }) => theme.spacing(1)};
   user-select: none;
   justify-content: center;
@@ -88,6 +93,10 @@ export const RecordInlineCellContainer = () => {
 
   const { recordId, fieldDefinition } = useContext(FieldContext);
 
+  if (isFieldText(fieldDefinition)) {
+    assertFieldMetadata(FieldMetadataType.Text, isFieldText, fieldDefinition);
+  }
+
   const { setIsFocused } = useFieldFocus();
 
   const handleContainerMouseEnter = () => {
@@ -122,7 +131,7 @@ export const RecordInlineCellContainer = () => {
           )}
           {showLabel && label && (
             <StyledLabelContainer width={labelWidth}>
-              <OverflowingTextWithTooltip text={label} />
+              <OverflowingTextWithTooltip text={label} isLabel={true} />
             </StyledLabelContainer>
           )}
           {/* TODO: Displaying Tooltips on the board is causing performance issues https://react-tooltip.com/docs/examples/render */}

packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx

@@ -23,8 +23,8 @@ const StyledRecordInlineCellNormalModeOuterContainer = styled.div<
     isDisplayModeFixHeight ? '16px' : 'auto'};
   min-height: 16px;
   overflow: hidden;
-  padding: ${({ theme }) => theme.spacing(1)};
-
+  padding-right: ${({ theme }) => theme.spacing(1)};
+  padding-left: ${({ theme }) => theme.spacing(1)};
   ${(props) => {
     if (props.isHovered === true) {
       return css`
@@ -39,15 +39,17 @@ const StyledRecordInlineCellNormalModeOuterContainer = styled.div<
 `;
 
 const StyledRecordInlineCellNormalModeInnerContainer = styled.div`
+  align-content: center;
   align-items: center;
   color: ${({ theme }) => theme.font.color.primary};
   font-size: 'inherit';
+
   font-weight: 'inherit';
 
   height: fit-content;
 
+  min-height: 24px;
   overflow: hidden;
-
   text-overflow: ellipsis;
   white-space: nowrap;
 `;