跳到主要内容

DropdownMenu 禁用项图标色 + not-allowed 光标（WEB-1190）

版本： 0.7.0 · 类型： 🐛 Bug Fix

WEB-1190

问题​

  1. 图标颜色：DropdownMenu 菜单项禁用（disabled）时，文字通过 data-disabled:text-(--Labels-Disabled) 变为禁用色，但前置图标容器显式声明了自身颜色（default 的 Labels/Primary、danger 的 Labels/Error），不会随文字变灰，导致禁用项出现「文字已置灰、图标仍是深色」的割裂状态。级联子菜单（SubTrigger）的前置图标与尾部箭头也有同样问题。
  2. 光标：ui 结构层对禁用项施加了 data-disabled:pointer-events-none，导致 design 层的 cursor-* 无法生效，禁用项 hover 时不显示 cursor-not-allowed。

改动文件​

  • 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

改动内容​

  1. 新增共享类 DROPDOWN_ICON_DISABLED_COLOR_CLASS = '[[data-disabled]_&]:text-(--Labels-Disabled)'，通过祖先 [data-disabled] 选择器让图标容器在父项禁用时覆盖为 Labels/Disabled（图标容器显式声明颜色，不会自动继承 Item 文字的 disabled 色，需单独覆盖）。
  2. getDropdownMenuItemIconColorClass 在原 variant 色（default Labels/Primary / danger Labels/Error）基础上追加该禁用类，覆盖 DropdownMenuItem 的前置图标。
  3. DropdownMenuSubTrigger 的前置图标容器追加该禁用类；DROPDOWN_SUB_ARROW_COLOR_CLASS（尾部级联箭头）在 Grays/Gray-4 基础上追加该禁用类，使禁用子菜单项整体置灰。
  4. 在 DROPDOWN_ITEM_BASE_CLASS（Item 与 SubTrigger 共用）追加 data-disabled:pointer-events-auto + data-disabled:cursor-not-allowed，覆盖 ui 层的 pointer-events-none，让禁用项显示 not-allowed 光标（对齐 Button 既有做法）。选中仍由 Radix 内部 disabled 守卫拦截；base 只用 focus / data-highlighted（非 hover），禁用项不会出现悬浮背景。
  5. 单测：新增禁用项断言，验证前置图标容器带 [[data-disabled]_&]:text-(--Labels-Disabled)，且菜单项带 data-disabled:pointer-events-auto / data-disabled:cursor-not-allowed。