From 6bf3bc992cc49bf950d9cdc7544a6aff612ddd35 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Thu, 17 Oct 2019 00:17:07 +0200
Subject: [PATCH] reivew

---
 docs/src/pages/components/app-bar/app-bar.md | 39 +++++++++++---------
 packages/material-ui/src/AppBar/AppBar.js    |  1 +
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/docs/src/pages/components/app-bar/app-bar.md b/docs/src/pages/components/app-bar/app-bar.md
index 7545c0a6864a00..2ea097d8412172 100644
--- a/docs/src/pages/components/app-bar/app-bar.md
+++ b/docs/src/pages/components/app-bar/app-bar.md
@@ -39,41 +39,44 @@ A side searchbar.
 
 {{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 500}}
 
-## Placement
+## Fixed placement
 
-When using Appbar `variant="fixed"` you need to have extra space for the content to show below
-and not under. There are 2 ways to do it. Either use `theme.mixins.toolbar` like:
+When you render the app bar position fixed, the dimension of the element doesn't impact the rest of the page. This can cause some part of your content to be invisible, behind the app bar. Here are 3 possible solutions:
 
-```jsx
-const useStyles = makeStyles(theme => ({
-  offset: theme.mixins.toolbar,
-}))
+1. You can use `position="sticky"` instead of fixed. ⚠️ sticky is not supported by IE 11.
+2. You can render a second `<Toolbar />` component:
 
+```jsx
 function App() {
-  const classes = useStyles();
   return (
     <React.Fragment>
-      <Appbar position="fixed"></Appbar>
-      <div className={classes.offset}> {/* to accomdate for top white space */}
+      <AppBar position="fixed">
+        <Toolbar>{/* content */}</Toolbar>
+      </AppBar>
+      <Toolbar />
     </React.Fragment>
-  )
-};
+  );
+}
 ```
 
-Or you can append `<Toolbar />` component after `<Appbar />` like shown in the example
-below. To prevent content from hiding under Appbar.
+3. You can use `theme.mixins.toolbar` CSS:
 
 ```jsx
+const useStyles = makeStyles(theme => ({
+  offset: theme.mixins.toolbar,
+}))
+
 function App() {
+  const classes = useStyles();
   return (
     <React.Fragment>
       <AppBar position="fixed">
-        {/* AppBar content here */}
+        <Toolbar>{/* content */}</Toolbar>
       </AppBar>
-      <Toolbar />
+      <div className={classes.offset} />
     </React.Fragment>
-  );
-}
+  )
+};
 ```
 
 ## Scrolling
diff --git a/packages/material-ui/src/AppBar/AppBar.js b/packages/material-ui/src/AppBar/AppBar.js
index 70e3bf4ef0d1c6..7fe2279ce63995 100644
--- a/packages/material-ui/src/AppBar/AppBar.js
+++ b/packages/material-ui/src/AppBar/AppBar.js
@@ -35,6 +35,7 @@ export const styles = theme => {
     },
     /* Styles applied to the root element if `position="sticky"`. */
     positionSticky: {
+      // ⚠️ sticky is not supported by IE 11.
       position: 'sticky',
       top: 0,
       left: 'auto',