Skip to content

[Task] Enhance TextInput with icon slots, password toggle, and number controls #77

Description

@soroushm

Task Description ✏️

Extend the existing TextInput component (part of design system epic #40) with
common input adornment patterns: leading/trailing icon slots, a built-in
password visibility toggle, and increment/decrement controls for type="number".
These additions keep complex form UI out of product code and centralise the
behaviour in the design system.

Acceptance Criteria ✅

  • startAdornment and endAdornment props accept any ReactNode and render inside the root wrapper (before/after the native element).
  • Adornments are visually aligned with the input text and do not affect the input's height.
  • type="password" renders a built-in toggle button (endAdornment slot) that switches between password and text, accessible via aria-label.
  • The password toggle can be disabled or replaced by passing a custom endAdornment.
  • type="number" renders increment/decrement buttons (or hides the browser's native spinner via CSS) — behaviour toggled via a hideSpinner prop.
  • All adornment icons/buttons use theme tokens for color, size, and spacing — no raw CSS values.
  • shouldForwardProp updated so new props do not leak to the DOM.
  • Unit tests cover: adornment rendering, password toggle interaction, hideSpinner, and that custom adornments override built-in ones.
  • Storybook stories demonstrate: icon adornments, password field, number field with and without spinner.
  • Lint, types, and CI pass.

Dependencies 🔗

Definition of Ready (DoR) 📋

  • startAdornment and endAdornment slots implemented and tested.
  • Password visibility toggle works and is accessible.
  • Number spinner control implemented or suppressed via hideSpinner.
  • All new behaviour covered by unit tests.
  • Storybook stories present for each new pattern.
  • Code reviewed, linted, typed, CI green.
  • TextInput README updated with new props.

Definition of Done (DoD) 🏁

  • startAdornment and endAdornment slots implemented and tested.
  • Password visibility toggle works and is accessible.
  • Number spinner control implemented or suppressed via hideSpinner.
  • All new behaviour covered by unit tests.
  • Storybook stories present for each new pattern.
  • Code reviewed, linted, typed, CI green.
  • TextInput README updated with new props.

Additional Notes or Resources 📎

Metadata

Metadata

Assignees

Type

Projects

No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions