diff --git a/docs/data/system/components/grid/OverflowGrid.js b/docs/data/system/components/grid/OverflowGrid.js deleted file mode 100644 index 6d2738ea649cc9..00000000000000 --- a/docs/data/system/components/grid/OverflowGrid.js +++ /dev/null @@ -1,54 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/system/Box'; -import Grid from '@mui/system/Grid'; -import styled from '@mui/system/styled'; - -const Item = styled('div')(({ theme }) => ({ - backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', - border: '1px solid', - borderColor: theme.palette.mode === 'dark' ? '#444d58' : '#ced7e0', - padding: theme.spacing(1), - borderRadius: '4px', - textAlign: 'center', -})); - -export default function AutoGrid() { - return ( - ({ - display: 'flex', - flexDirection: 'column', - gap: 3, - '& > div': { - overflow: 'auto hidden', - '&::-webkit-scrollbar': { height: 10, WebkitAppearance: 'none' }, - '&::-webkit-scrollbar-thumb': { - borderRadius: 8, - border: '2px solid', - borderColor: theme.palette.mode === 'dark' ? '' : '#E7EBF0', - backgroundColor: 'rgba(0 0 0 / 0.5)', - }, - }, - })} - > - - - - Scroll bar appears - - - - - - - `disableEqualOverflow` prevents scrollbar - - - - - ); -} diff --git a/docs/data/system/components/grid/grid.md b/docs/data/system/components/grid/grid.md index da4df300e26aac..c3ade5530acf7f 100644 --- a/docs/data/system/components/grid/grid.md +++ b/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 diff --git a/docs/pages/system/api/grid.json b/docs/pages/system/api/grid.json index 0369cd8442f1ff..686eb51a990f64 100644 --- a/docs/pages/system/api/grid.json +++ b/docs/pages/system/api/grid.json @@ -20,7 +20,6 @@ "description": "'column-reverse'
| 'column'
| 'row-reverse'
| 'row'
| Array<'column-reverse'
| 'column'
| 'row-reverse'
| 'row'>
| object" } }, - "disableEqualOverflow": { "type": { "name": "bool" } }, "lg": { "type": { "name": "union", "description": "'auto'
| number
| bool" } }, diff --git a/docs/translations/api-docs/grid/grid.json b/docs/translations/api-docs/grid/grid.json index 5101c161c7e584..ea6608316541ce 100644 --- a/docs/translations/api-docs/grid/grid.json +++ b/docs/translations/api-docs/grid/grid.json @@ -6,7 +6,6 @@ "columnSpacing": "Defines the horizontal space between the type item components. It overrides the value of the spacing prop.", "container": "If true, the component will have the flex container behavior. You should be wrapping items with a container.", "direction": "Defines the flex-direction style property. It is applied for all screen sizes.", - "disableEqualOverflow": "If true, 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't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the lg breakpoint and wider screens if not overridden.", "md": "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). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the md breakpoint and wider screens if not overridden.", "rowSpacing": "Defines the vertical space between the type item components. It overrides the value of the spacing prop.", diff --git a/packages/mui-system/src/Grid/Grid.test.js b/packages/mui-system/src/Grid/Grid.test.js index fa66ae8023f880..c9c1b3fd5cee27 100644 --- a/packages/mui-system/src/Grid/Grid.test.js +++ b/packages/mui-system/src/Grid/Grid.test.js @@ -211,71 +211,6 @@ describe('System ', () => { }); }); - 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( - - - , - ); - - 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( - - - - - - - , - ); - 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( diff --git a/packages/mui-system/src/Grid/Grid.tsx b/packages/mui-system/src/Grid/Grid.tsx index 596bfb91296a85..3cade9719a9478 100644 --- a/packages/mui-system/src/Grid/Grid.tsx +++ b/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). diff --git a/packages/mui-system/src/Grid/GridProps.ts b/packages/mui-system/src/Grid/GridProps.ts index 63fe8c57d6c8fe..0eb8b40b6099a4 100644 --- a/packages/mui-system/src/Grid/GridProps.ts +++ b/packages/mui-system/src/Grid/GridProps.ts @@ -107,10 +107,6 @@ export interface GridBaseProps extends Breakpoints { * @default 'row' */ direction?: ResponsiveStyleValue; - /** - * 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. diff --git a/packages/mui-system/src/Grid/createGrid.tsx b/packages/mui-system/src/Grid/createGrid.tsx index 99787e27af9dd0..2352251e3acb62 100644 --- a/packages/mui-system/src/Grid/createGrid.tsx +++ b/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(undefined); const getGridUtilityClass = (slot: string) => { return generateUtilityClass(componentName, slot); @@ -96,7 +95,6 @@ export default function createGrid( const themeProps = useThemeProps(inProps); const props = extendSxProp(themeProps) as Omit; // `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 = {}; @@ -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 = {result}; } - if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow ?? false)) { - // This means the root grid with `disableEqualOverflow` or nested grid with different `disableEqualOverflow` from the context. - result = ( - {result} - ); - } - return result; }) as OverridableComponent; @@ -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([ diff --git a/packages/mui-system/src/Grid/gridGenerator.test.js b/packages/mui-system/src/Grid/gridGenerator.test.js index f5a6ea29894363..83bfa3301245fb 100644 --- a/packages/mui-system/src/Grid/gridGenerator.test.js +++ b/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', () => { diff --git a/packages/mui-system/src/Grid/gridGenerator.ts b/packages/mui-system/src/Grid/gridGenerator.ts index fdc6809e3942de..130d4bb082d229 100644 --- a/packages/mui-system/src/Grid/gridGenerator.ts +++ b/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))`, - }), }), }; };