Skip to content

Commit

Permalink
[Snackbar] Match the new specification
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari committed Apr 1, 2019
1 parent bbfbb0c commit 9ac3f8f
Show file tree
Hide file tree
Showing 15 changed files with 167 additions and 171 deletions.
1 change: 0 additions & 1 deletion docs/src/pages/demos/snackbars/CustomizedSnackbars.js
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,6 @@ function MySnackbarContentWrapper(props) {
}
action={[
<IconButton
edge="end"
key="close"
aria-label="Close"
color="inherit"
Expand Down
1 change: 0 additions & 1 deletion docs/src/pages/demos/snackbars/CustomizedSnackbars.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,6 @@ function MySnackbarContentWrapper(props: Props) {
}
action={[
<IconButton
edge="end"
key="close"
aria-label="Close"
color="inherit"
Expand Down
35 changes: 8 additions & 27 deletions docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import CssBaseline from '@material-ui/core/CssBaseline';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
Expand All @@ -17,12 +17,10 @@ const useStyles = makeStyles(theme => ({
overflow: 'hidden',
},
appFrame: {
width: 360,
height: 360,
backgroundColor: theme.palette.background.paper,
height: 356,
},
menuButton: {
marginRight: 20,
marginRight: theme.spacing(2),
},
button: {
marginBottom: theme.spacing(1),
Expand All @@ -32,25 +30,10 @@ const useStyles = makeStyles(theme => ({
bottom: theme.spacing(2),
right: theme.spacing(2),
},
fabMoveUp: {
transform: 'translate3d(0, -46px, 0)',
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.enteringScreen,
easing: theme.transitions.easing.easeOut,
}),
},
fabMoveDown: {
transform: 'translate3d(0, 0, 0)',
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.leavingScreen,
easing: theme.transitions.easing.sharp,
}),
},
snackbar: {
position: 'absolute',
},
snackbarContent: {
width: 360,
[theme.breakpoints.down('xs')]: {
bottom: 90,
},
},
}));

Expand All @@ -66,10 +49,9 @@ function FabIntegrationSnackbar() {
setOpen(false);
}

const fabClassName = clsx(classes.fab, open ? classes.fabMoveUp : classes.fabMoveDown);

return (
<div className={classes.root}>
<CssBaseline />
<Button className={classes.button} onClick={handleClick}>
Open snackbar
</Button>
Expand All @@ -89,7 +71,7 @@ function FabIntegrationSnackbar() {
</Typography>
</Toolbar>
</AppBar>
<Fab color="secondary" className={fabClassName}>
<Fab color="secondary" className={classes.fab}>
<AddIcon />
</Fab>
<Snackbar
Expand All @@ -98,7 +80,6 @@ function FabIntegrationSnackbar() {
onClose={handleClose}
ContentProps={{
'aria-describedby': 'snackbar-fab-message-id',
className: classes.snackbarContent,
}}
message={<span id="snackbar-fab-message-id">Archived</span>}
action={
Expand Down
35 changes: 8 additions & 27 deletions docs/src/pages/demos/snackbars/FabIntegrationSnackbar.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import clsx from 'clsx';
import { makeStyles, Theme } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import CssBaseline from '@material-ui/core/CssBaseline';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
Expand All @@ -17,12 +17,10 @@ const useStyles = makeStyles((theme: Theme) => ({
overflow: 'hidden',
},
appFrame: {
width: 360,
height: 360,
backgroundColor: theme.palette.background.paper,
height: 356,
},
menuButton: {
marginRight: 20,
marginRight: theme.spacing(2),
},
button: {
marginBottom: theme.spacing(1),
Expand All @@ -32,25 +30,10 @@ const useStyles = makeStyles((theme: Theme) => ({
bottom: theme.spacing(2),
right: theme.spacing(2),
},
fabMoveUp: {
transform: 'translate3d(0, -46px, 0)',
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.enteringScreen,
easing: theme.transitions.easing.easeOut,
}),
},
fabMoveDown: {
transform: 'translate3d(0, 0, 0)',
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.leavingScreen,
easing: theme.transitions.easing.sharp,
}),
},
snackbar: {
position: 'absolute',
},
snackbarContent: {
width: 360,
[theme.breakpoints.down('xs')]: {
bottom: 90,
},
},
}));

Expand All @@ -66,10 +49,9 @@ function FabIntegrationSnackbar() {
setOpen(false);
}

const fabClassName = clsx(classes.fab, open ? classes.fabMoveUp : classes.fabMoveDown);

return (
<div className={classes.root}>
<CssBaseline />
<Button className={classes.button} onClick={handleClick}>
Open snackbar
</Button>
Expand All @@ -89,7 +71,7 @@ function FabIntegrationSnackbar() {
</Typography>
</Toolbar>
</AppBar>
<Fab color="secondary" className={fabClassName}>
<Fab color="secondary" className={classes.fab}>
<AddIcon />
</Fab>
<Snackbar
Expand All @@ -98,7 +80,6 @@ function FabIntegrationSnackbar() {
onClose={handleClose}
ContentProps={{
'aria-describedby': 'snackbar-fab-message-id',
className: classes.snackbarContent,
}}
message={<span id="snackbar-fab-message-id">Archived</span>}
action={
Expand Down
33 changes: 0 additions & 33 deletions docs/src/pages/demos/snackbars/FadeSnackbar.js

This file was deleted.

33 changes: 0 additions & 33 deletions docs/src/pages/demos/snackbars/FadeSnackbar.tsx

This file was deleted.

5 changes: 4 additions & 1 deletion docs/src/pages/demos/snackbars/LongTextSnackbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ const action = (
);

const styles = theme => ({
root: {
maxWidth: 600,
},
snackbar: {
margin: theme.spacing(1),
},
Expand All @@ -20,7 +23,7 @@ function LongTextSnackbar(props) {
const { classes } = props;

return (
<div>
<div className={classes.root}>
<SnackbarContent className={classes.snackbar} message="I love snacks." action={action} />
<SnackbarContent
className={classes.snackbar}
Expand Down
5 changes: 4 additions & 1 deletion docs/src/pages/demos/snackbars/LongTextSnackbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ const action = (

const styles = (theme: Theme) =>
createStyles({
root: {
maxWidth: 600,
},
snackbar: {
margin: theme.spacing(1),
},
Expand All @@ -23,7 +26,7 @@ function LongTextSnackbar(props: Props) {
const { classes } = props;

return (
<div>
<div className={classes.root}>
<SnackbarContent className={classes.snackbar} message="I love snacks." action={action} />
<SnackbarContent
className={classes.snackbar}
Expand Down
48 changes: 48 additions & 0 deletions docs/src/pages/demos/snackbars/TransitionsSnackbar.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import React from 'react';
import Button from '@material-ui/core/Button';
import Snackbar from '@material-ui/core/Snackbar';
import Fade from '@material-ui/core/Fade';
import Slide from '@material-ui/core/Slide';

function TransitionSlide(props) {
return <Slide {...props} direction="up" />;
}

function TransitionsSnackbar() {
const [state, setState] = React.useState({
open: false,
Transition: Fade,
});

const handleClick = Transition => () => {
setState({
open: true,
Transition,
});
};

function handleClose() {
setState({
...state,
open: false,
});
}

return (
<div>
<Button onClick={handleClick(Fade)}>Fade Transition</Button>
<Button onClick={handleClick(TransitionSlide)}>Slide Transition</Button>
<Snackbar
open={state.open}
onClose={handleClose}
TransitionComponent={state.Transition}
ContentProps={{
'aria-describedby': 'message-id',
}}
message={<span id="message-id">I love snacks</span>}
/>
</div>
);
}

export default TransitionsSnackbar;
49 changes: 49 additions & 0 deletions docs/src/pages/demos/snackbars/TransitionsSnackbar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import React from 'react';
import Button from '@material-ui/core/Button';
import Snackbar from '@material-ui/core/Snackbar';
import Fade from '@material-ui/core/Fade';
import Slide from '@material-ui/core/Slide';
import { TransitionProps } from '@material-ui/core/transitions/transition';

function TransitionSlide(props: TransitionProps) {
return <Slide {...props} direction="up" />;
}

function TransitionsSnackbar() {
const [state, setState] = React.useState({
open: false,
Transition: Fade,
});

const handleClick = (Transition: React.ComponentType<TransitionProps>) => () => {
setState({
open: true,
Transition,
});
};

function handleClose() {
setState({
...state,
open: false,
});
}

return (
<div>
<Button onClick={handleClick(Fade)}>Fade Transition</Button>
<Button onClick={handleClick(TransitionSlide)}>Slide Transition</Button>
<Snackbar
open={state.open}
onClose={handleClose}
TransitionComponent={state.Transition}
ContentProps={{
'aria-describedby': 'message-id',
}}
message={<span id="message-id">I love snacks</span>}
/>
</div>
);
}

export default TransitionsSnackbar;
Loading

0 comments on commit 9ac3f8f

Please sign in to comment.