[AppBar] Hide and Elevate on Scroll

docs/src/modules/components/AppFrame.js

@@ -252,7 +252,7 @@ class AppFrame extends React.Component {
                     <MenuIcon />
                   </IconButton>
                   {title !== null && (
-                    <Typography className={classes.title} variant="h6" color="inherit" noWrap>
+                    <Typography className={classes.title} variant="h6" noWrap>
                       {title}
                     </Typography>
                   )}

docs/src/modules/components/AppTableOfContents.js

@@ -22,7 +22,6 @@ const styles = theme => ({
     flexShrink: 0,
     order: 2,
     position: 'sticky',
-    wordBreak: 'break-all',
     height: 'calc(100vh - 70px - 29px)',
     overflowY: 'auto',
     padding: theme.spacing(2, 2, 2, 0),

docs/src/modules/components/DemoFrame.js

@@ -36,6 +36,7 @@ class DemoFrame extends React.Component {
       }),
       sheetsManager: new Map(),
       container: this.contentDocument.body,
+      window: () => this.contentWindow,
     });
   };
 
@@ -60,6 +61,7 @@ class DemoFrame extends React.Component {
             <StylesProvider jss={this.state.jss} sheetsManager={this.state.sheetsManager}>
               {React.cloneElement(children, {
                 container: this.state.container,
+                window: this.state.window,
               })}
             </StylesProvider>
           ) : null}

docs/src/pages/demos/app-bar/ButtonAppBar.js

