feat(ConnectedForm): Allowing customValidations to be passed to form groups and connected inputs for dynamic validations#3252
Conversation
…ure we get the proper validations all the way up and down the tree
|
View your CI Pipeline Execution ↗ for commit 59c8992 ☁️ Nx Cloud last updated this comment at |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #3252 +/- ##
==========================================
- Coverage 90.38% 89.90% -0.49%
==========================================
Files 403 270 -133
Lines 6638 5664 -974
Branches 2149 1908 -241
==========================================
- Hits 6000 5092 -908
+ Misses 630 564 -66
Partials 8 8
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
dreamwasp
left a comment
dreamwasp
left a comment
There was a problem hiding this comment.
this makes sense to me - you're seeing some type errors with nested chedkboxes that need to be resolved but if you fix that type + add docs its good to go
…s, cleaning up tests
There was a problem hiding this comment.
Pull request overview
This PR extends Gamut’s ConnectedForm system to support field-level, dynamically-evaluated validation rules via a new customValidations prop. It’s designed to complement (and override) memoized form-level validationRules, enabling cross-field/runtime-dependent validation logic while keeping the Connected* input abstractions intact.
Changes:
- Adds
customValidationssupport touseFieldand threads it throughConnectedFormGroup, Connected inputs, anduseDebouncedField, merging with form-level rules (field-level taking priority). - Updates Styleguide docs and Storybook examples to document and demonstrate runtime-dependent validation use cases.
- Adds unit tests covering custom-only validations, override behavior, and merging behavior.
Reviewed changes
Copilot reviewed 15 out of 15 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedFormInputs/ConnectedFormInputs.mdx | Documents the new field-level customValidations capability and usage patterns. |
| packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedForm/ConnectedForm.stories.tsx | Adds a Storybook example demonstrating runtime-dependent validations via customValidations. |
| packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedForm/ConnectedForm.mdx | Adds a section linking to customValidations usage and renders the new story. |
| packages/gamut/src/ConnectedForm/utils.tsx | Implements merging of form-level validation rules with customValidations in useField and plumbs through useDebouncedField. |
| packages/gamut/src/ConnectedForm/ConnectedInputs/types.tsx | Extends connected input prop types to accept customValidations. |
| packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedTextArea.tsx | Passes customValidations into useField. |
| packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedSelect.tsx | Passes customValidations into useField. |
| packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedRadioGroupInput.tsx | Threads customValidations through the radio group input wrapper (but currently misses passing it to individual radios). |
| packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedRadioGroup.tsx | Accepts customValidations and uses it for required-state computation/registration flow. |
| packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedRadio.tsx | Passes customValidations into useField. |
| packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedNestedCheckboxes/index.tsx | Passes customValidations into useField. |
| packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedInput.tsx | Passes customValidations into useField. |
| packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedCheckbox.tsx | Passes customValidations into useField. |
| packages/gamut/src/ConnectedForm/ConnectedFormGroup.tsx | Extracts and forwards customValidations from field prop into useField and the rendered connected input. |
| packages/gamut/src/ConnectedForm/tests/useField.test.tsx | Adds test coverage for custom-only, override, and merged validation behavior. |
Comments suppressed due to low confidence (1)
packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedRadioGroupInput.tsx:22
customValidationsis not passed down to theConnectedRadiochildren. Since each radio registers the field (andConnectedRadioGroupdoesn't attach theregisterref to an input), field-level validations may not be enforced for radio groups when provided viacustomValidations.
<ConnectedRadio
disabled={disabled}
key={`${name}-${elem.value}`}
name={name}
{...elem}
/>
|
📬 Published Alpha Packages:
|
|
🚀 Styleguide deploy preview ready! Preview URL: https://6a303adc915ec32fceb8ba04--gamut-preview.netlify.app |
Overview
This PR adds the ability to pass custom validation objects to specific inputs in addition to the validations already included on the top level of the form. This is important because form-level validations are not easy to change dynamically because of both memoization and the need for accessing values "after" the form is instantiated.
There are a few threads kind of about this on the rhf github, but the general conclusions seem to be "you need to be able to access the
getValuesfunction when you create your validation rules" and "inlining on the register itself is the place to do wonky stuff".Since our connected inputs don't actually do the registering themselves and instead hand that responsibility off to the
useFieldhook, I have modified theuseFieldhook to acceptcustomValidationswhich can be passed to theFormGroupor the input itself. In either case, the custom rules will trickle intouseFieldand successfully MERGE those rules with the ones coming from the form, withcustomValidationstaking priority (since one might want to override a form level rule but the opposite seems unlikely to me).PR Checklist
Testing Instructions
Don't make me tap the sign.
PR Links and Envs