[core] Batch small changes

docs/pages/api/backdrop.md

@@ -52,3 +52,7 @@ You can override the style of the component thanks to one of these customization
 
 If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Backdrop/Backdrop.js) for more detail.
 
+## Demos
+
+- [Backdrop](/components/backdrop/)
+

docs/pages/components/backdrop.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+
+const req = require.context('docs/src/pages/components/backdrop', false, /\.(md|js|tsx)$/);
+const reqSource = require.context(
+  '!raw-loader!../../src/pages/components/backdrop',
+  false,
+  /\.(js|tsx)$/,
+);
+const reqPrefix = 'pages/components/backdrop';
+
+export default function Page() {
+  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+}

docs/src/modules/components/Ad.js

@@ -75,6 +75,13 @@ const inHouseAds = [
     img: '/static/in-house/monday.jpg',
     description: 'Why use multiple tools to manage your projects? Meet monday.com',
   },
+  {
+    name: 'bonsaiilabs',
+    link: 'https://bonsaiilabs.com/courseDetail/material-ui-with-react',
+    img: '/static/in-house/bonsaiilabs.png',
+    description:
+      'A course to learn Material‑UI while developing a mobile flight search and booking app.',
+  },
 ];
 
 function Ad(props) {
@@ -165,7 +172,7 @@ function Ad(props) {
     if (carbonOut || codeFundOut) {
       children = <AdInHouse ad={inHouseAds[Math.floor(inHouseAds.length * random)]} />;
       minHeight = 'auto';
-    } else if (random >= 0.55) {
+    } else if (random >= 0.65) {
       children = <AdCodeFund />;
     } else {
       children = <AdCarbon />;

docs/src/modules/components/AppFrame.js

@@ -110,9 +110,6 @@ const styles = theme => ({
     color: theme.palette.type === 'dark' ? '#fff' : null,
     backgroundColor: theme.palette.type === 'dark' ? theme.palette.background.level2 : null,
     transition: theme.transitions.create('width'),
-    '@media print': {
-      position: 'absolute',
-    },
   },
   language: {
     margin: theme.spacing(0, 0.5, 0, 1),

docs/src/modules/components/MarkdownElement.js

@@ -126,7 +126,7 @@ const styles = theme => ({
     '& pre': {
       margin: '24px 0',
       padding: '12px 18px',
-      backgroundColor: '#333',
+      backgroundColor: '#272c34',
       direction: 'ltr',
       borderRadius: theme.shape.borderRadius,
       overflow: 'auto',
@@ -144,7 +144,7 @@ const styles = theme => ({
       borderRadius: 2,
     },
     '& code[class*="language-"]': {
-      backgroundColor: '#333',
+      backgroundColor: '#272c34',
       color: '#fff',
     },
     '& p code, & ul code, & pre code': {

docs/src/modules/redux/initRedux.js

@@ -21,7 +21,7 @@ function create(initialState) {
     process.browser &&
     !window.__REDUX_DEVTOOLS_EXTENSION__ &&
     // redux-logger needs this feature
-    Object['assign'] // eslint-disable-line dot-notation
+    Object.hasOwnProperty('assign')
   ) {
     // eslint-disable-next-line global-require
     const createLogger = require('redux-logger').createLogger;

docs/src/pages.js

@@ -74,6 +74,7 @@ const pages = [
           { pathname: '/components/progress' },
           { pathname: '/components/dialogs' },
           { pathname: '/components/snackbars' },
+          { pathname: '/components/backdrop' },
         ],
       },
       {

docs/src/pages/components/backdrop/SimpleBackdrop.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import Backdrop from '@material-ui/core/Backdrop';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(theme => ({
+  backdrop: {
+    zIndex: theme.zIndex.drawer + 1,
+    color: '#fff',
+  },
+}));
+
+export default function SimpleBackdrop() {
+  const classes = useStyles();
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => {
+          setOpen(!open);
+        }}
+      >
+        Show backdrop
+      </button>
+      <Backdrop
+        className={classes.backdrop}
+        open={open}
+        onClick={() => {
+          setOpen(false);
+        }}
+      >
+        <CircularProgress color="inherit" />
+      </Backdrop>
+    </div>
+  );
+}

docs/src/pages/components/backdrop/SimpleBackdrop.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import Backdrop from '@material-ui/core/Backdrop';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    backdrop: {
+      zIndex: theme.zIndex.drawer + 1,
+      color: '#fff',
+    },
+  }),
+);
+
+export default function SimpleBackdrop() {
+  const classes = useStyles();
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => {
+          setOpen(!open);
+        }}
+      >
+        Show backdrop
+      </button>
+      <Backdrop
+        className={classes.backdrop}
+        open={open}
+        onClick={() => {
+          setOpen(false);
+        }}
+      >
+        <CircularProgress color="inherit" />
+      </Backdrop>
+    </div>
+  );
+}

docs/src/pages/components/backdrop/backdrop.md

@@ -0,0 +1,13 @@
+---
+title: Overlay React component
+components: Backdrop
+---
+
+# Backdrop
+
+<p class="description">The backdrop component is used to provide emphasis on a particular element or parts of it.</p>
+
+The overlay signals to the user of a state change within the application and can be used for creating loaders, dialogs and more.
+In its simplest form, the backdrop component will add a dimmed layer over your application.
+
+{{"demo": "pages/components/backdrop/SimpleBackdrop.js"}}

docs/src/pages/discover-more/backers/backers.md

@@ -91,26 +91,26 @@ Funds donated via OpenCollective are managed transparently and aimed to sustain
 
 These great services sponsor Material-UI's core infrastructure:
 
-- [<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Logo.png" width="100">](https://github.com/)
+- [<img alt="GitHub" src="https://github.githubassets.com/images/modules/logos_page/GitHub-Logo.png" width="100">](https://github.com/)
 
 GitHub allows us to host the Git repository.
 
-- [<img src="https://assets.brandfolder.com/otz6k5-cj8pew-e4rk9u/element.png?v=1501538594" width="120">](https://circleci.com/)
+- [<img alt="CircleCI" src="https://assets.brandfolder.com/otz6k5-cj8pew-e4rk9u/element.png?v=1501538594" width="120">](https://circleci.com/)
 
 CircleCI allows us to run the test suite.
 
-- [<img src="https://cdn.netlify.com/15ecf59b59c9d04b88097c6b5d2c7e8a7d1302d0/1b6d6/img/press/logos/full-logo-light.svg" width="120">](https://www.netlify.com/)
+- [<img alt="Netlify" src="https://cdn.netlify.com/15ecf59b59c9d04b88097c6b5d2c7e8a7d1302d0/1b6d6/img/press/logos/full-logo-light.svg" width="120">](https://www.netlify.com/)
 
 Netlify allows us to distribute the documentation.
 
-- [<img src="https://support.crowdin.com/assets/logos/crowdin-logo1-small.png" width="120">](https://crowdin.com/)
+- [<img alt="CrowdIn" src="https://support.crowdin.com/assets/logos/crowdin-logo1-small.png" width="120">](https://crowdin.com/)
 
 CrowdIn allows us to translate the documentation.
 
-- [<img src="https://www.browserstack.com/images/mail/browserstack-logo-footer.png" width="120">](https://www.browserstack.com/)
+- [<img alt="BrowserStack" src="https://www.browserstack.com/images/mail/browserstack-logo-footer.png" width="120">](https://www.browserstack.com/)
 
 BrowserStack allows us to test in real browsers.
 
-- [<img src="https://raw.githubusercontent.com/codecov/media/master/logos/icon-50.png" height="30">](https://codecov.io/)
+- [<img alt="CodeCov" src="https://raw.githubusercontent.com/codecov/media/master/logos/icon-50.png" height="30">](https://codecov.io/)
 
 CodeCov allows us to monitor the test coverage.

docs/src/pages/discover-more/roadmap/roadmap.md

@@ -84,6 +84,7 @@ Here are the components we will work on being supported in the Material-UI ecosy
 | TopLayout | ⏳ |
 | Big Calendar | ⏳⭐️ |
 | Charts | ⏳⭐️ |
+| Sparkline | ⏳⭐️ |
 | Color Picker | ⏳⭐️ |
 | Gantt Chart | ⏳⭐️ |
 | Gauge | ⏳⭐️ |

packages/material-ui-lab/src/Autocomplete/Autocomplete.js

@@ -141,6 +141,7 @@ export const styles = theme => ({
   /* Styles applied to the `Paper` component. */
   paper: {
     ...theme.typography.body1,
+    overflow: 'hidden',
     margin: '4px 0',
     '& > ul': {
       maxHeight: '40vh',

packages/material-ui/src/AppBar/AppBar.js

@@ -25,6 +25,10 @@ export const styles = theme => {
       top: 0,
       left: 'auto',
       right: 0,
+      '@media print': {
+        // Prevent the app bar to be visible on each printed page.
+        position: 'absolute',
+      },
     },
     /* Styles applied to the root element if `position="absolute"`. */
     positionAbsolute: {

packages/material-ui/src/NoSsr/NoSsr.test.js

@@ -1,15 +1,15 @@
 import React from 'react';
 import { assert } from 'chai';
-import { createMount, createRender } from '@material-ui/core/test-utils';
+import { createMount } from '@material-ui/core/test-utils';
+import createServerRender from 'test/utils/createServerRender';
 import NoSsr from './NoSsr';
 
 describe('<NoSsr />', () => {
   let mount;
-  let render;
+  const serverRender = createServerRender();
 
   before(() => {
     mount = createMount({ strict: true });
-    render = createRender();
   });
 
   after(() => {
@@ -18,7 +18,7 @@ describe('<NoSsr />', () => {
 
   describe('server-side rendering', () => {
     it('should not render the children as the width is unknown', () => {
-      const wrapper = render(
+      const wrapper = serverRender(
         <NoSsr>
           <span>Hello</span>
         </NoSsr>,
@@ -40,7 +40,7 @@ describe('<NoSsr />', () => {
 
   describe('prop: fallback', () => {
     it('should render the fallback', () => {
-      const wrapper = render(
+      const wrapper = serverRender(
         <div>
           <NoSsr fallback="fallback">
             <span>Hello</span>

packages/material-ui/src/Portal/Portal.test.js

@@ -2,19 +2,15 @@
 import React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { createRender } from '@material-ui/core/test-utils';
+import createServerRender from 'test/utils/createServerRender';
 import consoleErrorMock from 'test/utils/consoleErrorMock';
 import { createClientRender } from 'test/utils/createClientRender';
 import Portal from './Portal';
 
 describe('<Portal />', () => {
-  let serverRender;
+  const serverRender = createServerRender();
   const render = createClientRender({ strict: true });
 
-  before(() => {
-    serverRender = createRender();
-  });
-
   describe('server-side', () => {
     // Only run the test on node.
     if (!/jsdom/.test(window.navigator.userAgent)) {

packages/material-ui/src/test-utils/createRender.js

@@ -4,7 +4,7 @@ import { RenderContext } from './RenderMode';
 
 /**
  * Generate a render to string function.
- * @deprecated
+ * @deprecated to remvoe in v5
  */
 export default function createRender(options1 = {}) {
   const { render = enzymeRender, ...other1 } = options1;

packages/material-ui/src/useMediaQuery/useMediaQuery.test.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { ThemeProvider } from '@material-ui/styles';
 import consoleErrorMock from 'test/utils/consoleErrorMock';
 import { act, createClientRender } from 'test/utils/createClientRender';
-import { createRender } from '@material-ui/core/test-utils';
+import createServerRender from 'test/utils/createServerRender';
 import mediaQuery from 'css-mediaquery';
 import { expect } from 'chai';
 import { spy, stub } from 'sinon';
@@ -238,11 +238,7 @@ describe('useMediaQuery', () => {
   });
 
   describe('server-side', () => {
-    let serverRender;
-
-    before(() => {
-      serverRender = createRender();
-    });
+    const serverRender = createServerRender();
 
     it('should use the ssr match media ponyfill', () => {
       const ref = React.createRef();

test/utils/createServerRender.js

@@ -8,7 +8,7 @@ import { stub } from 'sinon';
  * @param {boolean} [options.expectUseLayoutEffectWarning]
  */
 export default function createServerRender(options = {}) {
-  const { expectUseLayoutEffectWarning } = options;
+  const { expectUseLayoutEffectWarning = false } = options;
 
   beforeEach(() => {
     stub(console, 'error').callsFake((message, ...args) => {