Skip to content

Commit

Permalink
Fix links
Browse files Browse the repository at this point in the history
  • Loading branch information
flaviendelangle committed Sep 17, 2024
1 parent 28cd5ea commit 7b1784d
Show file tree
Hide file tree
Showing 4 changed files with 7 additions and 11 deletions.
2 changes: 1 addition & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2518,7 +2518,7 @@ Same changes as in `@mui/[email protected]`.
```
- The headless field hooks (e.g.: `useDateField`) now returns a new prop called `enableAccessibleFieldDOMStructure`.
This property is utilized to determine whether the anticipated UI is constructed using an accessible DOM structure. Learn more about this new [accessible DOM structure](/x/react-date-pickers/fields/#accessible-dom-structure).
This property is utilized to determine whether the anticipated UI is constructed using an accessible DOM structure.
When building a custom UI, you are most-likely only supporting one DOM structure, so you can remove `enableAccessibleFieldDOMStructure` before it is passed to the DOM:
Expand Down
1 change: 1 addition & 0 deletions docs/.link-check-errors.txt
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
Broken links found by `docs:link-check` that exist:

- https://mui.com/x/react-date-pickers/fields/#accessible-dom-structure
Original file line number Diff line number Diff line change
Expand Up @@ -439,7 +439,7 @@ The headless field hooks (e.g.: `useDateField`) now return a new prop called `en
This is used to know if the current UI expected is built using the accessible DOM structure or not.

:::info
See [Fields—Accessible DOM structure](/x/react-date-pickers/fields/#accessible-dom-structure) for more details.
See [Migration from v7 to v8—New DOM structure for the field](/x/migration/migration-pickers-v7/#new-dom-structure-for-the-field) for more details.
:::

When building a custom UI, you are most-likely only supporting one DOM structure, so you can remove `enableAccessibleFieldDOMStructure` before it is passed to the DOM:
Expand Down
13 changes: 4 additions & 9 deletions docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,12 +64,7 @@ After running the codemods, make sure to test your application and that you don'
Feel free to [open an issue](https://github.com/mui/mui-x/issues/new/choose) for support if you need help to proceed with your migration.
:::

## Breaking changes

Since v7 is a major release, it contains some changes that affect the public API.
These changes were done for consistency, improve stability and make room for new features.

### New DOM structure for the field
## New DOM structure for the field

Before v8, the fields' DOM structure consisted of an `<input />`, which held the whole value for the component,
but unfortunately presents a few limitations in terms of accessibility when managing multiple section values.
Expand Down Expand Up @@ -145,7 +140,7 @@ these props will now be passed to the hidden `<input />` element.
If you are passing a custom field component to your pickers, you need to create a new one that is using the accessible DOM structure.
This new component will need to use the `PickersSectionList` component instead of an `<input />` HTML element.

You can have a look at the [custom PickersTextField](/x/react-date-pickers/custom-field/#using-custom-pickerstextfield) to have a concrete example.
You can have a look at the [Using a custom input](/x/react-date-pickers/custom-field/#using-a-custom-input) to have a concrete example.

:::info
If your custom field was used to create a Joy UI design component,
Expand All @@ -157,11 +152,11 @@ you may want to wait a few weeks for the release of an out-of-the-box Joy `Picke
If you are passing a custom `TextField` component to your fields and pickers,
you need to create a new one that is using the accessible DOM structure.

You can have a look at the second demo of the [Material PickersTextField section](/x/react-date-pickers/custom-field/#using-material-pickerstextfield) to have a concrete example.
You can have a look at the second demo of the [Wrapping PickersTextField](/x/react-date-pickers/custom-field/#wrapping-pickerstextfield) to have a concrete example.

:::info
If your custom `TextField` was used to apply a totally different input that did not use `@mui/material/TextField`,
please consider having a look at the [custom PickersTextField](/x/react-date-pickers/custom-field/#using-custom-pickerstextfield) section which uses `slots.field`.
please consider having a look at the [Using a custom input](/x/react-date-pickers/custom-field/#using-a-custom-input) section which uses `slots.field`.
This approach can be more appropriate for deeper changes.
:::

Expand Down

0 comments on commit 7b1784d

Please sign in to comment.