Rename govuk-typography-responsive to govuk-font-size
#4291
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-4291
📋 StatsFile sizes
Modules
View stats and visualisations on the review app Action run for 26f894d |
| @@ -114,7 +138,7 @@ | |||
| /// | |||
| /// @access public | |||
|
|
|||
| @mixin govuk-typography-responsive($size, $override-line-height: false, $important: false) { | |||
| @mixin govuk-font-size($size, $override-line-height: false, $important: false) { | |||
There was a problem hiding this comment.
Fab work in this PR 🙌
Do we align govuk-font() and govuk-font-size() and use $line-height in both?
Suggested change
| @mixin govuk-font-size($size, $override-line-height: false, $important: false) { | |
| @mixin govuk-font-size($size, $line-height: false, $important: false) { |
There was a problem hiding this comment.
I think yes. This is going to be released with the initial deprecation alongside changes to our docs, so it's potentially more likely that, if we release these holistically, there will be fewer instances of users changing govuk-typography-responsive to govuk-font-size and more instances of changing an incorrect use of govuk-font to govuk-font-size. Aligning these values would make that part of the update a little simpler.
There was a problem hiding this comment.
Done. I ran into some interesting problems with doing this. We already use a var called $line-height in the mixin and it was being renamed on every loop which led to _govuk-line-height breaking:
govuk-frontend/packages/govuk-frontend/src/govuk/helpers/_typography.scss
Lines 128 to 131 in f837f9c
I fixed it by renaming
$line-height to $calculated-line-height. Not my finest work naming wise so I'm open to alternatives.
Additionally I'm not sure if I should also deprecate this in govuk-typography-responsive. My instinct says no.
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-4291
36degrees
reviewed
Oct 4, 2023
| @@ -241,13 +241,36 @@ describe('@mixin govuk-typography-responsive', () => { | |||
| ) | |||
| }) | |||
|
|
|||
| // govuk-typography-responsive is the previous name for govuk-font-size | |||
| it('throws a deprecation warning if govuk-typography-responsive is used', async () => { | |||
There was a problem hiding this comment.
Can we also test that govuk-typography-responsive still does what we expect? i.e. that when all arguments are passed it generates the expected CSS output?
(Could potentially call govuk-typography-responsive and govuk-font with the same arguments and expect they match?)
There was a problem hiding this comment.
I've reorganised the govuk-typography-responsive testing to cover this. I only tested against the basic govuk-font-size test as I was finding testing against govuk-font tricky to do without a lot of messy string manipulation. This might be my own misunderstanding of our embedded sass strings.
I don't know if this needs further testing against govuk-font-size like if $line-height or $important are set.
There was a problem hiding this comment.
Like how you've organised that, makes sense 👍🏻
I do think it'd be most valuable to test with all three arguments so we know they're all being passed as expected. For example, if we just forgot to pass the $important param to govuk-font-size all our tests would still pass at the mo.
From a quick play I think something like this would work:
it('outputs the same CSS as govuk-font-size', async () => {
const sass = `
${sassBootstrap}
.foo {
@include govuk-typography-responsive(
$size: 14,
$override-line-height: 40px,
$important: true
)
}
`
const expectedSass = `
${sassBootstrap}
.foo {
@include govuk-font-size(
$size: 14,
$line-height: 40px,
$important: true
)
}
`
await expect(compileSassString(sass)).resolves.toMatchObject({
css: (await compileSassString(expectedSass)).css
})
})
But I'm not sure if that's the most idiomatic way of comparing the results of two promises – perhaps @colinrotherham can advise?
There was a problem hiding this comment.
Aha that's a much better idea. I'll have a go at implementing that for the mo.
There was a problem hiding this comment.
Multiple correct answers!
If concurrent compiling isn't a must there's always:
const { css: result1 } = await compileSassString('Example 1')
const { css: result2 } = await compileSassString('Example 2')
expect(result1).toEqual(result2)Or start the promises running early but await them later?
But Jest has no expectAsync() like Jasmine so odd using .resolves for the 1st promise and await the 2nd
const result1 = compileSassString('Example 1')
const result2 = compileSassString('Example 2')
await expect(result1).resolves.toEqual(await result2)Or chain them in advance so each promise awaits to CSS in readiness?
const css1 = compileSassString('Example 1')
.then(({ css }) => css)
const css2 = compileSassString('Example 2')
.then(({ css }) => css)
await expect(css1).resolves.toEqual(await css2)Or combine them into a single await Promise.all() for comparison?
const [result1, result1] = await Promise.all([
compileSassString('Example 1'),
compileSassString('Example 2')
])
expect(result1).toEqual(result2)Or combine them into a single await Promise.all() but extract the CSS after?
const [css1, css2] = await Promise.all([
compileSassString('Example 1'),
compileSassString('Example 2')
]).then((results) => results.map(({ css }) => css))
expect(css1).toEqual(css2)Can use as much or little shorthand as you like:
- ]).then((results) => results.map(({ css }) => css))
+ ]).then((results) => results.map((result) => result.css))Or split out the .map() onto another line if it's clearer?
const results = await Promise.all([
compileSassString('Example 1'),
compileSassString('Example 2')
])
const [result1, result2] = results.map(({ css }) => css)
expect(result1).toEqual(result2)There was a problem hiding this comment.
Can't leave out for await...of but shame we only have one result for comparison:
const result = await compileSassString('Example 1')
const results = [
compileSassString('Example 2'),
compileSassString('Example 3'),
compileSassString('Example 4')
]
for await (const { css } of results) {
expect(css).toEqual(result.css)
}There was a problem hiding this comment.
Thanks for this Colin! As you said, lots of correct answers. I'm going to take the lazy way out and say lets figure this out closer to the point at which this is going out. I get the impression as a pre-review we're fairly happy with this in prospect.
|
@36degrees Before I address review, to be clear I'm not planning on releasing this until after 5.0 is out. It's currently categorised in the epic under the heading "5.X release before the initial release of the new scale". I think I need to find a way to be clearer about how these things are categorised and when we plan to put them out. |
owenatgov
force-pushed
the
rename-govuk-typography-responsive
branch
from
8b16119
to
64e06d6
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-4291
owenatgov
force-pushed
the
rename-govuk-typography-responsive
branch
from
64e06d6
to
9f0078e
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-4291
owenatgov
force-pushed
the
rename-govuk-typography-responsive
branch
from
9f0078e
to
4a589d5
Compare
|
@owenatgov Mind fixing the conflict and rebasing so we can weigh up the diff changes? It's going to be good one |
owenatgov
force-pushed
the
rename-govuk-typography-responsive
branch
from
4a589d5
to
4e1c5d5
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-4291
Other changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/components/accordion/_index.scss b/packages/govuk-frontend/dist/govuk/components/accordion/_index.scss
index aa5c4ada1..c6f18932c 100644
--- a/packages/govuk-frontend/dist/govuk/components/accordion/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/accordion/_index.scss
@@ -294,7 +294,7 @@
// Add toggle link with Chevron icon on left.
.govuk-accordion__section-toggle {
- @include govuk-typography-responsive($size: 19);
+ @include govuk-font-size($size: 19);
@include govuk-typography-weight-regular;
color: $govuk-link-colour;
}
diff --git a/packages/govuk-frontend/dist/govuk/components/back-link/_index.scss b/packages/govuk-frontend/dist/govuk/components/back-link/_index.scss
index 1d0963243..62e07a424 100644
--- a/packages/govuk-frontend/dist/govuk/components/back-link/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/back-link/_index.scss
@@ -13,7 +13,7 @@
$chevron-border-colour: $govuk-secondary-text-colour;
.govuk-back-link {
- @include govuk-typography-responsive($size: $font-size);
+ @include govuk-font-size($size: $font-size);
@include govuk-link-common;
@include govuk-link-style-text;
diff --git a/packages/govuk-frontend/dist/govuk/components/button/_index.scss b/packages/govuk-frontend/dist/govuk/components/button/_index.scss
index 2615ce598..0df98a4f8 100644
--- a/packages/govuk-frontend/dist/govuk/components/button/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/button/_index.scss
@@ -236,7 +236,7 @@ $govuk-inverse-button-text-colour: $govuk-brand-colour !default;
.govuk-button--start {
@include govuk-typography-weight-bold;
- @include govuk-typography-responsive($size: 24, $override-line-height: 1);
+ @include govuk-font-size($size: 24, $line-height: 1);
display: inline-flex;
min-height: auto;
diff --git a/packages/govuk-frontend/dist/govuk/components/error-summary/_index.scss b/packages/govuk-frontend/dist/govuk/components/error-summary/_index.scss
index 5e7290383..a472c4c1d 100644
--- a/packages/govuk-frontend/dist/govuk/components/error-summary/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/error-summary/_index.scss
@@ -15,7 +15,7 @@
}
.govuk-error-summary__title {
- @include govuk-typography-responsive($size: 24);
+ @include govuk-font-size($size: 24);
@include govuk-typography-weight-bold;
margin-top: 0;
diff --git a/packages/govuk-frontend/dist/govuk/components/fieldset/_index.scss b/packages/govuk-frontend/dist/govuk/components/fieldset/_index.scss
index c0ddc5706..1045ca393 100644
--- a/packages/govuk-frontend/dist/govuk/components/fieldset/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/fieldset/_index.scss
@@ -43,15 +43,15 @@
}
.govuk-fieldset__legend--xl {
- @include govuk-typography-responsive($size: 48);
+ @include govuk-font-size($size: 48);
}
.govuk-fieldset__legend--l {
- @include govuk-typography-responsive($size: 36);
+ @include govuk-font-size($size: 36);
}
.govuk-fieldset__legend--m {
- @include govuk-typography-responsive($size: 24);
+ @include govuk-font-size($size: 24);
}
.govuk-fieldset__legend--s {
diff --git a/packages/govuk-frontend/dist/govuk/components/header/_index.scss b/packages/govuk-frontend/dist/govuk/components/header/_index.scss
index 08865369e..919f708d4 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/header/_index.scss
@@ -61,7 +61,7 @@
$product-name-offset: 10px;
$product-name-offset-tablet: 5px;
- @include govuk-typography-responsive($size: 24, $override-line-height: 1);
+ @include govuk-font-size($size: 24, $line-height: 1);
@include govuk-typography-weight-regular;
display: inline-table;
@@ -150,7 +150,7 @@
.govuk-header__service-name {
display: inline-block;
margin-bottom: govuk-spacing(2);
- @include govuk-typography-responsive($size: 24);
+ @include govuk-font-size($size: 24);
@include govuk-typography-weight-bold;
}
@@ -272,7 +272,7 @@
}
a {
- @include govuk-typography-responsive($size: 16);
+ @include govuk-font-size($size: 16);
@include govuk-typography-weight-bold;
white-space: nowrap;
}
diff --git a/packages/govuk-frontend/dist/govuk/components/label/_index.scss b/packages/govuk-frontend/dist/govuk/components/label/_index.scss
index 43a4d2c3a..aaacd85e2 100644
--- a/packages/govuk-frontend/dist/govuk/components/label/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/label/_index.scss
@@ -17,15 +17,15 @@
}
.govuk-label--xl {
- @include govuk-typography-responsive($size: 48);
+ @include govuk-font-size($size: 48);
}
.govuk-label--l {
- @include govuk-typography-responsive($size: 36);
+ @include govuk-font-size($size: 36);
}
.govuk-label--m {
- @include govuk-typography-responsive($size: 24);
+ @include govuk-font-size($size: 24);
}
.govuk-label--s {
diff --git a/packages/govuk-frontend/dist/govuk/components/notification-banner/_index.scss b/packages/govuk-frontend/dist/govuk/components/notification-banner/_index.scss
index 3a62d8cb0..864ef1acd 100644
--- a/packages/govuk-frontend/dist/govuk/components/notification-banner/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/notification-banner/_index.scss
@@ -26,7 +26,7 @@
.govuk-notification-banner__title {
// Set the size again because this element is a heading and the user agent
// font size overrides the inherited font size
- @include govuk-typography-responsive($size: 19);
+ @include govuk-font-size($size: 19);
@include govuk-typography-weight-bold;
margin: 0;
padding: 0;
@@ -65,7 +65,7 @@
}
.govuk-notification-banner__heading {
- @include govuk-typography-responsive($size: 24);
+ @include govuk-font-size($size: 24);
@include govuk-typography-weight-bold;
margin: 0 0 govuk-spacing(3) 0;
diff --git a/packages/govuk-frontend/dist/govuk/components/panel/_index.scss b/packages/govuk-frontend/dist/govuk/components/panel/_index.scss
index eec2da5e4..215598cfc 100644
--- a/packages/govuk-frontend/dist/govuk/components/panel/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/panel/_index.scss
@@ -40,7 +40,7 @@
}
.govuk-panel__title {
- @include govuk-typography-responsive($size: 48);
+ @include govuk-font-size($size: 48);
@include govuk-typography-weight-bold;
margin-top: 0;
margin-bottom: govuk-spacing(6);
diff --git a/packages/govuk-frontend/dist/govuk/components/phase-banner/_index.scss b/packages/govuk-frontend/dist/govuk/components/phase-banner/_index.scss
index 7cc2bedb7..77424b56a 100644
--- a/packages/govuk-frontend/dist/govuk/components/phase-banner/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/phase-banner/_index.scss
@@ -17,7 +17,7 @@
}
.govuk-phase-banner__content__tag {
- @include govuk-typography-responsive($size: 16);
+ @include govuk-font-size($size: 16);
margin-right: govuk-spacing(2);
// When forced colour mode is active, for example to provide high contrast,
diff --git a/packages/govuk-frontend/dist/govuk/components/skip-link/_index.scss b/packages/govuk-frontend/dist/govuk/components/skip-link/_index.scss
index 7292e8f2f..9ca6fde4b 100644
--- a/packages/govuk-frontend/dist/govuk/components/skip-link/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/skip-link/_index.scss
@@ -4,7 +4,7 @@
@include govuk-typography-common;
@include govuk-link-decoration;
@include govuk-link-style-text;
- @include govuk-typography-responsive($size: 16);
+ @include govuk-font-size($size: 16);
display: block;
padding: govuk-spacing(2) govuk-spacing(3);
diff --git a/packages/govuk-frontend/dist/govuk/components/summary-list/_index.scss b/packages/govuk-frontend/dist/govuk/components/summary-list/_index.scss
index 4d0746c5e..992136e27 100644
--- a/packages/govuk-frontend/dist/govuk/components/summary-list/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/summary-list/_index.scss
@@ -202,7 +202,7 @@
}
.govuk-summary-card__actions {
- @include govuk-typography-responsive($size: 19);
+ @include govuk-font-size($size: 19);
@include govuk-typography-weight-bold;
display: flex;
flex-wrap: wrap;
diff --git a/packages/govuk-frontend/dist/govuk/components/table/_index.scss b/packages/govuk-frontend/dist/govuk/components/table/_index.scss
index fdeb6ed37..d27b2060b 100644
--- a/packages/govuk-frontend/dist/govuk/components/table/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/table/_index.scss
@@ -50,15 +50,15 @@
}
.govuk-table__caption--xl {
- @include govuk-typography-responsive($size: 48);
+ @include govuk-font-size($size: 48);
}
.govuk-table__caption--l {
- @include govuk-typography-responsive($size: 36);
+ @include govuk-font-size($size: 36);
}
.govuk-table__caption--m {
- @include govuk-typography-responsive($size: 24);
+ @include govuk-font-size($size: 24);
}
}
diff --git a/packages/govuk-frontend/dist/govuk/components/tabs/_index.scss b/packages/govuk-frontend/dist/govuk/components/tabs/_index.scss
index cdf3d5bf0..a0e628067 100644
--- a/packages/govuk-frontend/dist/govuk/components/tabs/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/tabs/_index.scss
@@ -8,7 +8,7 @@
.govuk-tabs__title {
// Set the size and weight again because this element is a heading and the
// user agent font size overrides the inherited font size
- @include govuk-typography-responsive($size: 19);
+ @include govuk-font-size($size: 19);
@include govuk-typography-weight-regular;
@include govuk-text-colour;
margin-bottom: govuk-spacing(2);
diff --git a/packages/govuk-frontend/dist/govuk/helpers/_typography.scss b/packages/govuk-frontend/dist/govuk/helpers/_typography.scss
index 218cbe62b..cb60a0123 100644
--- a/packages/govuk-frontend/dist/govuk/helpers/_typography.scss
+++ b/packages/govuk-frontend/dist/govuk/helpers/_typography.scss
@@ -80,7 +80,31 @@
@return $line-height;
}
-/// Responsive typography helper
+/// Font size and line height helper
+///
+/// @param {Number} $size - Point from the spacing scale (the size as it would
+/// appear on tablet and above)
+/// @param {Number} $override-line-height [false] - Non responsive custom line
+/// height. Omit to use the line height from the font map.
+/// @param {Boolean} $important [false] - Whether to mark declarations as
+/// `!important`.
+///
+/// @throw if `$size` is not a valid point from the spacing scale
+///
+/// @access public
+///
+/// @alias govuk-font-size
+/// @deprecated Use `govuk-font-size` instead
+
+@mixin govuk-typography-responsive($size, $override-line-height: false, $important: false) {
+ @include _warning(
+ "govuk-typography-responsive",
+ "govuk-typography-responsive is deprecated. Use govuk-font-size instead."
+ );
+ @include govuk-font-size($size, $override-line-height, $important);
+}
+
+/// Font size and line height helper
///
/// Takes a point from the responsive 'font map' as an argument (the size as it
/// would appear on tablet and above), and uses it to create font-size and
@@ -105,7 +129,7 @@
///
/// @param {Number} $size - Point from the spacing scale (the size as it would
/// appear on tablet and above)
-/// @param {Number} $override-line-height [false] - Non responsive custom line
+/// @param {Number} $line-height [false] - Non responsive custom line
/// height. Omit to use the line height from the font map.
/// @param {Boolean} $important [false] - Whether to mark declarations as
/// `!important`.
@@ -114,7 +138,7 @@
///
/// @access public
-@mixin govuk-typography-responsive($size, $override-line-height: false, $important: false) {
+@mixin govuk-font-size($size, $line-height: false, $important: false) {
@if not map-has-key($govuk-typography-scale, $size) {
@error "Unknown font size `#{$size}` - expected a point from the typography scale.";
}
@@ -125,8 +149,14 @@
$font-size: map-get($breakpoint-map, "font-size");
$font-size-rem: govuk-px-to-rem($font-size);
- $line-height: _govuk-line-height(
- $line-height: if($override-line-height, $override-line-height, map-get($breakpoint-map, "line-height")),
+ // $calculated-line-height is a separate variable from $line-height,
+ // as otherwise the value would get redefined with each loop and
+ // eventually break _govuk-line-height.
+ //
+ // We continue to call the param $line-height to stay consistent with the
+ // naming with govuk-font.
+ $calculated-line-height: _govuk-line-height(
+ $line-height: if($line-height, $line-height, map-get($breakpoint-map, "line-height")),
$font-size: $font-size
);
@@ -135,20 +165,20 @@
// are used in calculations
$font-size: $font-size if($important, !important, null);
$font-size-rem: $font-size-rem if($important, !important, null);
- $line-height: $line-height if($important, !important, null);
+ $calculated-line-height: $calculated-line-height if($important, !important, null);
@if not $breakpoint {
font-size: $font-size-rem;
- line-height: $line-height;
+ line-height: $calculated-line-height;
} @else if $breakpoint == "print" {
@include govuk-media-query($media-type: print) {
font-size: $font-size;
- line-height: $line-height;
+ line-height: $calculated-line-height;
}
} @else {
@include govuk-media-query($from: $breakpoint) {
font-size: $font-size-rem;
- line-height: $line-height;
+ line-height: $calculated-line-height;
}
}
}
@@ -186,7 +216,7 @@
}
@if $size {
- @include govuk-typography-responsive($size, $override-line-height: $line-height);
+ @include govuk-font-size($size, $line-height);
}
}
diff --git a/packages/govuk-frontend/dist/govuk/overrides/_typography.scss b/packages/govuk-frontend/dist/govuk/overrides/_typography.scss
index 389b93539..8859b7d18 100644
--- a/packages/govuk-frontend/dist/govuk/overrides/_typography.scss
+++ b/packages/govuk-frontend/dist/govuk/overrides/_typography.scss
@@ -5,7 +5,7 @@
// typography scale eg .govuk-\!-font-size-80
@each $size in map-keys($govuk-typography-scale) {
.govuk-\!-font-size-#{$size} {
- @include govuk-typography-responsive($size, $important: true);
+ @include govuk-font-size($size, $important: true);
}
}
Action run for 26f894d |
colinrotherham
approved these changes
Dec 18, 2023
owenatgov
force-pushed
the
rename-govuk-typography-responsive
branch
from
4e1c5d5
to
9490b64
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-4291
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-4291
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-4291
owenatgov
force-pushed
the
rename-govuk-typography-responsive
branch
from
010c80b
to
f93d8fa
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-4291
This means that govuk-font-size is consistent with govuk-font, making them easier to use interchangeably.
Update CHANGELOG.md Co-Authored-By: Calvin Lau <77630796+calvin-lau-sig7@users.noreply.github.com>
owenatgov
force-pushed
the
rename-govuk-typography-responsive
branch
from
f93d8fa
to
26f894d
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-4291
calvin-lau-sig7
approved these changes
Jan 4, 2024
Merged
This was referenced Jun 19, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Renames
govuk-typography-responsivetogovuk-font-size, deprecatesgovuk-typography-responsive, removes internal use of the old name and adds a test to check for the deprecation waring.Fixes #4243. More details in the issue.