Need a numberfield component

[bengfarrell]

Expected Behaviour

SWC needs a numberfield component that handles max/min/step

As my team works on an internal project, we've come across the need for a numberfield. At first, we've just modded , but we want some additional features, so it made sense to formalize it into a non-hacked together component.

Given this, there is now a branch to showcase a first pass at this:
https://github.com/adobe/spectrum-web-components/tree/benf/numberfield

The is essentially a forked and accepts min/max/step attributes in addition to the expected textfield stuff (mutliline and grows is not there of course).

Also, the basic numeric input stepper isn't awesome, and we've heard some requests for a drag to increment/decrement, so that's in place here as well.

There are likely going to be some problems accepting this as a PR. Primarily that I don't think Spectrum has any notion of a numeric input that I can find. So it's not designed, which also means the logic I put in here is completely made up.

I'm also not sure I like the "step" value dictating the validity of the input. For example, if the step is 1, that's great for increment/decrement UX, but it also disallows a value like 1.56 from being accepted as valid. That said - it's how the input field works, so I ran with it. We COULD bypass the using the numeric input under the hood altogether, but that seems like a rabbit hole.

I essentially copied the relevant tests from and made readmes and storybook entries. I'm not quite sure what to do with the spectrum JSON, because I believe that is supposed to tie back to Spectrum CSS, but again, there's no entry there for this AFAIK.

Either way - I hope this helps. Happy to take requests, but I'll also be pulling this standalone into my internal project to use it some more.

[Westbrook]

Initial question: does this overlap with #477 in any way?

You're correct that it will be difficult to accept a PR here for a non-Spectrum pattern like this. However, this isn't the first time we've been led down this line of thinking. In our app, the answer is to extend the basic patterns in our local component library. It may be that it is about time to start an SWC Contributions project, similar to what we see in Spectrum CSS, etc. I'd be interested in what the rest of the team think here.

For patterns like this that aren't in Spectrum and/or Spectrum CSS, have you been submitting requests to their projects? I'm always happy to forward requests in our cross-team syncs, but it's hard to fully support patterns of which I don't have first-person use requirements.

[bengfarrell]

Yep! It does overlap. Basically I just need a numeric field of some sort, and I heard the need on our team for something like what I made rather than the traditional stepper.

I think I looked at Spectrum twice for this to look for something I could use. Spectrum doesn't seem to have numeric inputs at all documented, while Spectrum CSS labels their stepper as deprecated. It's leading me to believe we have nothing for this, but we REALLY should.

If mine was a variation on something that I thought existed or was close to existing, I'd just extend SWC myself for the project, or maybe help.

If nothing comes of this as a contribution, no big deal. I'll at least use it in my project. But for the short term, it seems like the best course of action is for me to reach out to the Spectrum team and figure out if this is missing and why. Perhaps it could easily inform some changes that I could contribute back. I wasn't sure if the SWC team had an info on this.

Feel free to close this issue if you like - but if you keep it open, I'm happy to update.

[adixon-adobe]

There is a "Numeric field" (beta) defined on the internal contributions site which is what Spectrum CSS is implementing there. I'm curious why it's marked deprecated though. @bengfarrell if you can find out a little more about the status of that I think it'd help.

@Westbrook for contributions defined in SpectrumCSS it might be nice to include them with a "Beta" tag in the core project (but maybe in a separate contributions section of the docs?). I could also see having a separate project for things that aren't defined in spectrum at all.

[benjamind]

@adixon-adobe agreed, things that are no in spectrum at all I think should be an external project.

It would be nice if 'official' implementations of Spectrum Contributions were published from this repo but under a different scope or something to make them clearly delineated at the point of consumption rather than just a documentation detail too.

[bengfarrell]

OK! Got clarification. The "deprecated" numeric input is being brought back in Spectrum CSS 3.0. It will largely function just like the old one, but there are style improvements. It's also based on the new 3.0 textfield, which perfectly coincides to the issue that @Westbrook mentioned.

I also agree with you all. If it's not in Spectrum it has no place here. This case just seemed like SUCH an obvious omission for something we need, I thought that maybe I could move things along and get it Spectrum approved by starting something and kicking the tires.