From 315938215e4b961845968ae01db446a17565d3e5 Mon Sep 17 00:00:00 2001 From: Guillim Date: Tue, 26 Nov 2024 17:58:05 +0100 Subject: [PATCH] Fix Table text wrapping (#8683) As discovered during the last release, text fields in the table were wrapped. This PR fixes this unwanted behaviour Current : Screenshot 2024-11-22 at 14 17 42 Wanted : One line ellipsed Screenshot 2024-11-22 at 14 20 46 --------- Co-authored-by: guillim --- .../record-field/contexts/FieldContext.ts | 1 + .../display/components/TextFieldDisplay.tsx | 16 ++++++++++++---- .../meta-types/hooks/useTextFieldDisplay.ts | 4 +++- .../components/RecordInlineCellContainer.tsx | 6 +++++- .../RecordTableCellFieldContextWrapper.tsx | 1 + .../tooltip/OverflowingTextWithTooltip.tsx | 18 +++++++++--------- 6 files changed, 31 insertions(+), 15 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-field/contexts/FieldContext.ts b/packages/twenty-front/src/modules/object-record/record-field/contexts/FieldContext.ts index 73220e4b1..5409ede67 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/contexts/FieldContext.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/contexts/FieldContext.ts @@ -31,6 +31,7 @@ export type GenericFieldContextType = { maxWidth?: number; isCentered?: boolean; overridenIsFieldEmpty?: boolean; + displayedMaxRows?: number; }; export const FieldContext = createContext( diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/TextFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/TextFieldDisplay.tsx index 3b9f80181..7f67575fe 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/TextFieldDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/TextFieldDisplay.tsx @@ -3,11 +3,19 @@ import { isFieldText } from '@/object-record/record-field/types/guards/isFieldTe import { TextDisplay } from '@/ui/field/display/components/TextDisplay'; export const TextFieldDisplay = () => { - const { fieldValue, fieldDefinition } = useTextFieldDisplay(); + const { fieldValue, fieldDefinition, displayedMaxRows } = + useTextFieldDisplay(); - const displayedMaxRows = isFieldText(fieldDefinition) + const displayedMaxRowsFromSettings = isFieldText(fieldDefinition) ? fieldDefinition.metadata?.settings?.displayedMaxRows - : 1; + : undefined; - return ; + return ( + + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useTextFieldDisplay.ts b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useTextFieldDisplay.ts index 0eb831aea..259d846c4 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useTextFieldDisplay.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useTextFieldDisplay.ts @@ -5,7 +5,8 @@ import { useRecordFieldValue } from '@/object-record/record-store/contexts/Recor import { FieldContext } from '../../contexts/FieldContext'; export const useTextFieldDisplay = () => { - const { recordId, fieldDefinition, hotkeyScope } = useContext(FieldContext); + const { recordId, fieldDefinition, hotkeyScope, displayedMaxRows } = + useContext(FieldContext); const fieldName = fieldDefinition.metadata.fieldName; @@ -16,5 +17,6 @@ export const useTextFieldDisplay = () => { fieldDefinition, fieldValue, hotkeyScope, + displayedMaxRows, }; }; diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx index ed0b7c83a..605efccfa 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx @@ -131,7 +131,11 @@ export const RecordInlineCellContainer = () => { )} {showLabel && label && ( - + )} {/* TODO: Displaying Tooltips on the board is causing performance issues https://react-tooltip.com/docs/examples/render */} diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextWrapper.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextWrapper.tsx index ea2558409..2f35fb265 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextWrapper.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextWrapper.tsx @@ -50,6 +50,7 @@ export const RecordTableCellFieldContextWrapper = ({ }, objectMetadataItem, }), + displayedMaxRows: 1, }} > {children} diff --git a/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx b/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx index 76dcee3d9..a2f1058b4 100644 --- a/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx +++ b/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx @@ -13,6 +13,7 @@ const StyledOverflowingText = styled.div<{ size: 'large' | 'small'; displayedMaxRows?: number; isLabel: boolean; + allowDisplayWrap?: boolean; }>` cursor: ${({ cursorPointer }) => (cursorPointer ? 'pointer' : 'inherit')}; font-family: inherit; @@ -24,18 +25,14 @@ const StyledOverflowingText = styled.div<{ text-decoration: inherit; text-overflow: ellipsis; - white-space: nowrap; height: ${({ size }) => (size === 'large' ? spacing4 : 'auto')}; - text-wrap-mode: ${({ isLabel, displayedMaxRows }) => - isLabel === false && displayedMaxRows ? 'wrap' : 'nowrap'}; - -webkit-line-clamp: ${({ isLabel, displayedMaxRows }) => - isLabel === false && displayedMaxRows ? displayedMaxRows : 'inherit'}; - display: ${({ isLabel, displayedMaxRows }) => - isLabel === false && displayedMaxRows ? `-webkit-box` : 'block'}; - -webkit-box-orient: ${({ isLabel, displayedMaxRows }) => - isLabel === false && displayedMaxRows ? 'vertical' : 'inherit'}; + text-wrap: wrap; + -webkit-line-clamp: ${({ displayedMaxRows }) => + displayedMaxRows ? displayedMaxRows : '1'}; + display: -webkit-box; + -webkit-box-orient: vertical; & :hover { text-overflow: ${({ cursorPointer }) => @@ -51,12 +48,14 @@ export const OverflowingTextWithTooltip = ({ isTooltipMultiline, displayedMaxRows, isLabel, + allowDisplayWrap, }: { size?: 'large' | 'small'; text: string | null | undefined; isTooltipMultiline?: boolean; displayedMaxRows?: number; isLabel?: boolean; + allowDisplayWrap?: boolean; }) => { const textElementId = `title-id-${+new Date()}`; @@ -90,6 +89,7 @@ export const OverflowingTextWithTooltip = ({ cursorPointer={isTitleOverflowing} size={size} displayedMaxRows={displayedMaxRows} + allowDisplayWrap={allowDisplayWrap} isLabel={isLabel ?? false} ref={textRef} id={textElementId}