Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Migrate Grid demos to emotion #25332

Merged
merged 17 commits into from
Mar 14, 2021
Merged

[docs] Migrate Grid demos to emotion #25332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
f1f40d8
docs: Migrate spacing grid demo to emotion
vicasas Mar 13, 2021
2f7987b
docs: Migrate basic grid demo to emotion
vicasas Mar 13, 2021
3c369a2
docs: Migrate grid whit multiple breakpoint demo to emotion
vicasas Mar 13, 2021
bcff3c3
docs: Migrate auto layout demo to emotion
vicasas Mar 13, 2021
6b1b988
docs: Migrate complex grid demo to emotion
vicasas Mar 13, 2021
acc0d03
docs: Migrate nested grid demo to emotion
vicasas Mar 13, 2021
f2ba1b3
docs: Migrate limitations: white-space: nowrap; demo to emotion
vicasas Mar 13, 2021
d84628e
docs: Migrate interactive grid demo to emotion
vicasas Mar 13, 2021
2ed1e9a
docs: Migrate css grid demo to emotion
vicasas Mar 13, 2021
c357d28
Fix: order import
vicasas Mar 13, 2021
443a7a3
give a try to the styled API
oliviertassinari Mar 13, 2021
e452c7e
Helper component is defined outside the render method
vicasas Mar 14, 2021
bd3413f
Refactor
vicasas Mar 14, 2021
a05a4e7
refactor: Using api styled for AutoGrid demo
vicasas Mar 14, 2021
a236547
refactor: Using api styled for CSSGrid demo
vicasas Mar 14, 2021
ca7d52c
refactor: Using api styled for FullWidthGrid demo
vicasas Mar 14, 2021
1af5f0e
refactor: Using api styled for NestedGrid demo
vicasas Mar 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 14 additions & 20 deletions docs/src/pages/components/grid/AutoGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,41 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
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 useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
const Item = styled(Paper)(({ theme }) => ({
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
}));

export default function AutoGrid() {
const classes = useStyles();

return (
<div className={classes.root}>
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={3}>
<Grid item xs>
<Paper className={classes.paper}>xs</Paper>
<Item>xs</Item>
</Grid>
<Grid item xs>
<Paper className={classes.paper}>xs</Paper>
<Item>xs</Item>
</Grid>
<Grid item xs>
<Paper className={classes.paper}>xs</Paper>
<Item>xs</Item>
</Grid>
</Grid>
<br />
<Grid container spacing={3}>
<Grid item xs>
<Paper className={classes.paper}>xs</Paper>
<Item>xs</Item>
</Grid>
<Grid item xs={6}>
<Paper className={classes.paper}>xs=6</Paper>
<Item>xs=6</Item>
</Grid>
<Grid item xs>
<Paper className={classes.paper}>xs</Paper>
<Item>xs</Item>
</Grid>
</Grid>
</div>
</Box>
);
}
38 changes: 15 additions & 23 deletions docs/src/pages/components/grid/AutoGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,41 @@
import * as React from 'react';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
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 useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
}),
);
const Item = styled(Paper)(({ theme }) => ({
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
}));

