feat(forms): add InputField + field components (Phase 1)#7768
Closed
talissoncosta wants to merge 13 commits into
Closed
feat(forms): add InputField + field components (Phase 1)#7768talissoncosta wants to merge 13 commits into
talissoncosta wants to merge 13 commits into
Conversation
FieldLabel wires a label to its control (+ required indicator); FieldError renders an inline per-field validation message (the small-text counterpart to the ErrorMessage banner). With Storybook stories. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Composes FieldLabel + Input + FieldError into one labelled, validated field. Controlled and library-agnostic (takes `error`); the typed successor to InputGroup. With Storybook stories. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Composed inputs that will own the password reveal / search adornments. Phase 1 delegates to Input; the adornment logic moves here when Input is slimmed. With Storybook stories. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
PasswordInput sizes, SearchInput disabled, and InputField read-only + no-label states. Dark mode is covered automatically by Chromatic's global light/dark modes. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
github-actions
Bot
added
feature
FieldLabel shows an info icon with a hover tooltip when `tooltip` is passed (the recurring InputGroup pattern); InputField forwards it. With Storybook stories. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Tooltip's children is a string; match it (and LabelWithTooltip). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
github-actions
Bot
added
feature
github-actions
Bot
added
feature
Field composes FieldLabel (+ tooltip/required) + any control + FieldError — the control-agnostic foundation that replaces InputGroup's component slot. InputField is now Field specialised to Input. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
github-actions
Bot
added
feature
Field specialised to a textarea (label + error + tooltip). With Storybook stories. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
github-actions
Bot
added
feature
Replace <Input search /> with <SearchInput /> across 16 files (18 sites). Behaviour-identical; SearchInput fixes type='text' + the search icon. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
github-actions
Bot
added
feature
Replace <Input type='password' /> with <PasswordInput /> in Token, CreateWebhook and CreateAuditLogWebhook. Behaviour-identical. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
github-actions
Bot
added
feature
- FieldError renders block below the control (was inline, beside it) - FieldLabel flex-centres the tooltip icon with the label text - Wire aria-describedby + aria-invalid so screen readers announce the error and its association with the control (FieldError gets a stable id) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
github-actions
Bot
added
feature
Omit Input props that don't belong on a labelled, validated field: autoValidate/isValid (controlled via error), search (use SearchInput), underline (inline-edit variant), centered, showSuccess, enableAutoComplete. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
github-actions
Bot
added
feature
- FieldLabel now composes the shared LabelWithTooltip (DS Tooltip) instead of hand-rolling Tooltip+Icon; widen LabelWithTooltip's label to ReactNode. - InputField: drop wrapperClassName; the standard className now styles the field wrapper (no longer leaked to Input's inner container), inputClassName styles the input. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
github-actions
Bot
added
feature
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.
Thanks for submitting a PR! Please check the boxes below:
docs/if required so people know about the feature.Changes
Contributes to #5746
Phase 1 of the form-component redesign — purely additive (no existing component or consumer changes). Stacked on #7762 (Input → TS); base
feat/input-ts-7758.New components (each with Storybook stories under
Components/Forms):FieldLabel— label wired to its control viahtmlFor, with an optional required indicator.FieldError— inline per-field validation message. The small-text counterpart to theErrorMessagebanner (different jobs); standardises thetext-danger text-smallspan hand-rolled today.InputField— composesFieldLabel+Input+FieldErrorinto one labelled, validated field. Controlled and library-agnostic (takeserror); the typed successor to the untypedInputGroup.PasswordInput/SearchInput— composed inputs that will own the password-reveal / search adornments. Phase 1 delegates toInput; the adornment logic moves into them whenInputis slimmed.The redesign, phased
search→SearchInput(~26),type='password'→PasswordInput(~14),isValid/InputGroup→InputField(~50/~62).Inputto a dumb primitive (dropsearch+ the password toggle; controlledinvalid), retireInputGroup.No form-state library introduced —
InputFieldis controlled, so it works with manual state today and is drop-in for react-hook-form later if ever adopted.How did you test this code?
npm run typecheck: new component files are clean; stories carry only the pre-existingstorybook-module note shared by all 58 existing stories.npm run lint: clean on all new files.Default,Required,WithError,Sizes, …) for visual coverage. Draft to validate the lint gate / Unit Tests / E2E in CI.