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

Chip untitled modification (#11498)

Browse Source 
Fixes https://github.com/twentyhq/core-team-issues/issues/663
This commit is contained in:
Guillim
2025-04-14 17:33:41 +02:00
committed by GitHub
parent d4deca45e8
commit 8a3f8ef324
7 changed files with 67 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,6 +35,10 @@ export type ChipProps = {
className?: string;
};
const StyledDiv = withTheme(styled.div<{ theme: Theme }>`
color: ${({ theme }) => theme.font.color.tertiary};
`);
const StyledContainer = withTheme(styled.div<
Pick<
ChipProps,
@ -147,8 +151,10 @@ export const Chip = ({
maxWidth={maxWidth}
>
{leftComponent}
{!isLabelHidden && (
{!isLabelHidden && label.trim() ? (
<OverflowingTextWithTooltip size={size} text={label} />
) : (
<StyledDiv>Untitled</StyledDiv>
)}
{rightComponent?.()}
</StyledContainer>

6
packages/twenty-ui/src/components/chip/__stories__/EntityChip.stories.tsx
View File

@ -21,3 +21,9 @@ export default meta;
type Story = StoryObj<typeof AvatarChip>;
export const Default: Story = {};
export const Empty: Story = {
args: {
name: '',
},
};

15
packages/twenty-ui/src/display/avatar/components/Avatar.tsx
View File

@ -90,7 +90,10 @@ export const Avatar = ({
})
: null;
const placeholderChar = placeholder?.[0]?.toLocaleUpperCase();
const placeholderFirstChar = placeholder?.trim()?.charAt(0);
const isPlaceholderFirstCharEmpty =
!placeholderFirstChar || placeholderFirstChar === '';
const placeholderChar = placeholderFirstChar?.toUpperCase() || '-';
const showPlaceholder =
isNull(avatarImageURI) || invalidAvatarUrls.includes(avatarImageURI);
@ -101,10 +104,12 @@ export const Avatar = ({
}
};
const fixedColor =
color ?? stringToHslColor(placeholderColorSeed ?? '', 75, 25);
const fixedBackgroundColor =
backgroundColor ?? stringToHslColor(placeholderColorSeed ?? '', 75, 85);
const fixedColor = isPlaceholderFirstCharEmpty
? theme.font.color.tertiary
: (color ?? stringToHslColor(placeholderColorSeed ?? '', 75, 25));
const fixedBackgroundColor = isPlaceholderFirstCharEmpty
? theme.background.transparent.light
: (backgroundColor ?? stringToHslColor(placeholderColorSeed ?? '', 75, 85));
const showBackgroundColor = showPlaceholder;