Improve the click area for horizontal FormControls (checkboxes and ra…

…dios) (#5190) * improves the click area for horizontal FormControls (checkboxes and radios) * adds changeset * test(vrt): update snapshots * move padding from just 'label' to all children * test(vrt): update snapshots --------- Co-authored-by: mperrotti <mperrotti@users.noreply.github.com>
primer · Nov 23, 2024 · 32c4fe1 · 32c4fe1
1 parent bb0cd90
commit 32c4fe1
Show file tree

Hide file tree

Showing 47 changed files with 6 additions and 1 deletion.
diff --git a/.changeset/few-baboons-pump.md b/.changeset/few-baboons-pump.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Changes `<label>` wrapper of `FormControl` to put padding directly on the `label` so the entire row is clickable
diff --git a/...s/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-dark-colorblind-linux.png b/...s/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-dark-colorblind-linux.png
diff --git a/...nents/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-dark-dimmed-linux.png b/...nents/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-dark-dimmed-linux.png
diff --git a/...heckbox.test.ts-snapshots/Checkbox-Visually-Hidden-dark-high-contrast-linux.png b/...heckbox.test.ts-snapshots/Checkbox-Visually-Hidden-dark-high-contrast-linux.png
diff --git a/...s/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-dark-linux.png b/...s/components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-dark-linux.png
diff --git a/...s/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-dark-tritanopia-linux.png b/...s/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-dark-tritanopia-linux.png
diff --git a/...kbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-dark-colorblind-linux.png b/...kbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-dark-colorblind-linux.png
diff --git a/...Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-dark-dimmed-linux.png b/...Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-dark-dimmed-linux.png
diff --git a/...x.test.ts-snapshots/Checkbox-Visually-Hidden-focus-dark-high-contrast-linux.png b/...x.test.ts-snapshots/Checkbox-Visually-Hidden-focus-dark-high-contrast-linux.png
diff --git a/...onents/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-dark-linux.png b/...onents/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-dark-linux.png
diff --git a/...kbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-dark-tritanopia-linux.png b/...kbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-dark-tritanopia-linux.png
diff --git a/...box.test.ts-snapshots/Checkbox-Visually-Hidden-focus-light-colorblind-linux.png b/...box.test.ts-snapshots/Checkbox-Visually-Hidden-focus-light-colorblind-linux.png
diff --git a/....test.ts-snapshots/Checkbox-Visually-Hidden-focus-light-high-contrast-linux.png b/....test.ts-snapshots/Checkbox-Visually-Hidden-focus-light-high-contrast-linux.png
diff --git a/...nents/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-light-linux.png b/...nents/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-focus-light-linux.png
diff --git a/...box.test.ts-snapshots/Checkbox-Visually-Hidden-focus-light-tritanopia-linux.png b/...box.test.ts-snapshots/Checkbox-Visually-Hidden-focus-light-tritanopia-linux.png
diff --git a/.../Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-light-colorblind-linux.png b/.../Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-light-colorblind-linux.png
diff --git a/...eckbox.test.ts-snapshots/Checkbox-Visually-Hidden-light-high-contrast-linux.png b/...eckbox.test.ts-snapshots/Checkbox-Visually-Hidden-light-high-contrast-linux.png
diff --git a/.../components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-light-linux.png b/.../components/Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-light-linux.png
diff --git a/.../Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-light-tritanopia-linux.png b/.../Checkbox.test.ts-snapshots/Checkbox-Visually-Hidden-light-tritanopia-linux.png
diff --git a/...ents/Checkbox.test.ts-snapshots/Checkbox-With-Caption-dark-colorblind-linux.png b/...ents/Checkbox.test.ts-snapshots/Checkbox-With-Caption-dark-colorblind-linux.png
diff --git a/...mponents/Checkbox.test.ts-snapshots/Checkbox-With-Caption-dark-dimmed-linux.png b/...mponents/Checkbox.test.ts-snapshots/Checkbox-With-Caption-dark-dimmed-linux.png
diff --git a/...s/Checkbox.test.ts-snapshots/Checkbox-With-Caption-dark-high-contrast-linux.png b/...s/Checkbox.test.ts-snapshots/Checkbox-With-Caption-dark-high-contrast-linux.png
diff --git a/...hots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-dark-linux.png b/...hots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-dark-linux.png
diff --git a/...ents/Checkbox.test.ts-snapshots/Checkbox-With-Caption-dark-tritanopia-linux.png b/...ents/Checkbox.test.ts-snapshots/Checkbox-With-Caption-dark-tritanopia-linux.png
diff --git a/...heckbox.test.ts-snapshots/Checkbox-With-Caption-focus-dark-colorblind-linux.png b/...heckbox.test.ts-snapshots/Checkbox-With-Caption-focus-dark-colorblind-linux.png
diff --git a/...ts/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-dark-dimmed-linux.png b/...ts/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-dark-dimmed-linux.png
diff --git a/...kbox.test.ts-snapshots/Checkbox-With-Caption-focus-dark-high-contrast-linux.png b/...kbox.test.ts-snapshots/Checkbox-With-Caption-focus-dark-high-contrast-linux.png
diff --git a/...omponents/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-dark-linux.png b/...omponents/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-dark-linux.png
diff --git a/...heckbox.test.ts-snapshots/Checkbox-With-Caption-focus-dark-tritanopia-linux.png b/...heckbox.test.ts-snapshots/Checkbox-With-Caption-focus-dark-tritanopia-linux.png
diff --git a/...eckbox.test.ts-snapshots/Checkbox-With-Caption-focus-light-colorblind-linux.png b/...eckbox.test.ts-snapshots/Checkbox-With-Caption-focus-light-colorblind-linux.png
diff --git a/...box.test.ts-snapshots/Checkbox-With-Caption-focus-light-high-contrast-linux.png b/...box.test.ts-snapshots/Checkbox-With-Caption-focus-light-high-contrast-linux.png
diff --git a/...mponents/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-light-linux.png b/...mponents/Checkbox.test.ts-snapshots/Checkbox-With-Caption-focus-light-linux.png
diff --git a/...eckbox.test.ts-snapshots/Checkbox-With-Caption-focus-light-tritanopia-linux.png b/...eckbox.test.ts-snapshots/Checkbox-With-Caption-focus-light-tritanopia-linux.png
diff --git a/...nts/Checkbox.test.ts-snapshots/Checkbox-With-Caption-light-colorblind-linux.png b/...nts/Checkbox.test.ts-snapshots/Checkbox-With-Caption-light-colorblind-linux.png
diff --git a/.../Checkbox.test.ts-snapshots/Checkbox-With-Caption-light-high-contrast-linux.png b/.../Checkbox.test.ts-snapshots/Checkbox-With-Caption-light-high-contrast-linux.png
diff --git a/...ots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-light-linux.png b/...ots/components/Checkbox.test.ts-snapshots/Checkbox-With-Caption-light-linux.png
diff --git a/...nts/Checkbox.test.ts-snapshots/Checkbox-With-Caption-light-tritanopia-linux.png b/...nts/Checkbox.test.ts-snapshots/Checkbox-With-Caption-light-tritanopia-linux.png
diff --git a/...components/Radio.test.ts-snapshots/Radio-With-Caption-dark-colorblind-linux.png b/...components/Radio.test.ts-snapshots/Radio-With-Caption-dark-colorblind-linux.png
diff --git a/...ots/components/Radio.test.ts-snapshots/Radio-With-Caption-dark-dimmed-linux.png b/...ots/components/Radio.test.ts-snapshots/Radio-With-Caption-dark-dimmed-linux.png
diff --git a/...ponents/Radio.test.ts-snapshots/Radio-With-Caption-dark-high-contrast-linux.png b/...ponents/Radio.test.ts-snapshots/Radio-With-Caption-dark-high-contrast-linux.png
diff --git a/.../snapshots/components/Radio.test.ts-snapshots/Radio-With-Caption-dark-linux.png b/.../snapshots/components/Radio.test.ts-snapshots/Radio-With-Caption-dark-linux.png
diff --git a/...components/Radio.test.ts-snapshots/Radio-With-Caption-dark-tritanopia-linux.png b/...components/Radio.test.ts-snapshots/Radio-With-Caption-dark-tritanopia-linux.png
diff --git a/...omponents/Radio.test.ts-snapshots/Radio-With-Caption-light-colorblind-linux.png b/...omponents/Radio.test.ts-snapshots/Radio-With-Caption-light-colorblind-linux.png
diff --git a/...onents/Radio.test.ts-snapshots/Radio-With-Caption-light-high-contrast-linux.png b/...onents/Radio.test.ts-snapshots/Radio-With-Caption-light-high-contrast-linux.png
diff --git a/...snapshots/components/Radio.test.ts-snapshots/Radio-With-Caption-light-linux.png b/...snapshots/components/Radio.test.ts-snapshots/Radio-With-Caption-light-linux.png
diff --git a/...omponents/Radio.test.ts-snapshots/Radio-With-Caption-light-tritanopia-linux.png b/...omponents/Radio.test.ts-snapshots/Radio-With-Caption-light-tritanopia-linux.png
diff --git a/packages/react/src/FormControl/FormControl.tsx b/packages/react/src/FormControl/FormControl.tsx
@@ -173,7 +173,7 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
               </Box>
             )}
             {!slots.label?.props.visuallyHidden || slots.caption ? (
-              <Box display="flex" flexDirection="column" ml={2}>
+              <Box display="flex" flexDirection="column" sx={{'> *': {paddingLeft: 'var(--stack-gap-condensed)'}}}>
                 {slots.label}
                 {slots.caption}
               </Box>