[docs] Increase the contrast of the demos (#18396)

Author: oliviertassinari

docs/src/modules/components/Demo.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import copy from 'clipboard-copy';
 import { useSelector, useDispatch } from 'react-redux';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles, fade } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import Collapse from '@material-ui/core/Collapse';
@@ -54,15 +54,22 @@ const styles = theme => ({
     position: 'relative',
     outline: 0,
     margin: 'auto',
-    borderRadius: theme.shape.borderRadius,
-    backgroundColor: theme.palette.background.level2,
     display: 'flex',
     justifyContent: 'center',
-    padding: 20,
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
+    border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
+    padding: theme.spacing(3),
     [theme.breakpoints.up('sm')]: {
-      padding: theme.spacing(3),
+      borderRadius: theme.shape.borderRadius,
+      borderLeftWidth: 1,
+      borderRightWidth: 1,
     },
   },
+  demoBg: {
+    border: 'none',
+    backgroundColor: theme.palette.background.level2,
+  },
   demoHiddenHeader: {
     paddingTop: theme.spacing(2),
     [theme.breakpoints.up('sm')]: {
@@ -136,7 +143,6 @@ function Demo(props) {
   const dispatch = useDispatch();
   const t = useSelector(state => state.options.t);
   const codeVariant = useSelector(state => state.options.codeVariant);
-
   const demoData = getDemoData(codeVariant, demo, githubLocation);
 
   const [sourceHintSeen, setSourceHintSeen] = React.useState(false);
@@ -244,6 +250,10 @@ function Demo(props) {
     [demoOptions.height, demoOptions.maxWidth],
   );
 
+  if (demoOptions.iframe) {
+    demoOptions.bg = true;
+  }
+
   const createHandleCodeSourceLink = anchor => async () => {
     try {
       await copy(`${window.location.href.split('#')[0]}#${anchor}`);
@@ -269,9 +279,12 @@ function Demo(props) {
 
   const match = useMediaQuery(theme => theme.breakpoints.up('sm'));
 
-  const jsx = getJsxPreview(demoData.raw || '', demoOptions.defaultCodeOpen);
+  const jsx = getJsxPreview(demoData.raw || '');
   const showPreview =
-    !demoOptions.hideHeader && jsx !== demoData.raw && jsx.split(/\n/).length <= 20;
+    !demoOptions.hideHeader &&
+    demoOptions.defaultCodeOpen !== false &&
+    jsx !== demoData.raw &&
+    jsx.split(/\n/).length <= 15;
 
   let showCodeLabel;
   if (codeOpen) {
@@ -285,6 +298,7 @@ function Demo(props) {
       <div
         className={clsx(classes.demo, {
           [classes.demoHiddenHeader]: demoOptions.hideHeader,
+          [classes.demoBg]: demoOptions.bg,
         })}
         tabIndex={-1}
         onMouseEnter={handleDemoHover}

docs/src/modules/components/DemoSandboxed.js

@@ -8,7 +8,7 @@ import Frame from 'react-frame-component';
 import DemoErrorBoundary from 'docs/src/modules/components/DemoErrorBoundary';
 
 const styles = theme => ({
-  root: {
+  frame: {
     backgroundColor: theme.palette.background.default,
     flexGrow: 1,
     height: 400,
@@ -54,7 +54,7 @@ function DemoFrame(props) {
     <NoSsr>
       <Frame
         ref={handleRef}
-        className={classes.root}
+        className={classes.frame}
         contentDidMount={onContentDidMount}
         contentDidUpdate={onContentDidUpdate}
         {...other}

docs/src/modules/utils/getJsxPreview.js

@@ -1,4 +1,4 @@
-export default function getJsxPreview(code, defaultCodeOpen) {
+export default function getJsxPreview(code) {
   /* The regex matches the content of the return statement in the default export,
    * stripping any wrapper divs:
    *
@@ -14,7 +14,7 @@ export default function getJsxPreview(code, defaultCodeOpen) {
   );
   // Just the match, otherwise the full source if either no match or preview disabled,
   // so as not to break the Collapse transition.
-  jsx = jsx && defaultCodeOpen !== false ? jsx[1] : code;
+  jsx = jsx ? jsx[1] : code;
 
   // Remove leading spaces from each line
   return jsx.split(/\n/).reduce(

docs/src/modules/utils/getJsxPreview.test.js

@@ -72,23 +72,6 @@ export function UseWidth() {
   return ( <MyComponent />;
 }
 
-`);
-  });
-  it('should return all if defaultCodeOpen is false', () => {
-    expect(
-      getJsxPreview(
-        `
-export default function UseWidth() {
-  return <MyComponent />;
-}
-`,
-        false,
-      ),
-    ).to.equal(`
-export default function UseWidth() {
-  return <MyComponent />;
-}
-
 `);
   });
 });

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

@@ -13,33 +13,33 @@ It can transform into a contextual action bar or be used as a navbar.
 
 ## Simple App Bar
 
-{{"demo": "pages/components/app-bar/ButtonAppBar.js"}}
+{{"demo": "pages/components/app-bar/ButtonAppBar.js", "bg": true}}
 
 ## App Bar with a primary search field
 
 A primary searchbar.
 
-{{"demo": "pages/components/app-bar/PrimarySearchAppBar.js"}}
+{{"demo": "pages/components/app-bar/PrimarySearchAppBar.js", "bg": true}}
 
 ## App Bar with menu
 
-{{"demo": "pages/components/app-bar/MenuAppBar.js"}}
+{{"demo": "pages/components/app-bar/MenuAppBar.js", "bg": true}}
 
 ## App Bar with search field
 
 A side searchbar.
 
-{{"demo": "pages/components/app-bar/SearchAppBar.js"}}
+{{"demo": "pages/components/app-bar/SearchAppBar.js", "bg": true}}
 
 ## Dense (desktop only)
 
-{{"demo": "pages/components/app-bar/DenseAppBar.js"}}
+{{"demo": "pages/components/app-bar/DenseAppBar.js", "bg": true}}
 
 ## Prominent
 
 A prominent app bar.
 
-{{"demo": "pages/components/app-bar/ProminentAppBar.js"}}
+{{"demo": "pages/components/app-bar/ProminentAppBar.js", "bg": true}}
 
 ## Bottom App Bar
 

docs/src/pages/components/avatars/IconAvatars.js

@@ -5,38 +5,38 @@ import Avatar from '@material-ui/core/Avatar';
 import FolderIcon from '@material-ui/icons/Folder';
 import PageviewIcon from '@material-ui/icons/Pageview';
 import AssignmentIcon from '@material-ui/icons/Assignment';
-import Grid from '@material-ui/core/Grid';
 
-const useStyles = makeStyles({
-  avatar: {
-    margin: 10,
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    '& > *': {
+      margin: theme.spacing(1),
+    },
   },
-  pinkAvatar: {
-    margin: 10,
+  pink: {
     color: '#fff',
     backgroundColor: pink[500],
   },
-  greenAvatar: {
-    margin: 10,
+  green: {
     color: '#fff',
     backgroundColor: green[500],
   },
-});
+}));
 
 export default function IconAvatars() {
   const classes = useStyles();
 
   return (
-    <Grid container justify="center" alignItems="center">
-      <Avatar className={classes.avatar}>
+    <div className={classes.root}>
+      <Avatar>
         <FolderIcon />
       </Avatar>
-      <Avatar className={classes.pinkAvatar}>
+      <Avatar className={classes.pink}>
         <PageviewIcon />
       </Avatar>
-      <Avatar className={classes.greenAvatar}>
+      <Avatar className={classes.green}>
         <AssignmentIcon />
       </Avatar>
-    </Grid>
+    </div>
   );
 }

docs/src/pages/components/avatars/IconAvatars.tsx

@@ -1,42 +1,44 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
 import { green, pink } from '@material-ui/core/colors';
 import Avatar from '@material-ui/core/Avatar';
 import FolderIcon from '@material-ui/icons/Folder';
 import PageviewIcon from '@material-ui/icons/Pageview';
 import AssignmentIcon from '@material-ui/icons/Assignment';
-import Grid from '@material-ui/core/Grid';
 
-const useStyles = makeStyles({
-  avatar: {
-    margin: 10,
-  },
-  pinkAvatar: {
-    margin: 10,
-    color: '#fff',
-    backgroundColor: pink[500],
-  },
-  greenAvatar: {
-    margin: 10,
-    color: '#fff',
-    backgroundColor: green[500],
-  },
-});
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      display: 'flex',
+      '& > *': {
+        margin: theme.spacing(1),
+      },
+    },
+    pink: {
+      color: '#fff',
+      backgroundColor: pink[500],
+    },
+    green: {
+      color: '#fff',
+      backgroundColor: green[500],
+    },
+  }),
+);
 
 export default function IconAvatars() {
   const classes = useStyles();
 
   return (
-    <Grid container justify="center" alignItems="center">
-      <Avatar className={classes.avatar}>
+    <div className={classes.root}>
+      <Avatar>
         <FolderIcon />
       </Avatar>
-      <Avatar className={classes.pinkAvatar}>
+      <Avatar className={classes.pink}>
         <PageviewIcon />
       </Avatar>
-      <Avatar className={classes.greenAvatar}>
+      <Avatar className={classes.green}>
         <AssignmentIcon />
       </Avatar>
-    </Grid>
+    </div>
   );
 }

docs/src/pages/components/avatars/ImageAvatars.js

@@ -1,26 +1,27 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Avatar from '@material-ui/core/Avatar';
-import Grid from '@material-ui/core/Grid';
 
-const useStyles = makeStyles({
-  avatar: {
-    margin: 10,
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    '& > *': {
+      margin: theme.spacing(1),
+    },
   },
   bigAvatar: {
-    margin: 10,
     width: 60,
     height: 60,
   },
-});
+}));
 
 export default function ImageAvatars() {
   const classes = useStyles();
 
   return (
-    <Grid container justify="center" alignItems="center">
-      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.avatar} />
+    <div className={classes.root}>
+      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
       <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.bigAvatar} />
-    </Grid>
+    </div>
   );
 }

docs/src/pages/components/avatars/ImageAvatars.tsx

@@ -1,26 +1,29 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
 import Avatar from '@material-ui/core/Avatar';
-import Grid from '@material-ui/core/Grid';
 
-const useStyles = makeStyles({
-  avatar: {
-    margin: 10,
-  },
-  bigAvatar: {
-    margin: 10,
-    width: 60,
-    height: 60,
-  },
-});
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      display: 'flex',
+      '& > *': {
+        margin: theme.spacing(1),
+      },
+    },
+    bigAvatar: {
+      width: 60,
+      height: 60,
+    },
+  }),
+);
 
 export default function ImageAvatars() {
   const classes = useStyles();
 
   return (
-    <Grid container justify="center" alignItems="center">
-      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.avatar} />
+    <div className={classes.root}>
+      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
       <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.bigAvatar} />
-    </Grid>
+    </div>
   );
 }