Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update number input - built-in stepper #1376

Open
orion-cengage opened this issue Aug 19, 2024 · 0 comments
Open

Update number input - built-in stepper #1376

orion-cengage opened this issue Aug 19, 2024 · 0 comments
Labels
feature request Functionality that you believe is missing that you want added react-magma-dom Tasks related to react-magma-dom

Comments

@orion-cengage
Copy link
Contributor

orion-cengage commented Aug 19, 2024

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

@orion-cengage orion-cengage added react-magma-dom Tasks related to react-magma-dom feature request Functionality that you believe is missing that you want added labels Aug 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request Functionality that you believe is missing that you want added react-magma-dom Tasks related to react-magma-dom
Projects
Status: To Do
Development

No branches or pull requests

1 participant