react

react copied to clipboard

Description

The browser number spinner/steppers are not the greatest, visually:

It would be nice if we could leverage our design patterns and language to build one out that is better

Design

• [ ] Design is finalized. Link to mockups/prototypes:
• [ ] Design is being finalized by feature team. Link to any in progress mockups:
• [ ] Assistance requested in finalizing design

Component API

I believe the API that is given for the number input field is sufficient, but visually needs to be upgraded. Full API is here

Usage

This would be used for any location where a consumer needs to input or adjust number input fields

Implementation

Please describe how you would like this component to be built. Design systems is happy to help with the implementation of new components (as time/roadmap allows) but also recognizes that sometimes feature teams prefer to implement components themselves.

• [ ] Feature team would like to implement this component
• [ ] Feature team would like the Design Systems team to implement this component
• [ ] This component is already built, feature team requests assistance moving it to Primer React Components from outside application
• [x] Other: (please describe below)

I would be happy to implement such a control outside of Primer React and then upstream it. Or, I could partner in building it inside of Primer React. I would love to discuss any roadmap that you might have for new components

Timeline

No timeline constraints

What to expect next

A Design Systems engineer will read through your component proposal and get in touch! We'll gather any additional information needed and set up a Zoom call only if necessary. Once we have all relevant information, we'll add the component to our Primer React Components Roadmap. If you opt to build the component yourself, we are happy to help with pairing, brainstorming, etc. Generally, component work requested from internal feature teams receives higher priority over general (non-requested) improvements to the library.

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

I'm so sorry this never got a response @dusave! Our automation must have failed for a short while so this didn't end up on our project board for triage.

If this suggestion is still of interest, I'd suggest we engage Primer designers on this request. @tallys how would you suggest we proceed?

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

This would be useful in repos as well: https://github.com/github/github/pull/265294

Hot take: primer/css has global style that hides the spin buttons!

https://github.com/primer/css/blob/main/src/forms/form-control.scss#L224-L231

We should talk to a11y about how this should be implemented.

Pinging @alliethu putting this on your radar

Pinging FR! cc/ @primer/accessibility-design

Would folks be okay with discussing this during the next Primer Patterns + API Working Session? There's a lot of nuance when it comes to recreating native functionality, and with spin buttons in particular.

Some reading on the subject, if you have the time.

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

Not technically stale, but also not high on the priority list at the moment. Let's leave it open, but keep in the backlog unless there is a reason to reconsider the priority.

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.