From d425b298419e8494b1bbb59141713380e308e745 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Wed, 15 Jul 2020 13:39:14 +0100 Subject: [PATCH 1/2] Fix warning text if border-box sizing applied globally If a user applies a global box-sizing reset [1], the warning text icon is 'squished' horizontally as the border is 'accounted for' within the 29px min-width. Explicitly use border-box sizing, as this means that the min-width reflects the actual desired width of the icon, rather than having to factor the border width in separately. As the box-sizing model is now set explicitly, it should display correctly whether the reset is applied or not. Increase the min-width and min-height of the icon to include the border (3px border * 2 in each direction = 6px). [1]: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ --- src/govuk/components/warning-text/_index.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/govuk/components/warning-text/_index.scss b/src/govuk/components/warning-text/_index.scss index 6ed50c86f4..06ca717515 100644 --- a/src/govuk/components/warning-text/_index.scss +++ b/src/govuk/components/warning-text/_index.scss @@ -13,13 +13,15 @@ .govuk-warning-text__icon { @include govuk-font($size: false, $weight: bold); + box-sizing: border-box; + display: inline-block; position: absolute; left: 0; - min-width: 29px; - min-height: 29px; + min-width: 35px; + min-height: 35px; margin-top: -7px; @include govuk-media-query($from: tablet) { From 317e339084efd010210e9258ce46852d4f20bc3e Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Wed, 15 Jul 2020 13:46:57 +0100 Subject: [PATCH 2/2] Add to changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1811c061bc..73829fc4cd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,7 @@ We’ve made fixes to GOV.UK Frontend in the following pull requests: - [#1842: Preserve the state of conditional reveals when navigating 'back' in the browser](https://github.com/alphagov/govuk-frontend/pull/1842) - [#1855: Hint component can render block-level elements as valid HTML](https://github.com/alphagov/govuk-frontend/pull/1855) - [#1861: Fix the display of checkboxes when border-box box sizing is applied globally](https://github.com/alphagov/govuk-frontend/pull/1861) +- [#1862: Fix display of warning text icon when border-box box sizing is applied globally #1862](https://github.com/alphagov/govuk-frontend/pull/1862) ## 3.7.0 (Feature release)