diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx new file mode 100644 index 000000000..bbb422fec --- /dev/null +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx @@ -0,0 +1,88 @@ +import styled from '@emotion/styled'; +import { isNonEmptyString } from '@sniptt/guards'; +import { Fragment } from 'react/jsx-runtime'; +import { isDefined } from 'twenty-shared/utils'; +import { OverflowingTextWithTooltip } from 'twenty-ui/display'; + +const StyledChip = styled.button<{ + withText: boolean; + maxWidth?: string; + onClick?: () => void; +}>` + all: unset; + align-items: center; + justify-content: center; + background: ${({ theme }) => theme.background.transparent.light}; + border: 1px solid ${({ theme }) => theme.border.color.medium}; + border-radius: ${({ theme }) => theme.border.radius.md}; + box-sizing: border-box; + display: flex; + gap: ${({ theme }) => theme.spacing(1)}; + height: ${({ theme }) => theme.spacing(6)}; + /* If the chip has text, we add extra padding to have a more balanced design */ + padding: 0 + ${({ theme, withText }) => (withText ? theme.spacing(2) : theme.spacing(1))}; + font-family: inherit; + font-size: ${({ theme }) => theme.font.size.sm}; + font-weight: ${({ theme }) => theme.font.weight.medium}; + line-height: ${({ theme }) => theme.text.lineHeight.lg}; + color: ${({ theme }) => theme.font.color.primary}; + cursor: ${({ onClick }) => (isDefined(onClick) ? 'pointer' : 'default')}; + + &:hover { + background: ${({ onClick, theme }) => + isDefined(onClick) + ? theme.background.transparent.medium + : theme.background.transparent.light}; + } + max-width: ${({ maxWidth }) => maxWidth}; +`; + +const StyledIconsContainer = styled.div` + align-items: center; + display: flex; +`; + +const StyledEmptyText = styled.div` + color: ${({ theme }) => theme.font.color.tertiary}; +`; + +export type CommandMenuContextChipProps = { + Icons: React.ReactNode[]; + text?: string; + onClick?: () => void; + testId?: string; + maxWidth?: string; + forceEmptyText?: boolean; +}; + +export const CommandMenuContextChip = ({ + Icons, + text, + onClick, + testId, + maxWidth, + forceEmptyText = false, +}: CommandMenuContextChipProps) => { + return ( + + + {Icons.map((Icon, index) => ( + {Icon} + ))} + + {text?.trim?.() ? ( + + ) : !forceEmptyText ? ( + Untitled + ) : ( + '' + )} + + ); +}; diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroups.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroups.tsx index 24b69aad2..58accdfe2 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroups.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroups.tsx @@ -6,14 +6,14 @@ import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; import { isDefined } from 'twenty-shared/utils'; import { MenuItem } from 'twenty-ui/navigation'; import { - MultipleAvatarChip, - MultipleAvatarChipProps, -} from 'twenty-ui/components'; + CommandMenuContextChip, + CommandMenuContextChipProps, +} from './CommandMenuContextChip'; export const CommandMenuContextChipGroups = ({ contextChips, }: { - contextChips: MultipleAvatarChipProps[]; + contextChips: CommandMenuContextChipProps[]; }) => { const { closeDropdown } = useCloseDropdown(); @@ -25,9 +25,9 @@ export const CommandMenuContextChipGroups = ({ return ( <> {contextChips.map((chip, index) => ( - 0 && ( chip.Icons?.[0])} onClick={() => {}} text={`${firstChips.length}`} @@ -77,11 +77,11 @@ export const CommandMenuContextChipGroups = ({ )} {isDefined(lastChip) && ( - )} diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroupsWithRecordSelection.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroupsWithRecordSelection.tsx index 821a1c6a7..750e79e40 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroupsWithRecordSelection.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroupsWithRecordSelection.tsx @@ -4,14 +4,14 @@ import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu'; import { getSelectedRecordsContextText } from '@/command-menu/utils/getRecordContextText'; import { useFindManyRecordsSelectedInContextStore } from '@/context-store/hooks/useFindManyRecordsSelectedInContextStore'; import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById'; +import { CommandMenuContextChipProps } from './CommandMenuContextChip'; import { isDefined } from 'twenty-shared/utils'; -import { MultipleAvatarChipProps } from 'twenty-ui/components'; export const CommandMenuContextChipGroupsWithRecordSelection = ({ contextChips, objectMetadataItemId, }: { - contextChips: MultipleAvatarChipProps[]; + contextChips: CommandMenuContextChipProps[]; objectMetadataItemId: string; }) => { const { objectMetadataItem } = useObjectMetadataItemById({ diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordsChip.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordsChip.tsx index 23c6c7cc6..928787036 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordsChip.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordsChip.tsx @@ -1,8 +1,8 @@ +import { CommandMenuContextChip } from '@/command-menu/components/CommandMenuContextChip'; import { CommandMenuContextRecordChipAvatars } from '@/command-menu/components/CommandMenuContextRecordChipAvatars'; import { getSelectedRecordsContextText } from '@/command-menu/utils/getRecordContextText'; import { useFindManyRecordsSelectedInContextStore } from '@/context-store/hooks/useFindManyRecordsSelectedInContextStore'; import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById'; -import { MultipleAvatarChip } from 'twenty-ui/components'; export const CommandMenuContextRecordsChip = ({ objectMetadataItemId, @@ -34,7 +34,7 @@ export const CommandMenuContextRecordsChip = ({ )); return ( - { duration: backButtonAnimationDuration, }} > - ]} onClick={goBackFromCommandMenu} testId="command-menu-go-back-button" diff --git a/packages/twenty-ui/src/components/avatar-chip/MultipleAvatarChip.tsx b/packages/twenty-ui/src/components/avatar-chip/MultipleAvatarChip.tsx index ce8c153cf..765709cce 100644 --- a/packages/twenty-ui/src/components/avatar-chip/MultipleAvatarChip.tsx +++ b/packages/twenty-ui/src/components/avatar-chip/MultipleAvatarChip.tsx @@ -36,14 +36,6 @@ export const MultipleAvatarChip = ({ variant = ChipVariant.Static, forceEmptyText = false, }: MultipleAvatarChipProps) => { - const leftComponent = ( - - {Icons.map((Icon, index) => ( - {Icon} - ))} - - ); - return ( + {Icons.map((Icon, index) => ( + {Icon} + ))} + + } rightComponent={rightComponent} clickable={isDefined(onClick)} maxWidth={maxWidth}