docs(ds-global-form): error-state stories for every input and field#709
Open
advl wants to merge 2 commits into
Open
docs(ds-global-form): error-state stories for every input and field#709advl wants to merge 2 commits into
advl wants to merge 2 commits into
Conversation
Each input/field presents errors differently, so show the error state per component rather than once at the pattern level. Two helpers in storybook/: - errorStory(): builds the RHF-driven WithError story for a *Field — the field is registered, marked touched, and given a failing validation rule, so the Wrapper adds .danger and renders FieldError (the field's real error state). - danger(): a decorator that wraps a bare presentational subcomponent in the field .danger > .payload context so the error chrome selector matches, plus a FieldError message — showing the visual error layer the subcomponent owns (subcomponents have no Wrapper/RHF of their own). Adds WithError to all 15 remaining *Field stories (DateField already had one) and ErrorState to all 15 UI subcomponents (Hidden* excluded — no UI). Package check gate passes; 236 tests pass; storybook builds.
- ColorField WithError was a no-op: ColorField binds a non-empty default (#000000), so a plain required rule can never fail. Use a validate rule so the error actually surfaces. - Fold DateField's hand-rolled WithError into the errorStory() helper for consistency with every other field. - Fix RadioInput ErrorState TSDoc: pointed at a non-existent RadioField — now references ChoicesField/SimpleChoicesField, and clarifies a single radio has no control-level error border (error shown via the message). - Soften Checkbox/Range ErrorState TSDoc: these controls have no error border of their own (Range's field-tier error chrome lands on the number input); the error is conveyed by the FieldError message. From the #709 review swarm. check gate passes; storybook builds.
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.
Done
Add an error-state story to every input and field, because each one presents errors differently — a single pattern-level error demo doesn't represent them.
Two helpers in
src/storybook/:errorStory()— builds the RHF-drivenWithErrorstory for a*Field: the field is registered, marked touched, and given a failing validation rule for its empty value, so react-hook-form reports an error → the Wrapper adds.dangerto.ds.fieldand renders<FieldError>. This shows each field's real error presentation (red chrome + message), distinct per component.danger()decorator — wraps a bare presentational subcomponent in the field.danger > .payloadcontext (+ aFieldErrormessage), so the error-chrome selector matches. Subcomponents have no Wrapper/RHF of their own, so this shows the visual error layer the subcomponent owns, honestly, without faking form state.Coverage:
WithErroron all 15 remaining*Fieldstories (DateFieldalready had one).ErrorStateon all 15 UI subcomponent stories (HiddenInput/HiddenFieldexcluded — no UI)..color-trigger, FileUploadInput.drop-zone), which key off the same.danger > .payloadancestor.QA
components/*Fieldhas a WithError showing the red chrome + error message; everysubcomponents/*Inputhas an ErrorState showing the error visual.bun run checkgate passes, full suite 236 tests pass,build:storybooksucceeds.PR readiness check
Documentation 📝check,check:fix,test,build,build:all.Screenshots
Error states are best reviewed via Chromatic / the built Storybook (jsdom can't render the
.dangerchrome visuals).