Skip to content

Commit 8d46415

Browse files
eps1lonoliviertassinari
eps1lon
authored and
oliviertassinari
committed
[docs] Add button demos in ts (#14739)
* [docs] Add button demos in ts * [docs] Enable button ts demos
1 parent 8304d9d commit 8d46415

20 files changed

+861
-13
lines changed

‎docs/src/pages/demos/buttons/ButtonBases.js

+1
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@ function ButtonBases(props) {
116116
backgroundImage: `url(${image.url})`,
117117
}}
118118
/>
119+
119120
<span className={classes.imageBackdrop} />
120121
<span className={classes.imageButton}>
121122
<Typography

‎docs/src/pages/demos/buttons/ButtonBases.tsx

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { Theme, withStyles, WithStyles, createStyles } from '@material-ui/core/styles';
4+
import ButtonBase from '@material-ui/core/ButtonBase';
5+
import Typography from '@material-ui/core/Typography';
6+
7+
const styles = (theme: Theme) =>
8+
createStyles({
9+
root: {
10+
display: 'flex',
11+
flexWrap: 'wrap',
12+
minWidth: 300,
13+
width: '100%',
14+
},
15+
image: {
16+
position: 'relative',
17+
height: 200,
18+
[theme.breakpoints.down('xs')]: {
19+
width: '100% !important', // Overrides inline-style
20+
height: 100,
21+
},
22+
'&:hover, &$focusVisible': {
23+
zIndex: 1,
24+
'& $imageBackdrop': {
25+
opacity: 0.15,
26+
},
27+
'& $imageMarked': {
28+
opacity: 0,
29+
},
30+
'& $imageTitle': {
31+
border: '4px solid currentColor',
32+
},
33+
},
34+
},
35+
focusVisible: {},
36+
imageButton: {
37+
position: 'absolute',
38+
left: 0,
39+
right: 0,
40+
top: 0,
41+
bottom: 0,
42+
display: 'flex',
43+
alignItems: 'center',
44+
justifyContent: 'center',
45+
color: theme.palette.common.white,
46+
},
47+
imageSrc: {
48+
position: 'absolute',
49+
left: 0,
50+
right: 0,
51+
top: 0,
52+
bottom: 0,
53+
backgroundSize: 'cover',
54+
backgroundPosition: 'center 40%',
55+
},
56+
imageBackdrop: {
57+
position: 'absolute',
58+
left: 0,
59+
right: 0,
60+
top: 0,
61+
bottom: 0,
62+
backgroundColor: theme.palette.common.black,
63+
opacity: 0.4,
64+
transition: theme.transitions.create('opacity'),
65+
},
66+
imageTitle: {
67+
position: 'relative',
68+
padding: `${theme.spacing(2)}px ${theme.spacing(4)}px ${theme.spacing(1) + 6}px`,
69+
},
70+
imageMarked: {
71+
height: 3,
72+
width: 18,
73+
backgroundColor: theme.palette.common.white,
74+
position: 'absolute',
75+
bottom: -2,
76+
left: 'calc(50% - 9px)',
77+
transition: theme.transitions.create('opacity'),
78+
},
79+
});
80+
81+
const images = [
82+
{
83+
url: '/static/images/grid-list/breakfast.jpg',
84+
title: 'Breakfast',
85+
width: '40%',
86+
},
87+
{
88+
url: '/static/images/grid-list/burgers.jpg',
89+
title: 'Burgers',
90+
width: '30%',
91+
},
92+
{
93+
url: '/static/images/grid-list/camera.jpg',
94+
title: 'Camera',
95+
width: '30%',
96+
},
97+
];
98+
99+
function ButtonBases(props: WithStyles<typeof styles>) {
100+
const { classes } = props;
101+
102+
return (
103+
<div className={classes.root}>
104+
{images.map(image => (
105+
<ButtonBase
106+
focusRipple
107+
key={image.title}
108+
className={classes.image}
109+
focusVisibleClassName={classes.focusVisible}
110+
style={{
111+
width: image.width,
112+
}}
113+
>
114+
<span
115+
className={classes.imageSrc}
116+
style={{
117+
backgroundImage: `url(${image.url})`,
118+
}}
119+
/>
120+
<span className={classes.imageBackdrop} />
121+
<span className={classes.imageButton}>
122+
<Typography
123+
component="span"
124+
variant="subtitle1"
125+
color="inherit"
126+
className={classes.imageTitle}
127+
>
128+
{image.title}
129+
<span className={classes.imageMarked} />
130+
</Typography>
131+
</span>
132+
</ButtonBase>
133+
))}
134+
</div>
135+
);
136+
}
137+
138+
ButtonBases.propTypes = {
139+
classes: PropTypes.object.isRequired,
140+
} as any;
141+
142+
export default withStyles(styles)(ButtonBases);

‎docs/src/pages/demos/buttons/ButtonSizes.tsx

