Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#273 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 7 días

@zoharma ya está trabajando en esto.

Desde el 5/8/2026.

  • #271 de @zoharma — abierto

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
25/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
typescript
Área
frontend

Línea de trabajo

Comienza revisando el componente NumberInput existente y su comportamiento actual para numberMode, minValue y maxValue; después, inspecciona el pull request abierto #271 para entender el trabajo que ya está en curso. Se considera terminado cuando los botones de spinner opcionales admitan las configuraciones propuestas de paso y visibilidad, limiten los valores a los límites y no afecten a los usos existentes.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
9
Forks
4
Merge medio
7 d 17 h
PR fusionados (30 d)
29

Preparar el entorno

Abrir en Codespaces

Inicia el contenedor de desarrollo del proyecto en tu navegador, con tu propia cuenta de GitHub.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de DiamondLightSource/sci-react-ui

Todos los issues de DiamondLightSource/sci-react-ui

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.