[docs] Increase the contrast of the demos

mui · Nov 16, 2019 · 6a6ef50 · 6a6ef50
1 parent f0bfa93
commit 6a6ef50
Show file tree

Hide file tree

Showing 97 changed files with 848 additions and 1,015 deletions.
diff --git a/docs/src/modules/components/Demo.js b/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,14 +54,18 @@ const styles = theme => ({
     outline: 0,
     margin: 'auto',
     borderRadius: theme.shape.borderRadius,
-    backgroundColor: theme.palette.background.level2,
     display: 'flex',
     justifyContent: 'center',
+    border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
     padding: 20,
     [theme.breakpoints.up('sm')]: {
       padding: theme.spacing(3),
     },
   },
+  demoBg: {
+    border: 'none',
+    backgroundColor: theme.palette.background.level2,
+  },
   demoHiddenHeader: {
     paddingTop: theme.spacing(2),
     [theme.breakpoints.up('sm')]: {
@@ -133,7 +137,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);
@@ -241,6 +244,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}`);
@@ -266,9 +273,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) {
@@ -282,6 +292,7 @@ function Demo(props) {
       <div
         className={clsx(classes.demo, {
           [classes.demoHiddenHeader]: demoOptions.hideHeader,
+          [classes.demoBg]: demoOptions.bg,
         })}
         tabIndex={-1}
         onMouseEnter={handleDemoHover}

diff --git a/docs/src/modules/utils/getJsxPreview.js b/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(

diff --git a/docs/src/modules/utils/getJsxPreview.test.js b/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 />;
-}
-
 `);
   });
 });
diff --git a/docs/src/pages/components/avatars/IconAvatars.js b/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>
   );
 }
diff --git a/docs/src/pages/components/avatars/IconAvatars.tsx b/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>
   );
 }
diff --git a/docs/src/pages/components/avatars/ImageAvatars.js b/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>
   );
 }
diff --git a/docs/src/pages/components/avatars/ImageAvatars.tsx b/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>
   );
 }
diff --git a/docs/src/pages/components/avatars/LetterAvatars.js b/docs/src/pages/components/avatars/LetterAvatars.js
@@ -2,32 +2,32 @@ import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Avatar from '@material-ui/core/Avatar';
 import { deepOrange, deepPurple } from '@material-ui/core/colors';
-import Grid from '@material-ui/core/Grid';
 
-const useStyles = makeStyles({
-  avatar: {
-    margin: 10,
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    '& > *': {
+      margin: theme.spacing(1),
+    },
   },
-  orangeAvatar: {
-    margin: 10,
+  orange: {
     color: '#fff',
     backgroundColor: deepOrange[500],
   },
-  purpleAvatar: {
-    margin: 10,
+  purple: {
     color: '#fff',
     backgroundColor: deepPurple[500],
   },
-});
+}));
 
 export default function LetterAvatars() {
   const classes = useStyles();
 
   return (
-    <Grid container justify="center" alignItems="center">
-      <Avatar className={classes.avatar}>H</Avatar>
-      <Avatar className={classes.orangeAvatar}>N</Avatar>
-      <Avatar className={classes.purpleAvatar}>OP</Avatar>
-    </Grid>
+    <div className={classes.root}>
+      <Avatar>H</Avatar>
+      <Avatar className={classes.orange}>N</Avatar>
+      <Avatar className={classes.purple}>OP</Avatar>
+    </div>
   );
 }