322 compact command chips dropdown (#10456)

Closes https://github.com/twentyhq/core-team-issues/issues/322



https://github.com/user-attachments/assets/d4806f04-e217-40f5-9707-93334bbd49ea

---------

Co-authored-by: Devessier <baptiste@devessier.fr>
This commit is contained in:
Raphaël Bosi
2025-02-25 16:42:38 +01:00
committed by GitHub
parent a1c7e3279c
commit 9997cf5a4e
9 changed files with 139 additions and 65 deletions

View File

@ -1,4 +1,9 @@
import { COMMAND_MENU_CONTEXT_CHIP_GROUPS_DROPDOWN_ID } from '@/command-menu/constants/CommandMenuContextChipGroupsDropdownId';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
import { isDefined } from 'twenty-shared';
import { MenuItem } from 'twenty-ui';
import {
CommandMenuContextChip,
CommandMenuContextChipProps,
@ -34,9 +39,30 @@ export const CommandMenuContextChipGroups = ({
return (
<>
{firstChips.length > 0 && (
<CommandMenuContextChip
Icons={firstChips.map((chip) => chip.Icons?.[0])}
/>
<Dropdown
clickableComponent={
<CommandMenuContextChip
Icons={firstChips.map((chip) => chip.Icons?.[0])}
onClick={() => {}}
/>
}
dropdownComponents={
<DropdownMenuItemsContainer>
{firstChips.map((chip) => (
<MenuItem
LeftComponent={chip.Icons}
text={chip.text}
onClick={chip.onClick}
/>
))}
</DropdownMenuItemsContainer>
}
dropdownHotkeyScope={{
scope: AppHotkeyScope.CommandMenu,
}}
dropdownId={COMMAND_MENU_CONTEXT_CHIP_GROUPS_DROPDOWN_ID}
dropdownPlacement="bottom-start"
></Dropdown>
)}
{isDefined(lastChip) && (