[docs] Continue #13806 and port back some fix from @system

BACKERS.md

@@ -19,15 +19,24 @@ Gold Sponsors are those who have pledged $500/month and more to Material-UI.
 
 via [Patreon](https://www.patreon.com/oliviertassinari)
 
-<p style="display: flex;">
-  <a href="https://www.creative-tim.com/?utm_source=material-ui&utm_medium=docs&utm_campaign=homepage" rel="noopener" target="_blank"><img width="126" src="https://avatars1.githubusercontent.com/u/20172349?s=378" alt="creative-tim" title="Premium Themes"></a>
-  <a href="https://bitsrc.io" rel="noopener" target="_blank"><img width="96" src="https://avatars1.githubusercontent.com/u/24789812?s=192" alt="bitsrc" title="The fastest way to share code"></a>
+<p style="display: flex; justify-content: center;">
+  <a href="https://www.creative-tim.com/?utm_source=material-ui&utm_medium=docs&utm_campaign=homepage" rel="noopener" target="_blank" style="margin-right: 8px;">
+    <img width="126" src="https://avatars1.githubusercontent.com/u/20172349?s=378" alt="creative-tim" title="Premium Themes">
+  </a>
+  <a href="https://bitsrc.io" rel="noopener" target="_blank" style="margin-right: 8px;">
+    <img width="96" src="https://avatars1.githubusercontent.com/u/24789812?s=192" alt="bitsrc" title="The fastest way to share code">
+  </a>
 </p>
 
 via [OpenCollective](https://opencollective.com/material-ui)
 
-<p style="overflow: auto;">
-  <object type="image/svg+xml" data="https://opencollective.com/material-ui/tiers/gold-sponsors.svg?avatarHeight=80&width=600">Gold Sponsors</object>
+<p style="display: flex; justify-content: center;">
+  <a href="https://www.call-em-all.com" rel="noopener" target="_blank" style="margin-right: 8px;">
+    <img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100">
+  </a>
+  <a href="https://localizejs.com" rel="noopener" target="_blank" style="margin-right: 8px;">
+    <img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2F629dea80-f1ae-11e8-b356-a5942970e22b.png&height=70">
+  </a>
 </p>
 
 ## Silver Sponsors

README.md

@@ -67,14 +67,25 @@ Gold Sponsors are those who have pledged $500/month and more to Material-UI.
 
 via [Patreon](https://www.patreon.com/oliviertassinari)
 
-<p style="display: flex;">
-  <a href="https://www.creative-tim.com/?utm_source=material-ui&utm_medium=docs&utm_campaign=homepage" rel="noopener" target="_blank"><img width="126" src="https://avatars1.githubusercontent.com/u/20172349?s=378" alt="creative-tim" title="Premium Themes"></a>
-  <a href="https://bitsrc.io" rel="noopener" target="_blank"><img width="96" src="https://avatars1.githubusercontent.com/u/24789812?s=192" alt="bitsrc" title="The fastest way to share code"></a>
+<p style="display: flex; justify-content: center;">
+  <a href="https://www.creative-tim.com/?utm_source=material-ui&utm_medium=docs&utm_campaign=homepage" rel="noopener" target="_blank" style="margin-right: 8px;">
+    <img width="126" src="https://avatars1.githubusercontent.com/u/20172349?s=378" alt="creative-tim" title="Premium Themes">
+  </a>
+  <a href="https://bitsrc.io" rel="noopener" target="_blank" style="margin-right: 8px;">
+    <img width="96" src="https://avatars1.githubusercontent.com/u/24789812?s=192" alt="bitsrc" title="The fastest way to share code">
+  </a>
 </p>
 
 via [OpenCollective](https://opencollective.com/material-ui)
 
-![gold-sponsors](https://opencollective.com/material-ui/tiers/gold-sponsors.svg?avatarHeight=80&width=600)
+<p style="display: flex; justify-content: center;">
+  <a href="https://www.call-em-all.com" rel="noopener" target="_blank" style="margin-right: 8px;">
+    <img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100">
+  </a>
+  <a href="https://localizejs.com" rel="noopener" target="_blank" style="margin-right: 8px;">
+    <img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2F629dea80-f1ae-11e8-b356-a5942970e22b.png&height=70">
+  </a>
+</p>
 
 ### There is more!
 

docs/src/modules/components/MarkdownDocs.js

@@ -12,7 +12,12 @@ import AppTableOfContents from 'docs/src/modules/components/AppTableOfContents';
 import Ad from 'docs/src/modules/components/Ad';
 import EditPage from 'docs/src/modules/components/EditPage';
 import MarkdownDocsContents from 'docs/src/modules/components/MarkdownDocsContents';
-import { getHeaders, getTitle, getDescription } from 'docs/src/modules/utils/parseMarkdown';
+import {
+  getHeaders,
+  getTitle,
+  getDescription,
+  demoRegexp,
+} from 'docs/src/modules/utils/parseMarkdown';
 
 const styles = theme => ({
   root: {
@@ -30,7 +35,6 @@ const styles = theme => ({
   },
 });
 
-const demoRegexp = /^"demo": "(.*)"/;
 const SOURCE_CODE_ROOT_URL = 'https://github.com/mui-org/material-ui/blob/master';
 
 function MarkdownDocs(props) {
@@ -59,9 +63,7 @@ function MarkdownDocs(props) {
               />
             </div>
             {contents.map(content => {
-              const match = content.match(demoRegexp);
-
-              if (match && demos) {
+              if (demoRegexp.test(content) && demos) {
                 let demoOptions;
                 try {
                   demoOptions = JSON.parse(`{${content}}`);
@@ -71,7 +73,10 @@ function MarkdownDocs(props) {
                 }
 
                 const name = demoOptions.demo;
-                warning(demos && demos[name], `Missing demo: ${name}.`);
+                warning(
+                  demos && demos[name],
+                  `Missing demo: ${name}. You can use one of the following:\n${Object.keys(demos)}`,
+                );
                 return (
                   <Demo
                     key={content}

docs/src/modules/utils/parseMarkdown.js

@@ -32,6 +32,8 @@ export function getHeaders(markdown) {
   return headers;
 }
 
+export const demoRegexp = /^"demo": "(.*)"/;
+
 export function getContents(markdown) {
   return markdown
     .replace(headerRegExp, '') // Remove header information

docs/src/pages/css-in-js/basics/basics.md

@@ -31,7 +31,11 @@ You can expect [the same advantages](https://www.styled-components.com/docs/basi
 To install and save in your `package.json` dependencies, run:
 
 ```sh
+// with npm
 npm install @material-ui/styles
+
+// with yarn
+yarn add @material-ui/styles
 ```
 
 Please note that [react](https://www.npmjs.com/package/react) >= 16.7.0-alpha.0 and [react-dom](https://www.npmjs.com/package/react-dom) >= 16.7.0-alpha.0 are peer dependencies.

docs/src/pages/demos/drawers/ResponsiveDrawer.js

@@ -117,9 +117,6 @@ class ResponsiveDrawer extends React.Component {
               classes={{
                 paper: classes.drawerPaper,
               }}
-              ModalProps={{
-                keepMounted: true, // Better open performance on mobile.
-              }}
             >
               {drawer}
             </Drawer>

docs/src/pages/demos/pickers/MaterialUIPickers.js

@@ -13,7 +13,8 @@ const styles = {
 
 class MaterialUIPickers extends React.Component {
   state = {
-    selectedDate: new Date(),
+    // The first commit of Material-UI
+    selectedDate: new Date('2014-08-18T21:11:54'),
   };
 
   handleDateChange = date => {

docs/src/pages/getting-started/installation/installation.md

@@ -9,7 +9,11 @@ Material-UI is available as an [npm package](https://www.npmjs.com/package/@mate
 To install and save in your `package.json` dependencies, run:
 
 ```sh
+// with npm
 npm install @material-ui/core
+
+// with yarn
+yarn add @material-ui/core
 ```
 
 Please note that [react](https://www.npmjs.com/package/react) >= 16.3.0 and [react-dom](https://www.npmjs.com/package/react-dom) >= 16.3.0 are peer dependencies.

docs/src/pages/lab/about/about.md

@@ -18,5 +18,9 @@ The lab has a peer dependency on the core components.
 If you are not already using Material-UI in your project, you can install it with:
 
 ```sh
+// with npm
 npm install @material-ui/core
+
+// with yarn
+yarn add @material-ui/core
 ```

packages/material-ui-docs/README.md

@@ -7,9 +7,14 @@ This package hosts the documentation building blocks.
 Install the package in your project directory with:
 
 ```sh
+// with npm
 npm install @material-ui/docs
+
+// with yarn
+yarn add @material-ui/docs
 ```
 
+The docs has a peer dependency on the core components.
 If you are not already using Material-UI in your project, you can add it with:
 
 ```sh

packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js

@@ -148,6 +148,10 @@ const styles = theme => ({
       ...theme.typography.h6,
       margin: '24px 0 16px',
     },
+    '& h5': {
+      ...theme.typography.subtitle2,
+      margin: '24px 0 16px',
+    },
     '& p, & ul, & ol': {
       lineHeight: 1.6,
     },

packages/material-ui-lab/README.md

@@ -14,7 +14,8 @@ npm install @material-ui/lab
 yarn add @material-ui/lab
 ```
 
-If you are not already using Material-UI in your project, you can add it with:
+The lab has a peer dependency on the core components.
+If you are not already using Material-UI in your project, you can install it with:
 
 ```sh
 // with npm
@@ -23,3 +24,7 @@ npm install @material-ui/core
 // with yarn
 yarn add @material-ui/core
 ```
+
+## Documentation
+
+[The documentation](https://material-ui.com/lab/about/)

packages/material-ui/src/styles/createMuiTheme.test.js

@@ -33,8 +33,8 @@ describe('createMuiTheme', () => {
       const muiTheme = createMuiTheme();
       assert.strictEqual(
         muiTheme.shadows[2],
-        '0px 1px 5px 0px rgba(0, 0, 0, 0.2),' +
-          '0px 2px 2px 0px rgba(0, 0, 0, 0.14),0px 3px 1px -2px rgba(0, 0, 0, 0.12)',
+        '0px 1px 5px 0px rgba(0,0,0,0.2),' +
+          '0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12)',
       );
     });
 

packages/material-ui/src/styles/shadows.js

@@ -4,9 +4,9 @@ const shadowAmbientShadowOpacity = 0.12;
 
 function createShadow(...px) {
   return [
-    `${px[0]}px ${px[1]}px ${px[2]}px ${px[3]}px rgba(0, 0, 0, ${shadowKeyUmbraOpacity})`,
-    `${px[4]}px ${px[5]}px ${px[6]}px ${px[7]}px rgba(0, 0, 0, ${shadowKeyPenumbraOpacity})`,
-    `${px[8]}px ${px[9]}px ${px[10]}px ${px[11]}px rgba(0, 0, 0, ${shadowAmbientShadowOpacity})`,
+    `${px[0]}px ${px[1]}px ${px[2]}px ${px[3]}px rgba(0,0,0,${shadowKeyUmbraOpacity})`,
+    `${px[4]}px ${px[5]}px ${px[6]}px ${px[7]}px rgba(0,0,0,${shadowKeyPenumbraOpacity})`,
+    `${px[8]}px ${px[9]}px ${px[10]}px ${px[11]}px rgba(0,0,0,${shadowAmbientShadowOpacity})`,
   ].join(',');
 }
 

pages/_document.js

@@ -46,7 +46,10 @@ class MyDocument extends Document {
           */}
           <link rel="manifest" href="/static/manifest.json" />
           {/* PWA primary color */}
-          <meta name="theme-color" content={pageContext.theme.palette.primary.main} />
+          <meta
+            name="theme-color"
+            content={pageContext ? pageContext.theme.palette.primary.main : null}
+          />
           <link rel="shortcut icon" href="/static/favicon.ico" />
           <link rel="canonical" href={canonical} />
           <link rel="stylesheet" href={font} />
@@ -112,11 +115,15 @@ MyDocument.getInitialProps = async ctx => {
     return WrappedComponent;
   });
 
-  let css = pageContext.sheetsRegistry.toString();
-  if (process.env.NODE_ENV === 'production') {
-    const result1 = await prefixer.process(css, { from: undefined });
-    css = result1.css;
-    css = cleanCSS.minify(css).styles;
+  let css;
+  // It might not be defined, it won't after an error occures.
+  if (pageContext) {
+    css = pageContext.sheetsRegistry.toString();
+    if (process.env.NODE_ENV === 'production') {
+      const result1 = await prefixer.process(css, { from: undefined });
+      css = result1.css;
+      css = cleanCSS.minify(css).styles;
+    }
   }
 
   return {