From cd6db6cb4cab12ba9e00433c690a4564edf67466 Mon Sep 17 00:00:00 2001 From: Vanita Barrett Date: Fri, 19 Nov 2021 10:35:13 +0000 Subject: [PATCH] Remove display block style on hint component In v3.8.0 we added the ability for block level elements to be rendered inside hints by switching from using a `span` to a `div`. However, we kept the `display: block` styling (which would now be redundant as this is the default for divs). This meant we weren't forcing users to update their HTML and we could avoid a breaking change. We now want to tidy up that redundant CSS as part of v4.0.0. --- CHANGELOG.md | 10 ++++++++++ src/govuk/components/hint/_index.scss | 2 -- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 98be0aee07..a4d29ae20c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -102,6 +102,16 @@ If you're importing JavaScript modules individually, you should check any refere This change was introduced in [pull request #1836: Rename exported JavaScript modules to include component name](https://github.com/alphagov/govuk-frontend/issues/1836)]. +#### Update the HTML for hints + +In GOV.UK Frontend v3.8.0, we [updated the HTML for hints to use a `
` rather than a `` element, to allow the use of block elements](https://github.com/alphagov/govuk-frontend/issues/1835). We've now removed the styles which made the hint `` display as block. + +To make sure your hints are styled correctly, update your hint HTML to use a `
` rather than a ``. For example: `
`. + +You do not need to do anything if you're using Nunjucks macros. + +This change was introduced in [pull request #2437: Remove `display:block` on hint component](https://github.com/alphagov/govuk-frontend/pull/2437). + #### Remove calls to deprecated `iff` Sass function We've removed the `iff` function which we deprecated in [GOV.UK Frontend version 3.6.0](https://github.com/alphagov/govuk-frontend/releases/tag/v3.6.0). diff --git a/src/govuk/components/hint/_index.scss b/src/govuk/components/hint/_index.scss index 679fa432f2..763ba71911 100644 --- a/src/govuk/components/hint/_index.scss +++ b/src/govuk/components/hint/_index.scss @@ -2,8 +2,6 @@ .govuk-hint { @include govuk-font($size: 19); - display: block; - margin-bottom: govuk-spacing(3); color: $govuk-secondary-text-colour;