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

Remove the first letter modifier from the tag component #3731

Merged
merged 1 commit into from
Jun 2, 2023

Conversation

owenatgov
Copy link
Contributor

@owenatgov owenatgov commented Jun 1, 2023

What

Removes the first-letter modifier from the tag component, added in the redesign in #3502, and updates the changelog to recommend teams check their content and ensure the first word of their tags are capitalised.

Why

In the tag redesign we added the first-letter selector as a way to get around the risk of teams having tags in older services that secretly have all lowercase content, hidden by the previous tag's text-transform: uppercase. We encountered a bug in firefox when testing this however where the width of the tag was incorrectly extended as if the contents of the entire tag had text-transform: uppercase applied instead of only the first letter. We changed this to text-transform: capitalize to get around this.

Since then, we've encountered further issues in our implementation:

  • the firefox bug is still present. If a tag contains several words, the same incorrect width starts to become visible as the size of the "fake" capital letters impact's firefox's width calculation
  • there is a kerning issue in firefox and safari when using the first-letter selector where the browsers will treat it as a separate inline element, most easily noticeable in the Turquoise tag example

After an internal discussion, we think that now the clever workaround has become too risky to use over asking teams update their tag content and risking tag capitalisation being inconsistent across GOV.UK for a period.

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3731 June 1, 2023 15:55 Inactive
@owenatgov owenatgov force-pushed the remove-tag-first-letter-capitalise branch from 9888b67 to 10b4f27 Compare June 1, 2023 15:55
@owenatgov owenatgov marked this pull request as ready for review June 1, 2023 15:55
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3731 June 1, 2023 15:56 Inactive
@owenatgov owenatgov requested a review from a team June 2, 2023 08:37
@owenatgov owenatgov added this to the v5.0 milestone Jun 2, 2023
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.

The change makes sense to me. I think we might want to look at the changelog entry to try and front-load the 'required action' a little more, but happy that we can do that as part of a wider review of the changelog as we get closer to shipping.

@owenatgov owenatgov merged commit 5fe6699 into main Jun 2, 2023
@owenatgov owenatgov deleted the remove-tag-first-letter-capitalise branch June 2, 2023 11:02
@frankieroberto
Copy link
Contributor

👍 makes sense to me

colinrotherham pushed a commit that referenced this pull request Jul 19, 2023
…lise

Remove the first letter modifier from the tag component
@romaricpascal romaricpascal mentioned this pull request Dec 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Development

Successfully merging this pull request may close these issues.

4 participants