You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
Task Description ✏️
Extend the existing
TextInputcomponent (part of design system epic #40) withcommon 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 ✅
startAdornmentandendAdornmentprops accept anyReactNodeand render inside the root wrapper (before/after the native element).type="password"renders a built-in toggle button (endAdornment slot) that switches betweenpasswordandtext, accessible viaaria-label.endAdornment.type="number"renders increment/decrement buttons (or hides the browser's native spinner via CSS) — behaviour toggled via ahideSpinnerprop.shouldForwardPropupdated so new props do not leak to the DOM.hideSpinner, and that custom adornments override built-in ones.Dependencies 🔗
Definition of Ready (DoR) 📋
startAdornmentandendAdornmentslots implemented and tested.hideSpinner.TextInputREADME updated with new props.Definition of Done (DoD) 🏁
startAdornmentandendAdornmentslots implemented and tested.hideSpinner.TextInputREADME updated with new props.Additional Notes or Resources 📎
type="password": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/passwordtype="number": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/numberinput[type=number] { -moz-appearance: textfield; } input[type=number]::-webkit-inner-spin-button { display: none; }classesprop (root,input) can be extended withstartAdornment/endAdornmentkeys if per-slot class overrides are needed.