Skip to content

Commit

Permalink
feat: switch default validationBehavior to aria and allow switching v…
Browse files Browse the repository at this point in the history 
…ia props (#2987)

* chore: add support validationBehavior aria

* chore: add validationBehavior to Provider

* chore: add autocomplete validation test

* chore: add checkbox validation test

* fix(input): require condition

* docs: add description of validationBehavior props

* chore: add support validationBehavior props for date components

* docs(dates): add description of validationBehavior props

* chore: add changeset

* chore: format

* chore: fix test

* fix: select validationBehavior is not support yet

* fix: select validationBehavior not supported yet

* chore(docs): validation behavior prop added to nextui-provider

---------

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>
  • Loading branch information
@ryo-manba @jrgarciadev
ryo-manba and jrgarciadev authored May 22, 2024
1 parent bc75983 commit 540aa21
Show file tree
Hide file tree
Showing 44 changed files with 901 additions and 307 deletions.
13 changes: 13 additions & 0 deletions .changeset/smooth-laws-tap.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---
"@nextui-org/autocomplete": minor
"@nextui-org/checkbox": minor
"@nextui-org/date-input": minor
"@nextui-org/date-picker": minor
"@nextui-org/input": minor
"@nextui-org/radio": minor
"@nextui-org/select": minor
"@nextui-org/system": minor
"@nextui-org/use-aria-multiselect": minor
---

Change validationBehavior from native to aria by default, with the option to change via props.
9 changes: 9 additions & 0 deletions apps/docs/content/docs/api-references/nextui-provider.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,15 @@ interface AppProviderProps {
- **Type**: `boolean`
- **Default**: Same as `disableAnimation`

<Spacer y={2}/>

`validationBehavior`

- **Description**: 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.
- **Type**: `native | aria`
- **Default**: `aria`

---

## Types
Expand Down
1 change: 1 addition & 0 deletions apps/docs/content/docs/components/autocomplete.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -428,6 +428,7 @@ properties to customize the popover, listbox and input components.
| disabledKeys | `all` \| `React.Key[]` | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. | - |
| errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | An error message to display below the field. | - |
| validate | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. | - |
| 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 Autocomplete. | - |
| endContent | `ReactNode` | Element to be rendered in the right side of the Autocomplete. | - |
| autoFocus | `boolean` | Whether the Autocomplete should be focused on render. | `false` |
Expand Down
3 changes: 1 addition & 2 deletions apps/docs/content/docs/components/calendar.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,10 +226,9 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr
| isDateUnavailable | `(date: DateValue) => boolean` | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. | - |
| createCalendar | `(calendar: SupportedCalendars) => Calendar \| null` | This function helps to reduce the bundle size by providing a custom calendar system. You can also use the NextUIProvider to provide the createCalendar function to all nested components. | `all<br> calendars` |
| errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the field. | - |
| validate | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined` | Validate time input values when committing (e.g. on blur), and return error messages for invalid values. | - |
| hideDisabledDates | `boolean` | Whether to hide the disabled or invalid dates. | `false` |
| disableAnimation | `boolean` | Whether to disable the animation of the calendar. | `false` |
| classNames | `Record<"base"｜ "prevButton"｜ "nextButton"｜ "headerWrapper" \| "header" \| "title" \| "content" \| "gridWrapper" \| "grid" \| "gridHeader" \| "gridHeaderRow" \| "gridHeaderCell" \| "gridBody" \| "gridBodyRow" \| "cell" \| "cellButton" \| "pickerWrapper" \| "pickerMonthList" \| "pickerYearList" \| "pickerHighlight" \| "pickerItem" \| "helperWrapper" \| "errorMessage", string>` | Allows to set custom class names for the calendar slots. | - |
| classNames | `Record<"base"｜ "prevButton"｜ "nextButton"｜ "headerWrapper" \| "header" \| "title" \| "content" \| "gridWrapper" \| "grid" \| "gridHeader" \| "gridHeaderRow" \| "gridHeaderCell" \| "gridBody" \| "gridBodyRow" \| "cell" \| "cellButton" \| "pickerWrapper" \| "pickerMonthList" \| "pickerYearList" \| "pickerHighlight" \| "pickerItem" \| "helperWrapper" \| "errorMessage", string>` | Allows to set custom class names for the calendar slots. | - |

### Calendar Events

Expand Down
45 changes: 23 additions & 22 deletions apps/docs/content/docs/components/checkbox-group.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,28 +93,29 @@ In case you need to customize the checkbox even further, you can use the `useChe

### Checkbox Group Props

| Attribute | Type | Description | Default |
| ---------------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ---------- |
| children | `ReactNode[]` \| `ReactNode[]` | The checkboxes items. | - |
| orientation | `vertical` \| `horizontal` | The axis the checkbox group items should align with. | `vertical` |
| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the checkboxes. | `primary` |
| size | `xs` \| `sm` \| `md` \| `lg` \| `xl` | The size of the checkboxes. | `md` |
| radius | `none` \| `base` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `full` | The radius of the checkboxes. | `md` |
| name | `string` | The name of the CheckboxGroup, used when submitting an HTML form. | - |
| label | `string` | The label of the CheckboxGroup. | - |
| value | `string[]` | The current selected values. (controlled). | - |
| lineThrough | `boolean` | Whether the checkboxes label should be crossed out. | `false` |
| defaultValue | `string[]` | The default selected values. (uncontrolled). | - |
| isInvalid | `boolean` | Whether the checkbox group is invalid. | `false` |
| 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. | - |
| isDisabled | `boolean` | Whether the checkbox group is disabled. | `false` |
| isRequired | `boolean` | Whether user checkboxes are required on the input before form submission. | `false` |
| isReadOnly | `boolean` | Whether the checkboxes can be selected but not changed by the user. | - |
| disableAnimation | `boolean` | Whether the animation should be disabled. | `false` |
| classNames | `Record<"base"｜ "wrapper"｜ "label", string>` | Allows to set custom class names for the checkbox group slots. | - |
| Attribute | Type | Description | Default |
| ------------------ | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| children | `ReactNode[]` \| `ReactNode[]` | The checkboxes items. | - |
| orientation | `vertical` \| `horizontal` | The axis the checkbox group items should align with. | `vertical` |
| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the checkboxes. | `primary` |
| size | `xs` \| `sm` \| `md` \| `lg` \| `xl` | The size of the checkboxes. | `md` |
| radius | `none` \| `base` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `full` | The radius of the checkboxes. | `md` |
| name | `string` | The name of the CheckboxGroup, used when submitting an HTML form. | - |
| label | `string` | The label of the CheckboxGroup. | - |
| value | `string[]` | The current selected values. (controlled). | - |
| lineThrough | `boolean` | Whether the checkboxes label should be crossed out. | `false` |
| defaultValue | `string[]` | The default selected values. (uncontrolled). | - |
| isInvalid | `boolean` | Whether the checkbox group is invalid. | `false` |
| 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. | - |
| 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` |
| isReadOnly | `boolean` | Whether the checkboxes can be selected but not changed by the user. | - |
| disableAnimation | `boolean` | Whether the animation should be disabled. | `false` |
| classNames | `Record<"base"｜ "wrapper"｜ "label", string>` | Allows to set custom class names for the checkbox group slots. | - |

### Checkbox Group Events

Expand Down
Loading

0 comments on commit 540aa21

Please sign in to comment.