From fd5cae6aae838151b81bd4f7e876796111146a44 Mon Sep 17 00:00:00 2001 From: Irfan K <114819335+abdul-irfan-k@users.noreply.github.com> Date: Tue, 23 Jan 2024 23:38:39 +0530 Subject: [PATCH] fixed overflowing text for select on card #3494 (#3504) * fixed overflowing text for select on card #3494 * maxWidth of useRelationFeild hook * Fix --------- Co-authored-by: Charles Bochet --- .../object-record/components/RecordChip.tsx | 8 +++++++- .../display/components/RelationFieldDisplay.tsx | 3 ++- .../field/meta-types/hooks/useRelationField.ts | 7 +++++-- .../modules/ui/display/chip/components/Chip.tsx | 15 +++++++++++---- .../ui/display/chip/components/EntityChip.tsx | 3 +++ .../chip/components/__stories__/Chip.stories.tsx | 2 +- 6 files changed, 29 insertions(+), 9 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx b/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx index a03f1feee..30139bf99 100644 --- a/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx +++ b/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx @@ -7,9 +7,14 @@ import { EntityChip } from '@/ui/display/chip/components/EntityChip'; export type RecordChipProps = { objectNameSingular: string; record: ObjectRecord; + maxWidth?: number; }; -export const RecordChip = ({ objectNameSingular, record }: RecordChipProps) => { +export const RecordChip = ({ + objectNameSingular, + record, + maxWidth, +}: RecordChipProps) => { const { mapToObjectRecordIdentifier } = useObjectMetadataItem({ objectNameSingular, }); @@ -23,6 +28,7 @@ export const RecordChip = ({ objectNameSingular, record }: RecordChipProps) => { avatarType={objectRecordIdentifier.avatarType} avatarUrl={objectRecordIdentifier.avatarUrl} linkToEntity={objectRecordIdentifier.linkToShowPage} + maxWidth={maxWidth} /> ); }; diff --git a/packages/twenty-front/src/modules/object-record/field/meta-types/display/components/RelationFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/field/meta-types/display/components/RelationFieldDisplay.tsx index 80c000d12..1cbffbcf2 100644 --- a/packages/twenty-front/src/modules/object-record/field/meta-types/display/components/RelationFieldDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/field/meta-types/display/components/RelationFieldDisplay.tsx @@ -3,7 +3,7 @@ import { RecordChip } from '@/object-record/components/RecordChip'; import { useRelationField } from '../../hooks/useRelationField'; export const RelationFieldDisplay = () => { - const { fieldValue, fieldDefinition } = useRelationField(); + const { fieldValue, fieldDefinition, maxWidth } = useRelationField(); if (!fieldValue || !fieldDefinition) return null; @@ -13,6 +13,7 @@ export const RelationFieldDisplay = () => { fieldDefinition.metadata.relationObjectMetadataNameSingular } record={fieldValue} + maxWidth={maxWidth} /> ); }; diff --git a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useRelationField.ts b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useRelationField.ts index 55d02802d..9d22d9696 100644 --- a/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useRelationField.ts +++ b/packages/twenty-front/src/modules/object-record/field/meta-types/hooks/useRelationField.ts @@ -1,6 +1,8 @@ import { useContext } from 'react'; import { useRecoilState } from 'recoil'; +import { useGetButtonIcon } from '@/object-record/field/hooks/useGetButtonIcon'; + import { FieldContext } from '../../contexts/FieldContext'; import { useFieldInitialValue } from '../../hooks/useFieldInitialValue'; import { entityFieldsFamilySelector } from '../../states/selectors/entityFieldsFamilySelector'; @@ -9,8 +11,8 @@ import { isFieldRelation } from '../../types/guards/isFieldRelation'; // TODO: we will be able to type more precisely when we will have custom field and custom entities support export const useRelationField = () => { - const { entityId, fieldDefinition } = useContext(FieldContext); - + const { entityId, fieldDefinition, maxWidth } = useContext(FieldContext); + const button = useGetButtonIcon(); assertFieldMetadata('RELATION', isFieldRelation, fieldDefinition); const fieldName = fieldDefinition.metadata.fieldName; @@ -33,5 +35,6 @@ export const useRelationField = () => { initialValue, initialSearchValue, setFieldValue, + maxWidth: button && maxWidth ? maxWidth - 28 : maxWidth, }; }; diff --git a/packages/twenty-front/src/modules/ui/display/chip/components/Chip.tsx b/packages/twenty-front/src/modules/ui/display/chip/components/Chip.tsx index e0390db3e..9e6f5843d 100644 --- a/packages/twenty-front/src/modules/ui/display/chip/components/Chip.tsx +++ b/packages/twenty-front/src/modules/ui/display/chip/components/Chip.tsx @@ -25,7 +25,7 @@ type ChipProps = { disabled?: boolean; clickable?: boolean; label: string; - maxWidth?: string; + maxWidth?: number; variant?: ChipVariant; accent?: ChipAccent; leftComponent?: ReactNode; @@ -70,11 +70,18 @@ const StyledContainer = styled.div>` gap: ${({ theme }) => theme.spacing(1)}; height: ${({ size }) => (size === ChipSize.Large ? '16px' : '12px')}; - max-width: ${({ maxWidth }) => (maxWidth ? maxWidth : '200px')}; + --chip-horizontal-padding: ${({ theme, variant }) => + variant === ChipVariant.Rounded ? theme.spacing(2) : theme.spacing(1)}; + max-width: ${({ maxWidth }) => + maxWidth + ? `calc( ${maxWidth}px - 2*var(--chip-horizontal-padding))` + : '200px'}; + + --chip-vertical-padding: ${({ theme, variant }) => + variant === ChipVariant.Rounded ? '3px' : theme.spacing(1)}; overflow: hidden; - padding: ${({ theme, variant }) => - variant === ChipVariant.Rounded ? '3px 8px' : theme.spacing(1)}; + padding: var(--chip-vertical-padding) var(--chip-horizontal-padding); user-select: none; :hover { diff --git a/packages/twenty-front/src/modules/ui/display/chip/components/EntityChip.tsx b/packages/twenty-front/src/modules/ui/display/chip/components/EntityChip.tsx index c23951fbf..017185b91 100644 --- a/packages/twenty-front/src/modules/ui/display/chip/components/EntityChip.tsx +++ b/packages/twenty-front/src/modules/ui/display/chip/components/EntityChip.tsx @@ -18,6 +18,7 @@ export type EntityChipProps = { variant?: EntityChipVariant; LeftIcon?: IconComponent; className?: string; + maxWidth?: number; }; export enum EntityChipVariant { @@ -34,6 +35,7 @@ export const EntityChip = ({ variant = EntityChipVariant.Regular, LeftIcon, className, + maxWidth, }: EntityChipProps) => { const navigate = useNavigate(); @@ -74,6 +76,7 @@ export const EntityChip = ({ clickable={!!linkToEntity} onClick={handleLinkClick} className={className} + maxWidth={maxWidth} /> ) ); diff --git a/packages/twenty-front/src/modules/ui/display/chip/components/__stories__/Chip.stories.tsx b/packages/twenty-front/src/modules/ui/display/chip/components/__stories__/Chip.stories.tsx index 6b0fe9f9a..cd506b961 100644 --- a/packages/twenty-front/src/modules/ui/display/chip/components/__stories__/Chip.stories.tsx +++ b/packages/twenty-front/src/modules/ui/display/chip/components/__stories__/Chip.stories.tsx @@ -22,7 +22,7 @@ export const Default: Story = { accent: ChipAccent.TextPrimary, disabled: false, clickable: true, - maxWidth: '200px', + maxWidth: 200, }, decorators: [ComponentDecorator], };