[core] Batch small changes (#18961)

CHANGELOG.md

@@ -16,7 +16,6 @@ Here are some highlights ✨:
 
 ### `@material-ui/[email protected]`
 
-- [AvatarGroup] Introduce new component (#18707) @oliviertassinari
 - [Avatar] Add missing 'fallback' AvatarClassKey (#18717) @kLabz
 - [ButtonGroup] Add orientation prop (#18762) @SandraMarcelaHerreraArriaga
 - [Button] disableElevation prop (#18744) @netochaves
@@ -41,6 +40,7 @@ Here are some highlights ✨:
 
 ### `@material-ui/[email protected]`
 
+- [AvatarGroup] Introduce new component (#18707) @oliviertassinari
 - [Autocomplete] Fix double change event issue (#18786) @tplai
 - [Autocomplete] Add reason to onInputChange callback (#18796) @Tybot204
 - [Autocomplete] Expand virtualized example to have grouped items (#18763) @Janpot

README.md

@@ -6,7 +6,7 @@
 
 <div align="center">
 
-[React](https://reactjs.org/) components that implement [Google's Material Design](https://material.io/design/introduction/).
+[React](https://reactjs.org/) components for faster and easier web development. Build your own design system, or start with [Material Design](https://material.io/design/introduction/).
 
 [![npm package](https://img.shields.io/npm/v/@material-ui/core/latest.svg)](https://www.npmjs.com/package/@material-ui/core)
 [![npm downloads](https://img.shields.io/npm/dm/@material-ui/core.svg)](https://www.npmjs.com/package/@material-ui/core)

docs/pages/blog/november-2019-update.md

@@ -6,7 +6,7 @@ description: Here are the most significant improvements in November.
 
 **Olivier Tassinari**
 
-*November 12, 2019*
+*December 12, 2019*
 
 Here are the most significant improvements in November:
 

docs/src/modules/components/Ad.js

@@ -86,7 +86,6 @@ const inHouseAds = [
 
 function Ad(props) {
   const { classes } = props;
-  const { current: random } = React.useRef(Math.random());
   const t = useSelector(state => state.options.t);
 
   const timerAdblock = React.useRef();
@@ -161,24 +160,65 @@ function Ad(props) {
   if (adblock) {
     minHeight = 'auto';
 
-    if (Math.random() >= 0.8) {
+    if (Math.random() < 0.2) {
       children = getAdblock(classes, t);
     } else {
-      children = <AdInHouse ad={inHouseAds[Math.floor(inHouseAds.length * random)]} />;
+      children = <AdInHouse ad={inHouseAds[Math.floor(inHouseAds.length * Math.random())]} />;
     }
   }
 
   if (!children) {
     if (carbonOut || codeFundOut) {
-      children = <AdInHouse ad={inHouseAds[Math.floor(inHouseAds.length * random)]} />;
+      children = <AdInHouse ad={inHouseAds[Math.floor(inHouseAds.length * Math.random())]} />;
       minHeight = 'auto';
-    } else if (random >= 0.65) {
+    } else if (Math.random() < 0.35) {
       children = <AdCodeFund />;
     } else {
       children = <AdCarbon />;
     }
   }
 
+  React.useEffect(() => {
+    // Avoid a flood of events.
+    if (Math.random < 0.1) {
+      return null;
+    }
+
+    const delay = setTimeout(() => {
+      let type;
+
+      if (children.type === AdCodeFund) {
+        type = 'codefund';
+      } else if (children.type === AdCarbon) {
+        type = 'carbon';
+      } else if (children.type === AdInHouse) {
+        type = 'in-house';
+      } else {
+        type = 'disable-adblock';
+      }
+
+      window.ga('send', {
+        hitType: 'event',
+        eventCategory: 'ad',
+        eventAction: 'display',
+        eventLabel: type,
+      });
+
+      if (type === 'in-house') {
+        window.ga('send', {
+          hitType: 'event',
+          eventCategory: 'in-house-ad',
+          eventAction: 'display',
+          eventLabel: children.props.ad.name,
+        });
+      }
+    }, 2000);
+
+    return () => {
+      clearTimeout(delay);
+    };
+  }, [children.type, children.props.ad]);
+
   return (
     <span className={classes.root} style={{ minHeight }}>
       {children}

docs/src/modules/components/AdInHouse.js

@@ -44,6 +44,7 @@ const useStyles = makeStyles(theme => ({
 export default function AdInHouse(props) {
   const { ad } = props;
   const classes = useStyles();
+
   /* eslint-disable material-ui/no-hardcoded-labels, react/no-danger */
   return (
     <span className={classes.root}>

docs/src/modules/components/Demo.js

@@ -253,7 +253,6 @@ function Demo(props) {
 
   const showSourceHint = demoHovered && !sourceHintSeen;
   const DemoComponent = demoData.Component;
-  const gaCategory = demoOptions.demo;
   const demoName = getDemoName(demoData.githubLocation);
   const demoSandboxedStyle = React.useMemo(
     () => ({
@@ -339,7 +338,7 @@ function Demo(props) {
               demo={demo}
               codeOpen={codeOpen}
               codeVariant={codeVariant}
-              gaEventCategory={gaCategory}
+              gaEventLabel={demoOptions.demo}
               onLanguageClick={handleCodeLanguageClick}
             />
             <div className={classes.headerButtons}>
@@ -353,30 +352,15 @@ function Demo(props) {
               >
                 <IconButton
                   aria-label={showCodeLabel}
-                  data-ga-event-category={gaCategory}
+                  data-ga-event-category="demo"
+                  data-ga-event-label={demoOptions.demo}
                   data-ga-event-action="expand"
                   onClick={handleClickCodeOpen}
                   color={demoHovered ? 'primary' : 'default'}
                 >
                   <CodeIcon fontSize="small" />
                 </IconButton>
               </Tooltip>
-              <Tooltip
-                classes={{ popper: classes.tooltip }}
-                title={t('viewGitHub')}
-                placement="top"
-              >
-                <IconButton
-                  aria-label={t('viewGitHub')}
-                  data-ga-event-category={gaCategory}
-                  data-ga-event-action="github"
-                  href={demoData.githubLocation}
-                  target="_blank"
-                  rel="noopener nofollow"
-                >
-                  <GitHubIcon fontSize="small" />
-                </IconButton>
-              </Tooltip>
               {demoOptions.hideEditButton ? null : (
                 <Tooltip
                   classes={{ popper: classes.tooltip }}
@@ -385,14 +369,32 @@ function Demo(props) {
                 >
                   <IconButton
                     aria-label={t('codesandbox')}
-                    data-ga-event-category={gaCategory}
+                    data-ga-event-category="demo"
+                    data-ga-event-label={demoOptions.demo}
                     data-ga-event-action="codesandbox"
                     onClick={handleClickCodeSandbox}
                   >
                     <EditIcon fontSize="small" />
                   </IconButton>
                 </Tooltip>
               )}
+              <Tooltip
+                classes={{ popper: classes.tooltip }}
+                title={t('viewGitHub')}
+                placement="top"
+              >
+                <IconButton
+                  aria-label={t('viewGitHub')}
+                  data-ga-event-category="demo"
+                  data-ga-event-label={demoOptions.demo}
+                  data-ga-event-action="github"
+                  href={demoData.githubLocation}
+                  target="_blank"
+                  rel="noopener nofollow"
+                >
+                  <GitHubIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
               <IconButton
                 onClick={handleClickMore}
                 aria-owns={anchorEl ? 'demo-menu-more' : undefined}
@@ -417,30 +419,34 @@ function Demo(props) {
                 }}
               >
                 <MenuItem
-                  data-ga-event-category={gaCategory}
+                  data-ga-event-category="demo"
+                  data-ga-event-label={demoOptions.demo}
                   data-ga-event-action="copy"
                   onClick={handleClickCopy}
                 >
                   {t('copySource')}
                 </MenuItem>
                 {demoOptions.hideEditButton ? null : (
                   <MenuItem
-                    data-ga-event-category={gaCategory}
+                    data-ga-event-category="demo"
+                    data-ga-event-label={demoOptions.demo}
                     data-ga-event-action="stackblitz"
                     onClick={handleClickStackBlitz}
                   >
                     {t('stackblitz')}
                   </MenuItem>
                 )}
                 <MenuItem
-                  data-ga-event-category={gaCategory}
+                  data-ga-event-category="demo"
+                  data-ga-event-label={demoOptions.demo}
                   data-ga-event-action="copy-js-source-link"
                   onClick={createHandleCodeSourceLink(`${demoName}.js`)}
                 >
                   {t('copySourceLinkJS')}
                 </MenuItem>
                 <MenuItem
-                  data-ga-event-category={gaCategory}
+                  data-ga-event-category="demo"
+                  data-ga-event-label={demoOptions.demo}
                   data-ga-event-action="copy-ts-source-link"
                   onClick={createHandleCodeSourceLink(`${demoName}.tsx`)}
                 >

docs/src/modules/components/DemoLanguages.js

@@ -18,7 +18,7 @@ const styles = {
 };
 
 function DemoLanguages(props) {
-  const { classes, codeOpen, codeVariant, demo, gaEventCategory, onLanguageClick } = props;
+  const { classes, codeOpen, codeVariant, demo, gaEventLabel, onLanguageClick } = props;
   const hasTSVariant = demo.rawTS;
   const t = useSelector(state => state.options.t);
 
@@ -41,8 +41,9 @@ function DemoLanguages(props) {
           className={classes.toggleButton}
           value={CODE_VARIANTS.JS}
           aria-label={t('showJSSource')}
-          data-ga-event-category={gaEventCategory}
+          data-ga-event-category="demo"
           data-ga-event-action="source-js"
+          data-ga-event-label={gaEventLabel}
         >
           <JavaScriptIcon />
         </ToggleButton>
@@ -51,8 +52,9 @@ function DemoLanguages(props) {
           value={CODE_VARIANTS.TS}
           disabled={!hasTSVariant}
           aria-label={t('showTSSource')}
-          data-ga-event-category={gaEventCategory}
+          data-ga-event-category="demo"
           data-ga-event-action="source-ts"
+          data-ga-event-label={gaEventLabel}
         >
           <TypeScriptIcon />
         </ToggleButton>
@@ -66,7 +68,7 @@ DemoLanguages.propTypes = {
   codeOpen: PropTypes.bool.isRequired,
   codeVariant: PropTypes.string.isRequired,
   demo: PropTypes.object.isRequired,
-  gaEventCategory: PropTypes.string.isRequired,
+  gaEventLabel: PropTypes.string.isRequired,
   onLanguageClick: PropTypes.func,
 };
 

docs/src/modules/components/GoogleAnalytics.js

@@ -10,10 +10,9 @@ import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 //   Foo
 // </Button>
 function handleClick(event) {
-  const rootNode = document;
   let element = event.target;
 
-  while (element && element !== rootNode) {
+  while (element && element !== document) {
     const category = element.getAttribute('data-ga-event-category');
 
     // We reach a tracking element, no need to look higher in the dom tree.

docs/src/modules/components/MarkdownDocs.js

@@ -177,6 +177,11 @@ function MarkdownDocs(props) {
           <Ad />
         </Portal>
       )}
+      <svg style={{ display: 'none' }} xmlns="http://www.w3.org/2000/svg">
+        <symbol id="anchor-link-icon" viewBox="0 0 16 16">
+          <path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" />
+        </symbol>
+      </svg>
       <AppContent disableAd={disableAd} disableToc={disableToc}>
         {!disableEdit ? (
           <div className={classes.header}>

docs/src/modules/components/MarkdownElement.js

@@ -27,16 +27,15 @@ renderer.heading = (text, level) => {
   }
 
   // eslint-disable-next-line no-underscore-dangle
-  const escapedText = textToHash(text, global.__MARKED_UNIQUE__);
+  const hash = textToHash(text, global.__MARKED_UNIQUE__);
 
   return [
     `<h${level}>`,
-    `<a class="anchor-link" id="${escapedText}"></a>${text}`,
-    typeof window !== 'undefined'
-      ? `<a class="anchor-link-style" aria-label="anchor" href="#${escapedText}">` +
-        `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg>` +
-        `</a>`
-      : null,
+    `<a class="anchor-link" id="${hash}"></a>`,
+    text,
+    `<a class="anchor-link-style" aria-hidden="true" href="#${hash}">`,
+    '<svg><use xlink:href="#anchor-link-icon" /></svg>',
+    '</a>',
     `</h${level}>`,
   ].join('');
 };
@@ -48,6 +47,7 @@ const externs = [
   'https://materialdesignicons.com/',
   'https://www.w3.org/',
   'https://devexpress.github.io/',
+  'https://ui-kit.co/',
 ];
 
 renderer.link = (href, title, text) => {

docs/src/pages/discover-more/related-projects/related-projects.md

@@ -9,7 +9,9 @@ Feel free to submit a pull request to add another project; it will be accepted i
 ## Design resources
 
 - **Sketch**: [Material Theme Editor](https://material.io/resources/theme-editor/) for Material Design made by Google.
-- **Figma**: [Figma UI Kit](https://material.5ly.co/) for Material-UI made by Fively Team.
+- **Figma**:
+  - https://material.5ly.co/ for Material-UI made by Fively Team.
+  - https://ui-kit.co/ a starter kit for your Material Design 2 project.
 - **Framer**: [Framer X Kit](https://packages.framer.com/package/material-ui/material-ui) for Material-UI.
 
 You didn't find the design assets your team is looking for? Let us know!

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

@@ -44,7 +44,7 @@ Here are some recommended resources, some of which are free.
 - **React Material-UI Cookbook**: Build modern-day applications by implementing Material Design principles in React, using Material-UI.
   - 📘 [The book](https://www.amazon.com/gp/product/1789615224/)
 
-[![cookbook](/static/blog/material-ui-v4-is-out/cookbook.png)](https://www.amazon.com/gp/product/1789615224/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1789615224&linkCode=as2&tag=oliviertassin-20&linkId=79aec1cb9db829135838614ac1953380)
+[![cookbook](/static/blog/material-ui-v4-is-out/cookbook.png)](https://www.amazon.com/gp/product/1789615224/)
 
 - **Builder Book**: Learn how to build a full-stack JavaScript web application from scratch, using a Modern JavaScript stack and Material-UI.
   - 📘 [The book](https://builderbook.org/book)

docs/src/pages/guides/composition/ButtonRouter.js

@@ -3,23 +3,19 @@ import { MemoryRouter as Router } from 'react-router';
 import { Link as RouterLink } from 'react-router-dom';
 import Button from '@material-ui/core/Button';
 
-// The use of React.forwardRef will no longer be required for react-router-dom v6.
-// See https://github.com/ReactTraining/react-router/issues/6056
-const Link1 = React.forwardRef((props, ref) => <RouterLink innerRef={ref} {...props} />);
-
-const Link2 = React.forwardRef((props, ref) => (
-  <RouterLink innerRef={ref} to="/getting-started/installation/" {...props} />
+const LinkBehavior = React.forwardRef((props, ref) => (
+  <RouterLink ref={ref} to="/getting-started/installation/" {...props} />
 ));
 
 export default function ButtonRouter() {
   return (
     <Router>
       <div>
-        <Button color="primary" component={Link1} to="/">
+        <Button color="primary" component={RouterLink} to="/">
           With prop forwarding
         </Button>
         <br />
-        <Button color="primary" component={Link2}>
+        <Button color="primary" component={LinkBehavior}>
           Without prop forwarding
         </Button>
       </div>