Material-ui: [Backdrop] Introduce backdrop component

[mibowser]

Would be great to introduce this component into a future release! Basically consists of two layers of content sort of how collapsible cards work but a little different behaviors. Both layers have information / controls where as cards are no where near as complex.

When concealed, the back layer can provide contextual information about the front layer.
When revealed, the back layer displays contextual controls that relate to the front layer.

Here for more info:
https://material.io/design/components/backdrop.html#usage

• [x] This is a v1.x issue (v0.x is no longer maintained).
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

[micimize]

• This issue title should be renamed to "[Backdrop] Introduce backdrop component" per convention
• Worth noting the name currently collides with the Modal Backdrop

I'm going to start working on a prototype of this to PR to the lab, unless anyone has a reason for me not to (like they're already working on it)

[oliviertassinari]

I have built a quick proof of concept:

https://codesandbox.io/s/vvyxxzxnl5

import React from 'react';
import {
  makeStyles,
  AppBar,
  Toolbar,
  IconButton,
  CssBaseline,
  SwipeableDrawer,
  List,
  Divider,
  ListItem,
  ListItemIcon,
  Typography,
  ListItemText,
} from '@material-ui/core';
import Box from '@material-ui/core/Box';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import MailIcon from '@material-ui/icons/Mail';
import MenuIcon from '@material-ui/icons/Menu';

const useStyles = makeStyles(theme => ({
  '@global': {
    body: {
      backgroundColor: '#7216f8',
    },
  },
  appBar: {
    backgroundColor: '#7216f8',
  },
  fullList: {
    width: 'auto',
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  paper: {
    height: 'calc(100% - 56px - 56px)',
    maxHeight: 'none',
    overflow: 'visible',
  },
  wrapper: {
    position: 'relative',
    top: -56,
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
    background: 'white',
    visibility: 'visible !important',
  },
  container: {
    overflow: 'auto',
  },
}));

function SwipeableTemporaryDrawer() {
  const classes = useStyles();
  const [state, setState] = React.useState({
    top: false,
    left: false,
    bottom: false,
    right: false,
  });

  const toggleDrawer = (side, open) => event => {
    if (event && event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
      return;
    }

    setState({ ...state, [side]: open });
  };

  const fullList = side => (
    <div
      className={classes.fullList}
      role="presentation"
      onClick={toggleDrawer(side, false)}
      onKeyDown={toggleDrawer(side, false)}
    >
      <List disablePadding>
        {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
          <ListItem button key={text}>
            <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
            <ListItemText primary={text} />
          </ListItem>
        ))}
      </List>
      <Divider />
      <List>
        {['All mail', 'Trash', 'Spam'].map((text, index) => (
          <ListItem button key={text}>
            <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
            <ListItemText primary={text} />
          </ListItem>
        ))}
      </List>
    </div>
  );

  return (
    <React.Fragment>
      <CssBaseline />
      <AppBar elevation={0} position="static" className={classes.appBar}>
        <Toolbar>
          <IconButton edge="start" className={classes.menuButton} onClick={toggleDrawer('bottom', true)} color="inherit" aria-label="Menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.title}>
            Photos
          </Typography>
        </Toolbar>
      </AppBar>
      <SwipeableDrawer
        anchor="bottom"
        open={state.bottom}
        onClose={toggleDrawer('bottom', false)}
        onOpen={toggleDrawer('bottom', true)}
        ModalProps={{
          keepMounted: true,
        }}
        swipeAreaWidth={56}
        BackdropProps={{
          invisible: true,
        }}
        classes={{
          paper: classes.paper,
        }}
      >
        <div className={classes.wrapper}>
          <Box p={2}>
            <Typography color="textSecondary">Subtitle</Typography>
          </Box>
          <div className={classes.container}>
            {fullList('bottom')}
            {fullList('bottom')}
          </div>
         </div>
      </SwipeableDrawer>
    </React.Fragment>
  );
}

export default SwipeableTemporaryDrawer;

[mbrookes]

We could add it as a docs demo-only component, like Transfer List.

[oliviertassinari]

I have added the waiting for users upvotes tag. I'm closing the issue as we are not sure people are looking for such abstraction. So please upvote this issue if you are. We will prioritize our effort based on the number of upvotes.