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 Button demos to emotion #25138

Merged
merged 19 commits into from
Mar 1, 2021
Merged

[docs] Migrate Button demos to emotion #25138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
0d80442
docs: Migrate ContainedButtons demo to emotion
vicasas Feb 27, 2021
2085687
docs: Migrate Text buttons demo to emotion
vicasas Feb 27, 2021
e15ffd9
docs: Migrate Outlined buttons demo to emotion
vicasas Feb 27, 2021
28b9864
docs: Migrate Upload button demo to emotion
vicasas Feb 27, 2021
f70de90
docs: Migrate Sizes buttons demo to emotion
vicasas Feb 27, 2021
bf5ed76
docs: Migrate Icon label buttons demo to emotion
vicasas Feb 27, 2021
91bbdf4
docs: Migrate Icon buttons demo to emotion
vicasas Feb 27, 2021
dd7c07f
docs: Migrate Loading buttons demo to emotion
vicasas Feb 27, 2021
ab878c6
docs: Migrate Loading buttons demo to emotion
vicasas Feb 28, 2021
04091e6
docs: Fix specificity demo Outlined buttons
vicasas Feb 28, 2021
8fafbbc
docs: Fix specificity demo Text buttons
vicasas Feb 28, 2021
4476440
docs: Fix specificity demo Contained buttons
vicasas Feb 28, 2021
d8865d3
docs: Fix specificity demo Sizes buttons
vicasas Feb 28, 2021
39b795c
docs: Fix specificity demo Sizes buttons
vicasas Feb 28, 2021
87365d0
docs: Fix specificity demo Loading buttons
vicasas Feb 28, 2021
a73a799
docs: Use sx prop
vicasas Feb 28, 2021
e33f111
docs: Fix Input emotion component for Upload buttons demo
vicasas Feb 28, 2021
b365b7b
yarn prettier
oliviertassinari Feb 28, 2021
0d1e8e0
make wrapper agnostic when possible
oliviertassinari Feb 28, 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
52 changes: 22 additions & 30 deletions docs/src/pages/components/buttons/ButtonSizes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,68 +1,60 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';
import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';

const useStyles = makeStyles((theme) => ({
margin: {
margin: theme.spacing(1),
},
}));

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

return (
<div>
<Box
sx={{
'& button': {
m: 1,
},
}}
>
<div>
<Button size="small" className={classes.margin}>
Small
</Button>
<Button size="medium" className={classes.margin}>
Medium
</Button>
<Button size="large" className={classes.margin}>
Large
</Button>
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>
</div>
<div>
<Button variant="outlined" size="small" className={classes.margin}>
<Button variant="outlined" size="small">
Small
</Button>
<Button variant="outlined" size="medium" className={classes.margin}>
<Button variant="outlined" size="medium">
Medium
</Button>
<Button variant="outlined" size="large" className={classes.margin}>
<Button variant="outlined" size="large">
Large
</Button>
</div>
<div>
<Button variant="contained" size="small" className={classes.margin}>
<Button variant="contained" size="small">
Small
</Button>
<Button variant="contained" size="medium" className={classes.margin}>
<Button variant="contained" size="medium">
Medium
</Button>
<Button variant="contained" size="large" className={classes.margin}>
<Button variant="contained" size="large">
Large
</Button>
</div>
<div>
<IconButton aria-label="delete" className={classes.margin} size="small">
<IconButton aria-label="delete" size="small">
<ArrowDownwardIcon fontSize="inherit" />
</IconButton>
<IconButton aria-label="delete" className={classes.margin}>
<IconButton aria-label="delete">
<DeleteIcon fontSize="small" />
</IconButton>
<IconButton aria-label="delete" className={classes.margin}>
<IconButton aria-label="delete">
<DeleteIcon />
</IconButton>
<IconButton aria-label="delete" className={classes.margin}>
<IconButton aria-label="delete">
<DeleteIcon fontSize="large" />
</IconButton>
</div>
</div>
</Box>
);
}
54 changes: 22 additions & 32 deletions docs/src/pages/components/buttons/ButtonSizes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,70 +1,60 @@
import * as React from 'react';
import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';
import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';

const useStyles = makeStyles((theme: Theme) =>
createStyles({
margin: {
margin: theme.spacing(1),
},
}),
);

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

