add visual regression test

mui · Jan 10, 2021 · 931c71c · 931c71c
1 parent 14edec4
commit 931c71c
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 54 deletions.
diff --git 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 `<body>`.
-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
-   <body>
-     <div style={{ padding: 20 }}>
-       <Grid container spacing={5}>
-         //...
-       </Grid>
-     </div>
-   </body>
-   ```
-
-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
@@ -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
@@ -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 (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        width: 400,
+        display: 'flex',
+        bgcolor: 'secondary.main',
+        '& .MuiPaper-root': {
+          p: 2,
+          textAlign: 'center',
+        },
+      }}
+    >
       <Grid container spacing={3} direction="column">
         <Grid container item spacing={1}>
           <Grid item xs={3}>
-            <Paper className={classes.paper}>xs=3</Paper>
+            <Paper>xs=3</Paper>
           </Grid>
           <Grid item xs={9}>
-            <Paper className={classes.paper}>xs=9</Paper>
+            <Paper>xs=9</Paper>
           </Grid>
         </Grid>
         <Grid container item spacing={1} direction="row-reverse">
           <Grid item xs={3}>
-            <Paper className={classes.paper}>first</Paper>
+            <Paper>first</Paper>
           </Grid>
           <Grid item xs={3}>
-            <Paper className={classes.paper}>last</Paper>
+            <Paper>last</Paper>
           </Grid>
         </Grid>
         <Grid container item spacing={1} justifyContent="space-between">
           <Grid item xs={3}>
-            <Paper className={classes.paper}>space</Paper>
+            <Paper>space</Paper>
           </Grid>
           <Grid item xs={3}>
-            <Paper className={classes.paper}>between</Paper>
+            <Paper>between</Paper>
           </Grid>
         </Grid>
         <Grid container item spacing={1} alignItems="stretch" direction="column-reverse">
           <Grid item>
-            <Paper className={classes.paper}>reverse</Paper>
+            <Paper>reverse</Paper>
           </Grid>
           <Grid item>
-            <Paper className={classes.paper}>column</Paper>
+            <Paper>column</Paper>
           </Grid>
         </Grid>
       </Grid>
-    </div>
+    </Box>
   );
 }
-
-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
@@ -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 (
+    <Box
+      sx={{
+        width: 600,
+        display: 'flex',
+        bgcolor: 'secondary.main',
+        '& .MuiPaper-root': {
+          p: 2,
+          textAlign: 'center',
+        },
+      }}
+    >
+      <Grid container spacing={1}>
+        <Grid item xs={12}>
+          <Paper>xs=12</Paper>
+        </Grid>
+        <Grid item xs={6}>
+          <Paper>xs=6</Paper>
+        </Grid>
+        <Grid item xs={6}>
+          <Paper>xs=6</Paper>
+        </Grid>
+        <Grid item container direction="column-reverse" xs={6} spacing={3}>
+          <Grid item xs={6}>
+            <Paper>xs=6</Paper>
+          </Grid>
+          <Grid item container spacing={2} xs={6}>
+            <Grid item container spacing={1} xs={6}>
+              <Grid item xs={7}>
+                <Paper>xs=7</Paper>
+              </Grid>
+              <Grid item xs={5}>
+                <Paper>xs=5</Paper>
+              </Grid>
+            </Grid>
+            <Grid item xs={6}>
+              <Paper>xs=6</Paper>
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid item container direction="column" xs={6} spacing={3}>
+          <Grid item xs={6}>
+            <Paper>xs=6</Paper>
+          </Grid>
+          <Grid item xs={6}>
+            <Paper>xs=6</Paper>
+          </Grid>
+        </Grid>
+        <Grid item container xs={6} spacing={3}>
+          <Grid item xs={8}>
+            <Paper>xs=8</Paper>
+          </Grid>
+          <Grid item xs={4}>
+            <Paper>xs=4</Paper>
+          </Grid>
+        </Grid>
+        <Grid item container xs={6} spacing={2}>
+          <Grid item xs={4}>
+            <Paper>xs=4</Paper>
+          </Grid>
+          <Grid item xs={4}>
+            <Paper>xs=4</Paper>
+          </Grid>
+          <Grid item xs={4}>
+            <Paper>xs=4</Paper>
+          </Grid>
+        </Grid>
+        <Grid item container xs={6} spacing={5}>
+          <Grid item xs={6}>
+            <Paper>xs=6</Paper>
+          </Grid>
+          <Grid item xs={6}>
+            <Paper>xs=6</Paper>
+          </Grid>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}