Add initial research for a number input

[lukewarlow]

No description provided.

[gregwhitworth]

First off, I want to say thank you so much for this effort @lukewarlow - this is wonderful. One thing that I'd request for you to add in other form factor examples (watch, phone, etc) of this same input to ensure that the anatomy is covering those. Along with this PR, I'd also like a general explainer that still will live under research and will enable you to explain usecases, your proposed anatomy, why that's what you're proposing (what usecases did you leave off), behaviors, your reasoning for the naming you're initially proposing and interesting things you've found. While it does not need to be nearly as long as this one (as it had ~3-4 people authoring it) the tabs research explainer is a good one. Again, think 1-2 pages max; and I'm happy to tag team on Google doc or markdown; this is meant to be scratchpad work in the research area - not a formal proposal.

[lukewarlow]

Sorry for the slow response on this. I'm planning on addressing your comments this weekend thanks for the review!

[lukewarlow]

I'm going to make a google doc for this and jot down general bullet points of things that might be worth mentioning. Writing isn't particularly my forte so bulleting stuff and then some back and forth to flesh it out is probably the best approach.

[lukewarlow]

I'm going to make a google doc for this and jot down general bullet points of things that might be worth mentioning. Writing isn't particularly my forte so bulleting stuff and then some back and forth to flesh it out is probably the best approach.

For now here's my jot down of thoughts. Which would be preferable a google doc or some sort of markdown editor for fleshing this out?

---

Some of the below notes may be out of scope for OpenUI just noting them down for the sake of completeness.

Chromium / WebKit structure

`::placeholder` - OpenUI “placeholder” slot `::-webkit-inner-spin-button` - OpenUI “spinner” slot

Firefox structure (the basis for the anatomy)

`::placeholder` - OpenUI placeholder slot `::-moz-number-spin-box` (internal only) - OpenUI “spinner” slot `::-moz-number-spin-up` (internal only) - OpenUI “spinner-button-up” slot `::-moz-number-spin-down` (internal only) - OpenUI “spinner-button-down” slot

Based on the checkbox OpenUI example this should perhaps include a label as part of the anatomy. I’ve left it out for now as I’ve been more thinking about browsers than components but I believe it should be added. Perhaps it’s worth making a basic openui-input anatomy that other specific component types can make use of?

Currently the spinner is inside of the input because this is how it is in browsers. However, it might make sense to be a sibling?

A benefit to having the spinner be so verbose is that you could potentially style it like the Carbon design system where it’s a horizontally sideways - and + button group. Or even potentially like Lion’s where it has “spinner-button-down” on the left of the input and “spinner-button-down” on the right.

Important to make clear this is specifically for increments. Shouldn’t be used for values that just happen to be numeric. https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/

Number inputs are editable using a keyboard to type much like a standard input.
They also share many commonalities with other inputs such as being able to be disabled or marked as readonly.

On top of these common behaviours it can also have a “min” or “max” validation applied to it.

It can also be edited with keyboard arrow keys, by scrolling with trackpad or mouse scrollwheel, or using the provided “spinner” buttons with a mouse. The amount by which these “increment”/”decrement” actions change the value can be dictated by a “step” attribute.

(The spinner UI is currently not keyboard focusable or exposed to screen readers not sure if they should be or if that’s a concern for open ui?).

Firefox and Safari display the spinner by default, Chromium shows it on hover/focus.

Mobile browsers don’t display the spinner at all.

Where a virtual keyboard is used this input uses an input mode of numeric.

Should be exposed as the "spinbutton" aria role.

[lukewarlow]

Just a note of a thought for me to think about more later. Is it worth adding the gov.uk design system to the OpenUI catalog?

[gregwhitworth]

@lukewarlow yeah, go ahead and spin up a Google doc and we can rough out an explainer together. The placeholder anatomy item is timely since we were just discussing this in the past week for selectlist.

[lukewarlow]

https://docs.google.com/document/d/13_Dxxszw2j8ELYUi2FAKPkeUZ1ddcKUnX_ZRGqPErXs/edit?usp=sharing here's a link to a google doc should provide edit access. Currently just got the above comment noted down.

[Totati]

I'm not sure about what can be in this research, but I would like to chime in how differently Chromium and Firefox treat the decimal separator. In this example when you try it on Chromium, the decimal separator is set by the browser based on the display language of the browser and can't be changed, while Firefox lets you change it with the lang attribute.

[lukewarlow]

Is it worth us getting this merged (happy to remove stuff like the anatomy and just have the research) and then do the extra stuff as a follow up?

[lukewarlow]

I've stripped this back to just basic research with the explainer and proposed anatomy moving to #861 that way the final bit doesn't block the initial research landing.

Completed

[lukewarlow]

@gregwhitworth are you able to approve this to land the research. Then I can resurrect the explainer?