Skip to main content

DropdownMenu disabled item icon color + not-allowed cursor (WEB-1190)

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

WEB-1190

Problemโ€‹

  1. Icon color: When a DropdownMenu item is disabled, the label text turns Labels/Disabled via data-disabled:text-(--Labels-Disabled), but the leading icon container declares its own color explicitly (Labels/Primary for default, Labels/Error for danger) and therefore does not dim, leaving a disabled item with grey text but a full-color icon. Cascading submenu (SubTrigger) leading icons and the trailing arrow had the same problem.
  2. Cursor: The ui layer applies data-disabled:pointer-events-none, which suppressed the design layer's cursor-*, so a disabled item never showed cursor-not-allowed on hover.

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 a shared class DROPDOWN_ICON_DISABLED_COLOR_CLASS = '[[data-disabled]_&]:text-(--Labels-Disabled)'. It uses an ancestor [data-disabled] selector so the icon container overrides to Labels/Disabled whenever its parent item is disabled (the icon container declares its color explicitly and does not inherit the item's disabled text color).
  2. getDropdownMenuItemIconColorClass now appends the disabled class on top of the variant color (default Labels/Primary / danger Labels/Error), covering DropdownMenuItem's leading icon.
  3. DropdownMenuSubTrigger's leading icon container gets the same disabled class; DROPDOWN_SUB_ARROW_COLOR_CLASS (trailing cascade arrow) appends it on top of Grays/Gray-4, so a disabled submenu item dims entirely.
  4. Added data-disabled:pointer-events-auto + data-disabled:cursor-not-allowed to DROPDOWN_ITEM_BASE_CLASS (shared by Item and SubTrigger), overriding the ui layer's pointer-events-none so disabled items show the not-allowed cursor (mirrors the existing Button approach). Selection is still blocked by Radix's internal disabled guard, and since the base only uses focus / data-highlighted (not hover), disabled items never get a hover background.
  5. Unit test: a disabled item asserts its leading icon container carries [[data-disabled]_&]:text-(--Labels-Disabled), and the menu item carries data-disabled:pointer-events-auto / data-disabled:cursor-not-allowed.