[Drawer] Fix clipped scroll overflow (#20396)

mui · Apr 3, 2020 · 861498c · 861498c
1 parent ddf9c10
commit 861498c
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 46 deletions.
diff --git 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
@@ -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

diff --git 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,
   }),
 );
 
@@ -59,27 +60,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