feat(Validation): Add new Validation components #351
Conversation
- add ValidationChecklist, ValidationItem - add validation prop to Alert
haworku
requested review from
ahobson,
gidjin,
sarboc,
suzubara and
tinyels
as code owners
| <ValidationChecklist id="validate-password"> | ||
| <ValidationItem | ||
| id="required" | ||
| isValid={values.password.length > 0}> |
There was a problem hiding this comment.
Ideally isValid would use different logic than this - just did something simple for the example. Open to other ways to do this. The alternative I found was writing a long validate function that digs inside yup's error object and manually updated bits of component state. It seemed like overkill for this example.
react hook form seems to handle this better than formik... couldn't find a similar formik util.
There was a problem hiding this comment.
ahh I see, yeah I wouldn't worry too much about this since it's really a Formik implementation detail..
| <ValidationChecklist id="validate-password"> | ||
| <ValidationItem | ||
| id="required" | ||
| isValid={values.password.length > 0}> |
There was a problem hiding this comment.
ahh I see, yeah I wouldn't worry too much about this since it's really a Formik implementation detail..
| export default { | ||
| title: 'Forms/Validation', | ||
| component: ValidationChecklist, | ||
| ValidationItem, |
There was a problem hiding this comment.
TIL you can also have subcomponents if you like that idea
There was a problem hiding this comment.
@ahobson Thanks for sharing! I'm definitely going to use this. Also seems useful for a bunch of our other stories, I may do some cleanup later this week.
Summary
Add
ValidationChecklistandValidationItemcomponents. See https://designsystem.digital.gov/components/form-controls/#validationRelated Issues or PRs
#80