Skip to content

Commit

Permalink
[docs] Improve the docs of the Grid component
Browse files Browse the repository at this point in the history
  • Loading branch information
@oliviertassinari
oliviertassinari committed Mar 20, 2021
1 parent c3aab53 commit 07f39eb
Show file tree
Hide file tree
Showing 33 changed files with 279 additions and 373 deletions.
5 changes: 5 additions & 0 deletions docs/src/pages/components/box/box.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,3 +69,8 @@ import Box from '@material-ui/core/Box';
## System props

As a CSS utility component, the `Box` also supports all [`system`](/system/properties/) properties. You can use them as prop directly on the component.
For instance, a margin-top:

```jsx
<Box mt={2}>
```
16 changes: 3 additions & 13 deletions docs/src/pages/components/grid/AutoGrid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,16 @@ import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';

const Item = styled(Paper)(({ theme }) => ({
padding: theme.spacing(2),
// TODO withStyles removal
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
}));

export default function AutoGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={3}>
<Grid item xs>
<Item>xs</Item>
</Grid>
<Grid item xs>
<Item>xs</Item>
</Grid>
<Grid item xs>
<Item>xs</Item>
</Grid>
</Grid>
<br />
<Grid container spacing={3}>
<Grid item xs>
<Item>xs</Item>
Expand Down
17 changes: 4 additions & 13 deletions docs/src/pages/components/grid/AutoGrid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,19 @@ import { experimentalStyled as styled } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import * as CSS from 'csstype';

const Item = styled(Paper)(({ theme }) => ({
padding: theme.spacing(2),
// TODO withStyles removal
...(theme.typography.body2 as CSS.Properties),
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
}));

export default function AutoGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={3}>
<Grid item xs>
<Item>xs</Item>
</Grid>
<Grid item xs>
<Item>xs</Item>
</Grid>
<Grid item xs>
<Item>xs</Item>
</Grid>
</Grid>
<br />
<Grid container spacing={3}>
<Grid item xs>
<Item>xs</Item>
Expand Down
34 changes: 34 additions & 0 deletions docs/src/pages/components/grid/BasicGrid.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import * as React from 'react';
import { experimentalStyled as styled } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';

const Item = styled(Paper)(({ theme }) => ({
// TODO withStyles removal
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
}));

export default function BasicGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2}>
<Grid item xs={8}>
<Item>xs=8</Item>
</Grid>
<Grid item xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid item xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid item xs={8}>
<Item>xs=8</Item>
</Grid>
</Grid>
</Box>
);
}
35 changes: 35 additions & 0 deletions docs/src/pages/components/grid/BasicGrid.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import * as React from 'react';
import { experimentalStyled as styled } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import * as CSS from 'csstype';

const Item = styled(Paper)(({ theme }) => ({
// TODO withStyles removal
...(theme.typography.body2 as CSS.Properties),
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
}));

export default function BasicGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2}>
<Grid item xs={8}>
<Item>xs=8</Item>
</Grid>
<Grid item xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid item xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid item xs={8}>
<Item>xs=8</Item>
</Grid>
</Grid>
</Box>
);
}
58 changes: 11 additions & 47 deletions docs/src/pages/components/grid/CSSGrid.js
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,33 @@
import * as React from 'react';
import { experimentalStyled as styled } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper';
import Divider from '@material-ui/core/Divider';
import Grid from '@material-ui/core/Grid';

const Item = styled(Paper)(({ theme }) => ({
// TODO withStyles removal
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
whiteSpace: 'nowrap',
marginBottom: theme.spacing(1),
}));

