Skip to content

feat: add input-number component#654

Merged
robsongajunior merged 13 commits into
devfrom
feat/inputs-input-number
Jun 26, 2026
Merged

feat: add input-number component#654
robsongajunior merged 13 commits into
devfrom
feat/inputs-input-number

Conversation

@isaquebock

Copy link
Copy Markdown
Contributor

Summary

  • New webkit component inputs/input-number: spec-driven monolithic numeric input with sizes (small/medium/large), min/max/step, optional spinner column, prefix/suffix slots, and a lock indicator in the disabled state.
  • Visual states match the input-text v2 pattern: hover gated by :not(:focus-within), focus-within ring with offset, --danger-border/--warning-border for invalid/required.
  • Native <input type=\"number\"> under the hood — modelValue is always numeric; clearing the input falls back to min ?? 0.
  • Storybook: Default / Sizes / Disabled / Invalid, all fully reactive (v-model bound), with hand-written code snippets for the Show code panel (same convention as feat/inputs-select).
  • Adds Event and HTMLInputElement to the shared ESLint globals so components using native DOM types lint clean.

Test plan

  • pnpm webkit:lint passes
  • pnpm --filter storybook build succeeds
  • Open Storybook → Webkit › Inputs › InputNumber and exercise:
    • Default story — type and click chevrons; v-model updates; min/max/step clamp
    • Sizes story — three sizes side-by-side, each with its own v-model
    • Disabled story — typing and chevrons blocked; lock icon visible
    • Invalid story — danger border applied; interaction still works
  • Keyboard: Tab focuses, / increment/decrement, Enter commits and fires change
  • Native browser spinner is hidden; only the custom chevron column renders
  • Visual diff against the Figma frame (InputNumber at node 3714:10789) across hover/focus/filled/invalid/required/disabled × 3 sizes

Spec-driven monolithic input for numeric values (counts, quantities, ports,
thresholds) with small/medium/large sizes, configurable min/max/step, optional
spinner column, prefix/suffix slots, and a lock indicator in the disabled state.

Visual states (hover/focus-within/invalid/required/disabled) match the
input-text v2 pattern: border-color hover gated by :not(:focus-within),
focus-within ring with offset, --danger-border for invalid, --warning-border
for required. modelValue is always numeric — clearing the native input falls
back to min ?? 0.

Adds Event/HTMLInputElement to the shared eslint globals so future components
using native DOM types lint clean.
@isaquebock isaquebock requested a review from a team as a code owner June 23, 2026 12:48
@isaquebock isaquebock changed the base branch from main to dev June 24, 2026 15:19
pauloSF0
pauloSF0 previously approved these changes Jun 24, 2026
@isaquebock isaquebock marked this pull request as draft June 25, 2026 13:05
@isaquebock isaquebock marked this pull request as ready for review June 25, 2026 17:01
Comment thread .specs/input-number.md Outdated
@robsongajunior robsongajunior merged commit dc2c882 into dev Jun 26, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

3 participants