From bb0d37d79f09b29b681dc1d89504a994898b728f Mon Sep 17 00:00:00 2001 From: Guillim Date: Wed, 1 Oct 2025 16:42:48 +0200 Subject: [PATCH] add the contextual text for multiselectavatar and selectavatar (#14807) necessary for the new design from @bonapara in Figma here https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=70184-191735&t=s5CaYKWjRp64ECkN-11 Should look like this Screenshot 2025-10-01 at 11 25 00 As you can see in the storybook, it looks like this : Screenshot 2025-10-01 at 11 25 25 Tech: I took the same wording as "contextualText" as defined in the other select component but decided to stay string only since I did not want to overcomplicate the API for now. In that, it slightly differs from the other components designed by @bosiraphael a week ago I think --- .../components/MenuItemMultiSelectAvatar.tsx | 26 +++++++++++++++--- .../components/MenuItemSelectAvatar.tsx | 27 ++++++++++++++++--- .../MenuItemMultiSelectAvatar.stories.tsx | 1 + .../MenuItemSelectAvatar.stories.tsx | 1 + .../components/StyledMenuItemBase.tsx | 4 +++ 5 files changed, 53 insertions(+), 6 deletions(-) diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemMultiSelectAvatar.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemMultiSelectAvatar.tsx index 8692468642..27ca8cff31 100644 --- a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemMultiSelectAvatar.tsx +++ b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemMultiSelectAvatar.tsx @@ -6,6 +6,7 @@ import { Checkbox } from '@ui/input/components/Checkbox'; import { StyledMenuItemBase, StyledMenuItemLabel, + StyledMenuItemLabelLight, StyledMenuItemLeftContent, } from '../internals/components/StyledMenuItemBase'; @@ -17,11 +18,19 @@ const StyledLeftContentWithCheckboxContainer = styled.div` width: 100%; `; +const StyledTextContainer = styled.div` + display: flex; + align-items: center; + flex: 1 0 0; + gap: ${({ theme }) => theme.spacing(1)}; +`; + type MenuItemMultiSelectAvatarProps = { avatar?: ReactNode; selected: boolean; isKeySelected?: boolean; text?: string; + contextualText?: string; className?: string; onSelectChange?: (selected: boolean) => void; }; @@ -30,6 +39,7 @@ export const MenuItemMultiSelectAvatar = ({ avatar, text, selected, + contextualText, className, isKeySelected, onSelectChange, @@ -48,9 +58,19 @@ export const MenuItemMultiSelectAvatar = ({ {avatar} - - - + + + + + {contextualText && ( + <> + · + + + + + )} + diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelectAvatar.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelectAvatar.tsx index 07b57128c6..875e3819b4 100644 --- a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelectAvatar.tsx +++ b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelectAvatar.tsx @@ -4,9 +4,11 @@ import { type ReactNode } from 'react'; import { StyledMenuItemIconCheck, StyledMenuItemLabel, + StyledMenuItemLabelLight, StyledMenuItemLeftContent, } from '../internals/components/StyledMenuItemBase'; +import styled from '@emotion/styled'; import { OverflowingTextWithTooltip } from '@ui/display'; import { StyledMenuItemSelect } from './MenuItemSelect'; @@ -14,6 +16,7 @@ type MenuItemSelectAvatarProps = { avatar?: ReactNode; selected: boolean; text: string; + contextualText?: string; className?: string; onClick?: (event?: React.MouseEvent) => void; disabled?: boolean; @@ -21,9 +24,17 @@ type MenuItemSelectAvatarProps = { testId?: string; }; +const StyledTextContainer = styled.div` + display: flex; + align-items: center; + flex: 1 0 0; + gap: ${({ theme }) => theme.spacing(1)}; +`; + export const MenuItemSelectAvatar = ({ avatar, text, + contextualText, selected, className, onClick, @@ -46,9 +57,19 @@ export const MenuItemSelectAvatar = ({ > {avatar} - - - + + + + + {contextualText && ( + <> + · + + + + + )} + {selected && } diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx index 7d68bb9ab0..6b05007ea8 100644 --- a/packages/twenty-ui/src/navigation/menu/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx +++ b/packages/twenty-ui/src/navigation/menu/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx @@ -24,6 +24,7 @@ type Story = StoryObj; export const Default: Story = { args: { text: 'First option', + contextualText: 'Contextual text', avatar: , }, decorators: [ComponentDecorator, RecoilRootDecorator], diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx index c172c31db4..6ff2411b91 100644 --- a/packages/twenty-ui/src/navigation/menu/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx +++ b/packages/twenty-ui/src/navigation/menu/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx @@ -23,6 +23,7 @@ type Story = StoryObj; export const Default: Story = { args: { text: 'First option', + contextualText: 'Contextual text', avatar: , }, argTypes: { diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/StyledMenuItemBase.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/StyledMenuItemBase.tsx index e07e1f4de8..36df7e3163 100644 --- a/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/StyledMenuItemBase.tsx +++ b/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/StyledMenuItemBase.tsx @@ -96,6 +96,10 @@ export const StyledMenuItemLabel = styled.div` white-space: nowrap; `; +export const StyledMenuItemLabelLight = styled(StyledMenuItemLabel)` + color: ${({ theme }) => theme.font.color.light}; +`; + export const StyledNoIconFiller = styled.div` width: ${({ theme }) => theme.spacing(1)}; `;