Skip to content

Commit

Permalink
Remove the first letter modifier from the tag component
Browse files Browse the repository at this point in the history
  • Loading branch information
owenatgov committed Jun 1, 2023
1 parent f98c65b commit 9888b67
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 9 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down
9 changes: 0 additions & 9 deletions packages/govuk-frontend/src/govuk/components/tag/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
Expand Down

0 comments on commit 9888b67

Please sign in to comment.