[mui-system][Grid] Remove disableEqualOverflow by using gap (#42526)

docs/data/joy/components/grid/ChildrenCenteredGrid.js

@@ -9,7 +9,6 @@ export default function ChildrenCenteredGrid() {
     <Box sx={{ flexGrow: 1 }}>
       <Grid
         container
-        spacing={2}
         sx={{
           '--Grid-borderWidth': '1px',
           borderTop: 'var(--Grid-borderWidth) solid',

docs/data/joy/components/grid/ChildrenCenteredGrid.tsx

@@ -9,7 +9,6 @@ export default function ChildrenCenteredGrid() {
     <Box sx={{ flexGrow: 1 }}>
       <Grid
         container
-        spacing={2}
         sx={{
           '--Grid-borderWidth': '1px',
           borderTop: 'var(--Grid-borderWidth) solid',

docs/data/material/components/grid2/FullBorderedGrid.js

@@ -7,7 +7,6 @@ export default function FullBorderedGrid() {
     <Box sx={{ flexGrow: 1, p: 2 }}>
       <Grid
         container
-        spacing={2}
         sx={{
           '--Grid-borderWidth': '1px',
           borderTop: 'var(--Grid-borderWidth) solid',

docs/data/material/components/grid2/FullBorderedGrid.tsx

@@ -7,7 +7,6 @@ export default function FullBorderedGrid() {
     <Box sx={{ flexGrow: 1, p: 2 }}>
       <Grid
         container
-        spacing={2}
         sx={{
           '--Grid-borderWidth': '1px',
           borderTop: 'var(--Grid-borderWidth) solid',

docs/data/material/components/grid2/HalfBorderedGrid.js

@@ -8,7 +8,6 @@ export default function HalfBorderedGrid() {
     <Box sx={{ flexGrow: 1, p: 2 }}>
       <Grid
         container
-        spacing={2}
         sx={(theme) => ({
           '--Grid-borderWidth': '1px',
           borderTop: 'var(--Grid-borderWidth) solid',

docs/data/material/components/grid2/HalfBorderedGrid.tsx

@@ -8,7 +8,6 @@ export default function HalfBorderedGrid() {
     <Box sx={{ flexGrow: 1, p: 2 }}>
       <Grid
         container
-        spacing={2}
         sx={(theme) => ({
           '--Grid-borderWidth': '1px',
           borderTop: 'var(--Grid-borderWidth) solid',

docs/data/material/components/grid2/grid2.md

@@ -241,21 +241,6 @@ declare module '@mui/system' {
 }
 ```
 
-## Disable the scrollbar
-
-If you use grid as a container in a small viewport, you might see a horizontal scrollbar because the negative margin is applied on all sides of the grid container.
-
-To disable this scrollbar, set the `disableEqualOverflow` prop to `true`.
-This removes the negative margins from the bottom and right sides of the grid to prevent overflow.
-
-The demo below shows how this works:
-
-{{"demo": "OverflowGrid.js", "bg": true}}
-
-:::warning
-You should avoid adding borders and backgrounds to the grid when `disableEqualOverflow` is `true` because the negative margin (applied only at the top and left sides) causes the grid to be visually misaligned.
-:::
-
 ## Customization
 
 ### Centered elements

docs/data/material/migration/migration-v5/migration-v5.md

@@ -83,3 +83,37 @@ export default function ChipExample() {
   );
 }
 ```
+
+### Grid v2 (Unstable_Grid)
+
+The spacing mechanism was reworked to use the `gap` CSS property.
+This maps better with current layout practices and removes the need for using React Context.
+It brings some breaking changes described in the following sections.
+
+#### The Grid is contained inside parent's padding
+
+Previously, the Grid overflowed its parent.
+In v6, this is fixed:
+
+<img src="/static/material-ui/migration-v5/grid-overflow-change.png" style="width: 814px;" alt="Before and after of the Grid no longer overflowing its parent in v6." width="1628" height="400" />
+
+This removes the need for the `disableEqualOverflow` prop, so you can remove it:
+
+```diff
+ <Grid
+-   disableEqualOverflow
+ />
+```
+
+#### Spacing is no longer considered inside the Grid item's box
+
+Previously, the Grid items included spacing in it's box.
+In v6, this is fixed:
+
+<img src="/static/material-ui/migration-v5/grid-spacing-change.png" style="width: 814px;" alt="Before and after of the Grid items no longer including spacing in their box." width="1628" height="400" />
+
+:::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.
+:::

docs/data/system/components/grid/grid.md

@@ -155,18 +155,6 @@ declare module '@mui/system' {
 }
 ```
 
-## Prevent scrollbar
-
-If you use grid as a container in a small viewport, you might see a horizontal scrollbar because the negative margin is applied on all sides of the grid container.
-
-To prevent the scrollbar, set `disableEqualOverflow` prop to `true`. It will enable negative margin only on the top and left sides of the grid which remove overflow on the right-hand side.
-
-{{"demo": "OverflowGrid.js", "bg": true}}
-
-:::warning
-You should avoid adding borders or background to the grid when `disableEqualOverflow: true` because the negative margin (applied only at the top and left sides) makes the grid visually misaligned.
-:::
-
 ## Limitations
 
 ### direction column and column-reverse

docs/pages/blog/build-layouts-faster-with-grid-v2.md

@@ -38,7 +38,7 @@ To get started right away, head over to the [Grid v2 migration guide](/material-
 
 ### 🚀 New features
 
-#### [Disable the scrollbar](/material-ui/react-grid2/#disable-the-scrollbar)
+#### [Disable the scrollbar](https://v5.mui.com/material-ui/react-grid2/#disable-the-scrollbar)
 
 A new prop called `disableEqualOverflow` solves the problem of an unwanted scrollbar appearing on small viewports.
 

docs/pages/system/api/grid.json

@@ -20,7 +20,6 @@
         "description": "'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'<br>&#124;&nbsp;Array&lt;'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'&gt;<br>&#124;&nbsp;object"
       }
     },
-    "disableEqualOverflow": { "type": { "name": "bool" } },
     "lg": {
       "type": { "name": "union", "description": "'auto'<br>&#124;&nbsp;number<br>&#124;&nbsp;bool" }
     },

docs/translations/api-docs/grid/grid.json

@@ -12,9 +12,6 @@
     "direction": {
       "description": "Defines the <code>flex-direction</code> style property. It is applied for all screen sizes."
     },
-    "disableEqualOverflow": {
-      "description": "If <code>true</code>, the negative margin and padding are apply only to the top and left sides of the grid."
-    },
     "lg": {
       "description": "If a number, it sets the number of columns the grid item uses. It can&#39;t be greater than the total number of columns of the container (12 by default). If &#39;auto&#39;, the grid item&#39;s width matches its content. If false, the prop is ignored. If true, the grid item&#39;s width grows to use the space available in the grid container. The value is applied for the <code>lg</code> breakpoint and wider screens if not overridden."
     },