-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add docs for form validation #5343
Conversation
Build successful! 🎉 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
my turn to apologize for merge conflicts :(
…n-docs # Conflicts: # packages/react-aria-components/docs/CheckboxGroup.mdx # packages/react-aria-components/docs/ComboBox.mdx # packages/react-aria-components/docs/DateField.mdx # packages/react-aria-components/docs/DatePicker.mdx # packages/react-aria-components/docs/DateRangePicker.mdx # packages/react-aria-components/docs/NumberField.mdx # packages/react-aria-components/docs/RadioGroup.mdx # packages/react-aria-components/docs/SearchField.mdx # packages/react-aria-components/docs/Select.mdx # packages/react-aria-components/docs/TextField.mdx # packages/react-aria-components/docs/TimeField.mdx
Build successful! 🎉 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Did a sweep of the docs, things look good to me. Just one discrepancy I noticed but probably a non-issue
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Probably a non-issue, but is there a reason why the NumberField HelpText example wasn't changed to match the example pattern that the other docs switched to (aka showing the valid and invalid messages side by side)?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think I just thought that example was closer to real-world. But I could be convinced to change it too.
7c12240
Build successful! 🎉 |
## API Changes
unknown top level export { type: 'any' } @react-spectrum/formForm SpectrumFormProps {
- action?: string
+ action?: string | FormHTMLAttributes<HTMLFormElement>['action']
+ autoCapitalize?: 'off' | 'on'
+ autoComplete?: 'off' | 'on'
children: ReactElement<SpectrumLabelableProps> | Array<ReactElement<SpectrumLabelableProps>>
encType?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'
isDisabled?: boolean
isEmphasized?: boolean
isQuiet?: boolean
isReadOnly?: boolean
isRequired?: boolean
- method?: 'get' | 'post'
- onSubmit?: FormEventHandler
+ method?: 'get' | 'post' | 'dialog'
+ onReset?: (FormEvent<HTMLFormElement>) => void
+ onSubmit?: (FormEvent<HTMLFormElement>) => void
+ role?: 'search' | 'presentation'
target?: '_blank' | '_self' | '_parent' | '_top'
validationBehavior?: 'aria' | 'native' = 'aria'
validationErrors?: ValidationErrors
validationState?: ValidationState = 'valid'
|
This adds documentation for the form validation features added in #5288 and #5313. There is a high level "Forms" guide for both React Spectrum and React Aria, along with docs in each individual component. The component level docs have a single basic example, and link out to the forms guide to cover more details. The guide covers labeling and help text, submitting data, built-in validation, custom validation, realtime validation, server validation, and usage with third party form libraries like React Hook Form.
Also fixed a couple bugs along the way. Main one is a workaround for a React issue causing controlled textareas with minLength constraints not to validate in Chrome. facebook/react#19474 I submitted a React PR for that as well but since the issue exists since at least React 15, we'll need a workaround. facebook/react#27635