Add Spectrum CSS Number Field (Stepper) Pattern

[Westbrook]

Expected Behaviour

https://opensource.adobe.com/spectrum-css/stepper.html should be available in the library.

Actual Behaviour

Missing

The future

[Westbrook]

This is a "contribution" pattern for Spectrum CSS (not included in Spectrum). Hopefully, the support in https://www.npmjs.com/package/@spectrum-css/stepper is still reliable to form this pattern. If not, be sure to touch base with the Spectrum team/your own design to help formulate any missing styles.

[Westbrook]

This pattern is based off of the code in @spectrum-css/[email protected] which has breaking changes from our current implementation, work here should be held until that work is completed.

#513
#543

[Westbrook]

When looking at the beta release of this pattern, there are two things that jump out immediately as presenting new difficulty to our library's processing of the Spectrum CSS packages:

1. A selector like .spectrum-Stepper-stepDown expects to apply styles directly on the <button> within the shadow DOM of an <sp-field-button> element. We can reach out to Spectrum CSS about why they aren't leveraging CSS Custom Properties here, but the idea of having :host() element wrapping the <button> in this case is pretty Custom Element specific and something we're not likely to get changed. With that true, the process of converting their output CSS into our component CSS will become much more complicated.
2. A selector like .spectrum-Stepper-input intends to target the <input> element inside of an sp-textfield element. We can reach out to Spectrum CSS about why they aren't leveraging CSS Custom Properties here, but in that this is a fairly BEM-like practice, I'm not sure we'll be able to get that changed at their level. This points to similar complexity of conversion as the above, or to the idea that seems to be growing larger on the horizon that our input elements might require slotted input/textarea elements for us to properly leverage them within a form, ensure that we can accessibly relate them to <label> element, or style them across the various contexts that are required.

[benjamind]

Interesting!

So are you suggesting that we add slot elements for each of our input elements with a default content that provides an input element, but so that we can in cases like stepper, or where we want form integration provide an external element where we want it?

[Westbrook]

I'd like to say I am researching the difficulties we will run into converting to Spectrum CSS v3.0 more than I'd like to say that I'm making recommendations at this point. 🦔 😬 The releases are still beta, so we hopefully will have room to address these difficulties in various ways, but unless we start looking know we have the possibility of getting boxed into a corner. Also, even in v2.0 there are relationships between atomic pieces in more complex components that are difficult to manage via the current construction of component parts. Leveraging light DOM is definitely a powerful option we have to solve this, but it can be as much a hole and it is a tunnel if it's hiding a deeper mismatch between the Spectrum CSS output and the capabilities/specializations of web components.

[benjamind]

Fair enough, I agree we need to be trying to influence Spectrum CSS somewhat if we can while v3 is in beta. If you can see a way forward to having them modify their rules to better support us that would be great.

[Westbrook]

Added adobe/spectrum-css#743 to track this.

[Westbrook]

WIP implementation: https://westbrook-number-field--spectrum-web-components.netlify.app/storybook/index.html?path=/story/number-field--default

[cuberoot]

Good to see this moving forward! I just hit a use case and would be keen to get this into a release.

My other concern is i18n. Things like decimal separators are locale specific. I tried your sample in Safari running in French and the decimal example displayed correctly with a , for a separator, but I couldn't enter numbers after the decimal.

It looks like React Spectrum has a more ambitious number field

[Westbrook]

Indeed, thanks for bringing it up. The majority of my focus has been on the stepper interaction with those internationalizations to date, so no tests, particularly of actual input, yet.

I'd love to hear the deltas you saw on the React Spectrum implementation, in that I referenced their work for just about everything I've built into this so far. Min/max may be one area you bumped into, but I'm hoping there's not too many more. It's currently my plan to crib the majority of their documentation content to ensure that was so: https://westbrook-number-field--spectrum-web-components.netlify.app/components/number-field

@cuberoot Knowing that there are actual use cases coming up in product I can bump up the priority of this, as it's be percolating just below the surface for quite a while now. In case it could shape an earlier release through scoping, any particular parts of the API surface that you're interested in?

[cuberoot]

I need something very basic to start with. I don't need the steppers. I just need a numeric entry field to match up with some slider handles. I have one use case for an integer between 0 and 255. And another for a decimal between 0.01 and 9.99 limited to two decimal places.

I haven't dug too deeply into the React Spectrum version yet. I will peruse more deeply.

[Westbrook]

I think we could get to a place where that was locked down enough to release, soon. Not sure if we can get the next planning session tuned to your timezone, but if you supply @spdev3000 with all the details we can make sure to hash out any x-client concerns!

For reference, you're NOT talking about this UI, right: https://spectrum.adobe.com/page/slider/#Editable

Looking deeper into the RS implementation I found that they didn't bind the number management there to a renderer like they have done in other cases, so I was easily able to adopt their @internationalized/number library on our end. Still no tests, but at first glance a good number of keyboard input situation appear to be working (a least better) that weren't before.

I've also added basic min/max support via, a la: https://westbrook-number-field--spectrum-web-components.netlify.app/storybook/index.html?path=/story/number-field--min-max and further adapted the documentation for our context: https://westbrook-number-field--spectrum-web-components.netlify.app/components/number-field

[cuberoot]

Nice work. I will indeed stay in touch with @spdev3000

And, no, I'm not talking about the slider connected to a single text field. I'm working on one of those crazy multi-handle sliders and the numeric fields are laid out separately.