Implement cc-input-number

Context

We need an <input type=number> with -/+ buttons. We won’t be using the existing <cc-input-text> because it already does a lot of things and they’re not really useful for input number.

Requirements

-----------------
| - |    10 | + |
-----------------

• Needs to look like <cc-input-text> (same borders, spacing…)
• <input type=number> under the hood
• Text aligned to the right by default (we may consider a CSS custom prop)
• We need to hide the arrow keys that some browser display for such fields
• (-) minus button on the left of the field
• (+) plus button on the right of the field

Inputs (props)

• label
• value
• min
• max
• step
• readonly
• disabled

Outputs (events)

• value

[Galimede]

I just did a few tests and it seems like step is related to min (even when it’s not set) so if you set a step of 10, it’s relative to min (default to 9) and not to current value.

Will investigate and give it the native behavior logic for the controls as it’s the case causing trouble 👍

Can you try both (red focus ring + warning icon) and post screenshots (with and without buttons in the case of the warning icon)?

Will do, I will comment with some screenshots when it’s ready 😉

Have you tried Android only? Maybe it’s for old versions…

I have also tried it on IPad, it’s the larger version of the number keyboard, will do some more tests tho 🤓

I’m considering aligning the content at the center. Could we do right aligned by default et provide a --cc-input-number-align custom property?

Sure 😄

[hsablonniere]

I’m considering aligning the content at the center. Could we do right aligned by default et provide a --cc-input-number-align custom property?