跳到主要内容

Radio & Checkbox 热区扩至 20×20 并补充 visual case（DES-96/DES-97）

Pre-release · 类型： ✨ 新功能

关联 issue：DES-96 / DES-97 / WEB-847

问题​

WEB-847 后续反馈（DES-68 加了 label prop 之后）：

  • Checkbox：hover 到文字时鼠标没有变为 pointer
  • RadioGroup：hover 文字不能点中

排查结论：label prop 的组件实现本身正常（真实浏览器验证点文字可选中、光标为 pointer），症状来自 design-site demo 没有改用 label prop——Checkbox demo 用裸 htmlFor label（无 pointer 样式），RadioGroup demo 只是并排 <span>（无关联、点不中）。

另外控件自身热区仅为视觉框 14×14px，小于 Figma 的 20×20 图标容器。

改动文件​

  • packages/design/src/components/Checkbox/constants.ts
  • packages/design/src/components/Checkbox/styles.ts
  • packages/design/src/components/Checkbox/Checkbox.test.tsx
  • packages/design/src/components/Checkbox/Checkbox.visual.spec.tsx（新增）
  • packages/design/src/components/Checkbox/CheckboxDesignSpec.md
  • packages/design/src/components/RadioGroup/styles.ts
  • packages/design/src/components/RadioGroup/RadioGroup.test.tsx
  • packages/design/src/components/RadioGroup/RadioGroup.visual.spec.tsx（新增）
  • packages/design/src/components/RadioGroup/RadioGroupDesignSpec.md
  • packages/design/scripts/visual-diff-config.ts
  • packages/design-site/docs/components/atomic/controls/checkbox.mdx（含 zh-CN）
  • packages/design-site/docs/components/atomic/controls/radio-group.mdx（含 zh-CN）

改动内容​

  1. 热区扩大：Checkbox 根元素与 RadioGroupItem 根元素增加 relative before:absolute before:-inset-[3px] before:content-['']，视觉尺寸不变（14px），可点击热区四边各外扩 3px，对齐 Figma 20×20 图标容器。
  2. 文档 demo 修正：design-site 的 Checkbox「带标签」与 RadioGroup「基础用法 / 禁用状态」demo 改用 label prop，整行可点击且文字上为 pointer 光标；Props 表补充 label / labelClassName。
  3. visual case：新增 Checkbox.visual.spec.tsx（主矩阵 / round / hover / with-label）与 RadioGroup.visual.spec.tsx（主矩阵 / hover / with-label），并包含点击区域行为测试（点文字选中、文字 pointer 光标、视觉框外 2px 点击仍可选中）；scripts/visual-diff-config.ts 注册对应 Figma 节点映射。
  4. 单测：补充 hit area class 断言与 label 行为（结构包裹、点文字选中、光标样式、禁用态）。