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 Divider demos to emotion #25145

Merged
merged 12 commits into from
Mar 2, 2021
Merged

[docs] Migrate Divider demos to emotion #25145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
166418b
docs: Migrate List dividers demo to emotion
vicasas Feb 28, 2021
e984390
docs: Migrate Inset dividers demo to emotion
vicasas Feb 28, 2021
55436d3
docs: Migrate Subheader dividers demo to emotion
vicasas Feb 28, 2021
447b201
docs: Migrate Middle dividers demo to emotion
vicasas Feb 28, 2021
ee2afdb
docs: Migrate Vertical dividers demo to emotion
vicasas Feb 28, 2021
781460b
docs: Fix shorthand css
vicasas Mar 1, 2021
7fb0831
docs: Fix borderRadius
vicasas Mar 1, 2021
a684964
docs: Fix margin demos
vicasas Mar 1, 2021
43981e0
docs: Fix color css using theme.[value]
vicasas Mar 1, 2021
f287bb7
shorter demos
oliviertassinari Mar 2, 2021
808f450
yarn docs:typescript:formatted
oliviertassinari Mar 2, 2021
45a5287
fix visual regression
oliviertassinari Mar 2, 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
19 changes: 7 additions & 12 deletions docs/src/pages/components/dividers/InsetDividers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
Expand All @@ -10,19 +9,15 @@ import WorkIcon from '@material-ui/icons/Work';
import BeachAccessIcon from '@material-ui/icons/BeachAccess';
import Divider from '@material-ui/core/Divider';

const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
},
}));

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

return (
<List className={classes.root}>
<List
sx={{
width: '100%',
maxWidth: 360,
bgcolor: 'background.paper',
}}
>
<ListItem>
<ListItemAvatar>
<Avatar>
Expand Down
21 changes: 7 additions & 14 deletions docs/src/pages/components/dividers/InsetDividers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import * as React from 'react';
import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
Expand All @@ -10,21 +9,15 @@ import WorkIcon from '@material-ui/icons/Work';
import BeachAccessIcon from '@material-ui/icons/BeachAccess';
import Divider from '@material-ui/core/Divider';

const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
width: '100%',
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
},
}),
);

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

return (
<List className={classes.root}>
<List
sx={{
width: '100%',
maxWidth: 360,
bgcolor: 'background.paper',
}}
>
<ListItem>
<ListItemAvatar>
<Avatar>
Expand Down
17 changes: 6 additions & 11 deletions docs/src/pages/components/dividers/ListDividers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,18 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import Divider from '@material-ui/core/Divider';

const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
},
}));
const style = {
width: '100%',
maxWidth: 360,
bgcolor: 'background.paper',
};

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

return (
<List component="nav" className={classes.root} aria-label="mailbox folders">
<List sx={style} component="nav" aria-label="mailbox folders">
<ListItem button>
<ListItemText primary="Inbox" />
</ListItem>
Expand Down
19 changes: 6 additions & 13 deletions docs/src/pages/components/dividers/ListDividers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,18 @@
import * as React from 'react';
import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import Divider from '@material-ui/core/Divider';

const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
width: '100%',
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
},
}),
);
const style = {
width: '100%',
maxWidth: 360,
bgcolor: 'background.paper',
};

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

return (
<List component="nav" className={classes.root} aria-label="mailbox folders">
<List sx={style} component="nav" aria-label="mailbox folders">
<ListItem button>
<ListItemText primary="Inbox" />
</ListItem>
Expand Down
67 changes: 29 additions & 38 deletions docs/src/pages/components/dividers/MiddleDividers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,21 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Chip from '@material-ui/core/Chip';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
import Divider from '@material-ui/core/Divider';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
},
chip: {
margin: theme.spacing(0.5),
},
section1: {
margin: theme.spacing(3, 2),
},
section2: {
margin: theme.spacing(2),
},
section3: {
margin: theme.spacing(3, 1, 1),
},
}));

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

