[core] Batch small changes (#18780)

Author: oliviertassinari

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"}}