Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

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

Ouverte
  • Quelque chose ne va pas ?
#273 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 3 jours

@zoharma y travaille déjà.

Depuis le 5/8/2026.

  • #271 par @zoharma — ouverte

Évaluation

Difficulté
5/5
Temps estimé
Plus d'une semaine
Accessibilité débutants
25/100
Type d'issue
Fonctionnalité
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
typescript
Domaine
frontend

Piste de recherche

Commencez par examiner le composant NumberInput existant et son comportement actuel pour numberMode, minValue et maxValue, puis inspectez la pull request ouverte #271 afin de comprendre le travail déjà en cours. Le travail est considéré comme terminé lorsque les boutons de spinner optionnels prennent en charge les paramètres proposés de pas et de visibilité, bornent les valeurs aux limites et laissent les utilisations existantes inchangées.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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.

Langage dominant
TypeScript
Étoiles
9
Forks
4
Merge moyen
3 j 12 h
PR mergées (30 j)
14

Préparer son environnement

Ouvrir dans Codespaces

Lance le conteneur de développement du projet dans votre navigateur, avec votre propre compte GitHub.

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de DiamondLightSource/sci-react-ui

Toutes les issues de DiamondLightSource/sci-react-ui

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.