feat(number-input): update number input controls to new spec

[emyarod]

Closes #5417

unblocks #7570

This PR updates the number input step controls and invalid/warning states to match the updated component spec. This PR is only focused on the input controls and the remaining ticket issues will be addressed in separate PRs related to #7570

Testing / Reviewing

Confirm all size variants and warning states for the number input match the new spec

[netlify]

Deploy preview for carbon-elements ready!

Built with commit ce0af49

https://deploy-preview-7687--carbon-elements.netlify.app

[tw15egan]

More of a design question, but should we set .bx--number to width: 100%; to conform with the changes we've made to Select and Dropdown and the existing TextInput? Or let the end-user determine how large it should be?

Currently, it is getting cut off after 3 digits when it exceeds the max

Edit:

Actually, nevermind. It seems like it adjusts the width based on the max value of the NumberInput. If I set it to

I get

So I think this actually is working great. Disregard! 👍

[emyarod]

yeah this is caused by an arbitrary max-width we placed on the number inputs

[tw15egan]

LGTM 👍 ✅

[netlify]

Deploy preview for carbon-components-react ready!

Built without sensitive environment variables with commit ce0af49

https://deploy-preview-7687--carbon-components-react.netlify.app

[laurenmrice]

Disabled state

• The - and + icons should not get the bottom rule.

Light variant

• There are small strips of color around the - and + icons that should not be showing up in the input.

Invalid state

• The - and + icons seem to shift down a pixel when the invalid state is applied. This happens with all sizes.
  

Is it possible to hide the divider rule between the warning state/invalid state icon when hovering on the - icon?

[emyarod]

the icons shifting seems to be a Firefox only issue but it should be resolved now

[laurenmrice]

Hover:

• The hover colors on the - and + need to be hover-light-ui for the light prop.

Divider rules:

• The divider rules needs to be decorative-01 in the light prop.
• The divider rules needs to be disabled-02 for the disabled state. Looks a little lighter right now in all themes.

Invalid state:

• When hovering over the - and +, there are little dot glitches at the bottom of the input.
• When hovering over the +, the divider rule between the - and the error/warning icon should not go away.

[emyarod]

when should the dividers be hidden/not hidden?

[laurenmrice]

@emyarod

[emyarod]

got it, the divider rule styles should be updated now

[laurenmrice]

There are still some issue with the divider rules:

• Enabled state: the divider rule needs to be present between the - and +. Right now it is not there. Should be:
  

• Disabled state: the divider rule isn’t showing up in the disabled state. Needs to be disabled-02. Should be:
  

• Invalid/Warning states: need to have two divider rules by default to separate out the icons. Needs to also follow the hovering logic mentioned in my last comment. Should be:
  

[laurenmrice]

Looks great! Thanks for updating this component! 🎉