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

Offen
  • Stimmt etwas nicht?
#273 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 3 Tagen

@zoharma arbeitet bereits daran.

Seit 05.8.2026.

  • #271 von @zoharma — offen

Bewertung

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

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.

Beschreibung

accepted

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.

<NumberInput
  label="Quantity"
  numberMode="natural"
  step={1}
  spinnerButtons="always" // "always" | "onHover" | "never"
/>

Breaking change?

  • Yes
  • No

Next steps

A maintainer will review this issue.
If accepted, it will be marked as accepted and a PR may then be opened.

Vorherrschende Sprache
TypeScript
Sterne
9
Forks
4
Ø Merge
3 T. 12 Std.
Gemergte PRs (30 T.)
14

Entwicklungsumgebung

In Codespaces öffnen

Startet den Dev-Container des Projekts im Browser, mit Ihrem eigenen GitHub-Konto.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus DiamondLightSource/sci-react-ui

Alle Issues in DiamondLightSource/sci-react-ui

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

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