feat: InputText v2 + FieldText composition#648
Draft
isaquebock wants to merge 3 commits into
Draft
Conversation
Introduce `@aziontech/webkit/inputs/label` — a thin `<label>` wrapper that renders the field text, supports a default slot, and appends a `Required` tag when the field is required. Wires `for` to the underlying input id so clicking the label focuses the control. The component is the label only — helper text, error messages, and the input itself live in sibling primitives composed by the form-field layer.
Introduce `@aziontech/webkit/inputs/helper-text` — a small text element that renders auxiliary copy below a form field. The `kind` prop drives the visual tone: - `helper` (default): muted token, neutral copy. - `required`: warning-tone copy paired with the Required tag treatment. - `invalid`: danger-tone copy for validation errors; usually wired to `aria-describedby` on the input. - `disabled`: muted with a leading lock icon. The component is the helper line only — wrapping form-field components own the wiring of `aria-describedby` and the conditional rendering.
Redesign the `InputText` field around the new `--ring-color` token, raise the spec to v2, and introduce a sibling `FieldText` wrapper that composes `Label` + `InputText` + `HelperText` into a single vertical stack with consistent spacing. InputText changes: - Restrict `type` to plain-text variants (`'text' | 'email'`). - Add `maxLength`, `required`, `invalid` props. - Add `iconLeft` / `iconRight` slots. - Drive visual states (hover, focus, filled) via native CSS pseudo-classes instead of props; `data-size`, `data-disabled`, `data-invalid`, `data-required` mirror the props for `data-[attr]:` Tailwind variants. FieldText: - `useId()`-backed `inputId` wired through Label `for` + input `id` + `aria-describedby` -> HelperText. - `helperKind` switches between `helper`, `required`, `invalid`, `disabled` based on prop state; falls back to a default `'This field is locked.'` copy when `disabled` is true and `helperText` is empty. - Forwards `iconLeft` / `iconRight` slots to the underlying InputText.
5 tasks
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
1 participant
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
Redesign the
InputTextfield around the new--ring-colortoken, raise the spec to v2, and introduce a siblingFieldTextwrapper that composesLabel+InputText+HelperTextinto a single vertical stack with consistent spacing.InputText changes (v1 → v2)
typeto plain-text variants ('text' | 'email').maxLength,required,invalidprops.iconLeft/iconRightslots.data-*attrs mirror the props fordata-[attr]:Tailwind variants.FieldText (new)
useId()-backedinputIdwired through Labelfor+ inputid+aria-describedby→ HelperText.helperKindswitches betweenhelper,required,invalid,disabledbased on prop state; falls back to a default'This field is locked.'copy whendisabledis true andhelperTextis empty.iconLeft/iconRightslots to the underlying InputText.Stacking
This PR is stacked on top of the Label + HelperText work and currently includes those commits in its diff. Once #645 (Label) and #646 (HelperText) merge to
main, the rebase will drop the cherry-picked commits and this PR's diff will narrow to the InputText v2 + FieldText changes only.Blocked by:
feat: dim focus ring color(visual baseline)feat: add Label input primitivefeat: add HelperText input primitiveTest plan
pnpm --filter @aziontech/webkit lint— clean.Webkit/Inputs/InputText→ Default + Sizes + Filled + Invalid + Disabled + Icons render with the new tokens.Webkit/Inputs/FieldText→ Default + Sizes + Required + Invalid + Disabled + Icons render and the helper line picks up the rightkindper state.