+118
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
4+
import Button from '@material-ui/core/Button';
5+
import Fab from '@material-ui/core/Fab';
6+
import IconButton from '@material-ui/core/IconButton';
7+
import AddIcon from '@material-ui/icons/Add';
8+
import DeleteIcon from '@material-ui/icons/Delete';
9+
import NavigationIcon from '@material-ui/icons/Navigation';
10+
import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
11+
12+
const styles = (theme: Theme) =>
13+
createStyles({
14+
margin: {
15+
margin: theme.spacing(1),
16+
},
17+
extendedIcon: {
18+
marginRight: theme.spacing(1),
19+
},
20+
});
21+
22+
function ButtonSizes(props: WithStyles<typeof styles>) {
23+
const { classes } = props;
24+
return (
25+
<div>
26+
<div>
27+
<Button size="small" className={classes.margin}>
28+
Small
29+
</Button>
30+
<Button size="medium" className={classes.margin}>
31+
Medium
32+
</Button>
33+
<Button size="large" className={classes.margin}>
34+
Large
35+
</Button>
36+
</div>
37+
<div>
38+
<Button variant="outlined" size="small" color="primary" className={classes.margin}>
39+
Small
40+
</Button>
41+
<Button variant="outlined" size="medium" color="primary" className={classes.margin}>
42+
Medium
43+
</Button>
44+
<Button variant="outlined" size="large" color="primary" className={classes.margin}>
45+
Large
46+
</Button>
47+
</div>
48+
<div>
49+
<Button variant="contained" size="small" color="primary" className={classes.margin}>
50+
Small
51+
</Button>
52+
<Button variant="contained" size="medium" color="primary" className={classes.margin}>
53+
Medium
54+
</Button>
55+
<Button variant="contained" size="large" color="primary" className={classes.margin}>
56+
Large
57+
</Button>
58+
</div>
59+
<div>
60+
<Fab size="small" color="secondary" aria-label="Add" className={classes.margin}>
61+
<AddIcon />
62+
</Fab>
63+
<Fab size="medium" color="secondary" aria-label="Add" className={classes.margin}>
64+
<AddIcon />
65+
</Fab>
66+
<Fab color="secondary" aria-label="Add" className={classes.margin}>
67+
<AddIcon />
68+
</Fab>
69+
</div>
70+
<div>
71+
<Fab
72+
variant="extended"
73+
size="small"
74+
color="primary"
75+
aria-label="Add"
76+
className={classes.margin}
77+
>
78+
<NavigationIcon className={classes.extendedIcon} />
79+
Extended
80+
</Fab>
81+
<Fab
82+
variant="extended"
83+
size="medium"
84+
color="primary"
85+
aria-label="Add"
86+
className={classes.margin}
87+
>
88+
<NavigationIcon className={classes.extendedIcon} />
89+
Extended
90+
</Fab>
91+
<Fab variant="extended" color="primary" aria-label="Add" className={classes.margin}>
92+
<NavigationIcon className={classes.extendedIcon} />
93+
Extended
94+
</Fab>
95+
</div>
96+
<div>
97+
<IconButton aria-label="Delete" className={classes.margin} size="small">
98+
<ArrowDownwardIcon fontSize="inherit" />
99+
</IconButton>
100+
<IconButton aria-label="Delete" className={classes.margin}>
101+
<DeleteIcon fontSize="small" />
102+
</IconButton>
103+
<IconButton aria-label="Delete" className={classes.margin}>
104+
<DeleteIcon />
105+
</IconButton>
106+
<IconButton aria-label="Delete" className={classes.margin}>
107+
<DeleteIcon fontSize="large" />
108+
</IconButton>
109+
</div>
110+
</div>
111+
);
112+
}
113+
114+
ButtonSizes.propTypes = {
115+
classes: PropTypes.object.isRequired,
116+
} as any;
117+
118+
export default withStyles(styles)(ButtonSizes);

‎docs/src/pages/demos/buttons/ContainedButtons.js

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ function ContainedButtons(props) {
3838
multiple
3939
type="file"
4040
/>
41+
4142
<label htmlFor="contained-button-file">
4243
<Button variant="contained" component="span" className={classes.button}>
4344
Upload

‎docs/src/pages/demos/buttons/ContainedButtons.tsx

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
4+
import Button from '@material-ui/core/Button';
5+
6+
const styles = (theme: Theme) =>
7+
createStyles({
8+
button: {
9+
margin: theme.spacing(1),
10+
},
11+
input: {
12+
display: 'none',
13+
},
14+
});
15+
16+
function ContainedButtons(props: WithStyles<typeof styles>) {
17+
const { classes } = props;
18+
return (
19+
<div>
20+
<Button variant="contained" className={classes.button}>
21+
Default
22+
</Button>
23+
<Button variant="contained" color="primary" className={classes.button}>
24+
Primary
25+
</Button>
26+
<Button variant="contained" color="secondary" className={classes.button}>
27+
Secondary
28+
</Button>
29+
<Button variant="contained" color="secondary" disabled className={classes.button}>
30+
Disabled
31+
</Button>
32+
<Button variant="contained" href="#contained-buttons" className={classes.button}>
33+
Link
34+
</Button>
35+
<input
36+
accept="image/*"
37+
className={classes.input}
38+
id="contained-button-file"
39+
multiple
40+
type="file"
41+
/>
42+
<label htmlFor="contained-button-file">
43+
<Button variant="contained" component="span" className={classes.button}>
44+
Upload
45+
</Button>
46+
</label>
47+
</div>
48+
);
49+
}
50+
51+
ContainedButtons.propTypes = {
52+
classes: PropTypes.object.isRequired,
53+
} as any;
54+
55+
export default withStyles(styles)(ContainedButtons);

‎docs/src/pages/demos/buttons/CustomizedButtons.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import clsx from 'clsx';
4-
import { withStyles, MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
4+
import { createMuiTheme, MuiThemeProvider, withStyles } from '@material-ui/core/styles';
55
import Button from '@material-ui/core/Button';
66
import purple from '@material-ui/core/colors/purple';
77
import green from '@material-ui/core/colors/green';

0 commit comments

Comments
 (0)