DiamondLightSource / DiamondLightSource/sci-react-ui
Change Proposal: Increment/Decrement Spinner Buttons for `NumberInput`
- Lingua principale
- TypeScript
- Stelle
- 8
- Fork
- 3
- Merge medio
- 3g 15h
- PR unite (30g)
- 5
Descrizione
## What is being proposed?
Add optional up/down spinner buttons to `NumberInput` so users can nudge a numeric value by a configurable step, instead of only being able to type a value directly.
## Why is this needed?
`NumberInput` currently only accepts typed input. For small, discrete adjustments (e.g. incrementing an integer count), typing is slower and more error-prone than a click-to-step control, which is a common affordance for numeric fields. There was previously no way to adjust the value without full keyboard entry.
## What will change?
- Behaviour: `NumberInput` can now render a vertical up/down `ButtonGroup` inside the field as an end adornment. Clicking increases/decreases the current value by step, clamped to `minValue`/`maxValue`. Buttons disable automatically at the limits.
- New props:
- `step?: number`: the increment/decrement amount, defaults to `1`.
- `spinnerButtons?: "always" | "onHover" | "never"`: controls spinner visibility. Defaults to `"onHover"` for all number modes except `"scientific"`, which defaults to `"never"` (since stepping isn't a natural operation on scientific-notation values).
- No new component: this extends the existing `NumberInput`.
## Interface changes (if any)
Additive/optional only — existing usages of NumberInput are unaffected.
```ts
```
## Breaking change?
- [ ] Yes
- [X] No
## Next steps
A maintainer will review this issue.
If accepted, it will be marked as `accepted` and a PR may then be opened.
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Start by reviewing the existing NumberInput component and its current numberMode, minValue, and maxValue behavior, then inspect open pull request #271 to understand the work already underway. Done means optional spinner buttons support the proposed step and visibility settings, clamp values to the limits, and leave existing usages unaffected.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- typescript
- Ambito
- frontend
- Tipo di issue
- Funzionalità
- Difficoltà
- 5/5
- Tempo stimato
- Più di una settimana
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 25/100