From 9a608abca933b79f57450ce87366311c3cfdc9a9 Mon Sep 17 00:00:00 2001
From: maksimgm <maksimmamrikov@gmail.com>
Date: Thu, 2 Apr 2020 16:12:21 -0700
Subject: [PATCH 1/5] fix bug

---
 docs/src/pages/components/drawers/ClippedDrawer.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/docs/src/pages/components/drawers/ClippedDrawer.tsx b/docs/src/pages/components/drawers/ClippedDrawer.tsx
index 0b7d7142863a7b..ee7fd027229542 100644
--- a/docs/src/pages/components/drawers/ClippedDrawer.tsx
+++ b/docs/src/pages/components/drawers/ClippedDrawer.tsx
@@ -30,12 +30,13 @@ const useStyles = makeStyles((theme: Theme) =>
     drawerPaper: {
       width: drawerWidth,
     },
+    drawerContainer: {
+      overflow: 'auto',
+    },
     content: {
       flexGrow: 1,
       padding: theme.spacing(3),
     },
-    // necessary for content to be below app bar
-    toolbar: theme.mixins.toolbar,
   }),
 );
 
@@ -60,6 +61,8 @@ export default function ClippedDrawer() {
         }}
       >
         <div className={classes.toolbar} />
+      <Toolbar />
+      <div className={classes.drawerContainer}>
         <List>
           {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
             <ListItem button key={text}>
@@ -77,9 +80,10 @@ export default function ClippedDrawer() {
             </ListItem>
           ))}
         </List>
+      </div>
       </Drawer>
       <main className={classes.content}>
-        <div className={classes.toolbar} />
+        <Toolbar />
         <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

From 8394510150e85a360946c8704d590efb904cdb4f Mon Sep 17 00:00:00 2001
From: maksimgm <maksimmamrikov@gmail.com>
Date: Thu, 2 Apr 2020 16:19:44 -0700
Subject: [PATCH 2/5] attempt fix build using: yarn prettier

---
 .../components/drawers/ClippedDrawer.tsx      | 40 +++++++++----------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/docs/src/pages/components/drawers/ClippedDrawer.tsx b/docs/src/pages/components/drawers/ClippedDrawer.tsx
index ee7fd027229542..9d86cec4be52e0 100644
--- a/docs/src/pages/components/drawers/ClippedDrawer.tsx
+++ b/docs/src/pages/components/drawers/ClippedDrawer.tsx
@@ -61,26 +61,26 @@ export default function ClippedDrawer() {
         }}
       >
         <div className={classes.toolbar} />
-      <Toolbar />
-      <div className={classes.drawerContainer}>
-        <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>
-          {['All mail', 'Trash', 'Spam'].map((text, index) => (
-            <ListItem button key={text}>
-              <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
-              <ListItemText primary={text} />
-            </ListItem>
-          ))}
-        </List>
-      </div>
+        <Toolbar />
+        <div className={classes.drawerContainer}>
+          <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>
+            {['All mail', 'Trash', 'Spam'].map((text, index) => (
+              <ListItem button key={text}>
+                <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
+                <ListItemText primary={text} />
+              </ListItem>
+            ))}
+          </List>
+        </div>
       </Drawer>
       <main className={classes.content}>
         <Toolbar />

From 6442cfae21df8b50d1285374449c936fe06f1882 Mon Sep 17 00:00:00 2001
From: maksimgm <maksimmamrikov@gmail.com>
Date: Thu, 2 Apr 2020 16:39:27 -0700
Subject: [PATCH 3/5] update JS ClippedDrawer file to reflect tsx

---
 .../pages/components/drawers/ClippedDrawer.js | 39 ++++++++++---------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/docs/src/pages/components/drawers/ClippedDrawer.js b/docs/src/pages/components/drawers/ClippedDrawer.js
index bafdaf0795171f..980addfb71f1ca 100644
--- a/docs/src/pages/components/drawers/ClippedDrawer.js
+++ b/docs/src/pages/components/drawers/ClippedDrawer.js
@@ -58,26 +58,29 @@ export default function ClippedDrawer() {
         }}
       >
         <div className={classes.toolbar} />
-        <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>
-          {['All mail', 'Trash', 'Spam'].map((text, index) => (
-            <ListItem button key={text}>
-              <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
-              <ListItemText primary={text} />
-            </ListItem>
-          ))}
-        </List>
+        <Toolbar />
+        <div className={classes.drawerContainer}>
+          <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>
+            {['All mail', 'Trash', 'Spam'].map((text, index) => (
+              <ListItem button key={text}>
+                <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
+                <ListItemText primary={text} />
+              </ListItem>
+            ))}
+          </List>
+        </div>
       </Drawer>
       <main className={classes.content}>
-        <div className={classes.toolbar} />
+        <Toolbar />
         <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

From 4a9e2287fd85068ce774bb1ad1f74fadfa506cf4 Mon Sep 17 00:00:00 2001
From: maksimgm <maksimmamrikov@gmail.com>
Date: Thu, 2 Apr 2020 16:52:27 -0700
Subject: [PATCH 4/5] fix builds

