Skip to content

Commit 25ea3bf

Browse files
oliviertassinarioliviertassinari
authored
[Snackbar] Match the new specification (#15122)
* [Snackbar] Match the new specification * sebastian review * Josh & Matt reviews * matt review * more matt feedback * more feedback * rebase
1 parent 03e01e3 commit 25ea3bf

23 files changed

+219
-239
lines changed

‎docs/src/modules/components/Demo.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ const styles = theme => ({
5050
},
5151
},
5252
demo: {
53+
margin: 'auto',
5354
borderRadius: theme.shape.borderRadius,
5455
backgroundColor:
5556
theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900],
@@ -349,6 +350,9 @@ class Demo extends React.Component {
349350
})}
350351
onMouseEnter={this.handleDemoHover}
351352
onMouseLeave={this.handleDemoHover}
353+
style={{
354+
maxWidth: demoOptions.maxWidth,
355+
}}
352356
>
353357
<Frame>
354358
<DemoComponent />

‎docs/src/pages/demos/app-bar/app-bar.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,4 +41,4 @@ A side searchbar.
4141

4242
## Bottom App Bar
4343

44-
{{"demo": "pages/demos/app-bar/BottomAppBar.js", "iframe": true}}
44+
{{"demo": "pages/demos/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 500}}

‎docs/src/pages/demos/snackbars/ConsecutiveSnackbars.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,8 @@ class ConsecutiveSnackbars extends React.Component {
6060

6161
return (
6262
<div>
63-
<Button onClick={this.handleClick('message a')}>Show message A</Button>
64-
<Button onClick={this.handleClick('message b')}>Show message B</Button>
63+
<Button onClick={this.handleClick('Message A')}>Show message A</Button>
64+
<Button onClick={this.handleClick('Message B')}>Show message B</Button>
6565
<Snackbar
6666
key={messageInfo.key}
6767
anchorOrigin={{

‎docs/src/pages/demos/snackbars/ConsecutiveSnackbars.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,8 @@ class ConsecutiveSnackbars extends React.Component<Props, State> {
7474

7575
return (
7676
<div>
77-
<Button onClick={this.handleClick('message a')}>Show message A</Button>
78-
<Button onClick={this.handleClick('message b')}>Show message B</Button>
77+
<Button onClick={this.handleClick('Message A')}>Show message A</Button>
78+
<Button onClick={this.handleClick('Message B')}>Show message B</Button>
7979
<Snackbar
8080
key={messageInfo.key}
8181
anchorOrigin={{

‎docs/src/pages/demos/snackbars/CustomizedSnackbars.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,6 @@ function MySnackbarContentWrapper(props) {
6464
}
6565
action={[
6666
<IconButton
67-
edge="end"
6867
key="close"
6968
aria-label="Close"
7069
color="inherit"
@@ -110,7 +109,7 @@ function CustomizedSnackbars() {
110109

111110
return (
112111
<div>
113-
<Button className={classes.margin} onClick={handleClick}>
112+
<Button variant="outlined" className={classes.margin} onClick={handleClick}>
114113
Open success snackbar
115114
</Button>
116115
<Snackbar

‎docs/src/pages/demos/snackbars/CustomizedSnackbars.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@ function MySnackbarContentWrapper(props: Props) {
7171
}
7272
action={[
7373
<IconButton
74-
edge="end"
7574
key="close"
7675
aria-label="Close"
7776
color="inherit"
@@ -117,7 +116,7 @@ function CustomizedSnackbars() {
117116

118117
return (
119118
<div>
120-
<Button className={classes.margin} onClick={handleClick}>
119+
<Button variant="outlined" className={classes.margin} onClick={handleClick}>
121120
Open success snackbar
122121
</Button>
123122
<Snackbar

‎docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js‎

Lines changed: 16 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
2-
import clsx from 'clsx';
32
import { makeStyles } from '@material-ui/core/styles';
43
import AppBar from '@material-ui/core/AppBar';
4+
import CssBaseline from '@material-ui/core/CssBaseline';
55
import Toolbar from '@material-ui/core/Toolbar';
66
import IconButton from '@material-ui/core/IconButton';
77
import MenuIcon from '@material-ui/icons/Menu';
@@ -12,67 +12,32 @@ import AddIcon from '@material-ui/icons/Add';
1212
import Snackbar from '@material-ui/core/Snackbar';
1313

1414
const useStyles = makeStyles(theme => ({
15-
root: {
16-
position: 'relative',
17-
overflow: 'hidden',
18-
},
19-
appFrame: {
20-
width: 360,
21-
height: 360,
22-
backgroundColor: theme.palette.background.paper,
15+
'@global': {
16+
body: {
17+
backgroundColor: theme.palette.background.paper,
18+
},
2319
},
2420
menuButton: {
25-
marginRight: 20,
26-
},
27-
button: {
28-
marginBottom: theme.spacing(1),
21+
marginRight: theme.spacing(2),
2922
},
3023
fab: {
3124
position: 'absolute',
3225
bottom: theme.spacing(2),
3326
right: theme.spacing(2),
3427
},
35-
fabMoveUp: {
36-
transform: 'translate3d(0, -46px, 0)',
37-
transition: theme.transitions.create('transform', {
38-
duration: theme.transitions.duration.enteringScreen,
39-
easing: theme.transitions.easing.easeOut,
40-
}),
41-
},
42-
fabMoveDown: {
43-
transform: 'translate3d(0, 0, 0)',
44-
transition: theme.transitions.create('transform', {
45-
duration: theme.transitions.duration.leavingScreen,
46-
easing: theme.transitions.easing.sharp,
47-
}),
48-
},
4928
snackbar: {
50-
position: 'absolute',
51-
},
52-
snackbarContent: {
53-
width: 360,
29+
[theme.breakpoints.down('xs')]: {
30+
bottom: 90,
31+
},
5432
},
5533
}));
5634

5735
function FabIntegrationSnackbar() {
5836
const classes = useStyles();
59-
const [open, setOpen] = React.useState(false);
60-
61-
function handleClick() {
62-
setOpen(true);
63-
}
64-
65-
function handleClose() {
66-
setOpen(false);
67-
}
68-
69-
const fabClassName = clsx(classes.fab, open ? classes.fabMoveUp : classes.fabMoveDown);
7037

7138
return (
72-
<div className={classes.root}>
73-
<Button className={classes.button} onClick={handleClick}>
74-
Open snackbar
75-
</Button>
39+
<React.Fragment>
40+
<CssBaseline />
7641
<div className={classes.appFrame}>
7742
<AppBar position="static" color="primary">
7843
<Toolbar>
@@ -85,31 +50,29 @@ function FabIntegrationSnackbar() {
8550
<MenuIcon />
8651
</IconButton>
8752
<Typography variant="h6" color="inherit">
88-
Out of my way!
53+
App Bar
8954
</Typography>
9055
</Toolbar>
9156
</AppBar>
92-
<Fab color="secondary" className={fabClassName}>
57+
<Fab color="secondary" className={classes.fab}>
9358
<AddIcon />
9459
</Fab>
9560
<Snackbar
96-
open={open}
61+
open
9762
autoHideDuration={4000}
98-
onClose={handleClose}
9963
ContentProps={{
10064
'aria-describedby': 'snackbar-fab-message-id',
101-
className: classes.snackbarContent,
10265
}}
10366
message={<span id="snackbar-fab-message-id">Archived</span>}
10467
action={
105-
<Button color="inherit" size="small" onClick={handleClose}>
68+
<Button color="inherit" size="small">
10669
Undo
10770
</Button>
10871
}
10972
className={classes.snackbar}
11073
/>
11174
</div>
112-
</div>
75+
</React.Fragment>
11376
);
11477
}
11578

‎docs/src/pages/demos/snackbars/FabIntegrationSnackbar.tsx‎

Lines changed: 16 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
2-
import clsx from 'clsx';
32
import { makeStyles, Theme } from '@material-ui/core/styles';
43
import AppBar from '@material-ui/core/AppBar';
4+
import CssBaseline from '@material-ui/core/CssBaseline';
55
import Toolbar from '@material-ui/core/Toolbar';
66
import IconButton from '@material-ui/core/IconButton';
77
import MenuIcon from '@material-ui/icons/Menu';
@@ -12,67 +12,32 @@ import AddIcon from '@material-ui/icons/Add';
1212
import Snackbar from '@material-ui/core/Snackbar';
1313

1414
const useStyles = makeStyles((theme: Theme) => ({
15-
root: {
16-
position: 'relative',
17-
overflow: 'hidden',
18-
},
19-
appFrame: {
20-
width: 360,
21-
height: 360,
22-
backgroundColor: theme.palette.background.paper,
15+
'@global': {
16+
body: {
17+
backgroundColor: theme.palette.background.paper,
18+
},
2319
},
2420
menuButton: {
25-
marginRight: 20,
26-
},
27-
button: {
28-
marginBottom: theme.spacing(1),
21+
marginRight: theme.spacing(2),
2922
},
3023
fab: {
3124
position: 'absolute',
3225
bottom: theme.spacing(2),
3326
right: theme.spacing(2),
3427
},
35-
fabMoveUp: {
36-
transform: 'translate3d(0, -46px, 0)',
37-
transition: theme.transitions.create('transform', {
38-
duration: theme.transitions.duration.enteringScreen,
39-
easing: theme.transitions.easing.easeOut,
40-
}),
41-
},
42-
fabMoveDown: {
43-
transform: 'translate3d(0, 0, 0)',
44-
transition: theme.transitions.create('transform', {
45-
duration: theme.transitions.duration.leavingScreen,
46-
easing: theme.transitions.easing.sharp,
47-
}),
48-
},
4928
snackbar: {
50-
position: 'absolute',
51-
},
52-
snackbarContent: {
53-
width: 360,
29+
[theme.breakpoints.down('xs')]: {
30+
bottom: 90,
31+
},
5432
},
5533
}));
5634

5735
function FabIntegrationSnackbar() {
5836
const classes = useStyles();
59-
const [open, setOpen] = React.useState(false);
60-
61-
function handleClick() {
62-
setOpen(true);
63-
}
64-
65-
function handleClose() {
66-
setOpen(false);
67-
}
68-
69-
const fabClassName = clsx(classes.fab, open ? classes.fabMoveUp : classes.fabMoveDown);
7037

7138
return (
72-
<div className={classes.root}>
73-
<Button className={classes.button} onClick={handleClick}>
74-
Open snackbar
75-
</Button>
39+
<React.Fragment>
40+
<CssBaseline />
7641
<div className={classes.appFrame}>
7742
<AppBar position="static" color="primary">
7843
<Toolbar>
@@ -85,31 +50,29 @@ function FabIntegrationSnackbar() {
8550
<MenuIcon />
8651
</IconButton>
8752
<Typography variant="h6" color="inherit">
88-
Out of my way!
53+
App Bar
8954
</Typography>
9055
</Toolbar>
9156
</AppBar>
92-
<Fab color="secondary" className={fabClassName}>
57+
<Fab color="secondary" className={classes.fab}>
9358
<AddIcon />
9459
</Fab>
9560
<Snackbar
96-
open={open}
61+
open
9762
autoHideDuration={4000}
98-
onClose={handleClose}
9963
ContentProps={{
10064
'aria-describedby': 'snackbar-fab-message-id',
101-
className: classes.snackbarContent,
10265
}}
10366
message={<span id="snackbar-fab-message-id">Archived</span>}
10467
action={
105-
<Button color="inherit" size="small" onClick={handleClose}>
68+
<Button color="inherit" size="small">
10669
Undo
10770
</Button>
10871
}
10972
className={classes.snackbar}
11073
/>
11174
</div>
112-
</div>
75+
</React.Fragment>
11376
);
11477
}
11578

‎docs/src/pages/demos/snackbars/FadeSnackbar.js‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎docs/src/pages/demos/snackbars/FadeSnackbar.tsx‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

0 commit comments

Comments
 (0)