Skip to content

Commit

Permalink
refactor(docs): revise validate content
Browse files Browse the repository at this point in the history
  • Loading branch information
@wingkwong
wingkwong committed May 30, 2024
1 parent 597213a commit 1e84b98
Show file tree
Hide file tree
Showing 9 changed files with 9 additions and 9 deletions.
2 changes: 1 addition & 1 deletion apps/docs/content/docs/components/checkbox-group.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ In case you need to customize the checkbox even further, you can use the `useChe
| validationState | `valid` \| `invalid` | Whether the inputs should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead. | - |
| description | `ReactNode` | The checkbox group description. | - |
| errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | The checkbox group error message. | - |
| validate | `(value: string[]) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - |
| validate | `(value: string[]) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - |
| validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` |
| isDisabled | `boolean` | Whether the checkbox group is disabled. | `false` |
| isRequired | `boolean` | Whether user checkboxes are required on the input before form submission. | `false` |
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/docs/components/date-input.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,7 @@ import {parseZonedDateTime} from "@internationalized/date";
| locale | `string` | The locale to display and edit the value according to. | - |
| description | `ReactNode` | A description for the date input. Provides a hint such as specific requirements for what to choose. | - |
| errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the date input. | - |
| validate | `(value: MappedDateValue<DateValue>) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g., on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - |
| validate | `(value: MappedDateValue<DateValue>) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Display validation errors upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - |
| validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` |
| startContent | `ReactNode` | Element to be rendered in the left side of the date input. | - |
| endContent | `ReactNode` | Element to be rendered in the right side of the date input. | - |
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/docs/components/date-picker.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,7 @@ import {I18nProvider} from "@react-aria/i18n";
| placeholderValue | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null` | The placeholder of the date-picker. | - |
| description | `ReactNode` | A description for the date-picker. Provides a hint such as specific requirements for what to choose. | - |
| errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the date input. | - |
| validate | `(value: MappedDateValue<DateValue>) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g., on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - |
| validate | `(value: MappedDateValue<DateValue>) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Display validation errors upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - |
| validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` |
| startContent | `ReactNode` | Element to be rendered in the left side of the date-picker. | - |
| endContent | `ReactNode` | Element to be rendered in the right side of the date-picker. | - |
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/docs/components/date-range-picker.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -354,7 +354,7 @@ import {I18nProvider} from "@react-aria/i18n";
| placeholderValue | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null` | The placeholder of the date-range-picker. | - |
| description | `ReactNode` | A description for the date-range-picker. Provides a hint such as specific requirements for what to choose. | - |
| errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the date input. | - |
| validate | `(value: RangeValue<MappedDateValue<DateValue>>) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g., on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - |
| validate | `(value: RangeValue<MappedDateValue<DateValue>>) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Display validation errors upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - |
| validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA. | `aria` |
| startContent | `ReactNode` | Element to be rendered in the left side of the date-range-picker. | - |
| endContent | `ReactNode` | Element to be rendered in the right side of the date-range-picker. | - |
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/docs/components/input.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@ In case you need to customize the input even further, you can use the `useInput`
| placeholder | `string` | The placeholder of the input. | - |
| description | `ReactNode` | A description for the input. Provides a hint such as specific requirements for what to choose. | - |
| errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | An error message for the input. It is only shown when `isInvalid` is set to `true` | - |
| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - |
| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - |
| validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` |
| startContent | `ReactNode` | Element to be rendered in the left side of the input. | - |
| endContent | `ReactNode` | Element to be rendered in the right side of the input. | - |
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/docs/components/radio-group.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ In case you need to customize the radio group even further, you can use the `use
| defaultValue | `string[]` | The default selected value. (uncontrolled). | - |
| description | `ReactNode` | Radio group description . | - |
| errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | Radio group error message. | - |
| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - |
| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - |
| validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` |
| isDisabled | `boolean` | Whether the radio group is disabled. | `false` |
| isRequired | `boolean` | Whether user checkboxes are required on the input before form submission. | `false` |
Expand Down
Loading

0 comments on commit 1e84b98

Please sign in to comment.