跳到主要内容

RadioGroup / Checkbox 禁用态 label 改用 :has() 驱动

版本： 0.2.0 · 类型： 🐛 缺陷修复

问题​

RadioGroupItem / Checkbox 传入 label 时，禁用态只让控件本身（圆圈 / 方框）变灰，label 文字仍是正常黑色，光标也不是 not-allowed，视觉不一致。

根因有两层：

  1. label 行容器只声明了 data-disabled:cursor-not-allowed，没有禁用态文字颜色。
  2. 更关键的是：label 的禁用态原本靠组件给 <label> 手动打的 data-disabled（来源是 item 自身的 disabled prop）驱动。但当 disabled 设在 RadioGroup 组级时，单个 item 拿不到该 prop，<label> 不会带 data-disabled，于是 data-disabled:* 整套规则全部不命中——光标和文字色都不生效。Radix 此时仍会给内部 radio 按钮打上 data-disabled。

改动文件​

  • packages/design/src/components/RadioGroup/styles.ts
  • packages/design/src/components/Checkbox/styles.ts
  • packages/design/src/components/RadioGroup/RadioGroup.test.tsx
  • packages/design/src/components/Checkbox/Checkbox.test.tsx

改动内容​

  • RADIO_LABEL_CLASS / CHECKBOX_LABEL_CLASS 的禁用态改用 :has([data-disabled]) 驱动：has-[[data-disabled]]:cursor-not-allowed + has-[[data-disabled]]:text-(--Labels-Disabled)。由于 Radix 在 item 级与 group 级禁用时都会给内部控件打 data-disabled，据此反推整行禁用态，两种禁用来源都能正确变灰（文字降级为 Labels/Disabled #A3A3A3）
  • 与 Button 等组件禁用文字口径一致（统一 --Labels-Disabled）
  • 两组件保留 <label> 上手动的 data-disabled（item 级语义标记），但样式不再依赖它
  • 测试：断言 label 带 has-[[data-disabled]]:* 类、内部控件带 data-disabled；RadioGroup 新增 group 级禁用用例（item 无 disabled prop 也能反推）

备注​