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

Use tabular numbers for character count message #2092

Merged
merged 2 commits into from
Jan 11, 2021

Conversation

quis
Copy link
Member

@quis quis commented Jan 7, 2021

By default different numbers take up different amounts of horizontal space, for example ‘1’ is narrower than ‘0’, just like an ‘i’ is narrower than an ‘m’.

In the character count component the amount of space take up by the message changes as the user types. This causes the words after the count (‘characters remaining’) to jump around in a distracting way.

Tabular numbers take up a fixed amount of space, which means the words after the count do not change position as long as the count maintains the same number of digits (which will be true for most keystrokes).

Before

cc-lining

After

cc-tabular

By default different numbers take up different amounts of horizontal space, for example ‘1’ is narrower than ‘0’, just like an ‘i’ is narrower than an ‘m’.

This means that in the character count message the amount of space take up by the count varies as the user types. This causes the words after the count (‘characters remaining’) to jump around in a distracting way.

Tabular numbers take up a fixed amount of space, which means the words after the count do not shift position while the count maintains the same number of digits.
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-2092 January 8, 2021 09:57 Inactive
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 this @quis – seems like a really sensible change and shows a great attention to detail 👍🏻 Would you mind adding an entry to the changelog?

Then we just need a second approval from someone else on the team and we can get this merged.

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-2092 January 8, 2021 12:24 Inactive
@quis
Copy link
Member Author

quis commented Jan 8, 2021

Thanks @36degrees, I’ve updated the changelog in 7e75d73

@36degrees 36degrees added this to the [NEXT] milestone Jan 8, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Development

Successfully merging this pull request may close these issues.

4 participants