Add extra letter spacing modifier for inputs

[36degrees]

This is a re-implementation of the changes in #1222.

---

Add an --extra-letter-spacing modifier for inputs which increases the spacing between letters and turns on tabular numbers.

The idea is that this modifier would be used for inputs asking for things like security codes, reference or phone numbers, where the user would be checking back one character at a time.

This was inspired by alphagov/notifications-admin#1545

Without modifier

With modifier

[frankieroberto]

@36degrees 🙌

[frankieroberto]

Is this still planned to get merged at some point?

[romaricpascal]

Hi @frankieroberto! Yup, the plan is to try and get this revived, reviewed by designers and add some guidance so we can get it in eventually 😄

[romaricpascal]

Added a changelog entry for the new class. Necessary, but also a way to get this merged and shipped without waiting to have more complete guidance in the Design System docs, which can come at a later stage (and be tracked in its own issue).

@36degrees @claireashworth Two questions:

1. Does the changelog read OK?
2. As I was writing it, occured to me that a better name for the modifier may be --digit-sequence (especially as it does more than adding letter spacing). Would it make sense to rename it?

[frankieroberto]

2. As I was writing it, occured to me that a better name for the modifier may be --digit-sequence (especially as it does more than adding letter spacing). Would it make sense to rename it?

I initially agreed with this, but then I thought you might also use it when asking people to input an alphanumeric code (or purely alphabetic?) in which case it might be confusing? And perhaps the letter spacing is more significant and obvious than the tabular numerals?

That said, I like the idea of having a more semantic name rather than one that just describes the styles applied (which might change). --code-sequence maybe?

[romaricpascal]

I initially agreed with this, but then I thought you might also use it when asking people to input an alphanumeric code (or purely alphabetic?) in which case it might be confusing? And perhaps the letter spacing is more significant and obvious than the tabular numerals?

That said, I like the idea of having a more semantic name rather than one that just describes the styles applied (which might change). --code-sequence maybe?

Yeah, digit is not really accurate there, that's true. Would code encompass phone numbers as well? Otherwise, maybe we could refer to "characters" (would it be understood as "non-digits" though?): --character-sequence or --character-by-character. Or maybe just --sequence without mentioning which kind of sequence it is: it's not really important and you're typing "characters" anyways, after all.

[querkmachine]

Of those options, I'd go for --character-sequence.

Hopefully, the folks using this may already be familiar with the idea that a character is just any one glyph—be it letter, digit, punctuation or whitespace—from the character count component. --sequence alone feels like it might be too vague?

[frankieroberto]

My thinking behind --code-sequence was to describe where this could be used - ie when the user is entering a code rather than a number or word. --character-sequence feels quite technical to me, and perhaps too vague (isn't everything a character sequence, including words?)

Language is hard though! Maybe --extra-letter-spacing was the clearest after all... 😂

[querkmachine]

I'm more inclined towards naming things after the purpose they serve, rather than what they are, but that isn't a hard and fast rule by any means.

However, as this style change is not only applying additional letter-spacing, but is also explicitly enabling tabular number formatting, I think it should be named something akin to --code-sequence in favour of --extra-letter-spacing. The former feels more accurate and more future-proof, in my mind.

[calvin-lau-sig7]

Suggestions:
If it's fixed spacing (monospacing, fixed-character-spacing)
It it's just a little extra space being added in there (extra-spacing, distinct-spacing, separated-spacing)

[calvin-lau-sig7]

Suggestion: readable-spacing

Or:

• readable-characters
• monospacing
• fixed-character-spacing
• extra-spacing
• distinct-spacing
• separated-spacing

[querkmachine]

Suggestions:
If it's fixed spacing (monospacing, fixed-character-spacing)
It it's just a little extra space being added in there (extra-spacing, distinct-spacing, separated-spacing)

I think that's part of the contention, @calvin-lau-sig7 — it's both!

[owenatgov]

Jumping in with the opinion that we should keep the name as simple as possible. I think --extra-letter-spacing is a fine choice. Says what it does in the broad sense. I also like --monospacing or --monospaced as a catch-all.

At the end of the day though there is a ceiling to what value we can get out of picking the perfect word or phrase to explain what it's doing. I don't think we need to split hairs on precision of what we choose (appreciate I just contributed to this!). What it is now seems to do the job, in my opinion.

[romaricpascal]

Let's keep it --extra-letter-spacing then 😄

[frankieroberto]

@querkmachine woohoo! 🙌

Can you add this modifier to confirm a phone number inputs?

[querkmachine]

@frankieroberto I think this might warrant a bit more documentation outside of updating certain examples, so I've opened an issue for it here: alphagov/govuk-design-system#2665