return (
<div>
<Box
sx={{
'& button': {
m: 1,
},
}}
>
<div>
<Button size="small" className={classes.margin}>
Small
</Button>
<Button size="medium" className={classes.margin}>
Medium
</Button>
<Button size="large" className={classes.margin}>
Large
</Button>
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>
</div>
<div>
<Button variant="outlined" size="small" className={classes.margin}>
<Button variant="outlined" size="small">
Small
</Button>
<Button variant="outlined" size="medium" className={classes.margin}>
<Button variant="outlined" size="medium">
Medium
</Button>
<Button variant="outlined" size="large" className={classes.margin}>
<Button variant="outlined" size="large">
Large
</Button>
</div>
<div>
<Button variant="contained" size="small" className={classes.margin}>
<Button variant="contained" size="small">
Small
</Button>
<Button variant="contained" size="medium" className={classes.margin}>
<Button variant="contained" size="medium">
Medium
</Button>
<Button variant="contained" size="large" className={classes.margin}>
<Button variant="contained" size="large">
Large
</Button>
</div>
<div>
<IconButton aria-label="delete" className={classes.margin} size="small">
<IconButton aria-label="delete" size="small">
<ArrowDownwardIcon fontSize="inherit" />
</IconButton>
<IconButton aria-label="delete" className={classes.margin}>
<IconButton aria-label="delete">
<DeleteIcon fontSize="small" />
</IconButton>
<IconButton aria-label="delete" className={classes.margin}>
<IconButton aria-label="delete">
<DeleteIcon />
</IconButton>
<IconButton aria-label="delete" className={classes.margin}>
<IconButton aria-label="delete">
<DeleteIcon fontSize="large" />
</IconButton>
</div>
</div>
</Box>
);
}
22 changes: 9 additions & 13 deletions docs/src/pages/components/buttons/ContainedButtons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,16 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1),
},
},
}));

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

return (
<div className={classes.root}>
<Box
sx={{
'& > :not(style)': {
m: 1,
},
}}
>
<Button variant="contained">Primary</Button>
<Button variant="contained" color="secondary">
Secondary
Expand All @@ -25,6 +21,6 @@ export default function ContainedButtons() {
<Button variant="contained" href="#contained-buttons">
Link
</Button>
</div>
</Box>
);
}
24 changes: 9 additions & 15 deletions docs/src/pages/components/buttons/ContainedButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,16 @@
import * as React from 'react';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
'& > *': {
margin: theme.spacing(1),
},
},
}),
);

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

return (
<div className={classes.root}>
<Box
sx={{
'& > :not(style)': {
m: 1,
},
}}
>
<Button variant="contained">Primary</Button>
<Button variant="contained" color="secondary">
Secondary
Expand All @@ -27,6 +21,6 @@ export default function ContainedButtons() {
<Button variant="contained" href="#contained-buttons">
Link
</Button>
</div>
</Box>
);
}
13 changes: 1 addition & 12 deletions docs/src/pages/components/buttons/IconButtons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,12 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';
import AlarmIcon from '@material-ui/icons/Alarm';
import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart';

const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1),
},
},
}));

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

return (
<div className={classes.root}>
<div>
<IconButton aria-label="delete">
<DeleteIcon />
</IconButton>
Expand Down
15 changes: 1 addition & 14 deletions docs/src/pages/components/buttons/IconButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,12 @@
import * as React from 'react';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';
import AlarmIcon from '@material-ui/icons/Alarm';
import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart';

const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
'& > *': {
margin: theme.spacing(1),
},
},
}),
);

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

return (
<div className={classes.root}>
<div>
<IconButton aria-label="delete">
<DeleteIcon />
</IconButton>
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/buttons/IconLabelButtons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ export default function IconLabelButtons() {
return (
<Box
sx={{
'& > *': {
margin: 1,
'& > :not(style)': {
m: 1,
},
}}
>
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/buttons/IconLabelButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ export default function IconLabelButtons() {
return (
<Box
sx={{
'& > *': {
margin: 1,
'& > :not(style)': {
m: 1,
},
}}
>
Expand Down
22 changes: 9 additions & 13 deletions docs/src/pages/components/buttons/LoadingButtons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import LoadingButton from '@material-ui/lab/LoadingButton';
import SaveIcon from '@material-ui/icons/Save';

const useStyles = makeStyles((theme) => ({
root: {
'& button': {
margin: theme.spacing(1),
},
},
}));

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

return (
<div className={classes.root}>
<Box
sx={{
'& > :not(style)': {
m: 1,
},
}}
>
<LoadingButton pending variant="outlined">
Submit
</LoadingButton>
Expand All @@ -30,6 +26,6 @@ export default function LoadingButtons() {
>
Save
</LoadingButton>
</div>
</Box>
);
}
Loading