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

Jump to bottom

[docs] Migrate Transitions demos to emotion #25488

Merged
merged 5 commits into from
Mar 25, 2021
Merged

[docs] Migrate Transitions demos to emotion #25488

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
556262c
docs: Migrate collapse demo to emotion
vicasas Mar 24, 2021
5553b3d
docs: Migrate fade demo to emotion
vicasas Mar 24, 2021
2a893ff
docs: Migrate grow demo to emotion
vicasas Mar 24, 2021
c1d816f
docs: Migrate slide demo to emotion
vicasas Mar 24, 2021
9b9d64e
docs: Migrate zoom demo to emotion
vicasas Mar 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
107 changes: 44 additions & 63 deletions docs/src/pages/components/transitions/SimpleCollapse.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,87 +1,68 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Switch from '@material-ui/core/Switch';
import Paper from '@material-ui/core/Paper';
import Collapse from '@material-ui/core/Collapse';
import FormControlLabel from '@material-ui/core/FormControlLabel';

const useStyles = makeStyles((theme) => ({
root: {
height: 300,
},
container: {
display: 'flex',
justifyContent: 'space-around',
height: 120,
width: 250,
},
halfWidth: {
width: '50%',
},
paper: {
margin: theme.spacing(1),
},
svg: {
width: 100,
height: 100,
},
polygon: {
fill: theme.palette.common.white,
stroke: theme.palette.divider,
strokeWidth: 1,
},
}));
const icon = (
<Paper sx={{ m: 1 }} elevation={4}>
<Box component="svg" sx={{ width: 100, height: 100 }}>
<Box
component="polygon"
sx={{
fill: (theme) => theme.palette.common.white,
stroke: (theme) => theme.palette.divider,
strokeWidth: 1,
}}
points="0,100 50,00, 100,100"
/>
</Box>
</Paper>
);

export default function SimpleCollapse() {
const classes = useStyles();
const [checked, setChecked] = React.useState(false);

const handleChange = () => {
setChecked((prev) => !prev);
};

return (
<div className={classes.root}>
<Box sx={{ height: 300 }}>
<FormControlLabel
control={<Switch checked={checked} onChange={handleChange} />}
label="Show"
/>
<div className={classes.container}>
<Collapse in={checked}>
<Paper elevation={4} className={classes.paper}>
<svg className={classes.svg}>
<polygon points="0,100 50,00, 100,100" className={classes.polygon} />
</svg>
</Paper>
</Collapse>
<Collapse in={checked} collapsedSize={40}>
<Paper elevation={4} className={classes.paper}>
<svg className={classes.svg}>
<polygon points="0,100 50,00, 100,100" className={classes.polygon} />
</svg>
</Paper>
</Collapse>
</div>
<div className={classes.container}>
<div className={classes.halfWidth}>
<Collapse orientation="horizontal" in={checked}>
<Paper elevation={4} className={classes.paper}>
<svg className={classes.svg}>
<polygon points="0,100 50,00, 100,100" className={classes.polygon} />
</svg>
</Paper>
<Box
sx={{
'& > :not(style)': {
display: 'flex',
justifyContent: 'space-around',
height: 120,
width: 250,
},
}}
>
<div>
<Collapse in={checked}>{icon}</Collapse>
<Collapse in={checked} collapsedSize={40}>
{icon}
</Collapse>
</div>
<div className={classes.halfWidth}>
<Collapse orientation="horizontal" in={checked} collapsedSize={40}>
<Paper elevation={4} className={classes.paper}>
<svg className={classes.svg}>
<polygon points="0,100 50,00, 100,100" className={classes.polygon} />
</svg>
</Paper>
</Collapse>
<div>
<Box sx={{ width: '50%' }}>
<Collapse orientation="horizontal" in={checked}>
{icon}
</Collapse>
</Box>
<Box sx={{ width: '50%' }}>
<Collapse orientation="horizontal" in={checked} collapsedSize={40}>
{icon}
</Collapse>
</Box>
</div>
</div>
</div>
</Box>
</Box>
);
}
107 changes: 43 additions & 64 deletions docs/src/pages/components/transitions/SimpleCollapse.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,89 +1,68 @@
import * as React from 'react';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Switch from '@material-ui/core/Switch';
import Paper from '@material-ui/core/Paper';
import Collapse from '@material-ui/core/Collapse';
import FormControlLabel from '@material-ui/core/FormControlLabel';

