From 34c89fdefd9cabc493b2a738da785650896cc2c1 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 17 Nov 2019 01:09:48 +0100
Subject: [PATCH] Matt review

---
 docs/src/modules/components/Demo.js           | 43 ++++++++++++-------
 docs/src/modules/components/DemoSandboxed.js  |  4 +-
 docs/src/pages/components/app-bar/app-bar.md  | 12 +++---
 .../click-away-listener/ClickAway.js          |  6 +--
 .../click-away-listener/ClickAway.tsx         |  6 +--
 .../components/text-fields/text-fields.md     |  2 +-
 .../pages/components/tree-view/tree-view.md   | 12 +++---
 .../pages/styles/basics/NestedStylesHook.js   |  4 +-
 .../pages/styles/basics/NestedStylesHook.tsx  |  4 +-
 docs/src/pages/styles/basics/basics.md        |  3 +-
 10 files changed, 52 insertions(+), 44 deletions(-)

diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index b6d90041186ded..11e0d5c5bb601c 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -50,21 +50,32 @@ const styles = theme => ({
     },
   },
   demo: {
-    position: 'relative',
     outline: 0,
     margin: 'auto',
-    borderRadius: theme.shape.borderRadius,
-    display: 'flex',
-    justifyContent: 'center',
-    border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
-    padding: 20,
     [theme.breakpoints.up('sm')]: {
-      padding: theme.spacing(3),
+      borderRadius: theme.shape.borderRadius,
+    },
+    backgroundColor: theme.palette.background.level2,
+    padding: theme.spacing(2),
+    '& $demoInner': {
+      border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
+      borderRadius: theme.shape.borderRadius,
+      backgroundColor: theme.palette.background.paper,
     },
   },
   demoBg: {
-    border: 'none',
-    backgroundColor: theme.palette.background.level2,
+    '& $demoInner': {
+      border: 'none',
+      borderRadius: 0,
+      backgroundColor: 'transparent',
+      padding: 0,
+    },
+  },
+  demoInner: {
+    position: 'relative',
+    display: 'flex',
+    justifyContent: 'center',
+    padding: theme.spacing(2),
   },
   demoHiddenHeader: {
     paddingTop: theme.spacing(2),
@@ -298,12 +309,14 @@ function Demo(props) {
         onMouseEnter={handleDemoHover}
         onMouseLeave={handleDemoHover}
       >
-        <DemoSandboxed
-          style={demoSandboxedStyle}
-          component={DemoComponent}
-          iframe={demoOptions.iframe}
-          name={demoName}
-        />
+        <div className={classes.demoInner}>
+          <DemoSandboxed
+            style={demoSandboxedStyle}
+            component={DemoComponent}
+            iframe={demoOptions.iframe}
+            name={demoName}
+          />
+        </div>
       </div>
       <div className={classes.anchorLink} id={`${demoName}.js`} />
       <div className={classes.anchorLink} id={`${demoName}.tsx`} />
diff --git a/docs/src/modules/components/DemoSandboxed.js b/docs/src/modules/components/DemoSandboxed.js
index d50533627bb5ed..15862b43a599d1 100644
--- a/docs/src/modules/components/DemoSandboxed.js
+++ b/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}
diff --git a/docs/src/pages/components/app-bar/app-bar.md b/docs/src/pages/components/app-bar/app-bar.md
index 1764893d7601aa..f1974133828bb7 100644
--- a/docs/src/pages/components/app-bar/app-bar.md
+++ b/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
 
diff --git a/docs/src/pages/components/click-away-listener/ClickAway.js b/docs/src/pages/components/click-away-listener/ClickAway.js
index 77363e8f881db3..708db48ea4e88a 100644
--- a/docs/src/pages/components/click-away-listener/ClickAway.js
+++ b/docs/src/pages/components/click-away-listener/ClickAway.js
@@ -6,7 +6,7 @@ const useStyles = makeStyles(theme => ({
   wrapper: {
     position: 'relative',
   },
-  paper: {
+  div: {
     position: 'absolute',
     top: 28,
     right: 0,
@@ -36,9 +36,7 @@ export default function ClickAway() {
           Open menu dropdown
         </button>
         {open ? (
-          <div className={classes.paper}>
-            Click me, I will stay visible until you click outside.
-          </div>
+          <div className={classes.div}>Click me, I will stay visible until you click outside.</div>
         ) : null}
       </div>
     </ClickAwayListener>
diff --git a/docs/src/pages/components/click-away-listener/ClickAway.tsx b/docs/src/pages/components/click-away-listener/ClickAway.tsx
index efc34f87dde74f..04670ed4d48fc3 100644
--- a/docs/src/pages/components/click-away-listener/ClickAway.tsx
+++ b/docs/src/pages/components/click-away-listener/ClickAway.tsx
@@ -7,7 +7,7 @@ const useStyles = makeStyles((theme: Theme) =>
     wrapper: {
       position: 'relative',
     },
-    paper: {
+    div: {
       position: 'absolute',
       top: 28,
       right: 0,
@@ -38,9 +38,7 @@ export default function ClickAway() {
           Open menu dropdown
         </button>
         {open ? (
-          <div className={classes.paper}>
-            Click me, I will stay visible until you click outside.
-          </div>
+          <div className={classes.div}>Click me, I will stay visible until you click outside.</div>
         ) : null}
       </div>
     </ClickAwayListener>
diff --git a/docs/src/pages/components/text-fields/text-fields.md b/docs/src/pages/components/text-fields/text-fields.md
index 7a04b3c1b2676d..aae440dfbb2c6c 100644
--- a/docs/src/pages/components/text-fields/text-fields.md
+++ b/docs/src/pages/components/text-fields/text-fields.md
@@ -17,7 +17,7 @@ It supports standard, outlined and filled styling.
 
 {{"demo": "pages/components/text-fields/BasicTextFields.js"}}
 
-> **Note:** The standard variant of the `TextField` is no longer documented in the [Material Design guidelines](https://material.io/), but Material-UI will continue to support it.
+Note: The standard variant of the `TextField` is no longer documented in the [Material Design guidelines](https://material.io/), but Material-UI will continue to support it.
 
 ## Form props
 
diff --git a/docs/src/pages/components/tree-view/tree-view.md b/docs/src/pages/components/tree-view/tree-view.md
index 2b92c70203ad60..ff8a3bb367fddc 100644
--- a/docs/src/pages/components/tree-view/tree-view.md
+++ b/docs/src/pages/components/tree-view/tree-view.md
@@ -11,6 +11,12 @@ Tree views can be used to represent a file system navigator displaying folders a
 
 {{"demo": "pages/components/tree-view/FileSystemNavigator.js"}}
 
+## Controlled
+
+The tree view also offers a controlled API.
+
+{{"demo": "pages/components/tree-view/ControlledTreeView.js"}}
+
 ## Customized tree view
 
 ### Custom icons, border and animation
@@ -21,12 +27,6 @@ Tree views can be used to represent a file system navigator displaying folders a
 
 {{"demo": "pages/components/tree-view/GmailTreeView.js"}}
 
-## Controlled
-
-The tree view also offers a controlled API.
-
-{{"demo": "pages/components/tree-view/ControlledTreeView.js"}}
-
 ## Accessibility
 
 (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#TreeView)
diff --git a/docs/src/pages/styles/basics/NestedStylesHook.js b/docs/src/pages/styles/basics/NestedStylesHook.js
index b0b4e36be208b7..618be32c7a009b 100644
--- a/docs/src/pages/styles/basics/NestedStylesHook.js
+++ b/docs/src/pages/styles/basics/NestedStylesHook.js
@@ -3,9 +3,9 @@ import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
   root: {
-    padding: 16,
     color: 'red',
     '& p': {
+      margin: 0,
       color: 'green',
       '& span': {
         color: 'blue',
@@ -19,7 +19,7 @@ export default function NestedStylesHook() {
 
   return (
     <div className={classes.root}>
-      This is red since it is inside the paper.
+      This is red since it is inside the root.
       <p>
         This is green since it is inside the paragraph{' '}
         <span>and this is blue since it is inside the span</span>
diff --git a/docs/src/pages/styles/basics/NestedStylesHook.tsx b/docs/src/pages/styles/basics/NestedStylesHook.tsx
index b0b4e36be208b7..618be32c7a009b 100644
--- a/docs/src/pages/styles/basics/NestedStylesHook.tsx
+++ b/docs/src/pages/styles/basics/NestedStylesHook.tsx
@@ -3,9 +3,9 @@ import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
   root: {
-    padding: 16,
     color: 'red',
     '& p': {
+      margin: 0,
       color: 'green',
       '& span': {
         color: 'blue',
@@ -19,7 +19,7 @@ export default function NestedStylesHook() {
 
   return (
     <div className={classes.root}>
-      This is red since it is inside the paper.
+      This is red since it is inside the root.
       <p>
         This is green since it is inside the paragraph{' '}
         <span>and this is blue since it is inside the span</span>
diff --git a/docs/src/pages/styles/basics/basics.md b/docs/src/pages/styles/basics/basics.md
index 28a0b93f4c5e45..4d238203303908 100644
--- a/docs/src/pages/styles/basics/basics.md
+++ b/docs/src/pages/styles/basics/basics.md
@@ -132,7 +132,6 @@ The following example uses the Hook API, but it works the same way with the othe
 ```js
 const useStyles = makeStyles({
   root: {
-    padding: 16,
     color: 'red',
     '& p': {
       color: 'green',
@@ -144,7 +143,7 @@ const useStyles = makeStyles({
 });
 ```
 
-{{"demo": "pages/styles/basics/NestedStylesHook.js"}}
+{{"demo": "pages/styles/basics/NestedStylesHook.js", "defaultCodeOpen": false}}
 
 ## Adapting based on props