Add extra tracking modifier for inputs

[36degrees]

This adds a --extra-tracking modifier for inputs which increases the tracking, and turns on tabular numbers.

The idea is that this modifier would be used for inputs asking for e.g. 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

Questions…

• is this useful?
• is there a better name than --extra-tracking?
• is it an issue that the width modifiers behave differently, because 1ex has a different width?

[NickColley]

Is this useful?

We could raise this on the backlog as a suggestion, since this could be quick for service teams to implement and try out?

[quis]

Thanks for picking this up, I’d be really happy to see it go into the Design System. Couple of thoughts:

Naming things

Would --extra-letter-spacing or --more-letter-spacing be better names? Although ‘tracking’ means the same thing (in a typography context) it is ambiguous. Letter spacing is also a commonly-used term; letter-spacing is the name of the CSS property.

Spaces

Something that came up discussing this with @tombye

Should there be/is there some associated guidance about being forgiving about spaces being typed in these kinds of field? There’s some discussion on the phone numbers issue in the backlog already, but it feels like a wider thing than that.

People often use spaces to ‘chunk’ long numbers (phone numbers, credit card numbers, licence numbers) to make them easier to transcribe. Services should be forgiving of this and not respond with validation errors.

[36degrees]

Closing this for now as it's been deprioritised.

[quis]

Noticed a nice example of this from Amazon the other day:

[frankieroberto]

@36degrees @timpaul any chance of resurrecting this? I think it could be useful for a number of patterns asking for numerical codes, including security (2FA) codes.