---
 .../pages/components/drawers/ClippedDrawer.js | 39 +++++++++----------
 .../components/drawers/ClippedDrawer.tsx      |  1 -
 2 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/docs/src/pages/components/drawers/ClippedDrawer.js b/docs/src/pages/components/drawers/ClippedDrawer.js
index 980addfb71f1ca..bafdaf0795171f 100644
--- a/docs/src/pages/components/drawers/ClippedDrawer.js
+++ b/docs/src/pages/components/drawers/ClippedDrawer.js
@@ -58,29 +58,26 @@ export default function ClippedDrawer() {
         }}
       >
         <div className={classes.toolbar} />
-        <Toolbar />
-        <div className={classes.drawerContainer}>
-          <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>
-            {['All mail', 'Trash', 'Spam'].map((text, index) => (
-              <ListItem button key={text}>
-                <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
-                <ListItemText primary={text} />
-              </ListItem>
-            ))}
-          </List>
-        </div>
+        <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>
+          {['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}>
-        <Toolbar />
+        <div className={classes.toolbar} />
         <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
diff --git a/docs/src/pages/components/drawers/ClippedDrawer.tsx b/docs/src/pages/components/drawers/ClippedDrawer.tsx
index 9d86cec4be52e0..62414adbdd9eb1 100644
--- a/docs/src/pages/components/drawers/ClippedDrawer.tsx
+++ b/docs/src/pages/components/drawers/ClippedDrawer.tsx
@@ -60,7 +60,6 @@ export default function ClippedDrawer() {
           paper: classes.drawerPaper,
         }}
       >
-        <div className={classes.toolbar} />
         <Toolbar />
         <div className={classes.drawerContainer}>
           <List>

From f25f4fa2c3c084f34eaf072b6766b7ad6ff489ee Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Fri, 3 Apr 2020 15:45:52 +0200
Subject: [PATCH 5/5] yarn docs:typescript:formatted

---
 .circleci/config.yml                          |  8 ++--
 .../pages/components/drawers/ClippedDrawer.js | 45 ++++++++++---------
 2 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 4e921f7fe7d40b..8a7522064b9485 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -107,7 +107,7 @@ jobs:
       - checkout
       - install_js
       - run:
-          name: Check if yarn prettier was run
+          name: '`yarn prettier` changes committed?'
           command: yarn prettier check-changed
       - run:
           name: Generate PropTypes
@@ -116,7 +116,7 @@ jobs:
           name: '`yarn proptypes` changes committed?'
           command: git diff --exit-code
       - run:
-          name: Can we generate the documentation?
+          name: Generate the documentation
           command: yarn docs:api
       - run:
           name: '`yarn docs:api` changes committed?'
@@ -134,9 +134,9 @@ jobs:
       - install_js
       - run:
           name: Transpile TypeScript demos
-          command: yarn workspace docs typescript:transpile --disable-cache
+          command: yarn docs:typescript:formatted --disable-cache
       - run:
-          name: Are the compiled TypeScript demos equivalent to the JavaScript demos?
+          name: '`yarn docs:typescript:formatted` changes committed?'
           command: git add -A && git diff --exit-code --staged
       - run:
           name: Tests TypeScript definitions
diff --git a/docs/src/pages/components/drawers/ClippedDrawer.js b/docs/src/pages/components/drawers/ClippedDrawer.js
index bafdaf0795171f..b29b3cf7beaa94 100644
--- a/docs/src/pages/components/drawers/ClippedDrawer.js
+++ b/docs/src/pages/components/drawers/ClippedDrawer.js
@@ -29,12 +29,13 @@ const useStyles = makeStyles((theme) => ({
   drawerPaper: {
     width: drawerWidth,
   },
+  drawerContainer: {
+    overflow: 'auto',
+  },
   content: {
     flexGrow: 1,
     padding: theme.spacing(3),
   },
-  // necessary for content to be below app bar
-  toolbar: theme.mixins.toolbar,
 }));
 
 export default function ClippedDrawer() {
@@ -57,27 +58,29 @@ export default function ClippedDrawer() {
           paper: classes.drawerPaper,
         }}
       >
-        <div className={classes.toolbar} />
-        <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>
-          {['All mail', 'Trash', 'Spam'].map((text, index) => (
-            <ListItem button key={text}>
-              <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
-              <ListItemText primary={text} />
-            </ListItem>
-          ))}
-        </List>
+        <Toolbar />
+        <div className={classes.drawerContainer}>
+          <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>
+            {['All mail', 'Trash', 'Spam'].map((text, index) => (
+              <ListItem button key={text}>
+                <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
+                <ListItemText primary={text} />
+              </ListItem>
+            ))}
+          </List>
+        </div>
       </Drawer>
       <main className={classes.content}>
-        <div className={classes.toolbar} />
+        <Toolbar />
         <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