feat: InputPassword + FieldPassword composition#649
Draft
isaquebock wants to merge 1 commit into
Draft
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Introduce
@aziontech/webkit/inputs/input-passwordand its form-field wrapper@aziontech/webkit/inputs/field-password.InputPassword
InputTextv2 (same border, focus ring, disabled tokens). Single fixed height of 40px (largeonly).IconButton). The nativetypeflips betweenpasswordandtextvia local state; the toggle announces its state viaaria-pressed.modelValue,placeholder,maxLength,disabled,readonly,required,invalid,toggleable,autocomplete('current-password' | 'new-password' | 'off').iconLeft(always available),iconRight(only honored whentoggleable=false).input-password.figma.tsCode Connect mapping.FieldPassword
FieldText: composesLabel+InputPassword+HelperTextwith the sameuseId()-backed wiring forfor/id/aria-describedby.iconLeft/iconRightslots and adds password-specific props (maxLength,toggleable,autocomplete).'This field is locked.'.Storybook templates
Stories use the v-model
Templatepattern documented in thestorybook-writeskill (PR #643) — localref+watch+onUpdate, so the toggle has a value to reveal and the Actions panel still receivesupdate:modelValueevents.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 intomain, this branch rebases againstmainand the base auto-narrows.Blocked by, in order:
feat: dim focus ring colorfeat: add Label input primitivefeat: add HelperText input primitivefeat: InputText v2 + FieldText compositionTest plan
pnpm --filter @aziontech/webkit lint— clean.Webkit/Inputs/InputPassword→ Default, Toggle, IconLeft, Filled, Invalid, MaxLength, Disabled render.Webkit/Inputs/FieldPassword→ Default, Required, Invalid, Disabled, Toggle, Icons render.Tabto the trigger →Tabagain moves to the toggle button →Enter/Spaceflips visibility →aria-pressedupdates.