Update number input - built-in stepper #1376
Labels
feature request
Functionality that you believe is missing that you want added
react-magma-dom
Tasks related to react-magma-dom
Purpose: Customize the built-in stepper within the number input for an easier to use, and a11y future-proof experience. This update applies to both regular and large number input.
Figma: https://www.figma.com/design/VoWYiiOKKppcYm5QLgPyDC/Components---Inputs?m=auto&node-id=2038-10368&t=jxLoRrHfOltvRaPR-1
AC
1.0 Exact measurements, sizing, and colors can be viewed in Figma link above.
2.0 Disable the native stepper from being used within the number input.
3.0 Create option to turn stepper on or off.
4.0 When stepper is turned on, user sees Minus and Plus buttons on the right side of the input.
-- 4.1 Use secondary button styles for hover and actives states.
-- 4.2 If using a suffix, it appears before the buttons
-- 4.3 If using clear button, it appears before the buttons
5.0 Keyboard navigation
-- 5.1 These buttons do not get focus via the keyboard.
-- 5.2 Buttons do show focus state when you click them with a mouse.
6.0 Update the button on other inputs to use same styles
-- 6.1 Date
-- 6.2 Search
-- 6.3 Password
The text was updated successfully, but these errors were encountered: