From 70f74edf11b16c14761366ac8c7d596fb3c31d1d Mon Sep 17 00:00:00 2001 From: beeps Date: Fri, 14 Jun 2024 16:17:34 +0100 Subject: [PATCH 1/3] Modify left margin calculation to use physical input width Checkboxes and radio buttons are visually 40 pixels wide, however their actual width on the page is 44 pixels, creating an invisible 2 pixel 'border' around the input that the conditional area's margin-left calculation didn't account for. --- .../govuk-frontend/src/govuk/components/checkboxes/_index.scss | 2 +- packages/govuk-frontend/src/govuk/components/radios/_index.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss b/packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss index 700ccb03f5..1bf6894642 100644 --- a/packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss @@ -159,7 +159,7 @@ // to be an even number in order to be centred under the 40px checkbox or radio. $conditional-border-width: $govuk-border-width-narrow; // Calculate the amount of padding needed to keep the border centered against the checkbox. - $conditional-border-padding: ($govuk-checkboxes-size / 2) - ($conditional-border-width / 2); + $conditional-border-padding: ($govuk-touch-target-size / 2) - ($conditional-border-width / 2); // Move the border centered with the checkbox $conditional-margin-left: $conditional-border-padding; // Move the contents of the conditional inline with the label diff --git a/packages/govuk-frontend/src/govuk/components/radios/_index.scss b/packages/govuk-frontend/src/govuk/components/radios/_index.scss index a13fced374..0ce4da70c4 100644 --- a/packages/govuk-frontend/src/govuk/components/radios/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/radios/_index.scss @@ -176,7 +176,7 @@ // to be an even number in order to be centred under the 40px checkbox or radio. $conditional-border-width: $govuk-border-width-narrow; // Calculate the amount of padding needed to keep the border centered against the radios. - $conditional-border-padding: ($govuk-radios-size / 2) - ($conditional-border-width / 2); + $conditional-border-padding: ($govuk-touch-target-size / 2) - ($conditional-border-width / 2); // Move the border centered with the radios $conditional-margin-left: $conditional-border-padding; // Move the contents of the conditional inline with the label From 3b683eb4c9cb158b947d393b613334fb6fad3340 Mon Sep 17 00:00:00 2001 From: beeps Date: Fri, 14 Jun 2024 16:19:04 +0100 Subject: [PATCH 2/3] Add expanded conditionals to list of examples Percy should track --- .../src/govuk/components/checkboxes/checkboxes.yaml | 1 + packages/govuk-frontend/src/govuk/components/radios/radios.yaml | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.yaml b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.yaml index 993ee020be..576fc7ac93 100644 --- a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.yaml +++ b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.yaml @@ -520,6 +520,7 @@ examples: - name: with conditional item checked + screenshot: true options: name: how-contacted-checked idPrefix: how-contacted-checked diff --git a/packages/govuk-frontend/src/govuk/components/radios/radios.yaml b/packages/govuk-frontend/src/govuk/components/radios/radios.yaml index a256b0e54c..864612f119 100644 --- a/packages/govuk-frontend/src/govuk/components/radios/radios.yaml +++ b/packages/govuk-frontend/src/govuk/components/radios/radios.yaml @@ -396,6 +396,7 @@ examples: - name: with conditional item checked + screenshot: true options: idPrefix: 'how-contacted-checked' name: 'how-contacted-checked' From 4e83cf890c196d703a5d2af9d1b9706b82b0a21d Mon Sep 17 00:00:00 2001 From: beeps Date: Fri, 14 Jun 2024 17:21:35 +0100 Subject: [PATCH 3/3] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 140083f857..2749b6128d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ We've made fixes to GOV.UK Frontend in the following pull requests: - [#5043: Refactor the accordion JavaScript](https://github.com/alphagov/govuk-frontend/pull/5043) - [#5044: Remove session storage checks from accordion JavaScript](https://github.com/alphagov/govuk-frontend/pull/5044) - [#5060: Reintroduce additional bottom margin to Error Summary content](https://github.com/alphagov/govuk-frontend/pull/5060) +- [#5070: Fix alignment of content in conditional checkboxes and radio buttons](https://github.com/alphagov/govuk-frontend/pull/5070) ## 5.4.0 (Feature release)