[core] Batch small changes

.github/CODEOWNERS

@@ -0,0 +1,2 @@
+/docs/src/pages/components/alert/ @dimitropoulos
+/packages/material-ui-lab/src/Alert/ @dimitropoulos

README.md

@@ -48,10 +48,7 @@ Please note that `@next` will only point to pre-releases; to get the latest stab
 
 ### Diamond 💎
 
-*3/3 slots available*
-
 Diamond Sponsors are those who have pledged $2,000/month or more to Material-UI.
-Please contact us at [email protected] to subscribe to this tier.
 
 ### Gold 🏆
 

docs/pages/api/alert-title.md

@@ -36,7 +36,9 @@ Any other props supplied will be provided to the root element (native element).
 - Style sheet name: `MuiAlertTitle`.
 - Style sheet details:
 
-- `root`
+| Rule name | Global class | Description |
+|:-----|:-------------|:------------|
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiAlertTitle-root</span> | Styles applied to the root element.
 
 You can override the style of the component thanks to one of these customization points:
 

docs/pages/api/chip.md

@@ -71,8 +71,8 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">iconSmall</span> | <span class="prop-name">.MuiChip-iconSmall</span> | Styles applied to the `icon` element if `size="small"`.
 | <span class="prop-name">iconColorPrimary</span> | <span class="prop-name">.MuiChip-iconColorPrimary</span> | Styles applied to the `icon` element if `color="primary"`.
 | <span class="prop-name">iconColorSecondary</span> | <span class="prop-name">.MuiChip-iconColorSecondary</span> | Styles applied to the `icon` element if `color="secondary"`.
