Skip to main content

Radio & Checkbox hit area 20×20 + visual cases (DES-96/DES-97)

Pre-release · Type: ✨ Feature

Related issues: DES-96 / DES-97 / WEB-847

Problem​

WEB-847 follow-up feedback (after DES-68 added the label prop):

  • Checkbox: hovering over the text did not change the cursor to pointer
  • RadioGroup: hovering the text could not be clicked

Investigation conclusion: the component implementation of the label prop itself was fine (verified in a real browser that clicking the text selects it and the cursor is pointer); the symptoms came from the design-site demos not switching to the label prop — the Checkbox demo used a bare htmlFor label (no pointer style), and the RadioGroup demo was just side-by-side <span>s (no association, not clickable).

In addition, the controls' own hit area was only the 14×14px visual box, smaller than Figma's 20×20 icon container.

Changed Files​

  • 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 (new)
  • 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 (new)
  • packages/design/src/components/RadioGroup/RadioGroupDesignSpec.md
  • packages/design/scripts/visual-diff-config.ts
  • packages/design-site/docs/components/atomic/controls/checkbox.mdx (incl. zh-CN)
  • packages/design-site/docs/components/atomic/controls/radio-group.mdx (incl. zh-CN)

Changes​

  1. Hit area enlarged: The Checkbox root element and the RadioGroupItem root element add relative before:absolute before:-inset-[3px] before:content-['']; the visual size is unchanged (14px), and the clickable hit area extends 3px outward on each side, aligning with Figma's 20×20 icon container.
  2. Doc demo fixes: The design-site Checkbox "with label" and RadioGroup "basic usage / disabled state" demos switch to the label prop, making the whole row clickable and showing a pointer cursor over the text; the Props table adds label / labelClassName.
  3. Visual cases: Added Checkbox.visual.spec.tsx (main matrix / round / hover / with-label) and RadioGroup.visual.spec.tsx (main matrix / hover / with-label), including click-area behavior tests (clicking the text selects it, the text shows a pointer cursor, clicking 2px outside the visual box still selects it); scripts/visual-diff-config.ts registers the corresponding Figma node mappings.
  4. Unit tests: Added hit-area class assertions and label behavior (structural wrapping, clicking the text selects it, cursor style, disabled state).