return (
<div className={classes.root}>
<div className={classes.section1}>
<Box
sx={{
width: '100%',
maxWidth: 360,
bgcolor: 'background.paper',
}}
>
<Box sx={{ my: 3, mx: 2 }}>
<Grid container alignItems="center">
<Grid item xs>
<Typography gutterBottom variant="h4" component="div">
Expand All @@ -44,26 +28,33 @@ export default function MiddleDividers() {
</Typography>
</Grid>
</Grid>
<Typography color="textSecondary" variant="body2">
<Typography color="text.secondary" variant="body2">
Pinstriped cornflower blue cotton blouse takes you on a walk to the park or
just down the hall.
</Typography>
</div>
</Box>
<Divider variant="middle" />
<div className={classes.section2}>
<Box sx={{ m: 2 }}>
<Typography gutterBottom variant="body1">
Select type
</Typography>
<div>
<Chip className={classes.chip} label="Extra Soft" />
<Chip className={classes.chip} color="primary" label="Soft" />
<Chip className={classes.chip} label="Medium" />
<Chip className={classes.chip} label="Hard" />
</div>
</div>
<div className={classes.section3}>
<Box
sx={{
// Replace with Stack
'& > :not(style) + :not(style)': {
ml: 1,
},
}}
>
<Chip label="Extra Soft" />
<Chip color="primary" label="Soft" />
<Chip label="Medium" />
<Chip label="Hard" />
</Box>
</Box>
<Box sx={{ mt: 3, ml: 1, mb: 1 }}>
<Button>Add to cart</Button>
</div>
</div>
</Box>
</Box>
);
}
69 changes: 29 additions & 40 deletions docs/src/pages/components/dividers/MiddleDividers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,21 @@
import * as React from 'react';
import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Chip from '@material-ui/core/Chip';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
import Divider from '@material-ui/core/Divider';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
width: '100%',
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
},
chip: {
margin: theme.spacing(0.5),
},
section1: {
margin: theme.spacing(3, 2),
},
section2: {
margin: theme.spacing(2),
},
section3: {
margin: theme.spacing(3, 1, 1),
},
}),
);

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

return (
<div className={classes.root}>
<div className={classes.section1}>
<Box
sx={{
width: '100%',
maxWidth: 360,
bgcolor: 'background.paper',
}}
>
<Box sx={{ my: 3, mx: 2 }}>
<Grid container alignItems="center">
<Grid item xs>
<Typography gutterBottom variant="h4" component="div">
Expand All @@ -46,26 +28,33 @@ export default function MiddleDividers() {
</Typography>
</Grid>
</Grid>
<Typography color="textSecondary" variant="body2">
<Typography color="text.secondary" variant="body2">
Pinstriped cornflower blue cotton blouse takes you on a walk to the park or
just down the hall.
</Typography>
</div>
</Box>
<Divider variant="middle" />
<div className={classes.section2}>
<Box sx={{ m: 2 }}>
<Typography gutterBottom variant="body1">
Select type
</Typography>
<div>
<Chip className={classes.chip} label="Extra Soft" />
<Chip className={classes.chip} color="primary" label="Soft" />
<Chip className={classes.chip} label="Medium" />
<Chip className={classes.chip} label="Hard" />
</div>
</div>
<div className={classes.section3}>
<Box
sx={{
// Replace with Stack
'& > :not(style) + :not(style)': {
ml: 1,
},
}}
>
<Chip label="Extra Soft" />
<Chip color="primary" label="Soft" />
<Chip label="Medium" />
<Chip label="Hard" />
</Box>
</Box>
<Box sx={{ mt: 3, ml: 1, mb: 1 }}>
<Button>Add to cart</Button>
</div>
</div>
</Box>
</Box>
);
}
29 changes: 9 additions & 20 deletions docs/src/pages/components/dividers/SubheaderDividers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
Expand All @@ -9,32 +8,22 @@ import BeachAccessIcon from '@material-ui/icons/BeachAccess';
import Divider from '@material-ui/core/Divider';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
},
dividerFullWidth: {
margin: `5px 0 0 ${theme.spacing(2)}`,
},
dividerInset: {
margin: `5px 0 0 ${theme.spacing(9)}`,
},
}));

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

return (
<List className={classes.root}>
<List
sx={{
width: '100%',
maxWidth: 360,
bgcolor: 'background.paper',
}}
>
<ListItem>
<ListItemText primary="Photos" secondary="Jan 9, 2014" />
</ListItem>
<Divider component="li" />
<li>
<Typography
className={classes.dividerFullWidth}
sx={{ mt: 0.5, ml: 2 }}
color="textSecondary"
display="block"
variant="caption"
Expand All @@ -48,7 +37,7 @@ export default function SubheaderDividers() {
<Divider component="li" variant="inset" />
<li>
<Typography
className={classes.dividerInset}
sx={{ mt: 0.5, ml: 9 }}
color="textSecondary"
display="block"
variant="caption"
Expand Down
Loading