[system] Add new Grid implementation (#32746)

mui · Jul 7, 2022 · dcb9db3 · dcb9db3
1 parent 55331cf
commit dcb9db3
Show file tree

Hide file tree

Showing 72 changed files with 3,262 additions and 106 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -69,7 +69,6 @@ module.exports = {
           // Allowing /icons as to reduce cold-start of dev builds significantly.
           // There's nothing to tree-shake when importing from /icons this way:
           // '@mui/icons-material/*/',
-          '@mui/system/*',
           '@mui/utils/*',
           // End block
           // Macros are fine since their import path is transpiled away

diff --git a/benchmark/browser/README.md b/benchmark/browser/README.md
@@ -16,31 +16,37 @@ For compareable results ask a maintainer to approve the CircleCI job `benchmark`
 
 ```sh
 noop (baseline):
-  06.29 ±00.44ms
+  02.53 ±00.11ms
+Grid (html):
+  28.34 ±01.80ms
+Grid System:
+  167 ±2%
+Grid Material UI:
+  179 ±1%
 Table:
-  127.33 ±10.08ms
+  128 ±3%
 React primitives:
-  34 ±6%
+  54 ±1%
 React components:
-  45 ±3%
+  58 ±1%
 Styled MUI:
-  73 ±4%
+  94 ±1%
 Styled emotion:
-  67 ±3%
+  96 ±1%
 Styled SC:
-  80 ±2%
+  94 ±1%
 makeStyles:
-  71 ±3%
+  83 ±0%
 Box Baseline:
-  81 ±3%
+  106 ±1%
 Box MUI:
-  209 ±15%
+  180 ±1%
 Box Theme-UI:
-  172 ±8%
+  201 ±1%
 Box Chakra-UI:
-  115 ±8%
+  131 ±1%
 styled-components Box + @mui/system:
-  194 ±9%
+  184 ±3%
 styled-components Box + styled-system:
-  162 ±10%
+  154 ±3%
 ```
diff --git a/benchmark/browser/scenarios/grid-material-ui/index.js b/benchmark/browser/scenarios/grid-material-ui/index.js
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import Grid from '@mui/material/Grid';
+
+export default function GridMaterialUI() {
+  return (
+    <Grid container spacing={2}>
+      {new Array(1000).fill().map(() => (
+        <Grid item xs={12} sm={6} md={4}>
+          test case
+        </Grid>
+      ))}
+    </Grid>
+  );
+}
diff --git a/benchmark/browser/scenarios/grid-simple/index.js b/benchmark/browser/scenarios/grid-simple/index.js
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+
+const Container = styled('div')({ display: 'flex', flexWrap: 'wrap', gap: 2 });
+
+const Item = styled('div')(({ theme }) => ({
+  width: '100%',
+  [theme.breakpoints.up('sm')]: {
+    width: '50%',
+  },
+  [theme.breakpoints.up('md')]: {
+    width: 'calc(100% / 4)',
+  },
+}));
+
+export default function GridSimple() {
+  return (
+    <Container>
+      {new Array(1000).fill().map(() => (
+        <Item>test case</Item>
+      ))}
+    </Container>
+  );
+}
diff --git a/benchmark/browser/scenarios/grid-system/index.js b/benchmark/browser/scenarios/grid-system/index.js
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import Grid from '@mui/system/Grid';
+
+export default function GridSystem() {
+  return (
+    <Grid container spacing={2}>
+      {new Array(1000).fill().map(() => (
+        <Grid xs={12} sm={6} md={4}>
+          test case
+        </Grid>
+      ))}
+    </Grid>
+  );
+}
diff --git a/benchmark/browser/scripts/benchmark.js b/benchmark/browser/scripts/benchmark.js
@@ -154,6 +154,18 @@ async function run() {
         name: 'noop (baseline)',
         path: './noop/index.js',
       },
+      {
+        name: 'Grid (html)',
+        path: './grid-simple/index.js',
+      },
+      {
+        name: 'Grid System',
+        path: './grid-system/index.js',
+      },
+      {
+        name: 'Grid Material UI',
+        path: './grid-material-ui/index.js',
+      },
       {
         name: 'Table',
         path: './table-cell/index.js',

diff --git a/docs/data/system/components/grid/AutoGrid.js b/docs/data/system/components/grid/AutoGrid.js
@@ -0,0 +1,31 @@
+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 (
+    <Box sx={{ flexGrow: 1 }}>
+      <Grid container spacing={3}>
+        <Grid xs>
+          <Item>xs</Item>
+        </Grid>
+        <Grid xs={6}>
+          <Item>xs=6</Item>
+        </Grid>
+        <Grid xs>
+          <Item>xs</Item>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}
diff --git a/docs/data/system/components/grid/AutoGrid.tsx b/docs/data/system/components/grid/AutoGrid.tsx
@@ -0,0 +1,31 @@
+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 (
+    <Box sx={{ flexGrow: 1 }}>
+      <Grid container spacing={3}>
+        <Grid xs>
+          <Item>xs</Item>
+        </Grid>
+        <Grid xs={6}>
+          <Item>xs=6</Item>
+        </Grid>
+        <Grid xs>
+          <Item>xs</Item>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}
diff --git a/docs/data/system/components/grid/AutoGrid.tsx.preview b/docs/data/system/components/grid/AutoGrid.tsx.preview
@@ -0,0 +1,11 @@
+<Grid container spacing={3}>
+  <Grid xs>
+    <Item>xs</Item>
+  </Grid>
+  <Grid xs={6}>
+    <Item>xs=6</Item>
+  </Grid>
+  <Grid xs>
+    <Item>xs</Item>
+  </Grid>
+</Grid>
diff --git a/docs/data/system/components/grid/AutoGridNoWrap.js b/docs/data/system/components/grid/AutoGridNoWrap.js
@@ -0,0 +1,63 @@
+import * as React from 'react';
+import Box from '@mui/system/Box';
+import Grid from '@mui/system/Grid';
+import styled from '@mui/system/styled';
+import Avatar from '@mui/material/Avatar';
+import Typography from '@mui/material/Typography';
+
+const Item = styled('div')(({ theme }) => ({
+  border: '1px solid',
+  borderColor: theme.palette.mode === 'dark' ? '#444d58' : '#ced7e0',
+  borderRadius: '4px',
+}));
+
+const message = `Truncation should be conditionally applicable on this long line of text
+ as this is a much longer line than what the container can support. `;
+
+export default function AutoGridNoWrap() {
+  return (
+    <Box sx={{ flexGrow: 1, overflow: 'hidden', px: 3, maxWidth: 400 }}>
+      <Item
+        sx={{
+          my: 1,
+          mx: 'auto',
+          p: 2,
+        }}
+      >
+        <Grid container wrap="nowrap" spacing={2}>
+          <Grid>
+            <Avatar>W</Avatar>
+          </Grid>
+          <Grid xs>
+            <Typography noWrap>{message}</Typography>
+          </Grid>
+        </Grid>
+      </Item>
+      <Item
+        sx={{
+          my: 1,
+          mx: 'auto',
+          p: 2,
+        }}
+      >
+        <Grid container wrap="nowrap" spacing={2}>
+          <Grid>
+            <Avatar>W</Avatar>
+          </Grid>
+          <Grid xs>
+            <Typography
+              sx={{
+                display: '-webkit-box',
+                WebkitLineClamp: '3',
+                WebkitBoxOrient: 'vertical',
+                overflow: 'hidden',
+              }}
+            >
+              {message}
+            </Typography>
+          </Grid>
+        </Grid>
+      </Item>
+    </Box>
+  );
+}
diff --git a/docs/data/system/components/grid/AutoGridNoWrap.tsx b/docs/data/system/components/grid/AutoGridNoWrap.tsx
@@ -0,0 +1,63 @@
+import * as React from 'react';
+import Box from '@mui/system/Box';
+import Grid from '@mui/system/Grid';
+import styled from '@mui/system/styled';
+import Avatar from '@mui/material/Avatar';
+import Typography from '@mui/material/Typography';
+
+const Item = styled('div')(({ theme }) => ({
+  border: '1px solid',
+  borderColor: theme.palette.mode === 'dark' ? '#444d58' : '#ced7e0',
+  borderRadius: '4px',
+}));
+
+const message = `Truncation should be conditionally applicable on this long line of text
+ as this is a much longer line than what the container can support. `;
+
+export default function AutoGridNoWrap() {
+  return (
+    <Box sx={{ flexGrow: 1, overflow: 'hidden', px: 3, maxWidth: 400 }}>
+      <Item
+        sx={{
+          my: 1,
+          mx: 'auto',
+          p: 2,
+        }}
+      >
+        <Grid container wrap="nowrap" spacing={2}>
+          <Grid>
+            <Avatar>W</Avatar>
+          </Grid>
+          <Grid xs>
+            <Typography noWrap>{message}</Typography>
+          </Grid>
+        </Grid>
+      </Item>
+      <Item
+        sx={{
+          my: 1,
+          mx: 'auto',
+          p: 2,
+        }}
+      >
+        <Grid container wrap="nowrap" spacing={2}>
+          <Grid>
+            <Avatar>W</Avatar>
+          </Grid>
+          <Grid xs>
+            <Typography
+              sx={{
+                display: '-webkit-box',
+                WebkitLineClamp: '3',
+                WebkitBoxOrient: 'vertical',
+                overflow: 'hidden',
+              }}
+            >
+              {message}
+            </Typography>
+          </Grid>
+        </Grid>
+      </Item>
+    </Box>
+  );
+}
diff --git a/docs/data/system/components/grid/BasicGrid.js b/docs/data/system/components/grid/BasicGrid.js
@@ -0,0 +1,34 @@
+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 BasicGrid() {
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <Grid container spacing={2}>
+        <Grid xs={8}>
+          <Item>xs=8</Item>
+        </Grid>
+        <Grid xs={4}>
+          <Item>xs=4</Item>
+        </Grid>
+        <Grid xs={4}>
+          <Item>xs=4</Item>
+        </Grid>
+        <Grid xs={8}>
+          <Item>xs=8</Item>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}