From 77d7866a593137751d895b668b0e423b3f3b26fc Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Wed, 10 May 2023 10:28:34 +0100 Subject: [PATCH 1/2] Remove new link styles feature flag All of the CSS within the block guarded by the new link styles flag is also guarded by the other settings. This means we can remove the flag as users can still disable the new link styles by setting: ``` $govuk-link-underline-offset: false; $govuk-link-underline-thickness: false; $govuk-link-hover-underline-thickness: false; ``` --- .../src/govuk/helpers/_links.scss | 14 +++-- .../src/govuk/helpers/links.test.js | 51 ------------------- .../src/govuk/settings/_links.scss | 13 ----- 3 files changed, 6 insertions(+), 72 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/helpers/_links.scss b/packages/govuk-frontend/src/govuk/helpers/_links.scss index 578d8e8f9c..bd1a76fcf3 100644 --- a/packages/govuk-frontend/src/govuk/helpers/_links.scss +++ b/packages/govuk-frontend/src/govuk/helpers/_links.scss @@ -30,14 +30,12 @@ @mixin govuk-link-decoration { text-decoration: underline; - @if $govuk-new-link-styles { - @if $govuk-link-underline-thickness { - text-decoration-thickness: $govuk-link-underline-thickness; - } + @if $govuk-link-underline-thickness { + text-decoration-thickness: $govuk-link-underline-thickness; + } - @if $govuk-link-underline-offset { - text-underline-offset: $govuk-link-underline-offset; - } + @if $govuk-link-underline-offset { + text-underline-offset: $govuk-link-underline-offset; } } @@ -50,7 +48,7 @@ /// @access public @mixin govuk-link-hover-decoration { - @if $govuk-new-link-styles and $govuk-link-hover-underline-thickness { + @if $govuk-link-hover-underline-thickness { text-decoration-thickness: $govuk-link-hover-underline-thickness; // Disable ink skipping on underlines on hover. Browsers haven't // standardised on this part of the spec yet, so set both properties diff --git a/packages/govuk-frontend/src/govuk/helpers/links.test.js b/packages/govuk-frontend/src/govuk/helpers/links.test.js index eaaefdb4d0..2e3177bf5d 100644 --- a/packages/govuk-frontend/src/govuk/helpers/links.test.js +++ b/packages/govuk-frontend/src/govuk/helpers/links.test.js @@ -31,38 +31,6 @@ describe('@mixin govuk-link-decoration', () => { }) }) - describe('when $govuk-new-link-styles are disabled', () => { - it('does not set text-decoration-thickness', async () => { - const sass = ` - $govuk-new-link-styles: false; - @import "base"; - - .foo { - @include govuk-link-decoration; - } - ` - - await expect(compileSassString(sass)).resolves.toMatchObject({ - css: expect.not.stringContaining('text-decoration-thickness') - }) - }) - - it('does not set text-underline-offset', async () => { - const sass = ` - $govuk-new-link-styles: false; - @import "base"; - - .foo { - @include govuk-link-decoration; - } - ` - - await expect(compileSassString(sass)).resolves.toMatchObject({ - css: expect.not.stringContaining('text-underline-offset') - }) - }) - }) - describe('when $govuk-link-underline-thickness is falsey', () => { it('does not set text-decoration-thickness', async () => { const sass = ` @@ -113,25 +81,6 @@ describe('@mixin govuk-link-hover-decoration', () => { }) }) - describe('when $govuk-new-link-styles are disabled', () => { - it('does not set a hover state', async () => { - const sass = ` - $govuk-new-link-styles: false; - @import "base"; - - // The mixin shouldn't return anything, so this selector ends up empty and - // is omitted from the CSS - .foo:hover { - @include govuk-link-hover-decoration; - } - ` - - await expect(compileSassString(sass)).resolves.toMatchObject({ - css: expect.not.stringContaining('.foo:hover') - }) - }) - }) - describe('when $govuk-link-hover-underline-thickness is falsey', () => { it('does not set a hover state', async () => { const sass = ` diff --git a/packages/govuk-frontend/src/govuk/settings/_links.scss b/packages/govuk-frontend/src/govuk/settings/_links.scss index 45fc2e5b43..3ea150679d 100644 --- a/packages/govuk-frontend/src/govuk/settings/_links.scss +++ b/packages/govuk-frontend/src/govuk/settings/_links.scss @@ -2,19 +2,6 @@ /// @group settings/links //// -/// Enable new link styles -/// -/// If enabled, the link styles will change. Underlines will: -/// -/// - be consistently thinner and a bit further away from the link text -/// - have a clearer hover state, where the underline gets thicker to make the -/// link stand out to users -/// -/// @type Boolean -/// @access public - -$govuk-new-link-styles: true !default; - /// Thickness of link underlines /// /// The default will be either: From 7798cfaa78b844234a3521246f13640dfdcc48f3 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Wed, 10 May 2023 10:31:16 +0100 Subject: [PATCH 2/2] Add PR to CHANGELOG --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 94d96887b5..f4aaade7ce 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,7 +19,7 @@ In GOV.UK Frontend v3.12.0 we introduced new link styles which: The new link styles are now enabled by default. If you are setting `$govuk-new-link-styles` to `true` in your Sass you can now remove this. -This change was made in [pull request #3599: Enable new link styles by default](https://github.com/alphagov/govuk-frontend/pull/3599). +This change was made in [pull request #3599: Enable new link styles by default](https://github.com/alphagov/govuk-frontend/pull/3599) and [pull request #3600: Remove new link styles feature flag](https://github.com/alphagov/govuk-frontend/pull/3600). ### Breaking changes