[docs] Set the infrastructure for a full page demo (mui#13314)

Author: oliviertassinari

.size-limit.js

@@ -28,7 +28,7 @@ module.exports = [
     name: 'The main docs bundle',
     webpack: false,
     path: main.path,
-    limit: '177 KB',
+    limit: '178 KB',
   },
   {
     name: 'The docs home page',

docs/src/modules/components/AppDrawer.js

@@ -16,7 +16,6 @@ import { pageToTitle } from 'docs/src/modules/utils/helpers';
 const styles = theme => ({
   paper: {
     width: 240,
-    backgroundColor: theme.palette.background.paper,
   },
   title: {
     color: theme.palette.text.secondary,

docs/src/modules/components/Demo.js

@@ -15,6 +15,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 import Github from '@material-ui/docs/svgIcons/GitHub';
 import MarkdownElement from '@material-ui/docs/MarkdownElement';
 import { getDependencies } from 'docs/src/modules/utils/helpers';
+import DemoFrame from 'docs/src/modules/components/DemoFrame';
 
 function compress(object) {
   return LZString.compressToBase64(JSON.stringify(object))
@@ -266,7 +267,13 @@ class Demo extends React.Component {
             [classes.demoHiddenHeader]: demoOptions.hideHeader,
           })}
         >
-          <DemoComponent />
+          {demoOptions.iframe ? (
+            <DemoFrame>
+              <DemoComponent />
+            </DemoFrame>
+          ) : (
+            <DemoComponent />
+          )}
         </div>
       </div>
     );

docs/src/modules/components/DemoFrame.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { create } from 'jss';
+import {
+  withStyles,
+  createGenerateClassName,
+  jssPreset,
+  MuiThemeProvider,
+} from '@material-ui/core/styles';
+import rtl from 'jss-rtl';
+import Frame from 'react-frame-component';
+import JssProvider from 'react-jss/lib/JssProvider';
+
+const styles = theme => ({
+  root: {
+    backgroundColor: theme.palette.background.default,
+    flexGrow: 1,
+    height: 400,
+    border: 'none',
+    boxShadow: theme.shadows[1],
+  },
+});
+
+const generateClassName = createGenerateClassName();
+
+class DemoFrame extends React.Component {
+  state = {
+    ready: false,
+  };
+
+  handleRef = ref => {
+    this.contentDocument = ref ? ref.node.contentDocument : null;
+  };
+
+  onContentDidMount = () => {
+    this.setState({
+      ready: true,
+      jss: create({
+        plugins: [...jssPreset().plugins, rtl()],
+        insertionPoint: this.contentDocument.querySelector('#demo-frame-jss'),
+      }),
+      sheetsManager: new Map(),
+      container: this.contentDocument.body,
+    });
+  };
+
+  onContentDidUpdate = () => {
+    this.contentDocument.body.dir = this.props.theme.direction;
+  };
+
+  render() {
+    const { children, classes, theme } = this.props;
+
+    const inIframe = this.state.ready ? (
+      <JssProvider jss={this.state.jss} generateClassName={generateClassName}>
+        <MuiThemeProvider theme={theme} sheetsManager={this.state.sheetsManager}>
+          {React.cloneElement(children, {
+            container: this.state.container,
+          })}
+        </MuiThemeProvider>
+      </JssProvider>
+    ) : null;
+
+    return (
+      <Frame
+        ref={this.handleRef}
+        className={classes.root}
+        contentDidMount={this.onContentDidMount}
+        contentDidUpdate={this.onContentDidUpdate}
+      >
+        <div id="demo-frame-jss" />
+        {inIframe}
+      </Frame>
+    );
+  }
+}
+
+DemoFrame.propTypes = {
+  children: PropTypes.node.isRequired,
+  classes: PropTypes.object.isRequired,
+  theme: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles, { withTheme: true })(DemoFrame);

docs/src/pages/demos/app-bar/BottomAppBar.js

@@ -2,6 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } 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 Typography from '@material-ui/core/Typography';
 import IconButton from '@material-ui/core/IconButton';
@@ -18,25 +19,23 @@ import SearchIcon from '@material-ui/icons/Search';
 import MoreIcon from '@material-ui/icons/MoreVert';
 
 const styles = theme => ({
-  container: {
-    position: 'relative',
-    maxWidth: 500,
-  },
   text: {
-    paddingTop: theme.spacing.unit,
+    paddingTop: theme.spacing.unit * 2,
     paddingLeft: theme.spacing.unit * 2,
     paddingRight: theme.spacing.unit * 2,
   },
-  main: {
-    height: 400,
-    overflowY: 'auto',
-    position: 'relative',
+  paper: {
+    paddingBottom: 50,
   },
   list: {
     marginBottom: theme.spacing.unit * 2,
   },
   subHeader: {
-    backgroundColor: '#fff',
+    backgroundColor: theme.palette.background.paper,
+  },
+  appBar: {
+    top: 'auto',
+    bottom: 0,
   },
   toolbar: {
     alignItems: 'center',
@@ -61,7 +60,7 @@ const messages = [
   {
     id: 2,
     primary: 'Birthday Gift',
-    secondary: `Do you have a suggestion for a good present for John on his work 
+    secondary: `Do you have a suggestion for a good present for John on his work
       anniversary. I am really confused & would love your thoughts on it.`,
     person: '/static/images/uxceo-128.jpg',
   },
@@ -86,8 +85,8 @@ const messages = [
   {
     id: 6,
     primary: 'Discussion',
-    secondary: `Menus that are generated by the bottom app bar (such as a bottom 
-      navigation drawer or overflow menu) open as bottom sheets at a higher elevation 
+    secondary: `Menus that are generated by the bottom app bar (such as a bottom
+      navigation drawer or overflow menu) open as bottom sheets at a higher elevation
       than the bar.`,
     person: '/static/images/remy.jpg',
   },
@@ -103,8 +102,9 @@ const messages = [
 function BottomAppBar(props) {
   const { classes } = props;
   return (
-    <div className={classes.container}>
-      <Paper square className={classes.main}>
+    <React.Fragment>
+      <CssBaseline />
+      <Paper square className={classes.paper}>
         <Typography className={classes.text} variant="h5" gutterBottom>
           Inbox
         </Typography>
@@ -121,7 +121,7 @@ function BottomAppBar(props) {
           ))}
         </List>
       </Paper>
-      <AppBar position="sticky" color="primary">
+      <AppBar position="fixed" color="primary" className={classes.appBar}>
         <Toolbar className={classes.toolbar}>
           <IconButton color="inherit" aria-label="Open drawer">
             <MenuIcon />
@@ -139,7 +139,7 @@ function BottomAppBar(props) {
           </div>
         </Toolbar>
       </AppBar>
-    </div>
+    </React.Fragment>
   );
 }
 

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

@@ -41,4 +41,4 @@ A primary searchbar.
 
 ## Bottom App Bar
 
-{{"demo": "pages/demos/app-bar/BottomAppBar.js"}}
+{{"demo": "pages/demos/app-bar/BottomAppBar.js", "iframe": true}}

docs/src/pages/demos/drawers/ClippedDrawer.js

@@ -3,35 +3,36 @@ import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Drawer from '@material-ui/core/Drawer';
 import AppBar from '@material-ui/core/AppBar';
+import CssBaseline from '@material-ui/core/CssBaseline';
 import Toolbar from '@material-ui/core/Toolbar';
 import List from '@material-ui/core/List';
 import Typography from '@material-ui/core/Typography';
 import Divider from '@material-ui/core/Divider';
-import { mailFolderListItems, otherMailFolderListItems } from './tileData';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import InboxIcon from '@material-ui/icons/MoveToInbox';
+import MailIcon from '@material-ui/icons/Mail';
 
 const drawerWidth = 240;
 
 const styles = theme => ({
   root: {
-    flexGrow: 1,
-    height: 440,
-    zIndex: 1,
-    overflow: 'hidden',
-    position: 'relative',
     display: 'flex',
   },
   appBar: {
     zIndex: theme.zIndex.drawer + 1,
   },
+  drawer: {
+    width: drawerWidth,
+    flexShrink: 0,
+  },
   drawerPaper: {
-    position: 'relative',
     width: drawerWidth,
   },
   content: {
     flexGrow: 1,
-    backgroundColor: theme.palette.background.default,
     padding: theme.spacing.unit * 3,
-    minWidth: 0, // So the Typography noWrap works
   },
   toolbar: theme.mixins.toolbar,
 });
@@ -41,27 +42,65 @@ function ClippedDrawer(props) {
 
   return (
     <div className={classes.root}>
-      <AppBar position="absolute" className={classes.appBar}>
+      <CssBaseline />
+      <AppBar position="fixed" className={classes.appBar}>
         <Toolbar>
           <Typography variant="h6" color="inherit" noWrap>
             Clipped drawer
           </Typography>
         </Toolbar>
       </AppBar>
       <Drawer
+        className={classes.drawer}
         variant="permanent"
         classes={{
           paper: classes.drawerPaper,
         }}
       >
         <div className={classes.toolbar} />
-        <List>{mailFolderListItems}</List>
+        <List>
+          {['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>{otherMailFolderListItems}</List>
+        <List>
+          {['All mail', 'Trash', 'Spam'].map((text, index) => (
+            <ListItem button key={text}>
+              <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
+              <ListItemText primary={text} />
+            </ListItem>
+          ))}
+        </List>
       </Drawer>
       <main className={classes.content}>
         <div className={classes.toolbar} />
-        <Typography noWrap>{'You think water moves fast? You should see ice.'}</Typography>
+        <Typography paragraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum
+          facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit
+          gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id
+          donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
+          adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.
+          Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis
+          imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget
+          arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem
+          donec massa sapien faucibus et molestie ac.
+        </Typography>
+        <Typography paragraph>
+          Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
+          facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
+          tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat
+          consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed
+          vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In
+          hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et
+          tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin
+          nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas
+          accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
+        </Typography>
       </main>
     </div>
   );