From 7b1784da84bf02155d60e5fbe569232cba76c669 Mon Sep 17 00:00:00 2001 From: delangle Date: Tue, 17 Sep 2024 13:56:36 +0200 Subject: [PATCH] Fix links --- CHANGELOG.md | 2 +- docs/.link-check-errors.txt | 1 + .../migration-pickers-v6/migration-pickers-v6.md | 2 +- .../migration-pickers-v7/migration-pickers-v7.md | 13 ++++--------- 4 files changed, 7 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f2a6607527ba..549c6d2c6806 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2518,7 +2518,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.4`. ``` - 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: diff --git a/docs/.link-check-errors.txt b/docs/.link-check-errors.txt index 6ecc503cc78a..0438fa82a091 100644 --- a/docs/.link-check-errors.txt +++ b/docs/.link-check-errors.txt @@ -1,2 +1,3 @@ Broken links found by `docs:link-check` that exist: +- https://mui.com/x/react-date-pickers/fields/#accessible-dom-structure diff --git a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md index 20f3c0875f22..0abbe9069cf4 100644 --- a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md +++ b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md @@ -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: diff --git a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md index 0908e7f83b21..851bb2a54bca 100644 --- a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md +++ b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md @@ -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 ``, which held the whole value for the component, but unfortunately presents a few limitations in terms of accessibility when managing multiple section values. @@ -145,7 +140,7 @@ these props will now be passed to the hidden `` 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 `` 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, @@ -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. :::