-| <span class="prop-name">label</span> | <span class="prop-name">.MuiChip-label</span> | Styles applied to the label `span` element`.
-| <span class="prop-name">labelSmall</span> | <span class="prop-name">.MuiChip-labelSmall</span> | 
+| <span class="prop-name">label</span> | <span class="prop-name">.MuiChip-label</span> | Styles applied to the label `span` element.
+| <span class="prop-name">labelSmall</span> | <span class="prop-name">.MuiChip-labelSmall</span> | Styles applied to the label `span` element if `size="small"`.
 | <span class="prop-name">deleteIcon</span> | <span class="prop-name">.MuiChip-deleteIcon</span> | Styles applied to the `deleteIcon` element.
 | <span class="prop-name">deleteIconSmall</span> | <span class="prop-name">.MuiChip-deleteIconSmall</span> | Styles applied to the `deleteIcon` element if `size="small"`.
 | <span class="prop-name">deleteIconColorPrimary</span> | <span class="prop-name">.MuiChip-deleteIconColorPrimary</span> | Styles applied to the deleteIcon element if `color="primary"` and `variant="default"`.

docs/pages/api/icon.md

@@ -47,7 +47,7 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">colorAction</span> | <span class="prop-name">.MuiIcon-colorAction</span> | Styles applied to the root element if `color="action"`.
 | <span class="prop-name">colorError</span> | <span class="prop-name">.MuiIcon-colorError</span> | Styles applied to the root element if `color="error"`.
 | <span class="prop-name">colorDisabled</span> | <span class="prop-name">.MuiIcon-colorDisabled</span> | Styles applied to the root element if `color="disabled"`.
-| <span class="prop-name">fontSizeInherit</span> | <span class="prop-name">.MuiIcon-fontSizeInherit</span> | 
+| <span class="prop-name">fontSizeInherit</span> | <span class="prop-name">.MuiIcon-fontSizeInherit</span> | Styles applied to the root element if `fontSize="inherit"`.
 | <span class="prop-name">fontSizeSmall</span> | <span class="prop-name">.MuiIcon-fontSizeSmall</span> | Styles applied to the root element if `fontSize="small"`.
 | <span class="prop-name">fontSizeLarge</span> | <span class="prop-name">.MuiIcon-fontSizeLarge</span> | Styles applied to the root element if `fontSize="large"`.
 

docs/src/modules/components/AppTableOfContents.js

@@ -11,6 +11,7 @@ import Typography from '@material-ui/core/Typography';
 import textToHash from 'docs/src/modules/utils/textToHash';
 import DiamondSponsors from 'docs/src/modules/components/DiamondSponsors';
 import Link from 'docs/src/modules/components/Link';
+import PageContext from 'docs/src/modules/components/PageContext';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -155,6 +156,7 @@ export default function AppTableOfContents(props) {
     itemsClientRef.current = getItemsClient(itemsServer);
   }, [itemsServer]);
 
+  const { activePage } = React.useContext(PageContext);
   const [activeState, setActiveState] = React.useState(null);
   const clickedRef = React.useRef(false);
   const unsetClickedRef = React.useRef(null);
@@ -233,7 +235,7 @@ export default function AppTableOfContents(props) {
     <Link
       display="block"
       color={activeState === item.hash ? 'textPrimary' : 'textSecondary'}
-      href={`#${item.hash}`}
+      href={`${activePage.pathname}#${item.hash}`}
       underline="none"
       onClick={handleClick(item.hash)}
       className={clsx(

docs/src/modules/components/Demo.js

@@ -300,7 +300,7 @@ function Demo(props) {
     !demoOptions.hideHeader &&
     demoOptions.defaultCodeOpen !== false &&
     jsx !== demoData.raw &&
-    jsx.split(/\n/).length <= 16;
+    jsx.split(/\n/).length <= 17;
 
   let showCodeLabel;
   if (codeOpen) {

docs/src/modules/components/Head.js

@@ -13,14 +13,11 @@ export default function Head(props) {
   return (
     <NextHead>
       {/* Use minimum-scale=1 to enable GPU rasterization. */}
-      <meta
-        name="viewport"
-        content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
-      />
+      <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
       <title>{title}</title>
       <meta name="description" content={description} />
       {/* Twitter */}
-      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:card" content="summary" />
       <meta name="twitter:site" content="@MaterialUI" />
       <meta name="twitter:title" content={title} />
       <meta name="twitter:description" content={description} />

docs/src/modules/components/MarkdownElement.js

@@ -33,7 +33,7 @@ renderer.heading = (text, level) => {
     `<h${level}>`,
     `<a class="anchor-link" id="${hash}"></a>`,
     text,
-    `<a class="anchor-link-style" aria-hidden="true" href="#${hash}">`,
+    `<a class="anchor-link-style" aria-hidden="true" aria-label="anchor" href="#${hash}">`,
     '<svg><use xlink:href="#anchor-link-icon" /></svg>',
     '</a>',
     `</h${level}>`,
@@ -119,6 +119,7 @@ const styles = theme => ({
     fontFamily: theme.typography.fontFamily,
     fontSize: 16,
     color: theme.palette.text.primary,
+    wordBreak: 'break-word',
     '& .anchor-link': {
       marginTop: -96, // Offset for the anchor.
       position: 'absolute',

docs/src/modules/utils/generateMarkdown.js

@@ -334,24 +334,22 @@ function generateClasses(reactAPI) {
   }
 
   let text = '';
-  if (Object.keys(reactAPI.styles.descriptions).length) {
-    text = `| Rule name | Global class | Description |
+
+  text = `| Rule name | Global class | Description |
 |:-----|:-------------|:------------|\n`;
-    text += reactAPI.styles.classes
-      .map(
-        styleRule =>
-          `| <span class="prop-name">${styleRule}</span> | <span class="prop-name">.${
-            reactAPI.styles.globalClasses[styleRule]
-          }</span> | ${
-            reactAPI.styles.descriptions[styleRule]
-              ? escapeCell(reactAPI.styles.descriptions[styleRule])
-              : ''
-          }`,
-      )
-      .join('\n');
-  } else {
-    text = reactAPI.styles.classes.map(styleRule => `- \`${styleRule}\``).join('\n');
-  }
+  text += reactAPI.styles.classes
+    .map(styleRule => {
+      const description = reactAPI.styles.descriptions[styleRule];
+
+      if (typeof description === 'undefined' && ['Grid', 'Paper'].indexOf(reactAPI.name) === -1) {
+        throw new Error(`The "${styleRule}" style rule is missing a description`);
+      }
+
+      return `| <span class="prop-name">${styleRule}</span> | <span class="prop-name">.${
+        reactAPI.styles.globalClasses[styleRule]
+      }</span> | ${description ? escapeCell(description) : ''}`;
+    })
+    .join('\n');
 
   return `## CSS
 

docs/src/pages/components/alert/alert.md

@@ -7,6 +7,8 @@ components: Alert
 
 <p class="description">An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.</p>
 
+**Note:** This component is not documented in the [Material Design guidelines](https://material.io/), but Material-UI supports it.
+
 ## Simple alerts
 
 The alert offers four severity levels that set a distinctive icon and color.

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

@@ -13,24 +13,19 @@ const useStyles = makeStyles(theme => ({
 export default function SimpleBackdrop() {
   const classes = useStyles();
   const [open, setOpen] = React.useState(false);
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const handleToggle = () => {
+    setOpen(!open);
+  };
 
   return (
     <div>
-      <button
-        type="button"
-        onClick={() => {
-          setOpen(!open);
-        }}
-      >
+      <button type="button" onClick={handleToggle}>
         Show backdrop
       </button>
-      <Backdrop
-        className={classes.backdrop}
-        open={open}
-        onClick={() => {
-          setOpen(false);
-        }}
-      >
+      <Backdrop className={classes.backdrop} open={open} onClick={handleClose}>
         <CircularProgress color="inherit" />
       </Backdrop>
     </div>

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

@@ -15,24 +15,19 @@ const useStyles = makeStyles((theme: Theme) =>
 export default function SimpleBackdrop() {
   const classes = useStyles();
   const [open, setOpen] = React.useState(false);
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const handleToggle = () => {
+    setOpen(!open);
+  };
 
   return (
     <div>
-      <button
-        type="button"
-        onClick={() => {
-          setOpen(!open);
-        }}
-      >
+      <button type="button" onClick={handleToggle}>
         Show backdrop
       </button>
-      <Backdrop
-        className={classes.backdrop}
-        open={open}
-        onClick={() => {
-          setOpen(false);
-        }}
-      >
+      <Backdrop className={classes.backdrop} open={open} onClick={handleClose}>
         <CircularProgress color="inherit" />
       </Backdrop>
     </div>

docs/src/pages/components/dividers/MiddleDividers.js

@@ -13,7 +13,7 @@ const useStyles = makeStyles(theme => ({
     backgroundColor: theme.palette.background.paper,
   },
   chip: {
-    marginRight: theme.spacing(1),
+    margin: theme.spacing(0.5),
   },
   section1: {
     margin: theme.spacing(3, 2),

docs/src/pages/components/dividers/MiddleDividers.tsx

@@ -14,7 +14,7 @@ const useStyles = makeStyles((theme: Theme) =>
       backgroundColor: theme.palette.background.paper,
     },
     chip: {
-      marginRight: theme.spacing(1),
+      margin: theme.spacing(0.5),
     },
     section1: {
       margin: theme.spacing(3, 2),

docs/src/pages/components/hidden/BreakpointDown.js

@@ -12,6 +12,7 @@ const useStyles = makeStyles(theme => ({
   },
   container: {
     display: 'flex',
+    flexWrap: 'wrap',
   },
   paper: {
     padding: theme.spacing(2),

docs/src/pages/components/hidden/BreakpointDown.tsx

@@ -12,6 +12,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     container: {
       display: 'flex',
+      flexWrap: 'wrap',
     },
     paper: {
       padding: theme.spacing(2),

docs/src/pages/components/hidden/BreakpointOnly.js

@@ -12,6 +12,7 @@ const useStyles = makeStyles(theme => ({
   },
   container: {
     display: 'flex',
+    flexWrap: 'wrap',
   },
   paper: {
     padding: theme.spacing(2),

docs/src/pages/components/hidden/BreakpointOnly.tsx

@@ -12,6 +12,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     container: {
       display: 'flex',
+      flexWrap: 'wrap',
     },
     paper: {
       padding: theme.spacing(2),

docs/src/pages/components/hidden/BreakpointUp.js

@@ -12,6 +12,7 @@ const useStyles = makeStyles(theme => ({
   },
   container: {
     display: 'flex',
+    flexWrap: 'wrap',
   },
   paper: {
     padding: theme.spacing(2),

docs/src/pages/components/hidden/BreakpointUp.tsx

@@ -12,6 +12,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     container: {
       display: 'flex',
+      flexWrap: 'wrap',
     },
     paper: {
       padding: theme.spacing(2),

docs/src/pages/components/lists/VirtualizedList.js

@@ -9,7 +9,7 @@ const useStyles = makeStyles(theme => ({
   root: {
     width: '100%',
     height: 400,
-    maxWidth: 360,
+    maxWidth: 300,
     backgroundColor: theme.palette.background.paper,
   },
 }));
@@ -34,7 +34,7 @@ export default function VirtualizedList() {
 
   return (
     <div className={classes.root}>
-      <FixedSizeList height={400} width={360} itemSize={46} itemCount={200}>
+      <FixedSizeList height={400} width={300} itemSize={46} itemCount={200}>
         {renderRow}
       </FixedSizeList>
     </div>

docs/src/pages/components/lists/VirtualizedList.tsx

@@ -9,7 +9,7 @@ const useStyles = makeStyles((theme: Theme) =>
     root: {
       width: '100%',
       height: 400,
-      maxWidth: 360,
+      maxWidth: 300,
       backgroundColor: theme.palette.background.paper,
     },
   }),
@@ -30,7 +30,7 @@ export default function VirtualizedList() {
 
   return (
     <div className={classes.root}>
-      <FixedSizeList height={400} width={360} itemSize={46} itemCount={200}>
+      <FixedSizeList height={400} width={300} itemSize={46} itemCount={200}>
         {renderRow}
       </FixedSizeList>
     </div>

docs/src/pages/components/paper/SimplePaper.js

@@ -5,6 +5,7 @@ import Paper from '@material-ui/core/Paper';
 const useStyles = makeStyles(theme => ({
   root: {
     display: 'flex',
+    flexWrap: 'wrap',
     '& > *': {
       margin: theme.spacing(1),
       width: theme.spacing(16),

docs/src/pages/components/paper/SimplePaper.tsx

@@ -6,6 +6,7 @@ const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       display: 'flex',
+      flexWrap: 'wrap',
       '& > *': {
         margin: theme.spacing(1),
         width: theme.spacing(16),