Skip to main content

DropdownMenu cascading submenu style polish (WEB-1129)

Version: 0.6.3 ยท Type: ๐Ÿ› Bug Fix

WEB-1129

Problemโ€‹

The cascading submenu visuals did not match the design:

  1. The cascading arrow was too large (used the chevronRight thick arrow).
  2. The submenu was offset from the parent menu instead of overlapping it.
  3. The submenu's first option was not aligned with the parent option.
  4. When the submenu opened, the parent SubTrigger background turned dark instead of the hover Gray-1.
  5. Leading icon and arrow icon colors were inconsistent.

Changed Filesโ€‹

  • packages/design/src/Icons/contract.ts
  • packages/design/src/Icons/index.tsx
  • packages/design/src/components/DropdownMenu/DropdownMenu.tsx
  • packages/design/src/components/DropdownMenu/styles.ts
  • packages/design/src/components/DropdownMenu/DropdownMenuDesignSpec.md
  • consumer icon registries: packages/design-site/src/icons/plaud-icon-registry.tsx, apps/web4/src/shared/icons/designIconRegistry.tsx

Changesโ€‹

  1. Added a new required listChevronRight icon key (Figma icon_list_chevron_right) to IconRegistry; the cascading arrow now uses it at a 20px container with Labels/Primary color.
  2. Leading icon container defaults to Labels/Primary (a business-injected node can still override it).
  3. DropdownMenuSubContent defaults to sideOffset={-8} (overlaps the parent menu by 8px) and alignOffset={-8} (shifts up 8px so the first option aligns with the parent option); both remain overridable.
  4. SubTrigger open-state background overridden to Grays/Gray-1, consistent with hover (fixes the dark background on open).

Breakingโ€‹

IconRegistry gains a required key listChevronRight. Every consumer that injects an icon registry must provide an icon_list_chevron_right implementation, otherwise satisfies IconRegistry fails to compile. In-monorepo consumers (design-site, web4) are already updated.