DiamondLightSource / DiamondLightSource/sci-react-ui

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

Offen
#273 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Beansprucht von @zoharma Auf GitHub ansehen
needs-triage
Vorherrschende Sprache
TypeScript
Sterne
8
Forks
3
Ø Merge
3 T. 15 Std.
Gemergte PRs (30 T.)
5

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der Prüfung der bestehenden NumberInput-Komponente und ihres aktuellen Verhaltens für numberMode, minValue und maxValue. Sieh dir anschließend den offenen Pull Request #271 an, um die bereits laufenden Arbeiten zu verstehen. Als erledigt gilt die Aufgabe, wenn optionale Spinner-Schaltflächen die vorgeschlagenen Schritt- und Sichtbarkeitseinstellungen unterstützen, Werte auf die Grenzwerte begrenzen und bestehende Verwendungen unverändert lassen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
typescript
Bereich
frontend
Issue-Typ
Feature
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.