export default function CSSGrid() {
return (
<div>
<Typography variant="subtitle1" gutterBottom component="div">
Material-UI Grid:
</Typography>
<Grid container spacing={3}>
<Grid item xs={3}>
<Item>xs=3</Item>
</Grid>
<Grid item xs={3}>
<Item>xs=3</Item>
</Grid>
<Grid item xs={3}>
<Item>xs=3</Item>
</Grid>
<Grid item xs={3}>
<Item>xs=3</Item>
</Grid>
<Grid item xs={8}>
<Box sx={{ width: 1 }}>
<Box display="grid" gridTemplateColumns="repeat(12, 1fr)" gap={2}>
<Box gridColumn="auto / span 8">
<Item>xs=8</Item>
</Grid>
<Grid item xs={4}>
<Item>xs=4</Item>
</Grid>
</Grid>
<Divider sx={{ my: 2 }} />
<Typography variant="subtitle1" gutterBottom component="div">
CSS Grid Layout:
</Typography>
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 3 }}>
<Box sx={{ gridColumnEnd: 'span 3' }}>
<Item>xs=3</Item>
</Box>
<Box sx={{ gridColumnEnd: 'span 3' }}>
<Item>xs=3</Item>
</Box>
<Box sx={{ gridColumnEnd: 'span 3' }}>
<Item>xs=3</Item>
<Box gridColumn="auto / span 4">
<Item>xs=4</Item>
</Box>
<Box sx={{ gridColumnEnd: 'span 3' }}>
<Item>xs=3</Item>
<Box gridColumn="auto / span 4">
<Item>xs=4</Item>
</Box>
<Box sx={{ gridColumnEnd: 'span 8' }}>
<Box gridColumn="auto / span 8">
<Item>xs=8</Item>
</Box>
<Box sx={{ gridColumnEnd: 'span 4' }}>
<Item>xs=4</Item>
</Box>
</Box>
</div>
</Box>
);
}
59 changes: 12 additions & 47 deletions docs/src/pages/components/grid/CSSGrid.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,34 @@
import * as React from 'react';
import { experimentalStyled as styled } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper';
import Divider from '@material-ui/core/Divider';
import Grid from '@material-ui/core/Grid';
import * as CSS from 'csstype';

const Item = styled(Paper)(({ theme }) => ({
// TODO withStyles removal
...(theme.typography.body2 as CSS.Properties),
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
whiteSpace: 'nowrap',
marginBottom: theme.spacing(1),
}));

export default function CSSGrid() {
return (
<div>
<Typography variant="subtitle1" gutterBottom component="div">
Material-UI Grid:
</Typography>
<Grid container spacing={3}>
<Grid item xs={3}>
<Item>xs=3</Item>
</Grid>
<Grid item xs={3}>
<Item>xs=3</Item>
</Grid>
<Grid item xs={3}>
<Item>xs=3</Item>
</Grid>
<Grid item xs={3}>
<Item>xs=3</Item>
</Grid>
<Grid item xs={8}>
<Box sx={{ width: 1 }}>
<Box display="grid" gridTemplateColumns="repeat(12, 1fr)" gap={2}>
<Box gridColumn="auto / span 8">
<Item>xs=8</Item>
</Grid>
<Grid item xs={4}>
<Item>xs=4</Item>
</Grid>
</Grid>
<Divider sx={{ my: 2 }} />
<Typography variant="subtitle1" gutterBottom component="div">
CSS Grid Layout:
</Typography>
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 3 }}>
<Box sx={{ gridColumnEnd: 'span 3' }}>
<Item>xs=3</Item>
</Box>
<Box sx={{ gridColumnEnd: 'span 3' }}>
<Item>xs=3</Item>
</Box>
<Box sx={{ gridColumnEnd: 'span 3' }}>
<Item>xs=3</Item>
<Box gridColumn="auto / span 4">
<Item>xs=4</Item>
</Box>
<Box sx={{ gridColumnEnd: 'span 3' }}>
<Item>xs=3</Item>
<Box gridColumn="auto / span 4">
<Item>xs=4</Item>
</Box>
<Box sx={{ gridColumnEnd: 'span 8' }}>
<Box gridColumn="auto / span 8">
<Item>xs=8</Item>
</Box>
<Box sx={{ gridColumnEnd: 'span 4' }}>
<Item>xs=4</Item>
</Box>
</Box>
</div>
</Box>
);
}
41 changes: 0 additions & 41 deletions docs/src/pages/components/grid/CenteredGrid.js
View file

This file was deleted.

41 changes: 0 additions & 41 deletions docs/src/pages/components/grid/CenteredGrid.tsx
View file

This file was deleted.

Loading

0 comments on commit 07f39eb

Please sign in to comment.