Skip to main content

DropdownMenu cascading submenu arrow color changed to Grays/Gray-4 (WEB-1183)

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

WEB-1183

Problemโ€‹

In the cascading submenu, the indicator arrow on a menu item that opens a sub-menu (e.g. "More Options") needs to match the design spec. WEB-1129 already switched the arrow icon to icon_list_chevron_right (ListChevronRightIcon), but at that time its color was unified to Labels/Primary (same as the leading icons). The design spec requires the arrow color to be labels-gray4 (the actual token is Grays/Gray-4), decoupled from the leading-icon color.

Changed Filesโ€‹

  • packages/design/src/components/DropdownMenu/styles.ts
  • packages/design/src/components/DropdownMenu/DropdownMenu.tsx
  • packages/design/src/components/DropdownMenu/DropdownMenuDesignSpec.md
  • packages/design/src/components/DropdownMenu/__tests__/DropdownMenu.test.tsx

Changesโ€‹

  1. Added DROPDOWN_SUB_ARROW_COLOR_CLASS = 'text-(--Grays-Gray-4)' in DropdownMenu/styles.ts, splitting the cascading arrow color out of the shared DROPDOWN_ICON_COLOR_CLASS (Labels/Primary).
  2. DropdownMenuSubTrigger's ListChevronRightIcon now uses DROPDOWN_SUB_ARROW_COLOR_CLASS; the leading-icon container still uses Labels/Primary.
  3. Updated the DesignSpec and the unit test assertion (text-(--Grays-Gray-4)).