@@ -28,7 +28,7 @@ function ButtonAppBar() {
           <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="Menu">
             <MenuIcon />
           </IconButton>
-          <Typography variant="h6" color="inherit" className={classes.title}>
+          <Typography variant="h6" className={classes.title}>
             News
           </Typography>
           <Button color="inherit">Login</Button>

docs/src/pages/demos/app-bar/ButtonAppBar.tsx

@@ -30,7 +30,7 @@ function ButtonAppBar() {
           <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="Menu">
             <MenuIcon />
           </IconButton>
-          <Typography variant="h6" color="inherit" className={classes.title}>
+          <Typography variant="h6" className={classes.title}>
             News
           </Typography>
           <Button color="inherit">Login</Button>

docs/src/pages/demos/app-bar/ElevateAppBar.js

@@ -0,0 +1,62 @@
+/* eslint-disable prefer-spread */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import useScrollTrigger from '@material-ui/core/useScrollTrigger';
+import Box from '@material-ui/core/Box';
+import Container from '@material-ui/core/Container';
+
+function ElevationScroll(props) {
+  const { children, window } = props;
+  // Note that you normally won't need to set the window ref as useScrollTrigger
+  // will default to window.
+  // This is only being set here because the demo is in an iframe.
+  const trigger = useScrollTrigger({
+    disableHysteresis: true,
+    threshold: 0,
+    target: window ? window() : undefined,
+  });
+
+  return React.cloneElement(children, {
+    elevation: trigger ? 4 : 0,
+  });
+}
+
+ElevationScroll.propTypes = {
+  children: PropTypes.node.isRequired,
+  // Injected by the documentation to work in an iframe.
+  // You won't need it on your project.
+  window: PropTypes.func,
+};
+
+export default function ElevateAppBar(props) {
+  return (
+    <React.Fragment>
+      <CssBaseline />
+      <ElevationScroll {...props}>
+        <AppBar>
+          <Toolbar>
+            <Typography variant="h6">Scroll to Elevate App Bar</Typography>
+          </Toolbar>
+        </AppBar>
+      </ElevationScroll>
+      <Toolbar />
+      <Container>
+        <Box my={2}>
+          {Array.apply(null, Array(12))
+            .map(
+              () => `Cras mattis consectetur purus sit amet fermentum.
+Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`,
+            )
+            .join('\n')}
+        </Box>
+      </Container>
+    </React.Fragment>
+  );
+}

docs/src/pages/demos/app-bar/ElevateAppBar.tsx

@@ -0,0 +1,67 @@
+/* eslint-disable prefer-spread */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import useScrollTrigger from '@material-ui/core/useScrollTrigger';
+import Box from '@material-ui/core/Box';
+import Container from '@material-ui/core/Container';
+
+interface Props {
+  window?: () => Window;
+  children: React.ReactElement;
+}
+
+function ElevationScroll(props: Props) {
+  const { children, window } = props;
+  // Note that you normally won't need to set the window ref as useScrollTrigger
+  // will default to window.
+  // This is only being set here because the demo is in an iframe.
+  const trigger = useScrollTrigger({
+    disableHysteresis: true,
+    threshold: 0,
+    target: window ? window() : undefined,
+  });
+
+  return React.cloneElement(children, {
+    elevation: trigger ? 4 : 0,
+  });
+}
+
+ElevationScroll.propTypes = {
+  children: PropTypes.node.isRequired,
+  // Injected by the documentation to work in an iframe.
+  // You won't need it on your project.
+  window: PropTypes.func,
+};
+
+export default function ElevateAppBar(props: Props) {
+  return (
+    <React.Fragment>
+      <CssBaseline />
+      <ElevationScroll {...props}>
+        <AppBar>
+          <Toolbar>
+            <Typography variant="h6">Scroll to Elevate App Bar</Typography>
+          </Toolbar>
+        </AppBar>
+      </ElevationScroll>
+      <Toolbar />
+      <Container>
+        <Box my={2}>
+          {Array.apply(null, Array(12))
+            .map(
+              () => `Cras mattis consectetur purus sit amet fermentum.
+Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`,
+            )
+            .join('\n')}
+        </Box>
+      </Container>
+    </React.Fragment>
+  );
+}

docs/src/pages/demos/app-bar/HideAppBar.js

@@ -0,0 +1,61 @@
+/* eslint-disable prefer-spread */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import useScrollTrigger from '@material-ui/core/useScrollTrigger';
+import Box from '@material-ui/core/Box';
+import Container from '@material-ui/core/Container';
+import Slide from '@material-ui/core/Slide';
+
+function HideOnScroll(props) {
+  const { children, window } = props;
+  // Note that you normally won't need to set the window ref as useScrollTrigger
+  // will default to window.
+  // This is only being set here because the demo is in an iframe.
+  const trigger = useScrollTrigger({ target: window ? window() : undefined });
+
+  return (
+    <Slide appear={false} direction="down" in={!trigger}>
+      {children}
+    </Slide>
+  );
+}
+
+HideOnScroll.propTypes = {
+  children: PropTypes.node.isRequired,
+  // Injected by the documentation to work in an iframe.
+  // You won't need it on your project.
+  window: PropTypes.func,
+};
+
+export default function HideAppBar(props) {
+  return (
+    <React.Fragment>
+      <CssBaseline />
+      <HideOnScroll {...props}>
+        <AppBar>
+          <Toolbar>
+            <Typography variant="h6">Scroll to Hide App Bar</Typography>
+          </Toolbar>
+        </AppBar>
+      </HideOnScroll>
+      <Toolbar />
+      <Container>
+        <Box my={2}>
+          {Array.apply(null, Array(12))
+            .map(
+              () => `Cras mattis consectetur purus sit amet fermentum.
+Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`,
+            )
+            .join('\n')}
+        </Box>
+      </Container>
+    </React.Fragment>
+  );
+}

docs/src/pages/demos/app-bar/HideAppBar.tsx

@@ -0,0 +1,66 @@
+/* eslint-disable prefer-spread */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import useScrollTrigger from '@material-ui/core/useScrollTrigger';
+import Box from '@material-ui/core/Box';
+import Container from '@material-ui/core/Container';
+import Slide from '@material-ui/core/Slide';
+
+interface Props {
+  window?: () => Window;
+  children: React.ReactElement;
+}
+
+function HideOnScroll(props: Props) {
+  const { children, window } = props;
+  // Note that you normally won't need to set the window ref as useScrollTrigger
+  // will default to window.
+  // This is only being set here because the demo is in an iframe.
+  const trigger = useScrollTrigger({ target: window ? window() : undefined });
+
+  return (
+    <Slide appear={false} direction="down" in={!trigger}>
+      {children}
+    </Slide>
+  );
+}
+
+HideOnScroll.propTypes = {
+  children: PropTypes.node.isRequired,
+  // Injected by the documentation to work in an iframe.
+  // You won't need it on your project.
+  window: PropTypes.func,
+};
+
+export default function HideAppBar(props: Props) {
+  return (
+    <React.Fragment>
+      <CssBaseline />
+      <HideOnScroll {...props}>
+        <AppBar>
+          <Toolbar>
+            <Typography variant="h6">Scroll to Hide App Bar</Typography>
+          </Toolbar>
+        </AppBar>
+      </HideOnScroll>
+      <Toolbar />
+      <Container>
+        <Box my={2}>
+          {Array.apply(null, Array(12))
+            .map(
+              () => `Cras mattis consectetur purus sit amet fermentum.
+Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`,
+            )
+            .join('\n')}
+        </Box>
+      </Container>
+    </React.Fragment>
+  );
+}

docs/src/pages/demos/app-bar/MenuAppBar.js

@@ -55,7 +55,7 @@ function MenuAppBar() {
           <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="Menu">
             <MenuIcon />
           </IconButton>
-          <Typography variant="h6" color="inherit" className={classes.title}>
+          <Typography variant="h6" className={classes.title}>
             Photos
           </Typography>
           {auth && (

docs/src/pages/demos/app-bar/MenuAppBar.tsx

@@ -57,7 +57,7 @@ function MenuAppBar() {
           <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="Menu">
             <MenuIcon />
           </IconButton>
-          <Typography variant="h6" color="inherit" className={classes.title}>
+          <Typography variant="h6" className={classes.title}>
             Photos
           </Typography>
           {auth && (

docs/src/pages/demos/app-bar/PrimarySearchAppBar.js

@@ -161,7 +161,7 @@ function PrimarySearchAppBar() {
           >
             <MenuIcon />
           </IconButton>
-          <Typography className={classes.title} variant="h6" color="inherit" noWrap>
+          <Typography className={classes.title} variant="h6" noWrap>
             Material-UI
           </Typography>
           <div className={classes.search}>

docs/src/pages/demos/app-bar/PrimarySearchAppBar.tsx

@@ -163,7 +163,7 @@ function PrimarySearchAppBar() {
           >
             <MenuIcon />
           </IconButton>
-          <Typography className={classes.title} variant="h6" color="inherit" noWrap>
+          <Typography className={classes.title} variant="h6" noWrap>
             Material-UI
           </Typography>
           <div className={classes.search}>

docs/src/pages/demos/app-bar/SearchAppBar.js

@@ -76,7 +76,7 @@ function SearchAppBar() {
           >
             <MenuIcon />
           </IconButton>
-          <Typography className={classes.title} variant="h6" color="inherit" noWrap>
+          <Typography className={classes.title} variant="h6" noWrap>
             Material-UI
           </Typography>
           <div className={classes.search}>

docs/src/pages/demos/app-bar/SearchAppBar.tsx

@@ -78,7 +78,7 @@ function SearchAppBar() {
           >
             <MenuIcon />
           </IconButton>
-          <Typography className={classes.title} variant="h6" color="inherit" noWrap>
+          <Typography className={classes.title} variant="h6" noWrap>
             Material-UI
           </Typography>
           <div className={classes.search}>