[docs] Improve version display

Author: oliviertassinari

docs/src/modules/components/Demo.js

@@ -56,20 +56,33 @@ const styles = theme => ({
     margin: 'auto',
     display: 'flex',
     justifyContent: 'center',
+    [theme.breakpoints.up('sm')]: {
+      borderRadius: theme.shape.borderRadius,
+    },
+  },
+  /* Isolate the demo with an outline. */
+  demoBgOutlined: {
+    padding: theme.spacing(3),
+    border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
     borderLeftWidth: 0,
     borderRightWidth: 0,
-    border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
-    padding: theme.spacing(3),
     [theme.breakpoints.up('sm')]: {
-      borderRadius: theme.shape.borderRadius,
       borderLeftWidth: 1,
       borderRightWidth: 1,
     },
   },
-  demoBg: {
-    border: 'none',
+  /* Prepare the background to display an inner elevation. */
+  demoBgTrue: {
+    padding: theme.spacing(3),
     backgroundColor: theme.palette.background.level2,
   },
+  /* Make no difference between the demo and the markdown. */
+  demoBgInline: {
+    // Maintain alignment with the markdown text
+    [theme.breakpoints.down('xs')]: {
+      padding: theme.spacing(3),
+    },
+  },
   demoHiddenHeader: {
     paddingTop: theme.spacing(2),
     [theme.breakpoints.up('sm')]: {
@@ -250,6 +263,10 @@ function Demo(props) {
     [demoOptions.height, demoOptions.maxWidth],
   );
 
+  if (demoOptions.bg == null) {
+    demoOptions.bg = 'outlined';
+  }
+
   if (demoOptions.iframe) {
     demoOptions.bg = true;
   }
@@ -298,7 +315,9 @@ function Demo(props) {
       <div
         className={clsx(classes.demo, {
           [classes.demoHiddenHeader]: demoOptions.hideHeader,
-          [classes.demoBg]: demoOptions.bg,
+          [classes.demoBgOutlined]: demoOptions.bg === 'outlined',
+          [classes.demoBgTrue]: demoOptions.bg === true,
+          [classes.demoBgInline]: demoOptions.bg === 'inline',
         })}
         tabIndex={-1}
         onMouseEnter={handleDemoHover}

docs/src/pages/discover-more/showcase/Showcase.js

@@ -17,13 +17,6 @@ import appList from './appList';
 const styles = theme => ({
   root: {
     flexGrow: 1,
-    backgroundColor: theme.palette.background.default,
-    // Hide the demo container padding
-    margin: -theme.spacing(3),
-    // Maintain alignment with the markdown text
-    [theme.breakpoints.down('xs')]: {
-      padding: 30,
-    },
   },
   formControl: {
     marginBottom: theme.spacing(4),

docs/src/pages/discover-more/showcase/showcase.md

@@ -8,4 +8,4 @@ Want to add your app? Found an app that no longer works or no longer uses Materi
 - High traffic
 - Open source
 
-{{"demo": "pages/discover-more/showcase/Showcase.js", "hideHeader": true, "bg": true}}
+{{"demo": "pages/discover-more/showcase/Showcase.js", "hideHeader": true, "bg": "inline"}}

docs/src/pages/versions/LatestVersions.js

@@ -5,7 +5,6 @@ import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
 import TableRow from '@material-ui/core/TableRow';
-import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 import Link from 'docs/src/modules/components/Link';
 
@@ -19,7 +18,7 @@ function LatestVersions(props) {
   const { classes } = props;
 
   return (
-    <Paper className={classes.root}>
+    <div className={classes.root}>
       <Table>
         <TableBody>
           <TableRow>
@@ -72,7 +71,7 @@ function LatestVersions(props) {
           </TableRow>
         </TableBody>
       </Table>
-    </Paper>
+    </div>
   );
 }
 

docs/src/pages/versions/StableVersions.js

@@ -8,7 +8,6 @@ import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
 import TableRow from '@material-ui/core/TableRow';
-import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 import Link from 'docs/src/modules/components/Link';
 
@@ -17,7 +16,7 @@ const FILTERED_BRANCHES = ['latest', 'staging', 'l10n', 'next'];
 
 const styles = {
   root: {
-    height: 410,
+    minHeight: 33 * 11,
     overflow: 'auto',
     width: '100%',
   },
@@ -72,8 +71,8 @@ function StableVersions(props) {
   }, []);
 
   return (
-    <Paper className={classes.root}>
-      <Table size="small">
+    <div className={classes.root}>
+      <Table>
         <TableBody>
           {docs.map(doc => (
             <TableRow key={doc.version}>
@@ -104,7 +103,7 @@ function StableVersions(props) {
           ))}
         </TableBody>
       </Table>
-    </Paper>
+    </div>
   );
 }
 

docs/src/pages/versions/versions.md

@@ -6,14 +6,14 @@
 
 The most recent version is recommended in production.
 
-{{"demo": "pages/versions/StableVersions.js", "hideHeader": true}}
+{{"demo": "pages/versions/StableVersions.js", "hideHeader": true, "bg": "inline"}}
 
 ## Latest versions
 
 Here you can find the latest unreleased documentation and code.
 You can use it to see what changes are coming and provide better feedback to Material-UI contributors.
 
-{{"demo": "pages/versions/LatestVersions.js", "hideHeader": true}}
+{{"demo": "pages/versions/LatestVersions.js", "hideHeader": true, "bg": "inline"}}
 
 ## Versioning strategy
 
@@ -44,7 +44,7 @@ In general, you can expect the following release cycle:
 ## Release schedule
 
 | Date | Version | Status |
-|:-----|:--------|--------|
+|:-----|:--------|:-------|
 | May 2018 | v1.0.0 | Released |
 | Septembre 2018 | v3.0.0 | Released |
 | May 2019 | v4.0.0 | Released |