-This removes the need for the `disableEqualOverflow` prop:
+This eliminates the need for the `disableEqualOverflow` prop:
```diff
- 
+In v5, Grid items included spacing in their boxes.
+In v6, Grid items no longer inclue spacing in their boxes.
+
+Note that the item position doesn't change.
:::warning
-Both of these changes might slightly affect your layout.
-Note that the items' position doesn't change.
-We recommend adopting this new behavior and **not trying to replicate the old one**, as this is a more predictable and modern approach.
+This update may lead to unexpected changes to your app's layout.
+Still, we strongly recommend adopting this new behavior rather than trying to replicate the old pattern, as the new version is more predictable and modern.
:::
-### Rating
+
+
+### Rating aria-label
Previously, due to a bug, the `aria-label` attribute was "null Stars" when no value was set in the Rating component.
This is fixed in v6, with the `aria-label` attribute being "0 Stars" when no value is set.
From 6afff02f37c746c97d24ec09d1d4d6af80f575e0 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Mon, 29 Jul 2024 10:55:57 -0400
Subject: [PATCH 07/33] overriding props
---
.../migrating-to-v6/migrating-to-v6.md | 38 +++++++++----------
1 file changed, 18 insertions(+), 20 deletions(-)
diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
index 473bd5f8be497e..cba630bb78a377 100644
--- a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
+++ b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
@@ -106,9 +106,7 @@ To align with React 19's removal of UMD builds, Material UI has also removed it
Instead, we recommend using ESM-based CDNs such as [esm.sh](https://esm.sh/).
For alternative installation methods, refer to the [CDN documentation](/material-ui/getting-started/installation/#cdn).
-### Autocomplete
-
-#### onInputChange reason values
+### Autocomplete onInputChange values added
Three new values have been introduced to the `reason` argument in the `onInputChange` callback of the Autocomplete component.
These values offer more granular options for three specific use cases previously covered by `"reset"`:
@@ -152,7 +150,7 @@ export default function ChipExample() {
In v6, the `children` prop passed to the Loading Button component is now wrapped in a `` tag to avoid [issues](https://github.com/mui/material-ui/issues/27853) when using tools to translate websites.
-### Grid v2 (Unstable_Grid)
+### Grid v2 (Unstable_Grid) changes
The Grid v2 component was updated to match the API of the new Pigment Grid component to enable interoperability between the two:
@@ -161,7 +159,7 @@ The Grid v2 component was updated to match the API of the new Pigment Grid compo
This introduces breaking changes described in the sections that follow:
-#### Size and offset props
+#### Size and offset props renamed
In v5, the size and offset props were named to correspond with the theme's breakpoints.
For the default theme, these were:
@@ -202,7 +200,7 @@ Use this codemod to migrate your project to the new `size` and `offset` props:
npx @mui/codemod@next v6.0.0/grid-v2-props
-### Rating aria-label
+### Rating aria-label fixed
Previously, due to a bug, the `aria-label` attribute was "null Stars" when no value was set in the Rating component.
This is fixed in v6, with the `aria-label` attribute being "0 Stars" when no value is set.
-### useMediaQuery
+### useMediaQuery types removed
-The following deprecated types were removed:
+The following deprecated types are removed in v6:
- `MuiMediaQueryList`: use `MediaQueryList` (from lib.dom.d.ts) instead.
- `MuiMediaQueryListEvent`: use `MediaQueryListEvent` (from lib.dom.d.ts) instead.
@@ -268,19 +266,18 @@ The following deprecated types were removed:
### CssVarsProvider and extendTheme
The `CssVarsProvider` and `extendTheme` APIs are now stable.
-If you already use them in v5, you can now drop the experimental prefix.
+If you're already using them in v5 you can now drop the experimental prefix:
```diff
- import { experimental_extendTheme as extendTheme, Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles';
+ import { extendTheme, CssVarsProvider } from '@mui/material/styles';
```
-Check out the [CSS theme variables page](/material-ui/customization/css-theme-variables/overview/) to learn more about it.
+See [CSS theme variables](/material-ui/customization/css-theme-variables/overview/) for more details.
### Add styles for specific color modes
-Material UI v6 introduces a new utility for adding styles to specific color modes called `theme.applyStyles`.
-It's designed to replace `theme.palette.mode` when applying light or dark styles.
+Material UI v6 introduces a new utility for adding styles to specific color modes called `theme.applyStyles`, designed to replace `theme.palette.mode` when applying light or dark styles:
```diff
const MyComponent = styled('button')(({ theme }) => ({
@@ -303,21 +300,22 @@ npx @mui/codemod@next v6.0.0/theme-v6 ` heading element.
+This change may affect customizations relying on the previous DOM structure and CSS specificity.
+Additionally, the default heading element might conflict with existing heading structures on your page.
-If your styles or DOM manipulations depend on the old structure, you will need to update them to accommodate the new heading element. If the default heading element conflicts with your existing structure, you can change the heading element using the `slotProps.heading.component` prop.
+If your styles or DOM manipulations depend on the old structure, you will need to update them to accommodate the new heading element.
+If the default heading element conflicts with your existing structure, you can change the heading element using the `slotProps.heading.component` prop.
```jsx
@@ -141,6 +144,8 @@ These values offer more granular options for three specific use cases previously
These are available in addition to the existing `"input"`, `"reset"`, and `"clear"` values.
+### Chip
+
In earlier versions, the Chip component would lose focus when the user pressed the esc key, which differs from how other button-like components work.
In v6 the Chip now retains focus as expected.
@@ -168,11 +173,11 @@ export default function ChipExample() {
}
```
-### Loading Button children
+### Loading Button
In v6, the `children` prop passed to the Loading Button component is now wrapped in a `` tag to avoid [issues](https://github.com/mui/material-ui/issues/27853) when using tools to translate websites.
-### Grid v2 (Unstable_Grid) changes
+### Grid v2 (Unstable_Grid)
The Grid v2 component was updated to match the API of the new Pigment Grid component to enable interoperability between the two:
@@ -270,12 +275,12 @@ Still, we strongly recommend adopting this new behavior rather than trying to re
-### Rating aria-label fixed
+### Rating
Previously, due to a bug, the `aria-label` attribute was "null Stars" when no value was set in the Rating component.
This is fixed in v6, with the `aria-label` attribute being "0 Stars" when no value is set.
-### useMediaQuery types removed
+### useMediaQuery
The following deprecated types are removed in v6:
@@ -297,7 +302,7 @@ If you're already using them in v5 you can now drop the experimental prefix:
See [CSS theme variables](/material-ui/customization/css-theme-variables/overview/) for more details.
-### Add styles for specific color modes
+### Color mode theme utility
Material UI v6 introduces a new utility for adding styles to specific color modes called `theme.applyStyles`, designed to replace `theme.palette.mode` when applying light or dark styles:
From 25ab9013b97b135b441f2d49bfac2bdbcbf6b46f Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Wed, 31 Jul 2024 21:37:22 -0500
Subject: [PATCH 12/33] restore start section
---
.../migrating-to-v6/migrating-to-v6.md | 30 +++++++++++++++----
1 file changed, 24 insertions(+), 6 deletions(-)
diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
index b79da25bed92cb..985933fd002dc9 100644
--- a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
+++ b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
@@ -16,11 +16,29 @@ Though optional, we highly recommend migrating your Material UI app to Pigment C
### Quality-of-life improvements
-Material UI v6 includes several other quality-of-life improvements, including:
+Material UI v6 features several other quality-of-life improvements, including:
-- Stabilizing the `CssVarsProvider` API. CSS variables provide more performant customization possibilities along with a cleaner developer experience.
-- Support for container queries in themes.
-- A new theme utility for adding styles to specific color modes.
+- stabilizing [the `CssVarsProvider` API](#cssvarsprovider-and-extendtheme)
+- support for container queries in themes
+- a [new theme utility](#color-mode-theme-utility) for adding styles to specific color modes
+
+## Start using the beta release
+
+In your `package.json` file, change the package version from `"latest"` to `"next"`.
+
+```diff title="package.json"
+-"@mui/material": "latest",
++"@mui/material": "next",
+```
+
+If you're using any of these packages, you can also change their version to `"next"`:
+
+- `@mui/icons-material`
+- `@mui/system`
+- `@mui/lab`
+- `@mui/material-nextjs`
+- `@mui/styled-engine-sc`
+- `@mui/utils`
## Supported browsers and versions
@@ -280,7 +298,7 @@ Still, we strongly recommend adopting this new behavior rather than trying to re
Previously, due to a bug, the `aria-label` attribute was "null Stars" when no value was set in the Rating component.
This is fixed in v6, with the `aria-label` attribute being "0 Stars" when no value is set.
-### useMediaQuery
+### useMediaQuery types
The following deprecated types are removed in v6:
@@ -300,7 +318,7 @@ If you're already using them in v5 you can now drop the experimental prefix:
+ import { extendTheme, CssVarsProvider } from '@mui/material/styles';
```
-See [CSS theme variables](/material-ui/customization/css-theme-variables/overview/) for more details.
+See [CSS theme variables](/material-ui/customization/css-theme-variables/overview/) for more details about working with these APIs.
### Color mode theme utility
From 0c38f50f171fbab3a182d0788d6fb61aa506cd7b Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Wed, 31 Jul 2024 21:39:34 -0500
Subject: [PATCH 13/33] fix accordion headers
---
.../material/migration/migrating-to-v6/migrating-to-v6.md | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
index 985933fd002dc9..45e8eec44406de 100644
--- a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
+++ b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
@@ -124,9 +124,7 @@ To align with React 19's removal of UMD builds, Material UI has also removed it
Instead, we recommend using ESM-based CDNs such as [esm.sh](https://esm.sh/).
For alternative installation methods, refer to the [CDN documentation](/material-ui/getting-started/installation/#cdn).
-### Autocomplete
-
-#### Accordion Summary heading
+### Accordion
To meet the [W3C Accordion Pattern standard](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/), the Accordion Summary is now wrapped with a default `` heading element.
This change may affect customizations relying on the previous DOM structure and CSS specificity.
@@ -151,6 +149,8 @@ If the default heading element conflicts with your existing structure, you can c
```
+### Autocomplete
+
#### onInputChange reason values added
Three new values have been introduced to the `reason` argument in the `onInputChange` callback of the Autocomplete component.
From 88eef6815a3cfecae549e38f67f04d21228f7566 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Wed, 31 Jul 2024 21:42:23 -0500
Subject: [PATCH 14/33] unnecessary header
---
docs/data/material/migration/migrating-to-v6/migrating-to-v6.md | 2 --
1 file changed, 2 deletions(-)
diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
index 45e8eec44406de..b72d0825b14605 100644
--- a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
+++ b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
@@ -151,8 +151,6 @@ If the default heading element conflicts with your existing structure, you can c
### Autocomplete
-#### onInputChange reason values added
-
Three new values have been introduced to the `reason` argument in the `onInputChange` callback of the Autocomplete component.
These values offer more granular options for three specific use cases previously covered by `"reset"`:
From 9e60ae846c8b512f532cb10b118edee1eeb46e7b Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Wed, 7 Aug 2024 17:47:13 -0500
Subject: [PATCH 15/33] nbsps
---
.../migrating-to-v6/migrating-to-v6.md | 24 ++++++++++---------
1 file changed, 13 insertions(+), 11 deletions(-)
diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
index ee6f19ac2f48a7..016d15888c3e45 100644
--- a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
+++ b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
@@ -6,17 +6,17 @@
### React Server Component support
-Material UI v6 introduces Pigment CSS, a zero-runtime CSS-in-JS styling engine to replace Emotion and styled-components as a more future-proof solution for writing styles in React 19 and beyond.
-With Pigment CSS, styles are extracted at build time rather than runtime, avoiding client-side recalculations and unlocking React Server Component (RSC) compatibility.
-This also leads to significant reductions in bundle sizes for Material UI apps.
+Material UI v6 introduces Pigment CSS, a zero-runtime CSS-in-JS styling engine to replace Emotion and styled-components as a more future-proof solution for writing styles in React 19 and beyond.
+With Pigment CSS, styles are extracted at build time rather than runtime, avoiding client-side recalculations and unlocking React Server Component (RSC) compatibility.
+This also leads to significant reductions in bundle sizes for Material UI apps.
-**In v6, Pigment CSS migration is opt-in.**
-Future major versions of Material UI will likely use Pigment CSS as the default styling solution.
-Though optional, we highly recommend migrating your Material UI app to Pigment CSS while upgrading to v6.
+**In v6, Pigment CSS migration is opt-in.**
+Future major versions of Material UI will likely use Pigment CSS as the default styling solution.
+Though optional, we highly recommend migrating your Material UI app to Pigment CSS while upgrading to v6.
### Quality-of-life improvements
-Material UI v6 features several other quality-of-life improvements, including:
+Material UI v6 features several other quality-of-life improvements, including:
- stabilizing [the `CssVarsProvider` API](#cssvarsprovider-and-extendtheme)
- support for container queries in themes
@@ -106,7 +106,7 @@ Make sure that your application is still running without errors, and commit the
## Breaking changes
-Material UI v6 was designed to introduce minimal breaking changes when upgrading from v5.
+Material UI v6 was designed to introduce minimal breaking changes when upgrading from v5.
These include browser support updates, a Node.js version bump, and the removal of the UMD bundle.
These updates reduce the Material UI package size by 2.5MB—nearly 25% of the total size in v5.
@@ -263,7 +263,9 @@ npx @mui/codemod@next v6.0.0/grid-v2-props
You need to modify the import from `@mui/material/Unstable_Grid2` to `@mui/material/Grid2` before running the codemod.
:::
-If you have custom breakpoints, the change is the same:
+##### Using custom breakpoints
+
+The usage described above also applies to custom breakpoints:
```diff
-
@@ -375,7 +377,7 @@ See [Deprecations](/material-ui/migration/migrating-from-deprecated-apis/) for d
### System props
-MUI System props (such as `mt={*}`, `bgcolor={*}`, and more) have been deprecated in the Box, Typography, Link, Grid, and Stack components.
+MUI System props (such as `mt={*}`, `bgcolor={*}`, and more) have been deprecated in the Box, Typography, Link, Grid, and Stack components.
Use the codemod below to move all System props to the `sx` prop:
```bash
@@ -420,4 +422,4 @@ This reduces the API surface and lets you define variants in other slots of the
## Pigment CSS integration (optional)
-Once you've finished upgrading your app to v6, you'll be ready to start [migrating to Pigment CSS](/material-ui/migration/migrating-to-pigment-css/) for RSC support and a smaller bundle size.
+Once you've finished upgrading your app to v6, you'll be ready to start [migrating to Pigment CSS](/material-ui/migration/migrating-to-pigment-css/) for RSC support and a smaller bundle size.
From 69532c9cfee019c231dcdb6aad1cdc9cd0582424 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Wed, 7 Aug 2024 18:10:10 -0500
Subject: [PATCH 16/33] once youve upgraded
---
docs/data/material/migration/migrating-to-v6/migrating-to-v6.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
index 016d15888c3e45..501783c080f2a8 100644
--- a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
+++ b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
@@ -12,7 +12,7 @@ This also leads to significant reductions in bundle sizes for Material UI apps.
**In v6, Pigment CSS migration is opt-in.**
Future major versions of Material UI will likely use Pigment CSS as the default styling solution.
-Though optional, we highly recommend migrating your Material UI app to Pigment CSS while upgrading to v6.
+Though optional, we highly recommend migrating your Material UI app to Pigment CSS once you've upgraded to v6.
### Quality-of-life improvements
From 129b7d9497f055913068f77ca439d7ee1031510e Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Wed, 7 Aug 2024 18:11:16 -0500
Subject: [PATCH 17/33] better seo header
---
docs/data/material/migration/migrating-to-v6/migrating-to-v6.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
index 501783c080f2a8..aca6a5bf3cc51e 100644
--- a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
+++ b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
@@ -2,7 +2,7 @@
This guide explains why and how to upgrade from Material UI v5 to v6.
-## Why you should upgrade
+## Why you should upgrade to Material UI v6
### React Server Component support
From a0d5b9716bb51f6f7d172603bd45450c62a59e0a Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Wed, 7 Aug 2024 18:15:54 -0500
Subject: [PATCH 18/33] x note
---
.../migration/migrating-to-v6/migrating-to-v6.md | 12 ++++++++++++
1 file changed, 12 insertions(+)
diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
index aca6a5bf3cc51e..071de7c01d3036 100644
--- a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
+++ b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
@@ -40,6 +40,18 @@ If you're using any of these packages, you can also change their version to `"ne
- `@mui/styled-engine-sc`
- `@mui/utils`
+Note that MUI X packages _do not_ follow the same versioning strategy as Material UI.
+The following packages should remain unchanged during the upgrade process:
+
+- `@mui/x-data-grid`
+- `@mui/x-data-grid-pro`
+- `@mui/x-data-grid-premium`
+- `@mui/x-date-pickers`
+- `@mui/x-date-pickers-pro`
+- `@mui/x-charts`
+- `@mui/x-tree-view`
+- `@mui/x-tree-view-proå`
+
## Supported browsers and versions
The default bundle targets have changed in v6.
From 722e2a35bdb66ac736fa2caa0d65fd862818c5e9 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Wed, 7 Aug 2024 18:16:48 -0500
Subject: [PATCH 19/33] typo :
---
docs/data/material/migration/migrating-to-v6/migrating-to-v6.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
index 071de7c01d3036..b68b6d954f0d65 100644
--- a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
+++ b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
@@ -50,7 +50,7 @@ The following packages should remain unchanged during the upgrade process:
- `@mui/x-date-pickers-pro`
- `@mui/x-charts`
- `@mui/x-tree-view`
-- `@mui/x-tree-view-proå`
+- `@mui/x-tree-view-pro`
## Supported browsers and versions
From b56f51bddb119f78c0720d92765d6af90b654272 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Wed, 7 Aug 2024 18:17:59 -0500
Subject: [PATCH 20/33] clarify wording
---
docs/data/material/migration/migrating-to-v6/migrating-to-v6.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
index b68b6d954f0d65..6943da65079a6b 100644
--- a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
+++ b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
@@ -41,7 +41,7 @@ If you're using any of these packages, you can also change their version to `"ne
- `@mui/utils`
Note that MUI X packages _do not_ follow the same versioning strategy as Material UI.
-The following packages should remain unchanged during the upgrade process:
+If you're using any of the following packages, they should remain unchanged during the upgrade process:
- `@mui/x-data-grid`
- `@mui/x-data-grid-pro`
From 6d0c971c9e927016a6b8f833a5606860139fa326 Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Wed, 7 Aug 2024 18:27:16 -0500
Subject: [PATCH 21/33] nbsps
---
.../material/migration/migrating-to-v6/migrating-to-v6.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
index 6943da65079a6b..a281f7b8a43040 100644
--- a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
+++ b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
@@ -2,7 +2,7 @@
This guide explains why and how to upgrade from Material UI v5 to v6.
-## Why you should upgrade to Material UI v6
+## Why you should upgrade to Material UI v6
### React Server Component support
@@ -40,7 +40,7 @@ If you're using any of these packages, you can also change their version to `"ne
- `@mui/styled-engine-sc`
- `@mui/utils`
-Note that MUI X packages _do not_ follow the same versioning strategy as Material UI.
+Note that MUI X packages _do not_ follow the same versioning strategy as Material UI.
If you're using any of the following packages, they should remain unchanged during the upgrade process:
- `@mui/x-data-grid`
From 2681eaff4f647a62c737c3421cdebd1b3fdcacbc Mon Sep 17 00:00:00 2001
From: DiegoAndai
Date: Tue, 13 Aug 2024 12:30:53 -0400
Subject: [PATCH 22/33] Add testing breaking changes section
---
.../migrating-to-v6/migrating-to-v6.md | 22 +++++++++++++++++++
1 file changed, 22 insertions(+)
diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
index aae607faa6380c..66b67f46838b4b 100644
--- a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
+++ b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
@@ -370,6 +370,28 @@ The following deprecated types are removed in v6:
- `MuiMediaQueryListEvent`: use `MediaQueryListEvent` (from lib.dom.d.ts) instead.
- `MuiMediaQueryListListener`: use `(event: MediaQueryListEvent) => void` instead.
+## Breaking changes affecting testing
+
+### Ripple effect
+
+The ripple effect's performance has been improved in v6.
+Because of this, you might need to update tests involving components with the ripple effect.
+If you are using `fireEvent` from `@testing-library/react` to simulate user interactions, you will need to wrap these inside `act` and `await` to avoid React warnings:
+
+```diff
+- fireEvent.click(button);
++ await act(async () => fireEvent.mouseDown(button));
+```
+
+The components affected by this change are:
+
+- All buttons
+- Checkbox
+- Chip
+- Radio Group
+- Switch
+- Tabs
+
## Stabilized APIs
### CssVarsProvider and extendTheme
From be37e1188ef9a6e2c6b849e25cc1f51b1e7e8302 Mon Sep 17 00:00:00 2001
From: DiegoAndai
Date: Tue, 13 Aug 2024 16:31:30 -0400
Subject: [PATCH 23/33] Complete change from "Migrate" to "Upgrade"
---
docs/data/material/components/grid/grid.md | 2 +-
.../material/migration/migration-grid-v2/migration-grid-v2.md | 2 +-
.../migrating-to-pigment-css.md | 2 +-
.../migration-css-theme-variables.md | 0
.../migrating-to-v6.md => upgrade-to-v6/upgrade-to-v6.md} | 0
docs/data/material/pages.ts | 4 ++--
docs/pages/material-ui/migration/migrating-to-pigment-css.js | 2 +-
.../material-ui/migration/migration-css-theme-variables.js | 2 +-
.../migration/{migrating-to-v6.js => upgrade-to-v6.js} | 2 +-
docs/translations/translations.json | 2 +-
10 files changed, 9 insertions(+), 9 deletions(-)
rename docs/data/material/migration/{migrating-to-v6 => upgrade-to-v6}/migrating-to-pigment-css.md (99%)
rename docs/data/material/migration/{migrating-to-v6 => upgrade-to-v6}/migration-css-theme-variables.md (100%)
rename docs/data/material/migration/{migrating-to-v6/migrating-to-v6.md => upgrade-to-v6/upgrade-to-v6.md} (100%)
rename docs/pages/material-ui/migration/{migrating-to-v6.js => upgrade-to-v6.js} (62%)
diff --git a/docs/data/material/components/grid/grid.md b/docs/data/material/components/grid/grid.md
index 3e1898118b6ba7..746764d11794bb 100644
--- a/docs/data/material/components/grid/grid.md
+++ b/docs/data/material/components/grid/grid.md
@@ -20,7 +20,7 @@ The `Grid` component shouldn't be confused with a data grid; it is closer to a l
:::
:::warning
-The `Grid` component has been deprecated. Please use the [Grid v2](/material-ui/react-grid2/) instead. See how to migrate in the [Grid v2 migration guide](/material-ui/migration/migration-grid-v2/) and [Material UI v6 migration guide](/material-ui/migration/migrating-to-v6/).
+The `Grid` component has been deprecated. Please use the [Grid v2](/material-ui/react-grid2/) instead. See how to migrate in the [Grid v2 migration guide](/material-ui/migration/migration-grid-v2/) and [Material UI v6 upgrade guide](/material-ui/migration/upgrade-to-v6/).
:::
## How it works
diff --git a/docs/data/material/migration/migration-grid-v2/migration-grid-v2.md b/docs/data/material/migration/migration-grid-v2/migration-grid-v2.md
index 005f12bf45759c..e3cf7f67d5629c 100644
--- a/docs/data/material/migration/migration-grid-v2/migration-grid-v2.md
+++ b/docs/data/material/migration/migration-grid-v2/migration-grid-v2.md
@@ -80,7 +80,7 @@ The Grid v2 is marked as stable in Material UI v6, so the `Unstable_` prefix is
```
Alongside the stabilization, the API has been improved.
-You can see the changes and further details on how to migrate in the [Material UI v6 migration guide](/material-ui/migration/migrating-to-v6/).
+You can see the changes and further details on how to migrate in the [Material UI v6 upgrade guide](/material-ui/migration/upgrade-to-v6/).
Finally, the original Grid component is deprecated and will be removed in the future, so we highly encourage you to migrate to Grid v2.
diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md b/docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md
similarity index 99%
rename from docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md
rename to docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md
index f080851e1aa138..3265efb2a5fed1 100644
--- a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md
+++ b/docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md
@@ -2,7 +2,7 @@
This guide helps you integrate Pigment CSS with Material UI v6.
-Before going through this guide, make sure you have [migrated to Material UI v6](/material-ui/migration/migrating-to-v6/).
+Before going through this guide, make sure you have [upgraded to Material UI v6](/material-ui/migration/upgrade-to-v6/).
## Introduction
diff --git a/docs/data/material/migration/migrating-to-v6/migration-css-theme-variables.md b/docs/data/material/migration/upgrade-to-v6/migration-css-theme-variables.md
similarity index 100%
rename from docs/data/material/migration/migrating-to-v6/migration-css-theme-variables.md
rename to docs/data/material/migration/upgrade-to-v6/migration-css-theme-variables.md
diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
similarity index 100%
rename from docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
rename to docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts
index bac35ba97326ea..a5c6c050d43a7d 100644
--- a/docs/data/material/pages.ts
+++ b/docs/data/material/pages.ts
@@ -277,8 +277,8 @@ const pages: MuiPage[] = [
subheader: 'Upgrade to v6',
children: [
{
- pathname: '/material-ui/migration/migrating-to-v6',
- title: 'Migrating to v6: getting started',
+ pathname: '/material-ui/migration/upgrade-to-v6',
+ title: 'Upgrade to v6: getting started',
},
{
pathname: '/material-ui/migration/migrating-from-deprecated-apis',
diff --git a/docs/pages/material-ui/migration/migrating-to-pigment-css.js b/docs/pages/material-ui/migration/migrating-to-pigment-css.js
index 96725a1d9b5e82..3c8305f325026e 100644
--- a/docs/pages/material-ui/migration/migrating-to-pigment-css.js
+++ b/docs/pages/material-ui/migration/migrating-to-pigment-css.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import * as pageProps from 'docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md?muiMarkdown';
+import * as pageProps from 'docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md?muiMarkdown';
export default function Page() {
return
Date: Tue, 13 Aug 2024 16:37:01 -0400
Subject: [PATCH 24/33] Soften the push for adopting Pigment CSS
---
docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
diff --git a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
index 66b67f46838b4b..a46e992803a337 100644
--- a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
+++ b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
@@ -10,9 +10,10 @@ Material UI v6 introduces Pigment CSS, a zero-runtime CSS-in-JS styling engine
With Pigment CSS, styles are extracted at build time rather than runtime, avoiding client-side recalculations and unlocking React Server Component (RSC) compatibility.
This also leads to significant reductions in bundle sizes for Material UI apps.
-**In v6, Pigment CSS migration is opt-in.**
+**In v6, Pigment CSS is opt-in.**
Future major versions of Material UI will likely use Pigment CSS as the default styling solution.
-Though optional, we highly recommend migrating your Material UI app to Pigment CSS once you've upgraded to v6.
+Though optional, we encourage trying Pigment CSS out in your Material UI app.
+If you wish to do so, go to the guide for [migrating to Pigment CSS](/material-ui/migration/migrating-to-pigment-css/) after this one.
### Quality-of-life improvements
From e0909b2ff250a094eb54d67d4aa18119903df961 Mon Sep 17 00:00:00 2001
From: DiegoAndai
Date: Tue, 13 Aug 2024 16:43:59 -0400
Subject: [PATCH 25/33] Improve QOL improvements section
---
docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
index a46e992803a337..b6c947b998d299 100644
--- a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
+++ b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
@@ -19,8 +19,8 @@ If you wish to do so, go to the guide for [migrating to Pigment CSS](/material-
Material UI v6 features several other quality-of-life improvements, including:
-- stabilizing [the `CssVarsProvider` API](#cssvarsprovider-and-extendtheme)
-- support for container queries in themes
+- `ThemeProvider` now supports all of the `CssVarsProvider` features
+- support for [container queries](/material-ui/customization/container-queries/)
- a [new theme utility](#color-mode-theme-utility) for adding styles to specific color modes
## Start using the beta release
From 4ad28e46b0215503882b5e2ed04f7acfdfd682b2 Mon Sep 17 00:00:00 2001
From: DiegoAndai
Date: Tue, 13 Aug 2024 16:50:25 -0400
Subject: [PATCH 26/33] Move Grid2 changes to Stabilized section
---
.../migration/upgrade-to-v6/upgrade-to-v6.md | 115 +++++++++---------
1 file changed, 55 insertions(+), 60 deletions(-)
diff --git a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
index b6c947b998d299..e869db3ef5d2d7 100644
--- a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
+++ b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
@@ -242,16 +242,65 @@ As the `ListItem` no longer supports these props, the class names related to the
In v6, the `children` prop passed to the Loading Button component is now wrapped in a `` tag to avoid [issues](https://github.com/mui/material-ui/issues/27853) when using tools to translate websites.
-### Grid v2 (Unstable_Grid)
+### Rating
+
+Previously, due to a bug, the `aria-label` attribute was "null Stars" when no value was set in the Rating component.
+This is fixed in v6, with the `aria-label` attribute being "0 Stars" when no value is set.
+
+### useMediaQuery types
+
+The following deprecated types are removed in v6:
-The `Grid2` was updated and stabilized:
+- `MuiMediaQueryList`: use `MediaQueryList` (from lib.dom.d.ts) instead.
+- `MuiMediaQueryListEvent`: use `MediaQueryListEvent` (from lib.dom.d.ts) instead.
+- `MuiMediaQueryListListener`: use `(event: MediaQueryListEvent) => void` instead.
+
+## Breaking changes affecting testing
+
+### Ripple effect
+
+The ripple effect's performance has been improved in v6.
+Because of this, you might need to update tests involving components with the ripple effect.
+If you are using `fireEvent` from `@testing-library/react` to simulate user interactions, you will need to wrap these inside `act` and `await` to avoid React warnings:
+
+```diff
+- fireEvent.click(button);
++ await act(async () => fireEvent.mouseDown(button));
+```
+
+The components affected by this change are:
+
+- All buttons
+- Checkbox
+- Chip
+- Radio Group
+- Switch
+- Tabs
+
+## Stabilized APIs
+
+### CssVarsProvider and extendTheme
+
+The `CssVarsProvider` and `extendTheme` APIs are now stable.
+If you're already using them in v5 you can now drop the experimental prefix:
+
+```diff
+-import { experimental_extendTheme as extendTheme, Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles';
++import { extendTheme, CssVarsProvider } from '@mui/material/styles';
+```
+
+See [CSS theme variables](/material-ui/customization/css-theme-variables/overview/) for more details about working with these APIs.
+
+### Grid2
+
+The `Grid2` (previously `Unstable_Grid2`) was updated and stabilized:
- The previous size (`xs`, `sm`, `md`, ...) and offset (`xsOffset`, `smOffset`, `mdOffset`, ...) props, which were named after the theme's breakpoints, were replaced with the `size` and `offset` props.
- The spacing mechanism was reworked to use the `gap` CSS property.
This brings some breaking changes described in the following sections.
-#### Stabilized API
+#### Unstable prefix removed
The `Grid2` component API was stabilized, so its import no longer contains the `Unstable_` prefix:
@@ -339,11 +388,6 @@ This eliminates the need for the `disableEqualOverflow` prop:
+
```
-:::warning
-This update may lead to unexpected changes to your app's layout.
-Still, we strongly recommend adopting this new behavior rather than trying to replicate the old pattern, as the new version is more predictable and modern.
-:::
-
#### Grid item spacing change
In v5, Grid items included spacing in their boxes.
@@ -351,62 +395,13 @@ In v6, Grid items no longer inclue spacing in their boxes.
Note that the item position doesn't change.
+
+
:::warning
-This update may lead to unexpected changes to your app's layout.
+These updates may lead to unexpected changes to your app's layout.
Still, we strongly recommend adopting this new behavior rather than trying to replicate the old pattern, as the new version is more predictable and modern.
:::
-
-
-### Rating
-
-Previously, due to a bug, the `aria-label` attribute was "null Stars" when no value was set in the Rating component.
-This is fixed in v6, with the `aria-label` attribute being "0 Stars" when no value is set.
-
-### useMediaQuery types
-
-The following deprecated types are removed in v6:
-
-- `MuiMediaQueryList`: use `MediaQueryList` (from lib.dom.d.ts) instead.
-- `MuiMediaQueryListEvent`: use `MediaQueryListEvent` (from lib.dom.d.ts) instead.
-- `MuiMediaQueryListListener`: use `(event: MediaQueryListEvent) => void` instead.
-
-## Breaking changes affecting testing
-
-### Ripple effect
-
-The ripple effect's performance has been improved in v6.
-Because of this, you might need to update tests involving components with the ripple effect.
-If you are using `fireEvent` from `@testing-library/react` to simulate user interactions, you will need to wrap these inside `act` and `await` to avoid React warnings:
-
-```diff
-- fireEvent.click(button);
-+ await act(async () => fireEvent.mouseDown(button));
-```
-
-The components affected by this change are:
-
-- All buttons
-- Checkbox
-- Chip
-- Radio Group
-- Switch
-- Tabs
-
-## Stabilized APIs
-
-### CssVarsProvider and extendTheme
-
-The `CssVarsProvider` and `extendTheme` APIs are now stable.
-If you're already using them in v5 you can now drop the experimental prefix:
-
-```diff
--import { experimental_extendTheme as extendTheme, Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles';
-+import { extendTheme, CssVarsProvider } from '@mui/material/styles';
-```
-
-See [CSS theme variables](/material-ui/customization/css-theme-variables/overview/) for more details about working with these APIs.
-
### Color mode theme utility
Material UI v6 introduces a new utility for adding styles to specific color modes called `theme.applyStyles`, designed to replace `theme.palette.mode` when applying light or dark styles:
From 4456d139cc2349bc9bc2f3612885afe0d48b6b4d Mon Sep 17 00:00:00 2001
From: DiegoAndai
Date: Tue, 13 Aug 2024 17:11:40 -0400
Subject: [PATCH 27/33] Non-breaking space
---
docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
index e869db3ef5d2d7..b9799588beb06c 100644
--- a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
+++ b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
@@ -12,7 +12,7 @@ This also leads to significant reductions in bundle sizes for Material UI apps.
**In v6, Pigment CSS is opt-in.**
Future major versions of Material UI will likely use Pigment CSS as the default styling solution.
-Though optional, we encourage trying Pigment CSS out in your Material UI app.
+Though optional, it's encouraged to try Pigment CSS out in your Material UI app.
If you wish to do so, go to the guide for [migrating to Pigment CSS](/material-ui/migration/migrating-to-pigment-css/) after this one.
### Quality-of-life improvements
From d538e5f4a37c7e2307c066cc8d03f0428b4710b5 Mon Sep 17 00:00:00 2001
From: Ale <93217218+alelthomas@users.noreply.github.com>
Date: Thu, 15 Aug 2024 21:52:11 -0400
Subject: [PATCH 28/33] remove the for readability
Signed-off-by: Ale <93217218+alelthomas@users.noreply.github.com>
---
docs/data/material/components/grid/grid.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/data/material/components/grid/grid.md b/docs/data/material/components/grid/grid.md
index 746764d11794bb..c8312242965e0a 100644
--- a/docs/data/material/components/grid/grid.md
+++ b/docs/data/material/components/grid/grid.md
@@ -20,7 +20,7 @@ The `Grid` component shouldn't be confused with a data grid; it is closer to a l
:::
:::warning
-The `Grid` component has been deprecated. Please use the [Grid v2](/material-ui/react-grid2/) instead. See how to migrate in the [Grid v2 migration guide](/material-ui/migration/migration-grid-v2/) and [Material UI v6 upgrade guide](/material-ui/migration/upgrade-to-v6/).
+The `Grid` component has been deprecated. Please use [Grid v2](/material-ui/react-grid2/) instead. See how to migrate in the [Grid v2 migration guide](/material-ui/migration/migration-grid-v2/) and [Material UI v6 upgrade guide](/material-ui/migration/upgrade-to-v6/).
:::
## How it works
From bc287fc8a8a6fe66da5d135e9961edee957264aa Mon Sep 17 00:00:00 2001
From: Ale <93217218+alelthomas@users.noreply.github.com>
Date: Thu, 15 Aug 2024 22:10:55 -0400
Subject: [PATCH 29/33] explain spacing change with CSS gap property
Co-authored-by: Siriwat K
Signed-off-by: Ale <93217218+alelthomas@users.noreply.github.com>
---
docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
index b9799588beb06c..157d3c5a7bbb01 100644
--- a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
+++ b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
@@ -391,7 +391,7 @@ This eliminates the need for the `disableEqualOverflow` prop:
#### Grid item spacing change
In v5, Grid items included spacing in their boxes.
-In v6, Grid items no longer inclue spacing in their boxes.
+In v6, Grid items no longer include spacing in their boxes by using [CSS gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap).
Note that the item position doesn't change.
From 171a071b2d9f51f5bbe2213f18530e6a286e9086 Mon Sep 17 00:00:00 2001
From: Ale <93217218+alelthomas@users.noreply.github.com>
Date: Thu, 15 Aug 2024 22:22:33 -0400
Subject: [PATCH 30/33] minor improvements
Signed-off-by: Ale <93217218+alelthomas@users.noreply.github.com>
---
.../material/migration/upgrade-to-v6/upgrade-to-v6.md | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
index 157d3c5a7bbb01..242452ce89ca4e 100644
--- a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
+++ b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
@@ -13,7 +13,7 @@ This also leads to significant reductions in bundle sizes for Material UI apps.
**In v6, Pigment CSS is opt-in.**
Future major versions of Material UI will likely use Pigment CSS as the default styling solution.
Though optional, it's encouraged to try Pigment CSS out in your Material UI app.
-If you wish to do so, go to the guide for [migrating to Pigment CSS](/material-ui/migration/migrating-to-pigment-css/) after this one.
+If you wish to do so, refer to the guide for [migrating to Pigment CSS](/material-ui/migration/migrating-to-pigment-css/) once you're done upgrading to Material UI v6.
### Quality-of-life improvements
@@ -178,7 +178,7 @@ These are available in addition to the existing `"input"`, `"reset"`, and `"clea
### Chip
In earlier versions, the Chip component would lose focus when the user pressed the esc key, which differs from how other button-like components work.
-In v6 the Chip now retains focus as expected.
+In v6, the Chip now retains focus as expected.
To preserve the previous behavior, add a custom `onKeyUp` handler as shown below:
@@ -335,7 +335,7 @@ In v6, these props are renamed to `size` and `offset`:
>
```
-If the size or offset is the same for all breakpoints then you can use a single value:
+If the size or offset is the same for all breakpoints, then you can use a single value:
```diff
-
@@ -377,7 +377,7 @@ npx @mui/codemod@next v6.0.0/grid-v2-props --jscodeshift='--mui
#### disableEqualOverflow prop removed
In v5, the Grid overflowed its parent.
-In v6 the Grid is correctly contained within its parent's padding:
+In v6, the Grid is correctly contained within its parent's padding:
@@ -391,7 +391,7 @@ This eliminates the need for the `disableEqualOverflow` prop:
#### Grid item spacing change
In v5, Grid items included spacing in their boxes.
-In v6, Grid items no longer include spacing in their boxes by using [CSS gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap).
+In v6, Grid items no longer include spacing in their boxes by using the [CSS gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/gap).
Note that the item position doesn't change.
From 3bf11a3c0a139fc02952f8f694833ea2cf9d43e7 Mon Sep 17 00:00:00 2001
From: siriwatknp
Date: Fri, 16 Aug 2024 10:36:15 +0700
Subject: [PATCH 31/33] fix non-breaking space
---
docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
index 58f3b5af88bb92..311ac04f44e0dd 100644
--- a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
+++ b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
@@ -13,7 +13,7 @@ This also leads to significant reductions in bundle sizes for Material UI apps.
**In v6, Pigment CSS is opt-in.**
Future major versions of Material UI will likely use Pigment CSS as the default styling solution.
Though optional, it's encouraged to try Pigment CSS out in your Material UI app.
-If you wish to do so, refer to the guide for [migrating to Pigment CSS](/material-ui/migration/migrating-to-pigment-css/) once you're done upgrading to Material UI v6.
+If you wish to do so, refer to the guide for [migrating to Pigment CSS](/material-ui/migration/migrating-to-pigment-css/) once you're done upgrading to Material UI v6.
### Quality-of-life improvements
From 43dccd0d231078f7650513adaa34854ee4bba353 Mon Sep 17 00:00:00 2001
From: siriwatknp
Date: Fri, 16 Aug 2024 10:49:56 +0700
Subject: [PATCH 32/33] move all deprecations to its own page
---
.../migrating-from-deprecated-apis.md | 45 ++++
.../migration/upgrade-to-v6/upgrade-to-v6.md | 226 +++++++-----------
2 files changed, 135 insertions(+), 136 deletions(-)
diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
index ef8c580f37bd5a..dd449af5f953e1 100644
--- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
+++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
@@ -40,6 +40,51 @@ The composed CSS classes are going to be deprecated and eventually removed in fa
For example, the `.MuiAccordionSummary-contentGutters` class was deprecated in favor of the `.MuiAccordionSummary-gutters` and `.MuiAccordionSummary-content` classes.
This improves the developer experience by reducing bloat and cognitive load.
+### System props
+
+MUI System props (such as `mt={*}`, `bgcolor={*}`, and more) have been deprecated in the Box, Typography, Link, Grid, and Stack components.
+Use the codemod below to move all System props to the `sx` prop:
+
+```bash
+npx @mui/codemod@next v6.0.0/system-props
+```
+
+You can also manually update your components as shown in the snippet below:
+
+```diff
+-
-### Rating aria-label fixed
+### Rating
Previously, due to a bug, the `aria-label` attribute was "null Stars" when no value was set in the Rating component.
This is fixed in v6, with the `aria-label` attribute being "0 Stars" when no value is set.
-### useMediaQuery types removed
+### useMediaQuery
The following deprecated types are removed in v6:
@@ -297,7 +302,7 @@ If you're already using them in v5 you can now drop the experimental prefix:
See [CSS theme variables](/material-ui/customization/css-theme-variables/overview/) for more details.
-### Add styles for specific color modes
+### Color mode theme utility
Material UI v6 introduces a new utility for adding styles to specific color modes called `theme.applyStyles`, designed to replace `theme.palette.mode` when applying light or dark styles:
From 25ab9013b97b135b441f2d49bfac2bdbcbf6b46f Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Wed, 31 Jul 2024 21:37:22 -0500
Subject: [PATCH 12/33] restore start section
---
.../migrating-to-v6/migrating-to-v6.md | 30 +++++++++++++++----
1 file changed, 24 insertions(+), 6 deletions(-)
diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
index b79da25bed92cb..985933fd002dc9 100644
--- a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
+++ b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
@@ -16,11 +16,29 @@ Though optional, we highly recommend migrating your Material UI app to Pigment C
### Quality-of-life improvements
-Material UI v6 includes several other quality-of-life improvements, including:
+Material UI v6 features several other quality-of-life improvements, including:
-- Stabilizing the `CssVarsProvider` API. CSS variables provide more performant customization possibilities along with a cleaner developer experience.
-- Support for container queries in themes.
-- A new theme utility for adding styles to specific color modes.
+- stabilizing [the `CssVarsProvider` API](#cssvarsprovider-and-extendtheme)
+- support for container queries in themes
+- a [new theme utility](#color-mode-theme-utility) for adding styles to specific color modes
+
+## Start using the beta release
+
+In your `package.json` file, change the package version from `"latest"` to `"next"`.
+
+```diff title="package.json"
+-"@mui/material": "latest",
++"@mui/material": "next",
+```
+
+If you're using any of these packages, you can also change their version to `"next"`:
+
+- `@mui/icons-material`
+- `@mui/system`
+- `@mui/lab`
+- `@mui/material-nextjs`
+- `@mui/styled-engine-sc`
+- `@mui/utils`
## Supported browsers and versions
@@ -280,7 +298,7 @@ Still, we strongly recommend adopting this new behavior rather than trying to re
Previously, due to a bug, the `aria-label` attribute was "null Stars" when no value was set in the Rating component.
This is fixed in v6, with the `aria-label` attribute being "0 Stars" when no value is set.
-### useMediaQuery
+### useMediaQuery types
The following deprecated types are removed in v6:
@@ -300,7 +318,7 @@ If you're already using them in v5 you can now drop the experimental prefix:
+ import { extendTheme, CssVarsProvider } from '@mui/material/styles';
```
-See [CSS theme variables](/material-ui/customization/css-theme-variables/overview/) for more details.
+See [CSS theme variables](/material-ui/customization/css-theme-variables/overview/) for more details about working with these APIs.
### Color mode theme utility
From 0c38f50f171fbab3a182d0788d6fb61aa506cd7b Mon Sep 17 00:00:00 2001
From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Date: Wed, 31 Jul 2024 21:39:34 -0500
Subject: [PATCH 13/33] fix accordion headers
---
.../material/migration/migrating-to-v6/migrating-to-v6.md | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
index 985933fd002dc9..45e8eec44406de 100644
--- a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
+++ b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
@@ -124,9 +124,7 @@ To align with React 19's removal of UMD builds, Material UI has also removed it
Instead, we recommend using ESM-based CDNs such as [esm.sh](https://esm.sh/).
For alternative installation methods, refer to the [CDN documentation](/material-ui/getting-started/installation/#cdn).
-### Autocomplete
-
-#### Accordion Summary heading
+### Accordion
To meet the [W3C Accordion Pattern standard](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/), the Accordion Summary is now wrapped with a default `` heading element. This change may affect customizations relying on the previous DOM structure and CSS specificity. @@ -151,6 +149,8 @@ If the default heading element conflicts with your existing structure, you can c
This guide explains why and how to upgrade from Material UI v5 to v6.
-## Why you should upgrade +## Why you should upgrade to Material UI v6 ### React Server Component support From a0d5b9716bb51f6f7d172603bd45450c62a59e0a Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Wed, 7 Aug 2024 18:15:54 -0500 Subject: [PATCH 18/33] x note --- .../migration/migrating-to-v6/migrating-to-v6.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md index aca6a5bf3cc51e..071de7c01d3036 100644 --- a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md +++ b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md @@ -40,6 +40,18 @@ If you're using any of these packages, you can also change their version to `"ne - `@mui/styled-engine-sc` - `@mui/utils` +Note that MUI X packages _do not_ follow the same versioning strategy as Material UI. +The following packages should remain unchanged during the upgrade process: + +- `@mui/x-data-grid` +- `@mui/x-data-grid-pro` +- `@mui/x-data-grid-premium` +- `@mui/x-date-pickers` +- `@mui/x-date-pickers-pro` +- `@mui/x-charts` +- `@mui/x-tree-view` +- `@mui/x-tree-view-proå` + ## Supported browsers and versions The default bundle targets have changed in v6. From 722e2a35bdb66ac736fa2caa0d65fd862818c5e9 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Wed, 7 Aug 2024 18:16:48 -0500 Subject: [PATCH 19/33] typo : --- docs/data/material/migration/migrating-to-v6/migrating-to-v6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md index 071de7c01d3036..b68b6d954f0d65 100644 --- a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md +++ b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md @@ -50,7 +50,7 @@ The following packages should remain unchanged during the upgrade process: - `@mui/x-date-pickers-pro` - `@mui/x-charts` - `@mui/x-tree-view` -- `@mui/x-tree-view-proå` +- `@mui/x-tree-view-pro` ## Supported browsers and versions From b56f51bddb119f78c0720d92765d6af90b654272 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Wed, 7 Aug 2024 18:17:59 -0500 Subject: [PATCH 20/33] clarify wording --- docs/data/material/migration/migrating-to-v6/migrating-to-v6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md index b68b6d954f0d65..6943da65079a6b 100644 --- a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md +++ b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md @@ -41,7 +41,7 @@ If you're using any of these packages, you can also change their version to `"ne - `@mui/utils` Note that MUI X packages _do not_ follow the same versioning strategy as Material UI. -The following packages should remain unchanged during the upgrade process: +If you're using any of the following packages, they should remain unchanged during the upgrade process: - `@mui/x-data-grid` - `@mui/x-data-grid-pro` From 6d0c971c9e927016a6b8f833a5606860139fa326 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Wed, 7 Aug 2024 18:27:16 -0500 Subject: [PATCH 21/33] nbsps --- .../material/migration/migrating-to-v6/migrating-to-v6.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md index 6943da65079a6b..a281f7b8a43040 100644 --- a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md +++ b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md @@ -2,7 +2,7 @@This guide explains why and how to upgrade from Material UI v5 to v6.
-## Why you should upgrade to Material UI v6 +## Why you should upgrade to Material UI v6 ### React Server Component support @@ -40,7 +40,7 @@ If you're using any of these packages, you can also change their version to `"ne - `@mui/styled-engine-sc` - `@mui/utils` -Note that MUI X packages _do not_ follow the same versioning strategy as Material UI. +Note that MUI X packages _do not_ follow the same versioning strategy as Material UI. If you're using any of the following packages, they should remain unchanged during the upgrade process: - `@mui/x-data-grid` From 2681eaff4f647a62c737c3421cdebd1b3fdcacbc Mon Sep 17 00:00:00 2001 From: DiegoAndaiThis guide helps you integrate Pigment CSS with Material UI v6.
-Before going through this guide, make sure you have [migrated to Material UI v6](/material-ui/migration/migrating-to-v6/). +Before going through this guide, make sure you have [upgraded to Material UI v6](/material-ui/migration/upgrade-to-v6/). ## Introduction diff --git a/docs/data/material/migration/migrating-to-v6/migration-css-theme-variables.md b/docs/data/material/migration/upgrade-to-v6/migration-css-theme-variables.md similarity index 100% rename from docs/data/material/migration/migrating-to-v6/migration-css-theme-variables.md rename to docs/data/material/migration/upgrade-to-v6/migration-css-theme-variables.md diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md similarity index 100% rename from docs/data/material/migration/migrating-to-v6/migrating-to-v6.md rename to docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts index bac35ba97326ea..a5c6c050d43a7d 100644 --- a/docs/data/material/pages.ts +++ b/docs/data/material/pages.ts @@ -277,8 +277,8 @@ const pages: MuiPage[] = [ subheader: 'Upgrade to v6', children: [ { - pathname: '/material-ui/migration/migrating-to-v6', - title: 'Migrating to v6: getting started', + pathname: '/material-ui/migration/upgrade-to-v6', + title: 'Upgrade to v6: getting started', }, { pathname: '/material-ui/migration/migrating-from-deprecated-apis', diff --git a/docs/pages/material-ui/migration/migrating-to-pigment-css.js b/docs/pages/material-ui/migration/migrating-to-pigment-css.js index 96725a1d9b5e82..3c8305f325026e 100644 --- a/docs/pages/material-ui/migration/migrating-to-pigment-css.js +++ b/docs/pages/material-ui/migration/migrating-to-pigment-css.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md?muiMarkdown'; +import * as pageProps from 'docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md?muiMarkdown'; export default function Page() { return
+
:::warning
-This update may lead to unexpected changes to your app's layout.
+These updates may lead to unexpected changes to your app's layout.
Still, we strongly recommend adopting this new behavior rather than trying to replicate the old pattern, as the new version is more predictable and modern.
:::
-
-
-### Rating
-
-Previously, due to a bug, the `aria-label` attribute was "null Stars" when no value was set in the Rating component.
-This is fixed in v6, with the `aria-label` attribute being "0 Stars" when no value is set.
-
-### useMediaQuery types
-
-The following deprecated types are removed in v6:
-
-- `MuiMediaQueryList`: use `MediaQueryList` (from lib.dom.d.ts) instead.
-- `MuiMediaQueryListEvent`: use `MediaQueryListEvent` (from lib.dom.d.ts) instead.
-- `MuiMediaQueryListListener`: use `(event: MediaQueryListEvent) => void` instead.
-
-## Breaking changes affecting testing
-
-### Ripple effect
-
-The ripple effect's performance has been improved in v6.
-Because of this, you might need to update tests involving components with the ripple effect.
-If you are using `fireEvent` from `@testing-library/react` to simulate user interactions, you will need to wrap these inside `act` and `await` to avoid React warnings:
-
-```diff
-- fireEvent.click(button);
-+ await act(async () => fireEvent.mouseDown(button));
-```
-
-The components affected by this change are:
-
-- All buttons
-- Checkbox
-- Chip
-- Radio Group
-- Switch
-- Tabs
-
-## Stabilized APIs
-
-### CssVarsProvider and extendTheme
-
-The `CssVarsProvider` and `extendTheme` APIs are now stable.
-If you're already using them in v5 you can now drop the experimental prefix:
-
-```diff
--import { experimental_extendTheme as extendTheme, Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles';
-+import { extendTheme, CssVarsProvider } from '@mui/material/styles';
-```
-
-See [CSS theme variables](/material-ui/customization/css-theme-variables/overview/) for more details about working with these APIs.
-
### Color mode theme utility
Material UI v6 introduces a new utility for adding styles to specific color modes called `theme.applyStyles`, designed to replace `theme.palette.mode` when applying light or dark styles:
From 4456d139cc2349bc9bc2f3612885afe0d48b6b4d Mon Sep 17 00:00:00 2001
From: DiegoAndai
@@ -391,7 +391,7 @@ This eliminates the need for the `disableEqualOverflow` prop:
#### Grid item spacing change
In v5, Grid items included spacing in their boxes.
-In v6, Grid items no longer include spacing in their boxes by using [CSS gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap).
+In v6, Grid items no longer include spacing in their boxes by using the [CSS gap property](https://developer.mozilla.org/en-US/docs/Web/CSS/gap).
Note that the item position doesn't change.
From 3bf11a3c0a139fc02952f8f694833ea2cf9d43e7 Mon Sep 17 00:00:00 2001
From: siriwatknp