reivew

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

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',