search

cengage / react-magma

https://react-magma.cengage.com
MIT License
21 stars 12 forks source link

Update number input - built-in stepper #1376

Open orion-cengage opened 2 months ago

orion-cengage commented 2 months ago

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

image

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. image

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. image

-- 4.2 If using a suffix, it appears before the buttons image

-- 4.3 If using clear button, it appears before the buttons image

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. image

6.0 Update the button on other inputs to use same styles -- 6.1 Date image

-- 6.2 Search image

-- 6.3 Password image

silvalaura commented 3 days ago

Blocked until #1376 is completed