export default function AutoGrid() {
const classes = useStyles();

return (
<div className={classes.root}>
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={3}>
<Grid item xs>
<Paper className={classes.paper}>xs</Paper>
<Item>xs</Item>
</Grid>
<Grid item xs>
<Paper className={classes.paper}>xs</Paper>
<Item>xs</Item>
</Grid>
<Grid item xs>
<Paper className={classes.paper}>xs</Paper>
<Item>xs</Item>
</Grid>
</Grid>
<br />
<Grid container spacing={3}>
<Grid item xs>
<Paper className={classes.paper}>xs</Paper>
<Item>xs</Item>
</Grid>
<Grid item xs={6}>
<Paper className={classes.paper}>xs=6</Paper>
<Item>xs=6</Item>
</Grid>
<Grid item xs>
<Paper className={classes.paper}>xs</Paper>
<Item>xs</Item>
</Grid>
</Grid>
</div>
</Box>
);
}
27 changes: 6 additions & 21 deletions docs/src/pages/components/grid/AutoGridNoWrap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,17 @@
import * as React from 'react';
import Box from '@material-ui/core/Box';
import Paper from '@material-ui/core/Paper';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Avatar from '@material-ui/core/Avatar';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
overflow: 'hidden',
padding: theme.spacing(0, 3),
},
paper: {
maxWidth: 400,
margin: `${theme.spacing(1)} auto`,
padding: theme.spacing(2),
},
}));

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() {
const classes = useStyles();

return (
<div className={classes.root}>
<Paper className={classes.paper}>
<Box sx={{ flexGrow: 1, overflow: 'hidden', px: 3 }}>
<Paper sx={{ maxWidth: 400, my: 1, mx: 'auto', p: 2 }}>
<Grid container wrap="nowrap" spacing={2}>
<Grid item>
<Avatar>W</Avatar>
Expand All @@ -36,7 +21,7 @@ export default function AutoGridNoWrap() {
</Grid>
</Grid>
</Paper>
<Paper className={classes.paper}>
<Paper sx={{ maxWidth: 400, my: 1, mx: 'auto', p: 2 }}>
<Grid container wrap="nowrap" spacing={2}>
<Grid item>
<Avatar>W</Avatar>
Expand All @@ -46,7 +31,7 @@ export default function AutoGridNoWrap() {
</Grid>
</Grid>
</Paper>
<Paper className={classes.paper}>
<Paper sx={{ maxWidth: 400, my: 1, mx: 'auto', p: 2 }}>
<Grid container wrap="nowrap" spacing={2}>
<Grid item>
<Avatar>W</Avatar>
Expand All @@ -56,6 +41,6 @@ export default function AutoGridNoWrap() {
</Grid>
</Grid>
</Paper>
</div>
</Box>
);
}
29 changes: 6 additions & 23 deletions docs/src/pages/components/grid/AutoGridNoWrap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,17 @@
import * as React from 'react';
import Box from '@material-ui/core/Box';
import Paper from '@material-ui/core/Paper';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Avatar from '@material-ui/core/Avatar';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
flexGrow: 1,
overflow: 'hidden',
padding: theme.spacing(0, 3),
},
paper: {
maxWidth: 400,
margin: `${theme.spacing(1)} auto`,
padding: theme.spacing(2),
},
}),
);

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() {
const classes = useStyles();

return (
<div className={classes.root}>
<Paper className={classes.paper}>
<Box sx={{ flexGrow: 1, overflow: 'hidden', px: 3 }}>
<Paper sx={{ maxWidth: 400, my: 1, mx: 'auto', p: 2 }}>
<Grid container wrap="nowrap" spacing={2}>
<Grid item>
<Avatar>W</Avatar>
Expand All @@ -38,7 +21,7 @@ export default function AutoGridNoWrap() {
</Grid>
</Grid>
</Paper>
<Paper className={classes.paper}>
<Paper sx={{ maxWidth: 400, my: 1, mx: 'auto', p: 2 }}>
<Grid container wrap="nowrap" spacing={2}>
<Grid item>
<Avatar>W</Avatar>
Expand All @@ -48,7 +31,7 @@ export default function AutoGridNoWrap() {
</Grid>
</Grid>
</Paper>
<Paper className={classes.paper}>
<Paper sx={{ maxWidth: 400, my: 1, mx: 'auto', p: 2 }}>
<Grid container wrap="nowrap" spacing={2}>
<Grid item>
<Avatar>W</Avatar>
Expand All @@ -58,6 +41,6 @@ export default function AutoGridNoWrap() {
</Grid>
</Grid>
</Paper>
</div>
</Box>
);
}
81 changes: 35 additions & 46 deletions docs/src/pages/components/grid/CSSGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,80 +1,69 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
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 useStyles = makeStyles((theme) => ({
container: {
display: 'grid',
gridTemplateColumns: 'repeat(12, 1fr)',
gap: theme.spacing(3),
},
paper: {
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
whiteSpace: 'nowrap',
marginBottom: theme.spacing(1),
},
divider: {
margin: theme.spacing(2, 0),
},
const Item = styled(Paper)(({ theme }) => ({
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
whiteSpace: 'nowrap',
marginBottom: theme.spacing(1),
}));

export default function CSSGrid() {
const classes = useStyles();

return (
<div>
<Typography variant="subtitle1" gutterBottom component="div">
Material-UI Grid:
</Typography>
<Grid container spacing={3}>
<Grid item xs={3}>
<Paper className={classes.paper}>xs=3</Paper>
<Item>xs=3</Item>
</Grid>
<Grid item xs={3}>
<Paper className={classes.paper}>xs=3</Paper>
<Item>xs=3</Item>
</Grid>
<Grid item xs={3}>
<Paper className={classes.paper}>xs=3</Paper>
<Item>xs=3</Item>
</Grid>
<Grid item xs={3}>
<Paper className={classes.paper}>xs=3</Paper>
<Item>xs=3</Item>
</Grid>
<Grid item xs={8}>
<Paper className={classes.paper}>xs=8</Paper>
<Item>xs=8</Item>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper}>xs=4</Paper>
<Item>xs=4</Item>
</Grid>
</Grid>
<Divider className={classes.divider} />
<Divider sx={{ my: 2 }} />
<Typography variant="subtitle1" gutterBottom component="div">
CSS Grid Layout:
</Typography>
<div className={classes.container}>
<div style={{ gridColumnEnd: 'span 3' }}>
<Paper className={classes.paper}>xs=3</Paper>
</div>
<div style={{ gridColumnEnd: 'span 3' }}>
<Paper className={classes.paper}>xs=3</Paper>
</div>
<div style={{ gridColumnEnd: 'span 3' }}>
<Paper className={classes.paper}>xs=3</Paper>
</div>
<div style={{ gridColumnEnd: 'span 3' }}>
<Paper className={classes.paper}>xs=3</Paper>
</div>
<div style={{ gridColumnEnd: 'span 8' }}>
<Paper className={classes.paper}>xs=8</Paper>
</div>
<div style={{ gridColumnEnd: 'span 4' }}>
<Paper className={classes.paper}>xs=4</Paper>
</div>
</div>
<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>
<Box sx={{ gridColumnEnd: 'span 3' }}>
<Item>xs=3</Item>
</Box>
<Box sx={{ gridColumnEnd: 'span 8' }}>
<Item>xs=8</Item>
</Box>
<Box sx={{ gridColumnEnd: 'span 4' }}>
<Item>xs=4</Item>
</Box>
</Box>
</div>
);
}
Loading