DiamondLightSource / DiamondLightSource/sci-react-ui

Change Proposal: Increment/Decrement Spinner Buttons for `NumberInput`

Aperta
#273 1 commento 0 reazioni 0 assegnatari Rivendicata da @zoharma Vedi su GitHub
needs-triage
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.

Image

## 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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.