8000 Move NumberInput (nee Stepper Input) to core · Issue #4019 · jpmorganchase/salt-ds · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Move NumberInput (nee Stepper Input) to core #4019

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.

Sign up for GitHub

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

Jump to bottom
Open
joshwooding opened this issue Aug 20, 2024 · 21 comments
Open

Move NumberInput (nee Stepper Input) to core #4019

joshwooding opened this issue Aug 20, 2024 · 21 comments
Assignees
@tayyabataimur
Labels
component: stepper input groomed UITK: parity OKR

Comments

@joshwooding
Copy link
Contributor
joshwooding commented Aug 20, 2024 •
edited by mark-tate
Loading

Take the Labs version

  • API Review

  • Review button styles

  • A11y review

  • Figma updates if anything changes

  • Share with stakeholder at end of sprint 1 (if we can find someone who needs it)

If you need a StepperInput please let us know, so you can help review.

Notes:
Follow on from #1855
@joshwooding to link to addition docs for button styles.
@mark-tate
Copy link
Contributor

Lungo Goal: push to core if Jake happy

@jake-costa
Copy link
Contributor

Found a few items to address. Will add feedback to teams channel by EOD.

@jake-costa
Copy link
Contributor

Feedback added to teams channel

@origami-z
Copy link
Contributor

URL: https://storybook.saltdesignsystem.com/?path=/story/lab-stepper-input--default

When dev picks this up let me know and we can discuss these to go over any questions and possible remediation suggestions.

Bordered Example (Usability not accessibility):
When the component receives focus initially the value does not increase/decrease when using arrow keys or when selecting the up/down buttons using a mouse. These are initially disabled.
After a number is entered the value does increase/decrease when using arrow keys and when selecting the up/down buttons using a mouse.

Read-only Example:
Does not convey it is read-only status to screen reader users. It says “Stepper Input Spin button editable 5”

Validation Example:
Does not convey the validation state to screen reader users. Please note: I did modify the visible label as that was the only way the status was being conveyed but is not going to accurately reflect the experience when implemented.

Refresh Adornment & Controlled Example:
Screen readers do not covey anything when the refresh button is pressed

Custom Buttons Example:
The plus and minus buttons are in the focus order. These should be removed similar to the up/down arrow buttons in the other examples.

@mark-tate
Copy link
Contributor

Macc Goal: no work planned, capacity issues

@bhoppers2008
Copy link
Contributor

Awaiting feedback for dev.

@mark-tate mark-tate assigned mark-tate and tayyabataimur and unassigned mark-tate Mar 3, 2025
@mark-tate
Copy link
Contributor
mark-tate commented Mar 3, 2025 •
edited
Loading

Paprika Goal: turn into a known quantity by EOS
We an make our own decision on merging this to Core, KISS.

  • gap tokens may be needed

@mark-tate
Copy link
Contributor

Paprika: Review by EOS, draft PR raised

@pseys
Copy link
Contributor
pseys commented Mar 10, 2025

Dependent on #4116 and #4798

@mark-tate
Copy link
Contributor

Paprika: thickness and gap tokens required by EOS,

Separate PR
@tayyabataimur @ivan-calderon to help get this into PR by EOS

@tayyabataimur
Copy link
Contributor
  • Draft PR raised, actioning A11y feedback sent over by @jake-costa.
  • Have a kickoff call scheduled on 13 March to discuss gap and thickness tokens strategy with @ivan-calderon and @pseys

@mark-tate
Copy link
Contributor
mark-tate commented Mar 17, 2025 •
edited
Loading

Cayenne Goal: a11y feedback, will be NumberInput in code and design will follow later
Consider other doc changes which may already reference StepperInput.
Merged to Labs by EOS - Go/no-go decision

@tayyabataimur
Copy link
Contributor

PR open for renaming StepperInput to NumberInput #4850

@tayyabataimur tayyabataimur mentioned this issue Mar 18, 2025
Merged
@tayyabataimur
Copy link
Contributor

PR open for fixing A11y issues: #4829

@mark-tate mark-tate changed the title Move Stepper Input to core Move NumberInput (nee Stepper Input) to core Mar 20, 2025
@mark-tate
Copy link
Contributor

Cardamom Goal: Agreement on what we are releasing and any new features published in Labs by EOS

@mark-tate
Copy link
Contributor

Dill Goal: Agree/Align spec to code and release to Labs.
Aim for Clove release, if it's in a known state

@origami-z
Copy link
Contributor
8000 origami-z commented Apr 17, 2025

Kickoff scheduled

@mark-tate
Copy link
Contributor
mark-tate commented Apr 28, 2025 •
edited
Loading

Clove Goal: Design sync with code
Code, third party dependencies moved outside of component.
Merged to labs, something we are happy with.

Exploring the alpha button for step controls, moving the step controls inside the component
Darrin has some designs.
Do we support both inside and outside positions?
Probably yes, make decision.

a11y, as you can use keyboard controls to step value, then that could mitigate the a11y concerns.
However we could present the options, through documentation, to highlight the variations.

@origami-z
Copy link
Contributor

May 1 - extract format logic in code starting soon, update with WCAG 2.2 design proposal to BLM

@mark-tate
Copy link
Contributor

draft pocs to be shared to get feedback

@mark-tate
Copy link
Contributor

Allspice goal: Identify a sprint when this will ship to Core

  • how do we get it from Labs to Core ?
  • extracted API to be shared via draft PR
  • design decision/review

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@tayyabataimur tayyabataimur

Labels
component: stepper input groomed UITK: parity OKR
Projects
Salt - Components, Patterns and Theming
Status: Green
Milestone
No milestone
Development

No branches or pull requests
7 participants
@mark-tate @origami-z @joshwooding @tayyabataimur @jake-costa @bhoppers2008 @pseys
0