admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Remove reference to data-testid from styling (#10407)

Browse Source 
Fixes https://github.com/twentyhq/core-team-issues/issues/204

---------

Co-authored-by: ad-elias <elias@autodiligence.com>
This commit is contained in:
eliasylonen
2025-02-28 16:37:14 +01:00
committed by GitHub
parent 47b7c696d5
commit 2773dde714
9 changed files with 62 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/twenty-front/src/modules/object-record/components/RecordChip.tsx
View File

@ -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}

4
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx
View File

@ -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}
/>
);
};

26
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/ChipFieldDisplay.perf.stories.tsx
View File

@ -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 (
<RecordIndexContextProvider
<RecordTableComponentInstanceContext.Provider
value={{
indexIdentifierUrl: () => '',
onIndexRecordsLoaded: () => {},
objectNamePlural: CoreObjectNamePlural.Company,
objectNameSingular: CoreObjectNameSingular.Company,
objectMetadataItem: companyObjectMetadataItem,
recordIndexId: instanceId,
instanceId,
onColumnsChange: () => {},
}}
>
<Story />
</RecordIndexContextProvider>
<RecordIndexContextProvider
value={{
indexIdentifierUrl: () => '',
onIndexRecordsLoaded: () => {},
objectNamePlural: CoreObjectNamePlural.Company,
objectNameSingular: CoreObjectNameSingular.Company,
objectMetadataItem: companyObjectMetadataItem,
recordIndexId: instanceId,
}}
>
<Story />
</RecordIndexContextProvider>
</RecordTableComponentInstanceContext.Provider>
);
},
MemoryRouterDecorator,

22
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/hooks/useIsChipFieldDisplayLabelHidden.ts Normal file
View File

@ -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;
};

13
packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBody.tsx
View File

@ -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;

8
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx
View File

@ -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;

3
packages/twenty-ui/src/display/avatar-chip/components/LinkAvatarChip.tsx
View File

@ -8,6 +8,7 @@ export type LinkAvatarChipProps = Omit<AvatarChipsCommonProps, 'clickable'> & {
to: string;
onClick?: LinkChipProps['onClick'];
variant?: AvatarChipVariant;
isLabelHidden?: boolean;
};
export const LinkAvatarChip = ({
@ -24,11 +25,13 @@ export const LinkAvatarChip = ({
placeholderColorSeed,
size,
variant,
isLabelHidden,
}: LinkAvatarChipProps) => (
<LinkChip
to={to}
onClick={onClick}
label={name}
isLabelHidden={isLabelHidden}
variant={
//Regular but Highlighted -> missleading
variant === AvatarChipVariant.Regular

6
packages/twenty-ui/src/display/chip/components/Chip.tsx
View File

@ -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?.()}
<OverflowingTextWithTooltip size={size} text={label} />
{!isLabelHidden && (
<OverflowingTextWithTooltip size={size} text={label} />
)}
{rightComponent?.()}
</StyledContainer>
);

2
packages/twenty-ui/src/display/chip/components/LinkChip.tsx
View File

@ -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 = ({
<Chip
size={size}
label={label}
isLabelHidden={isLabelHidden}
clickable={true}
variant={variant}
leftComponent={leftComponent}