search

govau / design-system-components

🛠 Component code and tests for the Australian Government design system
https://auds.service.gov.au
MIT License
738 stars 111 forks source link

`.au-text-input--number`: monospaced font, or font-variant property? #855

Open sukhrajghuman opened 4 years ago

sukhrajghuman commented 4 years ago

Right now, if we add the au-text-input--number it uses our monospace font like so:

It feels kind a bit inconsistent, having different font for number inputs.

image

I think we could make use of the font-variant: tabular-nums property, and keep the letter spacing, so it looks a bit like this instead:

image
gordongrace commented 4 years ago

Are we expecting the au-text-input--number class to always be combined with <input type="number">?

As an example, mobile number inputs could have non-numeric symbols like plus signs, parentheses, etc. and may be better suited to using simple <input type="text"> whilst inheriting default text input styling.

This puts the onus of input data cleanup back on the developer, but allows for much more forgiving (and predictable) text inputs from users.

Related: https://bradfrost.com/blog/post/you-probably-dont-need-input-typenumber/ https://html.spec.whatwg.org/multipage/input.html#number-state-(type%3Dnumber) https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric