Remove disable overflow equal feature

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

@@ -139,18 +139,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
-If you add borders or background to the grid with `disableEqualOverflow`, you will see the misalignments with the content in the grid item. This is expected since negative margin only applied on the top and left sides of the grid.
-:::
-
 ## Limitations
 
 ### direction column and column-reverse

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

@@ -6,7 +6,6 @@
     "columnSpacing": "Defines the horizontal space between the type <code>item</code> components. It overrides the value of the <code>spacing</code> prop.",
     "container": "If <code>true</code>, the component will have the flex <em>container</em> behavior. You should be wrapping <em>items</em> with a <em>container</em>.",
     "direction": "Defines the <code>flex-direction</code> style property. It is applied for all screen sizes.",
-    "disableEqualOverflow": "If <code>true</code>, the negative margin and padding are apply only to the top and left sides of the grid.",
     "lg": "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.",
     "md": "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>md</code> breakpoint and wider screens if not overridden.",
     "rowSpacing": "Defines the vertical space between the type <code>item</code> components. It overrides the value of the <code>spacing</code> prop.",

packages/mui-system/src/Grid/Grid.test.js

@@ -211,71 +211,6 @@ describe('System <Grid />', () => {
     });
   });
 
-  describe('prop: disableEqualOverflow', () => {
-    it('should apply to top and left sides only', function test() {
-      if (/jsdom/.test(window.navigator.userAgent)) {
-        this.skip();
-      }
-      const { container } = render(
-        <Grid container disableEqualOverflow spacing={2}>
-          <Grid />
-        </Grid>,
-      );
-
-      expect(container.firstChild).toHaveComputedStyle({
-        marginTop: '-16px',
-        marginLeft: '-16px',
-      });
-      expect(container.firstChild.firstChild).toHaveComputedStyle({
-        paddingTop: '16px',
-        paddingLeft: '16px',
-      });
-    });
-
-    it('should use the value from theme and nestable', function test() {
-      if (/jsdom/.test(window.navigator.userAgent)) {
-        this.skip();
-      }
-      const { container } = render(
-        <ThemeProvider
-          theme={createTheme({
-            components: {
-              MuiGrid: {
-                defaultProps: {
-                  disableEqualOverflow: true,
-                },
-              },
-            },
-          })}
-        >
-          <Grid container spacing={2}>
-            <Grid container disableEqualOverflow={false} spacing={3}>
-              <Grid />
-            </Grid>
-          </Grid>
-        </ThemeProvider>,
-      );
-      expect(container.firstChild).toHaveComputedStyle({
-        marginTop: '-16px',
-        marginLeft: '-16px',
-      });
-      expect(container.firstChild.firstChild).toHaveComputedStyle({
-        marginTop: '-12px',
-        marginLeft: '-12px',
-        marginRight: '-12px',
-        marginBottom: '-12px',
-        paddingTop: '16px',
-        paddingLeft: '16px',
-      });
-      expect(container.firstChild.firstChild.firstChild).toHaveComputedStyle({
-        paddingTop: '12px',
-        paddingLeft: '12px',
-        paddingRight: '12px',
-        paddingBottom: '12px',
-      });
-    });
-  });
-
   describe('Custom breakpoints', () => {
     it('should apply the custom breakpoint class', () => {
       const { container } = render(

packages/mui-system/src/Grid/Grid.tsx

@@ -56,10 +56,6 @@ Grid.propTypes /* remove-proptypes */ = {
     PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])),
     PropTypes.object,
   ]),
-  /**
-   * If `true`, the negative margin and padding are apply only to the top and left sides of the grid.
-   */
-  disableEqualOverflow: PropTypes.bool,
   /**
    * If a number, it sets the number of columns the grid item uses.
    * It can't be greater than the total number of columns of the container (12 by default).

packages/mui-system/src/Grid/GridProps.ts

@@ -107,10 +107,6 @@ export interface GridBaseProps extends Breakpoints {
    * @default 'row'
    */
   direction?: ResponsiveStyleValue<GridDirection>;
-  /**
-   * If `true`, the negative margin and padding are apply only to the top and left sides of the grid.
-   */
-  disableEqualOverflow?: boolean;
   /**
    * Defines the vertical space between the type `item` components.
    * It overrides the value of the `spacing` prop.

packages/mui-system/src/Grid/createGrid.tsx

@@ -57,7 +57,6 @@ export default function createGrid(
   } = options;
 
   const NestedContext = React.createContext(false);
-  const OverflowContext = React.createContext<boolean | undefined>(undefined);
 
   const getGridUtilityClass = (slot: string) => {
     return generateUtilityClass(componentName, slot);
@@ -96,7 +95,6 @@ export default function createGrid(
     const themeProps = useThemeProps<typeof inProps & { component?: React.ElementType }>(inProps);
     const props = extendSxProp(themeProps) as Omit<typeof themeProps, 'color'>; // `color` type conflicts with html color attribute.
     const nested = React.useContext(NestedContext);
-    const overflow = React.useContext(OverflowContext);
     const {
       className,
       columns: columnsProp = 12,
@@ -107,15 +105,8 @@ export default function createGrid(
       spacing: spacingProp = 0,
       rowSpacing: rowSpacingProp = spacingProp,
       columnSpacing: columnSpacingProp = spacingProp,
-      disableEqualOverflow: themeDisableEqualOverflow,
       ...rest
     } = props;
-    // `disableEqualOverflow` can be set from theme defaultProps,
-    // so the **nested** grid should not use it from theme and look at the instance props instead.
-    let disableEqualOverflow = themeDisableEqualOverflow;
-    if (nested && themeDisableEqualOverflow !== undefined) {
-      disableEqualOverflow = inProps.disableEqualOverflow;
-    }
     // collect breakpoints related props because they can be custom from the theme.
     const gridSize = {} as GridOwnerState['gridSize'];
     const other: Record<string, any> = {};
@@ -145,8 +136,6 @@ export default function createGrid(
       rowSpacing,
       columnSpacing,
       gridSize,
-      disableEqualOverflow: disableEqualOverflow ?? overflow ?? false, // use context value if exists.
-      parentDisableEqualOverflow: overflow, // for nested grid
     };
 
     const classes = useUtilityClasses(ownerState, theme);
@@ -165,13 +154,6 @@ export default function createGrid(
       result = <NestedContext.Provider value>{result}</NestedContext.Provider>;
     }
 
-    if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow ?? false)) {
-      // This means the root grid with `disableEqualOverflow` or nested grid with different `disableEqualOverflow` from the context.
-      result = (
-        <OverflowContext.Provider value={disableEqualOverflow}>{result}</OverflowContext.Provider>
-      );
-    }
-
     return result;
   }) as OverridableComponent<GridTypeMap>;
 
@@ -196,7 +178,6 @@ export default function createGrid(
       PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])),
       PropTypes.object,
     ]),
-    disableEqualOverflow: PropTypes.bool,
     lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
     md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
     rowSpacing: PropTypes.oneOfType([

packages/mui-system/src/Grid/gridGenerator.test.js

@@ -249,49 +249,6 @@ describe('grid generator', () => {
         padding: `calc(var(--Grid-nested-rowSpacing) / 2) calc(var(--Grid-nested-columnSpacing) / 2)`,
       });
     });
-
-    it('root container with disableEqualOverflow', () => {
-      const result = generateGridStyles({
-        ownerState: { container: true, nested: true, disableEqualOverflow: true },
-      });
-      sinon.assert.match(result, {
-        margin: `calc(var(--Grid-rowSpacing) * -1) 0px 0px calc(var(--Grid-columnSpacing) * -1)`,
-        padding: `calc(var(--Grid-nested-rowSpacing)) 0px 0px calc(var(--Grid-nested-columnSpacing))`,
-      });
-    });
-
-    it('nested container without disableEqualOverflow but parent has', () => {
-      const result = generateGridStyles({
-        ownerState: {
-          container: true,
-          nested: true,
-          disableEqualOverflow: false,
-          parentDisableEqualOverflow: true,
-        },
-      });
-      sinon.assert.match(result, {
-        margin: `calc(var(--Grid-rowSpacing) / -2) calc(var(--Grid-columnSpacing) / -2)`,
-        padding: `calc(var(--Grid-nested-rowSpacing)) 0px 0px calc(var(--Grid-nested-columnSpacing))`,
-      });
-    });
-
-    it('item', () => {
-      const result = generateGridStyles({ ownerState: { container: false, nested: false } });
-      expect(result).to.deep.equal({
-        minWidth: 0,
-        boxSizing: 'border-box',
-        padding: `calc(var(--Grid-rowSpacing) / 2) calc(var(--Grid-columnSpacing) / 2)`,
-      });
-    });
-
-    it('item with disableEqualOverflow', () => {
-      const result = generateGridStyles({
-        ownerState: { container: false, disableEqualOverflow: true },
-      });
-      sinon.assert.match(result, {
-        padding: `calc(var(--Grid-rowSpacing)) 0px 0px calc(var(--Grid-columnSpacing))`,
-      });
-    });
   });
 
   describe('generateGridSizeStyles', () => {

packages/mui-system/src/Grid/gridGenerator.ts

@@ -171,15 +171,9 @@ export const generateGridStyles = ({ ownerState }: Props): {} => {
               flexWrap: ownerState.wrap,
             }),
           margin: `calc(var(--Grid-rowSpacing) / -2) calc(var(--Grid-columnSpacing) / -2)`,
-          ...(ownerState.disableEqualOverflow && {
-            margin: `calc(var(--Grid-rowSpacing) * -1) 0px 0px calc(var(--Grid-columnSpacing) * -1)`,
-          }),
           ...(ownerState.nested
             ? {
                 padding: `calc(var(--Grid-nested-rowSpacing) / 2) calc(var(--Grid-nested-columnSpacing) / 2)`,
-                ...((ownerState.disableEqualOverflow || ownerState.parentDisableEqualOverflow) && {
-                  padding: `calc(var(--Grid-nested-rowSpacing)) 0px 0px calc(var(--Grid-nested-columnSpacing))`,
-                }),
               }
             : {
                 '--Grid-nested-rowSpacing': 'var(--Grid-rowSpacing)',
@@ -188,9 +182,6 @@ export const generateGridStyles = ({ ownerState }: Props): {} => {
         }
       : {
           padding: `calc(var(--Grid-rowSpacing) / 2) calc(var(--Grid-columnSpacing) / 2)`,
-          ...(ownerState.disableEqualOverflow && {
-            padding: `calc(var(--Grid-rowSpacing)) 0px 0px calc(var(--Grid-columnSpacing))`,
-          }),
         }),
   };
 };