From 794ccf80423a413295908b4f3cd2cedfd1b187a6 Mon Sep 17 00:00:00 2001 From: owenatgov Date: Wed, 3 May 2023 17:09:08 +0100 Subject: [PATCH] Remove `$govuk-typography-use-rem` setting --- .../src/govuk/components/input/_index.scss | 17 +- .../src/govuk/components/select/_index.scss | 5 +- .../src/govuk/helpers/_typography.scss | 10 +- .../src/govuk/helpers/typography.test.js | 161 +----------------- .../src/govuk/settings/_compatibility.scss | 3 - .../settings/_typography-responsive.scss | 37 ---- 6 files changed, 9 insertions(+), 224 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/components/input/_index.scss b/packages/govuk-frontend/src/govuk/components/input/_index.scss index 6791c98bd3..38661c71e1 100644 --- a/packages/govuk-frontend/src/govuk/components/input/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/input/_index.scss @@ -8,12 +8,8 @@ box-sizing: border-box; width: 100%; - height: 40px; - @if $govuk-typography-use-rem { - height: govuk-px-to-rem(40px); - } + height: govuk-px-to-rem(40px); margin-top: 0; - padding: govuk-spacing(1); // setting any background-color makes text invisible when changing colours to dark backgrounds in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1335476) // as background-color and color need to always be set together, color should not be set either @@ -131,15 +127,8 @@ box-sizing: border-box; display: inline-block; - min-width: 40px; - @if $govuk-typography-use-rem { - min-width: govuk-px-to-rem(40px); - } - height: 40px; - @if $govuk-typography-use-rem { - height: govuk-px-to-rem(40px); - } - + min-width: govuk-px-to-rem(40px); + height: govuk-px-to-rem(40px); padding: govuk-spacing(1); border: $govuk-border-width-form-element solid $govuk-input-border-colour; background-color: govuk-colour("light-grey", $legacy: "grey-3"); diff --git a/packages/govuk-frontend/src/govuk/components/select/_index.scss b/packages/govuk-frontend/src/govuk/components/select/_index.scss index 5c78b7e2d1..f6ace41dc4 100644 --- a/packages/govuk-frontend/src/govuk/components/select/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/select/_index.scss @@ -14,10 +14,7 @@ // - it fits comfortably on screens as narrow as 240px wide min-width: 11.5em; max-width: 100%; - height: 40px; - @if $govuk-typography-use-rem { - height: govuk-px-to-rem(40px); - } + height: govuk-px-to-rem(40px); padding: govuk-spacing(1); // was 5px 4px 4px - size of it should be adjusted to match other form elements border: $govuk-border-width-form-element solid $govuk-input-border-colour; diff --git a/packages/govuk-frontend/src/govuk/helpers/_typography.scss b/packages/govuk-frontend/src/govuk/helpers/_typography.scss index a02eb1a6e9..e2024a39fc 100644 --- a/packages/govuk-frontend/src/govuk/helpers/_typography.scss +++ b/packages/govuk-frontend/src/govuk/helpers/_typography.scss @@ -147,10 +147,7 @@ $line-height: $line-height if($important, !important, null); @if not $breakpoint { - font-size: $font-size; - @if $govuk-typography-use-rem { - font-size: $font-size-rem; - } + font-size: $font-size-rem; line-height: $line-height; } @else if $breakpoint == "print" { @include govuk-media-query($media-type: print) { @@ -159,10 +156,7 @@ } } @else { @include govuk-media-query($from: $breakpoint) { - font-size: $font-size; - @if $govuk-typography-use-rem { - font-size: $font-size-rem; - } + font-size: $font-size-rem; line-height: $line-height; } } diff --git a/packages/govuk-frontend/src/govuk/helpers/typography.test.js b/packages/govuk-frontend/src/govuk/helpers/typography.test.js index 33e8728b61..346dfaa95e 100644 --- a/packages/govuk-frontend/src/govuk/helpers/typography.test.js +++ b/packages/govuk-frontend/src/govuk/helpers/typography.test.js @@ -13,7 +13,7 @@ const sassConfig = { } } -let sassBootstrap = ` +const sassBootstrap = ` $govuk-breakpoints: ( desktop: 30em ); @@ -259,13 +259,11 @@ describe('@mixin govuk-typography-responsive', () => { .toMatchObject({ css: outdent` .foo { - font-size: 12px; font-size: 0.75rem; line-height: 1.25; } @media (min-width: 30em) { .foo { - font-size: 14px; font-size: 0.875rem; line-height: 1.4285714286; } @@ -288,7 +286,6 @@ describe('@mixin govuk-typography-responsive', () => { .toMatchObject({ css: outdent` .foo { - font-size: 12px; font-size: 0.75rem; line-height: 1.25; } @@ -333,13 +330,11 @@ describe('@mixin govuk-typography-responsive', () => { .toMatchObject({ css: outdent` .foo { - font-size: 12px !important; font-size: 0.75rem !important; line-height: 1.25 !important; } @media (min-width: 30em) { .foo { - font-size: 14px !important; font-size: 0.875rem !important; line-height: 1.4285714286 !important; } @@ -362,7 +357,6 @@ describe('@mixin govuk-typography-responsive', () => { .toMatchObject({ css: outdent` .foo { - font-size: 12px !important; font-size: 0.75rem !important; line-height: 1.25 !important; } @@ -392,13 +386,11 @@ describe('@mixin govuk-typography-responsive', () => { .toMatchObject({ css: outdent` .foo { - font-size: 12px; font-size: 0.75rem; line-height: 1.75; } @media (min-width: 30em) { .foo { - font-size: 14px; font-size: 0.875rem; line-height: 1.5; } @@ -408,151 +400,6 @@ describe('@mixin govuk-typography-responsive', () => { }) }) - describe('when $govuk-typography-use-rem is disabled', () => { - beforeEach(() => { - sassBootstrap = ` - @import "settings/warnings"; - ${sassBootstrap} - ` - }) - - it('outputs CSS with suitable media queries', async () => { - const sass = ` - $govuk-typography-use-rem: false; - ${sassBootstrap} - - .foo { - @include govuk-typography-responsive($size: 14) - } - ` - - await expect(compileSassString(sass)) - .resolves - .toMatchObject({ - css: outdent` - .foo { - font-size: 12px; - line-height: 1.25; - } - @media (min-width: 30em) { - .foo { - font-size: 14px; - line-height: 1.4285714286; - } - } - ` - }) - }) - - it('adjusts rem values based on root font size', async () => { - const sass = ` - $govuk-typography-use-rem: false; - $govuk-root-font-size: 10px; - ${sassBootstrap} - - .foo { - @include govuk-typography-responsive($size: 14) - } - ` - - await expect(compileSassString(sass)) - .resolves - .toMatchObject({ - css: outdent` - .foo { - font-size: 12px; - line-height: 1.25; - } - @media (min-width: 30em) { - .foo { - font-size: 14px; - line-height: 1.4285714286; - } - } - ` - }) - }) - - describe('and $important is set to true', () => { - it('marks font size and line height as important', async () => { - const sass = ` - $govuk-typography-use-rem: false; - ${sassBootstrap} - - .foo { - @include govuk-typography-responsive($size: 14, $important: true); - } - ` - - await expect(compileSassString(sass)) - .resolves - .toMatchObject({ - css: outdent` - .foo { - font-size: 12px !important; - line-height: 1.25 !important; - } - @media (min-width: 30em) { - .foo { - font-size: 14px !important; - line-height: 1.4285714286 !important; - } - } - ` - }) - }) - }) - - it('outputs a deprecation warning when set to false', async () => { - const sass = ` - $govuk-typography-use-rem: false; - ${sassBootstrap} - ` - - await compileSassString(sass, sassConfig) - - // Get the argument of the last @warn call, which we expect to be the - // deprecation notice - return expect(mockWarnFunction.mock.calls.at(-1)) - .toEqual(expect.arrayContaining([ - '$govuk-typography-use-rem is deprecated. From version 5.0, ' + - 'GOV.UK Frontend will not support disabling rem font sizes. To ' + - 'silence this warning, update $govuk-suppressed-warnings with ' + - 'key: "allow-not-using-rem"' - ])) - }) - }) - - describe('when compatibility mode is set', () => { - it('$govuk-typography-use-rem is disabled by default', async () => { - const sass = ` - $govuk-compatibility-govuktemplate: true; - ${sassBootstrap} - - .foo { - @include govuk-typography-responsive($size: 14) - } - ` - - await expect(compileSassString(sass)) - .resolves - .toMatchObject({ - css: outdent` - .foo { - font-size: 12px; - line-height: 1.25; - } - @media (min-width: 30em) { - .foo { - font-size: 14px; - line-height: 1.4285714286; - } - } - ` - }) - }) - }) - describe('@mixin govuk-font', () => { it('outputs all required typographic CSS properties', async () => { const sass = ` @@ -574,7 +421,6 @@ describe('@mixin govuk-typography-responsive', () => { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; - font-size: 12px; font-size: 0.75rem; line-height: 1.25; } @@ -585,7 +431,6 @@ describe('@mixin govuk-typography-responsive', () => { } @media (min-width: 30em) { .foo { - font-size: 14px; font-size: 0.875rem; line-height: 1.4285714286; } @@ -654,11 +499,11 @@ describe('@mixin govuk-typography-responsive', () => { const results = compileSassString(sass) await expect(results).resolves.toMatchObject({ - css: expect.stringContaining('font-size: 12px') + css: expect.stringContaining('font-size: 0.75rem') }) await expect(results).resolves.toMatchObject({ - css: expect.not.stringContaining('font-size: 14px') + css: expect.not.stringContaining('font-size: 0.875rem') }) }) diff --git a/packages/govuk-frontend/src/govuk/settings/_compatibility.scss b/packages/govuk-frontend/src/govuk/settings/_compatibility.scss index 09252fe787..11a3f76aa2 100644 --- a/packages/govuk-frontend/src/govuk/settings/_compatibility.scss +++ b/packages/govuk-frontend/src/govuk/settings/_compatibility.scss @@ -10,9 +10,6 @@ /// - switch GOV.UK Frontend to using the same colour palette as the legacy /// repos, by setting `$govuk-use-legacy-palette` to true. /// -/// - prevent GOV.UK Frontend from using rem for font sizing, by setting -/// `$govuk-typography-use-rem` to false. -/// /// @group settings/compatibility //// diff --git a/packages/govuk-frontend/src/govuk/settings/_typography-responsive.scss b/packages/govuk-frontend/src/govuk/settings/_typography-responsive.scss index 5bd09423d3..f02c2a968b 100644 --- a/packages/govuk-frontend/src/govuk/settings/_typography-responsive.scss +++ b/packages/govuk-frontend/src/govuk/settings/_typography-responsive.scss @@ -4,38 +4,6 @@ /// @group settings/typography //// -/// Whether or not to define font sizes in rem, improving accessibility by -/// allowing users to adjust the base font-size. This is enabled by default, -/// unless any of the compatibility mode settings are enabled. -/// -/// You should make sure that $govuk-root-font-size is set correctly for your -/// project. -/// -/// @type Boolean -/// @access public -/// @deprecated Will be removed in v5.0 with the rest of the compatibility mode -/// suite of tools and settings - -$govuk-typography-use-rem: if( - ( - $govuk-compatibility-govukfrontendtoolkit or - $govuk-compatibility-govuktemplate or - $govuk-compatibility-govukelements - ), - false, - true -) !default; - -// Only show the deprecation warning if user is setting $govuk-typography-use-rem -// manually instead of automatically via compatibility variables -@if $govuk-typography-use-rem == false and - $govuk-compatibility-govukfrontendtoolkit == false and - $govuk-compatibility-govuktemplate == false and - $govuk-compatibility-govukelements == false { - @include _warning(allow-not-using-rem, "$govuk-typography-use-rem is deprecated. " + - "From version 5.0, GOV.UK Frontend will not support disabling rem font sizes."); -} - /// Root font size /// /// This is used to calculate rem sizes for the typography, and should match the @@ -45,11 +13,6 @@ $govuk-typography-use-rem: if( /// in order to allow it to scale with user-preference, in which case this /// should be set to 16px. /// -/// If you are integrating Frontend into an existing project that also uses -/// alphagov/govuk_template and you wish to enable `$govuk-typography-use-rem` -/// then you should set this to 10px to match the 62.5% (10px) base font size -/// that govuk_template sets on the element. -/// /// @type Number /// @access public