Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Better handle cases where govuk-text-colour is set to a non-colour value #2573

Merged
merged 7 commits into from
Mar 28, 2022

Conversation

daniel-ac-martin
Copy link
Contributor

@daniel-ac-martin daniel-ac-martin commented Mar 13, 2022

Was: Reinstate support for 'inherit' as a text colour

The use of the rgba function, which was added to work around a bug in
Safari, prevents users from setting $rgba-text-colour to inherit.
This is useful if you wish to control the text colour by cascading a
style down from, say, a body tag, which in turn is useful in order to
apply this control at run-time rather than build-time.

This fixes the problem by first testing for the value inherit. When
found we simply evaluate to inherit, which is probably the best we
can do in the circumstance. When it is not found we apply the rgba
trick.

Addresses: #2231

daniel-ac-martin and others added 2 commits March 13, 2022 20:02
The use of the `rgba` function, which was added to work around a bug in
Safari, prevents users from setting `$rgba-text-colour` to inherit.
This is useful if you wish to control the text colour by cascading a
style down from, say, a body tag, which in turn is useful in order to
apply this control at run-time rather than build-time.

This fixes the problem by first testing for the value `inherit`. When
found we simply evaluate to `inherit`, which is probably the best we
can do in the circumstance. When it is not found we apply the `rgba`
trick.
Adds some tests for the reinstated support for `inherit` as a
`$govuk-text-colour` in the `govuk-link-style-text` mixin.
@daniel-ac-martin daniel-ac-martin marked this pull request as ready for review March 13, 2022 20:42
@daniel-ac-martin
Copy link
Contributor Author

I couldn't find any tests for this mixin so I've tried to add some very simple ones to demonstrate the cases that this PR caters to.

When I ran the tests locally, I would get sporadic failures, due to time outs, in random tests. I'm assuming that is a known issue and is nothing to do with these changes.

Copy link
Contributor

@36degrees 36degrees left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for picking this up and contributing a fix! I have a suggestion which it'd be good to get your thoughts on.

When I ran the tests locally, I would get sporadic failures, due to time outs, in random tests. I'm assuming that is a known issue and is nothing to do with these changes.

Yep, we are having some issues with flakey tests at the minute – apologies.

src/govuk/helpers/_links.scss Outdated Show resolved Hide resolved
src/govuk/helpers/links.test.js Show resolved Hide resolved
daniel-ac-martin and others added 2 commits March 14, 2022 12:37
We wish to defend against passing `rgba()` a value that is not a colour, such as is the case with `inherit`.

Rather than testing for `inherit` specifically it is better to just test the type of the variable to see whether it is a colour or not.

We can also avoid setting the `:hover` state entirely which should reduce the size of the resulting CSS.

(Thanks to @36degrees for this suggestion.)

Co-authored-by: Oliver Byford <[email protected]>
The last commit optimised the code to remove the `:hover` state when it
isn't required, therefore we must no longer test for its presence.
Copy link
Contributor

@36degrees 36degrees left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @daniel-ac-martin – this looks good to me. Are you able to add this to the list of unreleased fixes in the changelog? We can do it, if you prefer.

@daniel-ac-martin
Copy link
Contributor Author

@36degrees: How's that?

@vanitabarrett vanitabarrett linked an issue Mar 17, 2022 that may be closed by this pull request
CHANGELOG.md Outdated Show resolved Hide resolved
@daniel-ac-martin daniel-ac-martin changed the title Reinstate support for 'inherit' as a text colour Better handle cases where govuk-text-colour is set to a non-colour value Mar 28, 2022
@vanitabarrett
Copy link
Contributor

Thanks @daniel-ac-martin , looks good to me! Just waiting for a second review from someone else in the team, and then this will be merged.

@36degrees 36degrees merged commit 09f8120 into alphagov:main Mar 28, 2022
@EoinShaughnessy EoinShaughnessy changed the title Better handle cases where govuk-text-colour is set to a non-colour value Better handle cases where govuk-text-colour is set to a non-colour value Mar 28, 2022
@daniel-ac-martin daniel-ac-martin deleted the patch-1 branch March 29, 2022 10:22
@daniel-ac-martin
Copy link
Contributor Author

@vanitabarrett: Any chance of a (patch?) release for this?

@vanitabarrett
Copy link
Contributor

@daniel-ac-martin the Design System team are working on a couple of things at the moment which might be ready for release soon, so we're going to see how they progress. It may make sense for us to wait and include them in a feature release in the next couple of weeks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Use of rgba() limits values for $govuk-text-colour
3 participants