From 04bc42aa4779aa4249ddc5a43b162b7acdd47b07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?= <71827178+bosiraphael@users.noreply.github.com> Date: Wed, 29 Jan 2025 17:37:59 +0100 Subject: [PATCH] Improve command menu chip design (#9915) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Before: Capture d’écran 2025-01-29 à 17 07 13 Capture d’écran 2025-01-29 à 17 07 23 Capture d’écran 2025-01-29 à 17 07 41 After: Capture d’écran 2025-01-29 à 17 03 49 Capture d’écran 2025-01-29 à 17 04 15 Capture d’écran 2025-01-29 à 17 04 37 --- .../components/CommandMenuContextChip.tsx | 35 +++---------------- .../CommandMenuContextRecordChip.tsx | 4 --- .../CommandMenuContextRecordChipAvatars.tsx | 22 ++++++++++-- .../ResetContextToSelectionCommandButton.tsx | 1 - .../CommandMenuContextChip.stories.tsx | 16 --------- .../object-metadata/utils/getAvatarType.ts | 7 ++++ 6 files changed, 32 insertions(+), 53 deletions(-) diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx index 77a7e4616..895ca9356 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx @@ -1,6 +1,7 @@ import styled from '@emotion/styled'; +import { Fragment } from 'react/jsx-runtime'; -const StyledChip = styled.div<{ variant?: 'default' | 'small' }>` +const StyledChip = styled.div` align-items: center; background: ${({ theme }) => theme.background.transparent.light}; border: 1px solid ${({ theme }) => theme.border.color.medium}; @@ -8,8 +9,7 @@ const StyledChip = styled.div<{ variant?: 'default' | 'small' }>` box-sizing: border-box; display: flex; gap: ${({ theme }) => theme.spacing(1)}; - height: ${({ theme, variant }) => - variant === 'small' ? theme.spacing(6) : theme.spacing(8)}; + height: ${({ theme }) => theme.spacing(6)}; padding: 0 ${({ theme }) => theme.spacing(2)}; font-size: ${({ theme }) => theme.font.size.sm}; font-weight: ${({ theme }) => theme.font.weight.medium}; @@ -21,43 +21,18 @@ const StyledIconsContainer = styled.div` display: flex; `; -const StyledIconWrapper = styled.div<{ withIconBackground?: boolean }>` - background: ${({ theme, withIconBackground }) => - withIconBackground ? theme.background.primary : 'unset'}; - border-radius: ${({ theme }) => theme.border.radius.sm}; - padding: ${({ theme }) => theme.spacing(0.5)}; - border: 1px solid - ${({ theme, withIconBackground }) => - withIconBackground ? theme.border.color.medium : 'transparent'}; - &:not(:first-of-type) { - margin-left: -${({ theme }) => theme.spacing(1)}; - } - display: flex; - align-items: center; - justify-content: center; -`; - export const CommandMenuContextChip = ({ Icons, text, - withIconBackground, - variant = 'default', }: { Icons: React.ReactNode[]; text?: string; - withIconBackground?: boolean; - variant?: 'default' | 'small'; }) => { return ( - + {Icons.map((Icon, index) => ( - - {Icon} - + {Icon} ))} {text} diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordChip.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordChip.tsx index 1b3bf3617..970bb371c 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordChip.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordChip.tsx @@ -7,11 +7,9 @@ import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMeta export const CommandMenuContextRecordChip = ({ objectMetadataItemId, instanceId, - variant = 'default', }: { objectMetadataItemId: string; instanceId?: string; - variant?: 'default' | 'small'; }) => { const { objectMetadataItem } = useObjectMetadataItemById({ objectId: objectMetadataItemId, @@ -43,8 +41,6 @@ export const CommandMenuContextRecordChip = ({ totalCount, )} Icons={Avatars} - withIconBackground={true} - variant={variant} /> ); }; diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordChipAvatars.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordChipAvatars.tsx index 51792b4cc..4f9d55889 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordChipAvatars.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordChipAvatars.tsx @@ -3,8 +3,24 @@ import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; import { useRecordChipData } from '@/object-record/hooks/useRecordChipData'; import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { useTheme } from '@emotion/react'; +import styled from '@emotion/styled'; import { Avatar } from 'twenty-ui'; +const StyledIconWrapper = styled.div<{ withIconBackground?: boolean }>` + background: ${({ theme, withIconBackground }) => + withIconBackground ? theme.background.primary : 'unset'}; + border-radius: ${({ theme }) => theme.border.radius.sm}; + border: 1px solid + ${({ theme, withIconBackground }) => + withIconBackground ? theme.border.color.medium : 'transparent'}; + &:not(:first-of-type) { + margin-left: -${({ theme }) => theme.spacing(1)}; + } + display: flex; + align-items: center; + justify-content: center; +`; + export const CommandMenuContextRecordChipAvatars = ({ objectMetadataItem, record, @@ -24,7 +40,9 @@ export const CommandMenuContextRecordChipAvatars = ({ const theme = useTheme(); return ( - <> + {Icon ? ( ) : ( @@ -36,6 +54,6 @@ export const CommandMenuContextRecordChipAvatars = ({ size="sm" /> )} - + ); }; diff --git a/packages/twenty-front/src/modules/command-menu/components/ResetContextToSelectionCommandButton.tsx b/packages/twenty-front/src/modules/command-menu/components/ResetContextToSelectionCommandButton.tsx index 4c3412d56..27082520a 100644 --- a/packages/twenty-front/src/modules/command-menu/components/ResetContextToSelectionCommandButton.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/ResetContextToSelectionCommandButton.tsx @@ -47,7 +47,6 @@ export const ResetContextToSelectionCommandButton = () => { } onClick={resetPreviousCommandMenuContext} diff --git a/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenuContextChip.stories.tsx b/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenuContextChip.stories.tsx index efcee93e3..8abfc3e2e 100644 --- a/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenuContextChip.stories.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenuContextChip.stories.tsx @@ -30,22 +30,6 @@ export const MultipleIcons: Story = { }, }; -export const WithIconBackground: Story = { - args: { - Icons: [], - text: 'Person', - withIconBackground: true, - }, -}; - -export const MultipleIconsWithIconBackground: Story = { - args: { - Icons: [, ], - text: 'Person & Company', - withIconBackground: true, - }, -}; - export const IconsOnly: Story = { args: { Icons: [, ], diff --git a/packages/twenty-front/src/modules/object-metadata/utils/getAvatarType.ts b/packages/twenty-front/src/modules/object-metadata/utils/getAvatarType.ts index b227959d1..1ddba77b9 100644 --- a/packages/twenty-front/src/modules/object-metadata/utils/getAvatarType.ts +++ b/packages/twenty-front/src/modules/object-metadata/utils/getAvatarType.ts @@ -9,5 +9,12 @@ export const getAvatarType = (objectNameSingular: string) => { return 'squared'; } + if ( + objectNameSingular === CoreObjectNameSingular.Task || + objectNameSingular === CoreObjectNameSingular.Note + ) { + return 'icon'; + } + return 'rounded'; };