From 9888b675528b6426edb71dd221788de75eefc0dd Mon Sep 17 00:00:00 2001 From: owenatgov Date: Thu, 1 Jun 2023 16:12:30 +0100 Subject: [PATCH] Remove the first letter modifier from the tag component --- CHANGELOG.md | 2 ++ .../govuk-frontend/src/govuk/components/tag/_index.scss | 9 --------- 2 files changed, 2 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f5e7aedda2..3c399d7637 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,8 @@ The design of the tag component has changed to improve accessibility and readabi Text within the tag is no longer bold and uppercase with extra letter spacing, and is instead regular 19px text. Due to this, there may be changes to the width of existing tags. +We now longer transform the content of tags to be uppercase automatically and instead recommend the content of tags be lower case with the first word in a tag's content be capitalised. Please check that the contents of tags and tags within phase banners in your service are using the correct capitalisation. + The colours have also changed to make them more distinguishable from buttons. This change was made in [pull request #3502: Tag design changes](https://github.com/alphagov/govuk-frontend/pull/3502). diff --git a/packages/govuk-frontend/src/govuk/components/tag/_index.scss b/packages/govuk-frontend/src/govuk/components/tag/_index.scss index db51c762c5..1c4585b487 100644 --- a/packages/govuk-frontend/src/govuk/components/tag/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/tag/_index.scss @@ -33,15 +33,6 @@ } } - // Previously the whole tag was transformed to UPPERCASE. We’ve since decided to switch - // to title case to improve readability. The first letter is uppercased to ease the transition, - // as the text may be all lowercase within the HTML itself. - // - // 'capitalize' is used instead of 'uppercase' as a workaround for a spacing bug in Firefox. - .govuk-tag::first-letter { - text-transform: capitalize; - } - .govuk-tag--grey { color: govuk-shade(govuk-colour("dark-grey"), 50%); background-color: govuk-tint(govuk-colour("dark-grey"), 85%);