From 2773dde714d84906051ce3e5be50875fada33fa2 Mon Sep 17 00:00:00 2001 From: eliasylonen Date: Fri, 28 Feb 2025 16:37:14 +0100 Subject: [PATCH] Remove reference to data-testid from styling (#10407) Fixes https://github.com/twentyhq/core-team-issues/issues/204 --------- Co-authored-by: ad-elias --- .../object-record/components/RecordChip.tsx | 3 +++ .../display/components/ChipFieldDisplay.tsx | 4 +++ .../perf/ChipFieldDisplay.perf.stories.tsx | 26 ++++++++++++------- .../hooks/useIsChipFieldDisplayLabelHidden.ts | 22 ++++++++++++++++ .../components/RecordTableBody.tsx | 13 ---------- .../RecordTableCellSoftFocusMode.tsx | 8 ++++-- .../avatar-chip/components/LinkAvatarChip.tsx | 3 +++ .../src/display/chip/components/Chip.tsx | 6 ++++- .../src/display/chip/components/LinkChip.tsx | 2 ++ 9 files changed, 62 insertions(+), 25 deletions(-) create mode 100644 packages/twenty-front/src/modules/object-record/record-field/meta-types/display/hooks/useIsChipFieldDisplayLabelHidden.ts 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 bbc54d04f..e4c29daa4 100644 --- a/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx +++ b/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx @@ -22,6 +22,7 @@ export type RecordChipProps = { maxWidth?: number; to?: string | undefined; size?: ChipSize; + isLabelHidden?: boolean; }; export const RecordChip = ({ @@ -33,6 +34,7 @@ export const RecordChip = ({ to, size, forceDisableClick = false, + isLabelHidden = false, }: RecordChipProps) => { const { recordChipData } = useRecordChipData({ objectNameSingular, @@ -76,6 +78,7 @@ export const RecordChip = ({ maxWidth={maxWidth} placeholderColorSeed={record.id} name={recordChipData.name} + isLabelHidden={isLabelHidden} avatarType={recordChipData.avatarType} avatarUrl={recordChipData.avatarUrl ?? ''} className={className} diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx index 285c0217d..27c8c02d7 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx @@ -1,4 +1,5 @@ import { RecordChip } from '@/object-record/components/RecordChip'; +import { useIsChipFieldDisplayLabelHidden } from '@/object-record/record-field/meta-types/display/hooks/useIsChipFieldDisplayLabelHidden'; import { useChipFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useChipFieldDisplay'; import { isDefined } from 'twenty-shared'; import { ChipSize } from 'twenty-ui'; @@ -7,6 +8,8 @@ export const ChipFieldDisplay = () => { const { recordValue, objectNameSingular, labelIdentifierLink } = useChipFieldDisplay(); + const isChipFieldDisplayLabelHidden = useIsChipFieldDisplayLabelHidden(); + if (!isDefined(recordValue)) { return null; } @@ -17,6 +20,7 @@ export const ChipFieldDisplay = () => { record={recordValue} size={ChipSize.Small} to={labelIdentifierLink} + isLabelHidden={isChipFieldDisplayLabelHidden} /> ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ChipFieldDisplay.perf.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ChipFieldDisplay.perf.stories.tsx index bc2964a29..688b64dcf 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ChipFieldDisplay.perf.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ChipFieldDisplay.perf.stories.tsx @@ -5,6 +5,7 @@ import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlur import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { ChipFieldDisplay } from '@/object-record/record-field/meta-types/display/components/ChipFieldDisplay'; import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext'; +import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; import { ChipGeneratorsDecorator } from '~/testing/decorators/ChipGeneratorsDecorator'; import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator'; import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator'; @@ -22,18 +23,25 @@ const meta: Meta = { )!; return ( - '', - onIndexRecordsLoaded: () => {}, - objectNamePlural: CoreObjectNamePlural.Company, - objectNameSingular: CoreObjectNameSingular.Company, - objectMetadataItem: companyObjectMetadataItem, - recordIndexId: instanceId, + instanceId, + onColumnsChange: () => {}, }} > - - + '', + onIndexRecordsLoaded: () => {}, + objectNamePlural: CoreObjectNamePlural.Company, + objectNameSingular: CoreObjectNameSingular.Company, + objectMetadataItem: companyObjectMetadataItem, + recordIndexId: instanceId, + }} + > + + + ); }, MemoryRouterDecorator, diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/hooks/useIsChipFieldDisplayLabelHidden.ts b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/hooks/useIsChipFieldDisplayLabelHidden.ts new file mode 100644 index 000000000..fc042c702 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/hooks/useIsChipFieldDisplayLabelHidden.ts @@ -0,0 +1,22 @@ +import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext'; +import { isRecordTableScrolledLeftComponentState } from '@/object-record/record-table/states/isRecordTableScrolledLeftComponentState'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; +import { useContext } from 'react'; +import { useIsMobile } from 'twenty-ui'; + +export const useIsChipFieldDisplayLabelHidden = () => { + const isMobile = useIsMobile(); + + const isRecordTableScrolledLeft = useRecoilComponentValueV2( + isRecordTableScrolledLeftComponentState, + ); + + const { columnDefinition } = useContext(RecordTableCellContext); + + const isLabelIdentifierInRecordTable = columnDefinition?.isLabelIdentifier; + + const isLabelHidden = + isMobile && !isRecordTableScrolledLeft && isLabelIdentifierInRecordTable; + + return isLabelHidden; +}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx index 26b1fa747..8022cce69 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx @@ -1,5 +1,4 @@ import styled from '@emotion/styled'; -import { MOBILE_VIEWPORT } from 'twenty-ui'; const StyledTbody = styled.tbody` &.first-columns-sticky { @@ -22,18 +21,6 @@ const StyledTbody = styled.tbody` z-index: 5; transition: 0.3s ease; - @media (max-width: ${MOBILE_VIEWPORT}px) { - & [data-testid='editable-cell-display-mode'] { - [data-testid='tooltip'] { - display: none; - } - - [data-testid='chip'] { - gap: 0; - } - } - } - &:not(.disable-shadow)::after { content: ''; position: absolute; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx index bce1d6476..84b3002a1 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx @@ -1,6 +1,6 @@ import { ReactElement, useContext, useEffect, useRef } from 'react'; import { useRecoilValue } from 'recoil'; -import { IconArrowUpRight } from 'twenty-ui'; +import { IconArrowUpRight, useIsMobile } from 'twenty-ui'; import { useGetButtonIcon } from '@/object-record/record-field/hooks/useGetButtonIcon'; import { useIsFieldEmpty } from '@/object-record/record-field/hooks/useIsFieldEmpty'; @@ -80,8 +80,12 @@ export const RecordTableCellSoftFocusMode = ({ ? IconArrowUpRight // IconLayoutSidebarRightExpand - Disabling sidepanel access for now : customButtonIcon; + const isMobile = useIsMobile(); const showButton = - isDefined(buttonIcon) && !editModeContentOnly && !isFieldReadOnly; + isDefined(buttonIcon) && + !editModeContentOnly && + !isFieldReadOnly && + !(isMobile && isFirstColumn); const dontShowContent = isEmpty && isFieldReadOnly; diff --git a/packages/twenty-ui/src/display/avatar-chip/components/LinkAvatarChip.tsx b/packages/twenty-ui/src/display/avatar-chip/components/LinkAvatarChip.tsx index 2a7edc484..07f7c4225 100644 --- a/packages/twenty-ui/src/display/avatar-chip/components/LinkAvatarChip.tsx +++ b/packages/twenty-ui/src/display/avatar-chip/components/LinkAvatarChip.tsx @@ -8,6 +8,7 @@ export type LinkAvatarChipProps = Omit & { to: string; onClick?: LinkChipProps['onClick']; variant?: AvatarChipVariant; + isLabelHidden?: boolean; }; export const LinkAvatarChip = ({ @@ -24,11 +25,13 @@ export const LinkAvatarChip = ({ placeholderColorSeed, size, variant, + isLabelHidden, }: LinkAvatarChipProps) => ( missleading variant === AvatarChipVariant.Regular diff --git a/packages/twenty-ui/src/display/chip/components/Chip.tsx b/packages/twenty-ui/src/display/chip/components/Chip.tsx index 29d0516df..4f471479e 100644 --- a/packages/twenty-ui/src/display/chip/components/Chip.tsx +++ b/packages/twenty-ui/src/display/chip/components/Chip.tsx @@ -26,6 +26,7 @@ export type ChipProps = { disabled?: boolean; clickable?: boolean; label: string; + isLabelHidden?: boolean; maxWidth?: number; variant?: ChipVariant; accent?: ChipAccent; @@ -124,6 +125,7 @@ const StyledContainer = withTheme(styled.div< export const Chip = ({ size = ChipSize.Small, label, + isLabelHidden = false, disabled = false, clickable = true, variant = ChipVariant.Regular, @@ -145,7 +147,9 @@ export const Chip = ({ maxWidth={maxWidth} > {leftComponent?.()} - + {!isLabelHidden && ( + + )} {rightComponent?.()} ); diff --git a/packages/twenty-ui/src/display/chip/components/LinkChip.tsx b/packages/twenty-ui/src/display/chip/components/LinkChip.tsx index 897c1adb1..51ab587a9 100644 --- a/packages/twenty-ui/src/display/chip/components/LinkChip.tsx +++ b/packages/twenty-ui/src/display/chip/components/LinkChip.tsx @@ -27,6 +27,7 @@ export const LinkChip = ({ to, size = ChipSize.Small, label, + isLabelHidden = false, variant = ChipVariant.Regular, leftComponent = null, rightComponent = null, @@ -40,6 +41,7 @@ export const LinkChip = ({