From 931c71c820a5c2a507af64fa27cf0d673fe7db1b Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 10 Jan 2021 19:07:52 +0100 Subject: [PATCH] add visual regression test --- docs/src/pages/components/grid/grid.md | 19 +---- packages/material-ui/src/Grid/Grid.js | 13 ++- test/regressions/tests/Grid/StressGrid.js | 54 +++++------- .../tests/Grid/StressNestedGrid.js | 85 +++++++++++++++++++ 4 files changed, 117 insertions(+), 54 deletions(-) create mode 100644 test/regressions/tests/Grid/StressNestedGrid.js diff --git a/docs/src/pages/components/grid/grid.md b/docs/src/pages/components/grid/grid.md index 07fcdf7d60f55d..929f9eb0c8035b 100644 --- a/docs/src/pages/components/grid/grid.md +++ b/docs/src/pages/components/grid/grid.md @@ -101,24 +101,7 @@ If you need to do such, remove one of the props. ### Negative margin -There is one limitation with the negative margin we use to implement the spacing between items. -A horizontal scroll will appear if a negative margin goes beyond the ``. -There are 3 available workarounds: - -1. Not using the spacing feature and implementing it in user space `spacing={0}` (default). -2. Applying padding to the parent with at least half the spacing value applied to the child: - - ```jsx - -
- - //... - -
- - ``` - -3. Adding `overflow-x: hidden;` to the parent. +The spacing between items is implemented with a negative margin. This might lead to unexpected behavior. For instance, in order to apply a background color, you need to apply `display: flex;` to the pare ### white-space: nowrap; diff --git a/packages/material-ui/src/Grid/Grid.js b/packages/material-ui/src/Grid/Grid.js index 2d9b49717dd43b..daa51274827d3a 100644 --- a/packages/material-ui/src/Grid/Grid.js +++ b/packages/material-ui/src/Grid/Grid.js @@ -18,9 +18,9 @@ import requirePropFactory from '../utils/requirePropFactory'; const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; -function getOffset(val, div = 1) { +function getOffset(val) { const parse = parseFloat(val); - return `${parse / div}${String(val).replace(String(parse), '') || 'px'}`; + return `${parse}${String(val).replace(String(parse), '') || 'px'}`; } function generateGrid(globalStyles, theme, breakpoint) { @@ -53,8 +53,13 @@ function generateGrid(globalStyles, theme, breakpoint) { // Keep 7 significant numbers. const width = `${Math.round((size / 12) * 10e7) / 10e5}%`; - const fullWidths = SPACINGS.slice(1).reduce((obj, spacing) => { + const fullWidths = SPACINGS.reduce((obj, spacing) => { const themeSpacing = theme.spacing(spacing); + + if (themeSpacing === '0px') { + return obj; + } + const fullWidth = `calc(${width} + ${getOffset(themeSpacing)})`; return { ...obj, @@ -68,9 +73,9 @@ function generateGrid(globalStyles, theme, breakpoint) { // Close to the bootstrap implementation: // https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41 styles[key] = { + maxWidth: width, flexBasis: width, flexGrow: 0, - maxWidth: width, ...fullWidths, }; }); diff --git a/test/regressions/tests/Grid/StressGrid.js b/test/regressions/tests/Grid/StressGrid.js index 09774a61c905a9..4af6d9d69d3b06 100644 --- a/test/regressions/tests/Grid/StressGrid.js +++ b/test/regressions/tests/Grid/StressGrid.js @@ -1,65 +1,55 @@ import React from 'react'; -import PropTypes from 'prop-types'; import Paper from '@material-ui/core/Paper'; -import { withStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Grid from '@material-ui/core/Grid'; -const styles = (theme) => ({ - root: { - width: 400, - backgroundColor: theme.palette.secondary.main, - }, - paper: { - padding: 16, - textAlign: 'center', - }, -}); - -function StressGrid(props) { - const { classes } = props; - +export default function StressGrid() { return ( -
+ - xs=3 + xs=3 - xs=9 + xs=9 - first + first - last + last - space + space - between + between - reverse + reverse - column + column -
+ ); } - -StressGrid.propTypes = { - classes: PropTypes.object.isRequired, -}; - -export default withStyles(styles)(StressGrid); diff --git a/test/regressions/tests/Grid/StressNestedGrid.js b/test/regressions/tests/Grid/StressNestedGrid.js new file mode 100644 index 00000000000000..2068c9cdd93df5 --- /dev/null +++ b/test/regressions/tests/Grid/StressNestedGrid.js @@ -0,0 +1,85 @@ +import React from 'react'; +import Paper from '@material-ui/core/Paper'; +import Box from '@material-ui/core/Box'; +import Grid from '@material-ui/core/Grid'; + +export default function StressNestedGrid() { + return ( + + + + xs=12 + + + xs=6 + + + xs=6 + + + + xs=6 + + + + + xs=7 + + + xs=5 + + + + xs=6 + + + + + + xs=6 + + + xs=6 + + + + + xs=8 + + + xs=4 + + + + + xs=4 + + + xs=4 + + + xs=4 + + + + + xs=6 + + + xs=6 + + + + + ); +}