DiamondLightSource / DiamondLightSource/sci-react-ui
Change Proposal: Increment/Decrement Spinner Buttons for `NumberInput`
- Dominant language
- TypeScript
- Stars
- 8
- Forks
- 3
- Avg merge
- 3d 15h
- Merged PRs (30d)
- 5
Description
## 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.
## 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.
Contributor guide
Research direction
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.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100