const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
height: 300,
},
container: {
display: 'flex',
justifyContent: 'space-around',
height: 120,
width: 250,
},
halfWidth: {
width: '50%',
},
paper: {
margin: theme.spacing(1),
},
svg: {
width: 100,
height: 100,
},
polygon: {
fill: theme.palette.common.white,
stroke: theme.palette.divider,
strokeWidth: 1,
},
}),
const icon = (
<Paper sx={{ m: 1 }} elevation={4}>
<Box component="svg" sx={{ width: 100, height: 100 }}>
<Box
component="polygon"
sx={{
fill: (theme) => theme.palette.common.white,
stroke: (theme) => theme.palette.divider,
strokeWidth: 1,
}}
points="0,100 50,00, 100,100"
/>
</Box>
</Paper>
);

export default function SimpleCollapse() {
const classes = useStyles();
const [checked, setChecked] = React.useState(false);

const handleChange = () => {
setChecked((prev) => !prev);
};

return (
<div className={classes.root}>
<Box sx={{ height: 300 }}>
<FormControlLabel
control={<Switch checked={checked} onChange={handleChange} />}
label="Show"
/>
<div className={classes.container}>
<Collapse in={checked}>
<Paper elevation={4} className={classes.paper}>
<svg className={classes.svg}>
<polygon points="0,100 50,00, 100,100" className={classes.polygon} />
</svg>
</Paper>
</Collapse>
<Collapse in={checked} collapsedSize={40}>
<Paper elevation={4} className={classes.paper}>
<svg className={classes.svg}>
<polygon points="0,100 50,00, 100,100" className={classes.polygon} />
</svg>
</Paper>
</Collapse>
</div>
<div className={classes.container}>
<div className={classes.halfWidth}>
<Collapse orientation="horizontal" in={checked}>
<Paper elevation={4} className={classes.paper}>
<svg className={classes.svg}>
<polygon points="0,100 50,00, 100,100" className={classes.polygon} />
</svg>
</Paper>
<Box
sx={{
'& > :not(style)': {
display: 'flex',
justifyContent: 'space-around',
height: 120,
width: 250,
},
}}
>
<div>
<Collapse in={checked}>{icon}</Collapse>
<Collapse in={checked} collapsedSize={40}>
{icon}
</Collapse>
</div>
<div className={classes.halfWidth}>
<Collapse orientation="horizontal" in={checked} collapsedSize={40}>
<Paper elevation={4} className={classes.paper}>
<svg className={classes.svg}>
<polygon points="0,100 50,00, 100,100" className={classes.polygon} />
</svg>
</Paper>
</Collapse>
<div>
<Box sx={{ width: '50%' }}>
<Collapse orientation="horizontal" in={checked}>
{icon}
</Collapse>
</Box>
<Box sx={{ width: '50%' }}>
<Collapse orientation="horizontal" in={checked} collapsedSize={40}>
{icon}
</Collapse>
</Box>
</div>
</div>
</div>
</Box>
</Box>
);
}
54 changes: 21 additions & 33 deletions docs/src/pages/components/transitions/SimpleFade.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,42 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Switch from '@material-ui/core/Switch';
import Paper from '@material-ui/core/Paper';
import Fade from '@material-ui/core/Fade';
import FormControlLabel from '@material-ui/core/FormControlLabel';

const useStyles = makeStyles((theme) => ({
root: {
height: 180,
},
container: {
display: 'flex',
},
paper: {
margin: theme.spacing(1),
},
svg: {
width: 100,
height: 100,
},
polygon: {
fill: theme.palette.common.white,
stroke: theme.palette.divider,
strokeWidth: 1,
},
}));
const icon = (
<Paper sx={{ m: 1 }} elevation={4}>
<Box component="svg" sx={{ width: 100, height: 100 }}>
<Box
component="polygon"
sx={{
fill: (theme) => theme.palette.common.white,
stroke: (theme) => theme.palette.divider,
strokeWidth: 1,
}}
points="0,100 50,00, 100,100"
/>
</Box>
</Paper>
);

export default function SimpleFade() {
const classes = useStyles();
const [checked, setChecked] = React.useState(false);

const handleChange = () => {
setChecked((prev) => !prev);
};

return (
<div className={classes.root}>
<Box sx={{ height: 180 }}>
<FormControlLabel
control={<Switch checked={checked} onChange={handleChange} />}
label="Show"
/>
<div className={classes.container}>
<Fade in={checked}>
<Paper elevation={4} className={classes.paper}>
<svg className={classes.svg}>
<polygon points="0,100 50,00, 100,100" className={classes.polygon} />
</svg>
</Paper>
</Fade>
</div>
</div>
<Box sx={{ display: 'flex' }}>
<Fade in={checked}>{icon}</Fade>
</Box>
</Box>
);
}