Skip to content

feat: InputPassword + FieldPassword composition#649

Draft
isaquebock wants to merge 1 commit into
feat/inputs-text-v2-and-fieldfrom
feat/inputs-password-and-field
Draft

feat: InputPassword + FieldPassword composition#649
isaquebock wants to merge 1 commit into
feat/inputs-text-v2-and-fieldfrom
feat/inputs-password-and-field

Conversation

@isaquebock

Copy link
Copy Markdown
Contributor

Summary

Introduce @aziontech/webkit/inputs/input-password and its form-field wrapper @aziontech/webkit/inputs/field-password.

InputPassword

  • Single-line password input with the same visual language as InputText v2 (same border, focus ring, disabled tokens). Single fixed height of 40px (large only).
  • Built-in visibility toggle button on the trailing edge (driven by the existing IconButton). The native type flips between password and text via local state; the toggle announces its state via aria-pressed.
  • Props: modelValue, placeholder, maxLength, disabled, readonly, required, invalid, toggleable, autocomplete ('current-password' | 'new-password' | 'off').
  • Slots: iconLeft (always available), iconRight (only honored when toggleable=false).
  • Ships the input-password.figma.ts Code Connect mapping.

FieldPassword

  • Mirrors FieldText: composes Label + InputPassword + HelperText with the same useId()-backed wiring for for / id / aria-describedby.
  • Forwards iconLeft / iconRight slots and adds password-specific props (maxLength, toggleable, autocomplete).
  • Default disabled-fallback helper copy: 'This field is locked.'.

Storybook templates

Stories use the v-model Template pattern documented in the storybook-write skill (PR #643) — local ref + watch + onUpdate, so the toggle has a value to reveal and the Actions panel still receives update:modelValue events.

Stacking

Base is feat/inputs-text-v2-and-field (PR #648) so the diff stays focused on the password work. When the upstream PRs merge into main, this branch rebases against main and the base auto-narrows.

Blocked by, in order:

Test plan

  • pnpm --filter @aziontech/webkit lint — clean.
  • Storybook → Webkit/Inputs/InputPassword → Default, Toggle, IconLeft, Filled, Invalid, MaxLength, Disabled render.
  • Storybook → Webkit/Inputs/FieldPassword → Default, Required, Invalid, Disabled, Toggle, Icons render.
  • Type a value, click the eye icon, confirm the text is revealed (regression check for the bug fixed during planning).
  • Tab to the trigger → Tab again moves to the toggle button → Enter/Space flips visibility → aria-pressed updates.

Introduce `@aziontech/webkit/inputs/input-password` — a single-line
password input that shares InputText's visual language and adds a
built-in visibility toggle button on the trailing edge (driven by
the existing `IconButton`). Type flips between `password` and `text`
via local state; the toggle button announces its state via
`aria-pressed`.

`InputPassword` props: `modelValue`, `placeholder`, `maxLength`,
`disabled`, `readonly`, `required`, `invalid`, `toggleable`,
`autocomplete` (`'current-password' | 'new-password' | 'off'`).
Slots: `iconLeft` (always available), `iconRight` (only when
`toggleable=false` — the visibility toggle occupies that position
otherwise). Single fixed height (40px / `large`).

`FieldPassword` mirrors `FieldText`: composes `Label` +
`InputPassword` + `HelperText` with the same `useId()` wiring for
`for` / `id` / `aria-describedby`. Forwards `iconLeft` / `iconRight`
slots and adds password-specific props (`maxLength`, `toggleable`,
`autocomplete`).

Storybook templates use the v-model pattern documented in the
`storybook-write` skill — local `ref` + `watch` + `onUpdate` so the
toggle has a value to reveal and the Actions panel still receives
`update:modelValue` events.

Ships the `input-password.figma.ts` Code Connect mapping.
@isaquebock isaquebock requested a review from a team as a code owner June 17, 2026 17:54
@isaquebock isaquebock marked this pull request as draft June 17, 2026 17:58
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.

1 participant