Refactor positioning of radios and checkboxes #4093

owenatgov · 2023-08-16T11:30:41Z

What

Refactor radios and checkboxes to use flexbox to handle positioning. Specific changes:

Remove all float positioning from radios and checkboxes
Use flexbox on labels so that their content is always centre aligned against the input
Calculate position of radio rings and checkbox boxes using the "gutter" of the input touch target aka the extra 2px around the 40px width inputs
Set labels to have a max width of the container minus the input touch target width and the padding on either side of the label
Set hints to always be 100% width to prevent them appearing inline against small labels, now that __item's are using flex-wrap: wrap
Calculate the radio button position automatically based on the width of the touch target and the border width of the radio button

Why

To make the positioning of radios and checkboxes dynamic in preparation for the new typography scale.

Closes #3898

Based off work done in #4040

Notes

Since this is only a refactor of the underlying positioning of the components, I'm expecting the Percy diff to be next to nothing, no more than a few pixels.

Whilst this is a significant change for us, it is intended to make little to no difference to users and therefore should be treated as a bug fix change.

36degrees · 2023-08-16T12:36:44Z

The small radios and checkboxes have changed in that the input is no longer left-aligned with the label:

Before	After

Looks like this hasn't been caught by Percy either – worth adding small radios and checkboxes, and maybe examples with hints, to our list of extra visual regression examples? Could be worth adding them with a separate PR to main and then rebasing so we can see the diff here.

owenatgov · 2023-08-17T16:46:33Z

@36degrees Good idea, I'll make a separate PR for this. I've addressed this comment in the mean time.

owenatgov · 2023-08-21T09:24:00Z

Percy PR spun off from this one #4108

colinrotherham · 2023-08-23T11:00:04Z

packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss

@@ -4,23 +4,18 @@
 @import "../label/index";

 @include govuk-exports("govuk/component/checkboxes") {
-  $govuk-touch-target-size: 44px;
+  $govuk-touch-target-gutter: 4px;


This PR looks brill. Thanks for clarifying the gutter

packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss

colinrotherham · 2023-12-15T17:53:31Z

This one's got some (good) conflicts to de-duplicate govuk-font() since #4267 merged

If you don't mind doing another rebase please 🙏

github-actions · 2023-12-18T16:04:00Z

📋 Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	112.45 KiB
dist/govuk-frontend-development.min.js	38.58 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	78.74 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	73.99 KiB
packages/govuk-frontend/dist/govuk/all.mjs	3.86 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	112.44 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	38.57 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.38 KiB

Modules

File	Size
all.mjs	70.32 KiB
components/accordion/accordion.mjs	21.67 KiB
components/button/button.mjs	4.7 KiB
components/character-count/character-count.mjs	21.24 KiB
components/checkboxes/checkboxes.mjs	5.83 KiB
components/error-summary/error-summary.mjs	6.57 KiB
components/exit-this-page/exit-this-page.mjs	16.08 KiB
components/header/header.mjs	4.46 KiB
components/notification-banner/notification-banner.mjs	4.93 KiB
components/radios/radios.mjs	4.83 KiB
components/skip-link/skip-link.mjs	4.39 KiB
components/tabs/tabs.mjs	10.16 KiB

View stats and visualisations on the review app

Action run for 2486fed

colinrotherham · 2024-01-05T14:10:08Z

Are you happy with the Percy diff @owenatgov?

The gutter changes look good, but did we mean to intentionally space things out vertically?

owenatgov · 2024-01-05T15:33:13Z

Now also applied to radios 👀

colinrotherham · 2024-01-05T16:08:04Z

…The specificity is preventing this being removed simply without some raucous styling. For now I've removed the bottom margin from govuk-checkboxes__item, which I don't really like but it does the job.

@owenatgov Bit annoying, cheers for that

Hmm, might have to tackle it though as it's made checkboxes (without hints) really close together 😣

owenatgov · 2024-01-05T16:10:47Z

🤦🏻 🤦🏻 🤦🏻 Yeah that'll do that won't it...

Let's have another go.

owenatgov · 2024-01-08T09:36:21Z

@colinrotherham I cracked it by just replicating the hint's specificity. Probably the best solution for this for the moment, unless you can figure out how to collapse margins in flexbox (I couldn't!).

colinrotherham

Thanks @owenatgov, looking good

Can you double check small radios/checkboxes for me?

Percy is showing wider spacing everywhere (good) but for small ones only the labels have shifted a tiny bit closer to their inputs. If design people are happy, go for it

This means that the label content is still centred against the input whilst not interfering with inline/block element dynamics within the label

owenatgov · 2024-01-08T11:12:19Z

@colinrotherham I think I've figured it out. On the live version, small variants have a 1px right padding. I couldn't find any concrete reasoning from a quick history skim but my suspicion is that it's to create a little bit of space between the small hover state and the label. For ease I've reintroduced it. Whatcha reckon?

…actor Refactor positioning of radios and checkboxes

This was raised by the renovate bot to begin with but was causing the integration tests to fail with the error `is being covered by another element`, because it couldn't check radio and checkboxes. Looking at what is in the 5.1.0 release, it includes a change to radio and checkbox styling, which I believe is what is causing the issue. alphagov/govuk-frontend#4093. It looks like the removal of the `z-index` on `.govuk-radios__input` and `.govuk-checkboxes__input` has meant they now have `z-index: auto` but the styled `label:before` and :`after` have `z-index: 1` which causes them to be higher in the `z-order` than the inputs, which causes the cypress error above. Updating `selectRadioButton()` and adding `selectCheckbox()` to `check()` with `force: true`, forces the click on the radio button even though it is covered by the labels pseudo elements.

Looking at what is in the 5.1.0 release, it includes a change to radio and checkbox styling, which I believe is what is causing the issue. alphagov/govuk-frontend#4093. It looks like the removal of the `z-index` on `.govuk-radios__input` and `.govuk-checkboxes__input` has meant they now have `z-index: auto` but the styled `label:before` and :`after` have `z-index: 1` which causes them to be higher in the `z-order` than the inputs, which means they’re underneath another element and technically not clickable. Adding `force: true`, forces the click on the radio button and checkbox even though it is covered by the labels pseudo elements. This does not affect the actual usability.

Force Cypress to check checkboxes if it thinks they're overlapped. Looks to be caused by changes in GOV.UK Frontend v5.1.0 (alphagov/govuk-frontend#4093)

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4093 August 16, 2023 11:30 Inactive

owenatgov force-pushed the checkbox-radio-positioning-refactor branch from 74cb3da to ddfa48d Compare August 17, 2023 16:45

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4093 August 17, 2023 16:46 Inactive

owenatgov mentioned this pull request Aug 21, 2023

Add custom checkboxes and radios examples to Percy #4108

Merged

owenatgov force-pushed the checkbox-radio-positioning-refactor branch from ddfa48d to 8f5d781 Compare August 23, 2023 10:47

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4093 August 23, 2023 10:47 Inactive

colinrotherham reviewed Aug 23, 2023

View reviewed changes