From f227ca9c76c0f9e9aecd712641ee211e632e3fe5 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 22 Dec 2019 16:23:14 +0100
Subject: [PATCH 1/8] [blog] Fix typo

---
 CHANGELOG.md                            | 2 +-
 README.md                               | 2 +-
 docs/pages/blog/november-2019-update.md | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 39c8c911adf397..70f5866d37c185 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,7 +16,6 @@ Here are some highlights ✨:
 
 ### `@material-ui/core@v4.8.0`
 
-- [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/lab@v4.0.0-alpha.36`
 
+- [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
diff --git a/README.md b/README.md
index bb70907cb9ec55..b8905d8bf68569 100644
--- a/README.md
+++ b/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)
diff --git a/docs/pages/blog/november-2019-update.md b/docs/pages/blog/november-2019-update.md
index 8f0650331dcc62..1d66ab632419a6 100644
--- a/docs/pages/blog/november-2019-update.md
+++ b/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:
 

From d738178b151f56fd0048e80d73bc2f9a2340a710 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 22 Dec 2019 16:28:01 +0100
Subject: [PATCH 2/8] [test] Use strict mode by default

---
 packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js  | 2 +-
 packages/material-ui-lab/src/Rating/Rating.test.js              | 2 +-
 packages/material-ui-lab/src/Skeleton/Skeleton.test.js          | 2 +-
 packages/material-ui-lab/src/ToggleButton/ToggleButton.test.js  | 2 +-
 .../src/ToggleButtonGroup/ToggleButtonGroup.test.js             | 2 +-
 .../material-ui-styles/src/ThemeProvider/ThemeProvider.test.js  | 2 +-
 .../src/BottomNavigationAction/BottomNavigationAction.test.js   | 2 +-
 packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js        | 2 +-
 packages/material-ui/src/Button/Button.test.js                  | 2 +-
 packages/material-ui/src/ButtonBase/ButtonBase.test.js          | 2 +-
 packages/material-ui/src/ButtonBase/Ripple.test.js              | 2 +-
 packages/material-ui/src/ButtonBase/TouchRipple.test.js         | 2 +-
 packages/material-ui/src/Chip/Chip.test.js                      | 2 +-
 .../src/ExpansionPanelSummary/ExpansionPanelSummary.test.js     | 2 +-
 packages/material-ui/src/FilledInput/FilledInput.test.js        | 2 +-
 packages/material-ui/src/FormControl/FormControl.test.js        | 2 +-
 packages/material-ui/src/FormHelperText/FormHelperText.test.js  | 2 +-
 packages/material-ui/src/FormLabel/FormLabel.test.js            | 2 +-
 packages/material-ui/src/InputAdornment/InputAdornment.test.js  | 2 +-
 packages/material-ui/src/InputBase/InputBase.test.js            | 2 +-
 packages/material-ui/src/InputLabel/InputLabel.test.js          | 2 +-
 packages/material-ui/src/MenuList/MenuList.test.js              | 2 +-
 packages/material-ui/src/OutlinedInput/NotchedOutline.test.js   | 2 +-
 packages/material-ui/src/OutlinedInput/OutlinedInput.test.js    | 2 +-
 packages/material-ui/src/Popper/Popper.test.js                  | 2 +-
 packages/material-ui/src/Portal/Portal.test.js                  | 2 +-
 packages/material-ui/src/Slider/Slider.test.js                  | 2 +-
 .../material-ui/src/SnackbarContent/SnackbarContent.test.js     | 2 +-
 packages/material-ui/src/Switch/Switch.test.js                  | 2 +-
 packages/material-ui/src/Tab/Tab.test.js                        | 2 +-
 packages/material-ui/src/Table/Table.test.js                    | 2 +-
 packages/material-ui/src/Tabs/Tabs.test.js                      | 2 +-
 packages/material-ui/src/TextField/TextField.test.js            | 2 +-
 packages/material-ui/src/Toolbar/Toolbar.test.js                | 2 +-
 packages/material-ui/src/internal/SwitchBase.test.js            | 2 +-
 packages/material-ui/src/useMediaQuery/useMediaQuery.test.js    | 2 +-
 packages/material-ui/test/integration/MenuList.test.js          | 2 +-
 test/utils/createClientRender.js                                | 2 +-
 38 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
index f472bbc8dd1557..b7beddd0401445 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
@@ -11,7 +11,7 @@ import TextField from '@material-ui/core/TextField';
 describe('<Autocomplete />', () => {
   let mount;
   let classes;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
 
   before(() => {
     classes = getClasses(<Autocomplete renderInput={() => null} />);
diff --git a/packages/material-ui-lab/src/Rating/Rating.test.js b/packages/material-ui-lab/src/Rating/Rating.test.js
index 975b29f8acf94b..17baf3b1b6184b 100644
--- a/packages/material-ui-lab/src/Rating/Rating.test.js
+++ b/packages/material-ui-lab/src/Rating/Rating.test.js
@@ -8,7 +8,7 @@ import Rating from './Rating';
 
 describe('<Rating />', () => {
   let mount;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
   let classes;
   const defaultProps = {
     name: 'rating-test',
diff --git a/packages/material-ui-lab/src/Skeleton/Skeleton.test.js b/packages/material-ui-lab/src/Skeleton/Skeleton.test.js
index 69c76644c4bcf4..502c377c676722 100644
--- a/packages/material-ui-lab/src/Skeleton/Skeleton.test.js
+++ b/packages/material-ui-lab/src/Skeleton/Skeleton.test.js
@@ -7,7 +7,7 @@ import Skeleton from './Skeleton';
 
 describe('<Skeleton />', () => {
   let mount;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
   let classes;
 
   before(() => {
diff --git a/packages/material-ui-lab/src/ToggleButton/ToggleButton.test.js b/packages/material-ui-lab/src/ToggleButton/ToggleButton.test.js
index e6e6cc1f9ab16f..625bcd01e229c9 100644
--- a/packages/material-ui-lab/src/ToggleButton/ToggleButton.test.js
+++ b/packages/material-ui-lab/src/ToggleButton/ToggleButton.test.js
@@ -11,7 +11,7 @@ import ToggleButton from './ToggleButton';
 describe('<ToggleButton />', () => {
   let mount;
   let classes;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
 
   before(() => {
     mount = createMount({ strict: true });
diff --git a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.test.js b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.test.js
index 3938874ceeaa88..aea6e4110f9a98 100644
--- a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.test.js
+++ b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.test.js
@@ -10,7 +10,7 @@ import ToggleButton from '../ToggleButton';
 describe('<ToggleButtonGroup />', () => {
   let mount;
   let classes;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
 
   before(() => {
     mount = createMount({ strict: true });
diff --git a/packages/material-ui-styles/src/ThemeProvider/ThemeProvider.test.js b/packages/material-ui-styles/src/ThemeProvider/ThemeProvider.test.js
index cb5fee6d0e0561..9737def1c5f483 100644
--- a/packages/material-ui-styles/src/ThemeProvider/ThemeProvider.test.js
+++ b/packages/material-ui-styles/src/ThemeProvider/ThemeProvider.test.js
@@ -9,7 +9,7 @@ import ThemeProvider from './ThemeProvider';
 
 describe('ThemeProvider', () => {
   let mount;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
 
   before(() => {
     mount = createMount({ strict: true });
diff --git a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.test.js b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.test.js
index 1ee881774ac0f9..c1da0e0d2ab2f0 100644
--- a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.test.js
+++ b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.test.js
@@ -10,7 +10,7 @@ import BottomNavigationAction from './BottomNavigationAction';
 describe('<BottomNavigationAction />', () => {
   let mount;
   let classes;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
 
   before(() => {
     mount = createMount({ strict: true });
diff --git a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js
index cd0f64b5a7f10f..4e5730a1c4fc94 100644
--- a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js
+++ b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js
@@ -9,7 +9,7 @@ import { createClientRender } from 'test/utils/createClientRender';
 describe('<Breadcrumbs />', () => {
   let mount;
   let classes;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
 
   before(() => {
     mount = createMount({ strict: true });
diff --git a/packages/material-ui/src/Button/Button.test.js b/packages/material-ui/src/Button/Button.test.js
index 95761fc30f8a35..3236e7dec60d17 100644
--- a/packages/material-ui/src/Button/Button.test.js
+++ b/packages/material-ui/src/Button/Button.test.js
@@ -9,7 +9,7 @@ import ButtonBase from '../ButtonBase';
 
 describe('<Button />', () => {
   let mount;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
   let classes;
 
   before(() => {
diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.test.js b/packages/material-ui/src/ButtonBase/ButtonBase.test.js
index 8e14fc542417ad..cc7e2e1022fc38 100644
--- a/packages/material-ui/src/ButtonBase/ButtonBase.test.js
+++ b/packages/material-ui/src/ButtonBase/ButtonBase.test.js
@@ -28,7 +28,7 @@ function simulatePointerDevice() {
 }
 
 describe('<ButtonBase />', () => {
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
   /**
    * @type {ReturnType<typeof createMount>}
    */
diff --git a/packages/material-ui/src/ButtonBase/Ripple.test.js b/packages/material-ui/src/ButtonBase/Ripple.test.js
index c3340110f7eac6..4b024f8f88c007 100644
--- a/packages/material-ui/src/ButtonBase/Ripple.test.js
+++ b/packages/material-ui/src/ButtonBase/Ripple.test.js
@@ -8,7 +8,7 @@ import Ripple from './Ripple';
 
 describe('<Ripple />', () => {
   let classes;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
 
   before(() => {
     classes = getClasses(<TouchRipple />);
diff --git a/packages/material-ui/src/ButtonBase/TouchRipple.test.js b/packages/material-ui/src/ButtonBase/TouchRipple.test.js
index be021626020b9d..64b9ada9ce3662 100644
--- a/packages/material-ui/src/ButtonBase/TouchRipple.test.js
+++ b/packages/material-ui/src/ButtonBase/TouchRipple.test.js
@@ -11,7 +11,7 @@ const cb = () => {};
 describe('<TouchRipple />', () => {
   let classes;
   let mount;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
 
   /**
    * @param {object} other props to spread to TouchRipple
diff --git a/packages/material-ui/src/Chip/Chip.test.js b/packages/material-ui/src/Chip/Chip.test.js
index 669213487dba1e..395af5fc17392e 100644
--- a/packages/material-ui/src/Chip/Chip.test.js
+++ b/packages/material-ui/src/Chip/Chip.test.js
@@ -11,7 +11,7 @@ import Chip from './Chip';
 describe('<Chip />', () => {
   let classes;
   let mount;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
 
   before(() => {
     classes = getClasses(<Chip />);
diff --git a/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.test.js b/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.test.js
index 313c0744510607..16da76cde25223 100644
--- a/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.test.js
+++ b/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.test.js
@@ -11,7 +11,7 @@ import ButtonBase from '../ButtonBase';
 describe('<ExpansionPanelSummary />', () => {
   let mount;
   let classes;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
 
   before(() => {
     // requires mocking the TransitionComponent of `ExpansionPanel`
diff --git a/packages/material-ui/src/FilledInput/FilledInput.test.js b/packages/material-ui/src/FilledInput/FilledInput.test.js
index d515334e000b4c..b11900870bd7c9 100644
--- a/packages/material-ui/src/FilledInput/FilledInput.test.js
+++ b/packages/material-ui/src/FilledInput/FilledInput.test.js
@@ -9,7 +9,7 @@ import InputBase from '../InputBase';
 describe('<FilledInput />', () => {
   let classes;
   let mount;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
 
   before(() => {
     mount = createMount({ strict: true });
diff --git a/packages/material-ui/src/FormControl/FormControl.test.js b/packages/material-ui/src/FormControl/FormControl.test.js
index b096c63c091037..617275af8be094 100644
--- a/packages/material-ui/src/FormControl/FormControl.test.js
+++ b/packages/material-ui/src/FormControl/FormControl.test.js
@@ -11,7 +11,7 @@ import useFormControl from './useFormControl';
 
 describe('<FormControl />', () => {
   let mount;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
   let classes;
 
   function TestComponent(props) {
diff --git a/packages/material-ui/src/FormHelperText/FormHelperText.test.js b/packages/material-ui/src/FormHelperText/FormHelperText.test.js
index bad7d1a372c9b0..141283d2e5e2dd 100644
--- a/packages/material-ui/src/FormHelperText/FormHelperText.test.js
+++ b/packages/material-ui/src/FormHelperText/FormHelperText.test.js
@@ -8,7 +8,7 @@ import FormControl from '../FormControl';
 
 describe('<FormHelperText />', () => {
   let mount;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
   let classes;
 
   before(() => {
diff --git a/packages/material-ui/src/FormLabel/FormLabel.test.js b/packages/material-ui/src/FormLabel/FormLabel.test.js
index 7bc52adca85a7e..110565d72e1f67 100644
--- a/packages/material-ui/src/FormLabel/FormLabel.test.js
+++ b/packages/material-ui/src/FormLabel/FormLabel.test.js
@@ -9,7 +9,7 @@ import FormControl, { useFormControl } from '../FormControl';
 
 describe('<FormLabel />', () => {
   let mount;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
   let classes;
 
   before(() => {
diff --git a/packages/material-ui/src/InputAdornment/InputAdornment.test.js b/packages/material-ui/src/InputAdornment/InputAdornment.test.js
index 7ef12075d9b51f..ab3836d3bf1bd8 100644
--- a/packages/material-ui/src/InputAdornment/InputAdornment.test.js
+++ b/packages/material-ui/src/InputAdornment/InputAdornment.test.js
@@ -12,7 +12,7 @@ import Input from '../Input';
 
 describe('<InputAdornment />', () => {
   let mount;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
   let classes;
 
   before(() => {
diff --git a/packages/material-ui/src/InputBase/InputBase.test.js b/packages/material-ui/src/InputBase/InputBase.test.js
index 64d037d97fcf40..a7ed68b9f065a2 100644
--- a/packages/material-ui/src/InputBase/InputBase.test.js
+++ b/packages/material-ui/src/InputBase/InputBase.test.js
@@ -16,7 +16,7 @@ import Select from '../Select';
 describe('<InputBase />', () => {
   let classes;
   let mount;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
 
   before(() => {
     mount = createMount({ strict: true });
diff --git a/packages/material-ui/src/InputLabel/InputLabel.test.js b/packages/material-ui/src/InputLabel/InputLabel.test.js
index 56540aec20d6a2..15bfb40ef64b83 100644
--- a/packages/material-ui/src/InputLabel/InputLabel.test.js
+++ b/packages/material-ui/src/InputLabel/InputLabel.test.js
@@ -11,7 +11,7 @@ import FormLabel from '../FormLabel';
 
 describe('<InputLabel />', () => {
   let mount;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
   let classes;
 
   before(() => {
diff --git a/packages/material-ui/src/MenuList/MenuList.test.js b/packages/material-ui/src/MenuList/MenuList.test.js
index ee1fcbc5e9c4eb..ef39fe16de92a1 100644
--- a/packages/material-ui/src/MenuList/MenuList.test.js
+++ b/packages/material-ui/src/MenuList/MenuList.test.js
@@ -20,7 +20,7 @@ function setStyleWidthForJsdomOrBrowser(style, width) {
 
 describe('<MenuList />', () => {
   let mount;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
 
   before(() => {
     mount = createMount({ strict: true });
diff --git a/packages/material-ui/src/OutlinedInput/NotchedOutline.test.js b/packages/material-ui/src/OutlinedInput/NotchedOutline.test.js
index 34d0e8fb8e94ca..c4b2b926da1bea 100644
--- a/packages/material-ui/src/OutlinedInput/NotchedOutline.test.js
+++ b/packages/material-ui/src/OutlinedInput/NotchedOutline.test.js
@@ -6,7 +6,7 @@ import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import NotchedOutline from './NotchedOutline';
 
 describe('<NotchedOutline />', () => {
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
 
   let classes;
   const defaultProps = {
diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.test.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.test.js
index 04938223b3e239..76a007c80a4e9a 100644
--- a/packages/material-ui/src/OutlinedInput/OutlinedInput.test.js
+++ b/packages/material-ui/src/OutlinedInput/OutlinedInput.test.js
@@ -9,7 +9,7 @@ import InputBase from '../InputBase';
 describe('<OutlinedInput />', () => {
   let classes;
   let mount;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
 
   before(() => {
     classes = getClasses(<OutlinedInput />);
diff --git a/packages/material-ui/src/Popper/Popper.test.js b/packages/material-ui/src/Popper/Popper.test.js
index b89cad3fd977a9..432fc03df4afb6 100644
--- a/packages/material-ui/src/Popper/Popper.test.js
+++ b/packages/material-ui/src/Popper/Popper.test.js
@@ -14,7 +14,7 @@ import Popper from './Popper';
 describe('<Popper />', () => {
   let mount;
   let rtlTheme;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
   const defaultProps = {
     anchorEl: () => document.createElement('svg'),
     children: <span>Hello World</span>,
diff --git a/packages/material-ui/src/Portal/Portal.test.js b/packages/material-ui/src/Portal/Portal.test.js
index 182f7a5eaab40d..69d81f5b730bf0 100644
--- a/packages/material-ui/src/Portal/Portal.test.js
+++ b/packages/material-ui/src/Portal/Portal.test.js
@@ -9,7 +9,7 @@ import Portal from './Portal';
 
 describe('<Portal />', () => {
   const serverRender = createServerRender();
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
 
   describe('server-side', () => {
     // Only run the test on node.
diff --git a/packages/material-ui/src/Slider/Slider.test.js b/packages/material-ui/src/Slider/Slider.test.js
index b7161f924cce7c..d87129d6b9b469 100644
--- a/packages/material-ui/src/Slider/Slider.test.js
+++ b/packages/material-ui/src/Slider/Slider.test.js
@@ -29,7 +29,7 @@ describe('<Slider />', () => {
 
   let mount;
   let classes;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
 
   before(() => {
     classes = getClasses(<Slider value={0} />);
diff --git a/packages/material-ui/src/SnackbarContent/SnackbarContent.test.js b/packages/material-ui/src/SnackbarContent/SnackbarContent.test.js
index 82909ea5b6ca05..2a995ac1cc4f74 100644
--- a/packages/material-ui/src/SnackbarContent/SnackbarContent.test.js
+++ b/packages/material-ui/src/SnackbarContent/SnackbarContent.test.js
@@ -9,7 +9,7 @@ import SnackbarContent from './SnackbarContent';
 describe('<SnackbarContent />', () => {
   let mount;
   let classes;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
 
   before(() => {
     mount = createMount({ strict: true });
diff --git a/packages/material-ui/src/Switch/Switch.test.js b/packages/material-ui/src/Switch/Switch.test.js
index 0887e9bf115aad..01531dfe29f043 100644
--- a/packages/material-ui/src/Switch/Switch.test.js
+++ b/packages/material-ui/src/Switch/Switch.test.js
@@ -8,7 +8,7 @@ import Switch from './Switch';
 describe('<Switch />', () => {
   let mount;
   let classes;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
 
   before(() => {
     mount = createMount({ strict: true });
diff --git a/packages/material-ui/src/Tab/Tab.test.js b/packages/material-ui/src/Tab/Tab.test.js
index cddc3dac1cf76c..272771b4d1ccda 100644
--- a/packages/material-ui/src/Tab/Tab.test.js
+++ b/packages/material-ui/src/Tab/Tab.test.js
@@ -7,7 +7,7 @@ import { act, createClientRender, fireEvent } from 'test/utils/createClientRende
 import Tab from './Tab';
 import ButtonBase from '../ButtonBase';
 
-const render = createClientRender({ strict: true });
+const render = createClientRender();
 
 describe('<Tab />', () => {
   let mount;
diff --git a/packages/material-ui/src/Table/Table.test.js b/packages/material-ui/src/Table/Table.test.js
index 4de7a957469e0e..91a6d34e9e5900 100644
--- a/packages/material-ui/src/Table/Table.test.js
+++ b/packages/material-ui/src/Table/Table.test.js
@@ -8,7 +8,7 @@ import TableContext from './TableContext';
 
 describe('<Table />', () => {
   let mount;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
   let classes;
 
   before(() => {
diff --git a/packages/material-ui/src/Tabs/Tabs.test.js b/packages/material-ui/src/Tabs/Tabs.test.js
index 0b5ae1b461aa23..31ab67f803233b 100644
--- a/packages/material-ui/src/Tabs/Tabs.test.js
+++ b/packages/material-ui/src/Tabs/Tabs.test.js
@@ -36,7 +36,7 @@ describe('<Tabs />', () => {
 
   let mount;
   let classes;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
 
   before(() => {
     classes = getClasses(<Tabs value={0} />);
diff --git a/packages/material-ui/src/TextField/TextField.test.js b/packages/material-ui/src/TextField/TextField.test.js
index ddb2ea49d90989..28bd6c429fa4f2 100644
--- a/packages/material-ui/src/TextField/TextField.test.js
+++ b/packages/material-ui/src/TextField/TextField.test.js
@@ -12,7 +12,7 @@ import MenuItem from '../MenuItem';
 describe('<TextField />', () => {
   let classes;
   let mount;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
 
   before(() => {
     classes = getClasses(<TextField />);
diff --git a/packages/material-ui/src/Toolbar/Toolbar.test.js b/packages/material-ui/src/Toolbar/Toolbar.test.js
index 44f77b2b6341a0..3eadba2f362adc 100644
--- a/packages/material-ui/src/Toolbar/Toolbar.test.js
+++ b/packages/material-ui/src/Toolbar/Toolbar.test.js
@@ -7,7 +7,7 @@ import Toolbar from './Toolbar';
 
 describe('<Toolbar />', () => {
   let mount;
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
   let classes;
 
   before(() => {
diff --git a/packages/material-ui/src/internal/SwitchBase.test.js b/packages/material-ui/src/internal/SwitchBase.test.js
index 0281bcb6ab64eb..f7b7e6139a835e 100644
--- a/packages/material-ui/src/internal/SwitchBase.test.js
+++ b/packages/material-ui/src/internal/SwitchBase.test.js
@@ -19,7 +19,7 @@ const shouldSuccessOnce = name => func => () => {
 };
 
 describe('<SwitchBase />', () => {
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
   let mount;
   let classes;
 
diff --git a/packages/material-ui/src/useMediaQuery/useMediaQuery.test.js b/packages/material-ui/src/useMediaQuery/useMediaQuery.test.js
index 163816a0bfaead..2fa2ce1b1c06ad 100644
--- a/packages/material-ui/src/useMediaQuery/useMediaQuery.test.js
+++ b/packages/material-ui/src/useMediaQuery/useMediaQuery.test.js
@@ -41,7 +41,7 @@ describe('useMediaQuery', () => {
     return;
   }
 
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
   let values;
 
   beforeEach(() => {
diff --git a/packages/material-ui/test/integration/MenuList.test.js b/packages/material-ui/test/integration/MenuList.test.js
index 2db3185ccdb332..40975410bef2ba 100644
--- a/packages/material-ui/test/integration/MenuList.test.js
+++ b/packages/material-ui/test/integration/MenuList.test.js
@@ -7,7 +7,7 @@ import Divider from '@material-ui/core/Divider';
 import { createClientRender, fireEvent } from 'test/utils/createClientRender';
 
 describe('<MenuList> integration', () => {
-  const render = createClientRender({ strict: true });
+  const render = createClientRender();
 
   if (/Chrome\/49\.0/.test(window.navigator.userAgent)) {
     // fails repeatedly on chrome 49 in karma but works when manually testing
diff --git a/test/utils/createClientRender.js b/test/utils/createClientRender.js
index c21c8a8d26d855..945c6df035b993 100644
--- a/test/utils/createClientRender.js
+++ b/test/utils/createClientRender.js
@@ -37,7 +37,7 @@ const customQueries = { queryDescriptionOf, getDescriptionOf, findDescriptionOf
  * TODO: type return RenderResult in setProps
  */
 function clientRender(element, options = {}) {
-  const { baseElement, strict = false, wrapper: InnerWrapper = React.Fragment } = options;
+  const { baseElement, strict = true, wrapper: InnerWrapper = React.Fragment } = options;
 
   const Mode = strict ? React.StrictMode : React.Fragment;
   function Wrapper({ children }) {

From 998a0f5a9455f460b98188e1da3caaaafdbcdae1 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 22 Dec 2019 20:02:03 +0100
Subject: [PATCH 3/8] [LinearProgress] Use shorthand notation

---
 packages/material-ui/src/LinearProgress/LinearProgress.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/material-ui/src/LinearProgress/LinearProgress.js b/packages/material-ui/src/LinearProgress/LinearProgress.js
index d1e75484d4a0f3..e45ddd6d6eb7b9 100644
--- a/packages/material-ui/src/LinearProgress/LinearProgress.js
+++ b/packages/material-ui/src/LinearProgress/LinearProgress.js
@@ -97,8 +97,7 @@ export const styles = theme => {
     /* Styles applied to the bar2 element if `variant="indeterminate or query"`. */
     bar2Indeterminate: {
       width: 'auto',
-      animation: '$indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite',
-      animationDelay: '1.15s',
+      animation: '$indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite',
     },
     /* Styles applied to the bar2 element if `variant="buffer"`. */
     bar2Buffer: {

From 7370811b8daa2b555445b8df4ab8e6d0b3cd3dd3 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 22 Dec 2019 22:05:53 +0100
Subject: [PATCH 4/8] [Avatar] Handle transparent images

---
 packages/material-ui/src/Avatar/Avatar.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/material-ui/src/Avatar/Avatar.js b/packages/material-ui/src/Avatar/Avatar.js
index 9505a20f6ba73b..ff28b170e71458 100644
--- a/packages/material-ui/src/Avatar/Avatar.js
+++ b/packages/material-ui/src/Avatar/Avatar.js
@@ -46,8 +46,6 @@ export const styles = theme => ({
     objectFit: 'cover',
     // Hide alt text.
     color: 'transparent',
-    // Same color as the Skeleton.
-    backgroundColor: theme.palette.action.hover,
     // Hide the image broken icon, only works on Chrome.
     textIndent: 10000,
   },

From ab210f815c1c45e88aa38d9b20f2ae91a6bd82fe Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 22 Dec 2019 22:16:51 +0100
Subject: [PATCH 5/8] [docs] Link https://ui-kit.co/

---
 docs/src/modules/components/MarkdownElement.js                | 1 +
 .../pages/discover-more/related-projects/related-projects.md  | 4 +++-
 docs/src/pages/getting-started/learn/learn.md                 | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index 00db78fa2807bc..01f801e60bfa9f 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -48,6 +48,7 @@ const externs = [
   'https://materialdesignicons.com/',
   'https://www.w3.org/',
   'https://devexpress.github.io/',
+  'https://ui-kit.co/',
 ];
 
 renderer.link = (href, title, text) => {
diff --git a/docs/src/pages/discover-more/related-projects/related-projects.md b/docs/src/pages/discover-more/related-projects/related-projects.md
index 1d1561dd7c8d16..6c70940679ba29 100644
--- a/docs/src/pages/discover-more/related-projects/related-projects.md
+++ b/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!
diff --git a/docs/src/pages/getting-started/learn/learn.md b/docs/src/pages/getting-started/learn/learn.md
index 77b35766337564..2340c2d87eeff3 100644
--- a/docs/src/pages/getting-started/learn/learn.md
+++ b/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)

From d434dbb620dbe5fc8c27ccad8f5416cdc1a602f7 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Mon, 23 Dec 2019 12:26:15 +0100
Subject: [PATCH 6/8] Use ref instead of innerRef

Available since https://github.com/ReactTraining/react-router/pull/6914, react-router v5.1.0.
---
 docs/src/pages/guides/composition/ButtonRouter.js  | 12 ++++--------
 docs/src/pages/guides/composition/ButtonRouter.tsx | 14 ++++----------
 docs/src/pages/guides/composition/LinkRouter.js    | 12 ++++--------
 docs/src/pages/guides/composition/LinkRouter.tsx   | 14 ++++----------
 docs/src/pages/guides/composition/ListRouter.js    |  7 +------
 docs/src/pages/guides/composition/ListRouter.tsx   | 10 +++-------
 docs/src/pages/guides/composition/composition.md   |  4 +---
 7 files changed, 21 insertions(+), 52 deletions(-)

diff --git a/docs/src/pages/guides/composition/ButtonRouter.js b/docs/src/pages/guides/composition/ButtonRouter.js
index 6949b1099d7644..00482c035bab9f 100644
--- a/docs/src/pages/guides/composition/ButtonRouter.js
+++ b/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>
diff --git a/docs/src/pages/guides/composition/ButtonRouter.tsx b/docs/src/pages/guides/composition/ButtonRouter.tsx
index 0e4785bd4fc2cc..bbb617307f3be2 100644
--- a/docs/src/pages/guides/composition/ButtonRouter.tsx
+++ b/docs/src/pages/guides/composition/ButtonRouter.tsx
@@ -4,25 +4,19 @@ import { Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-d
 import Button from '@material-ui/core/Button';
 import { Omit } from '@material-ui/types';
 
-// 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<HTMLAnchorElement, RouterLinkProps>((props, ref) => (
-  <RouterLink innerRef={ref} {...props} />
+const LinkBehavior = React.forwardRef<any, Omit<RouterLinkProps, 'to'>>((props, ref) => (
+  <RouterLink ref={ref} to="/getting-started/installation/" {...props} />
 ));
 
-const Link2 = React.forwardRef<HTMLAnchorElement, Omit<RouterLinkProps, 'innerRef' | 'to'>>(
-  (props, ref) => <RouterLink innerRef={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>
diff --git a/docs/src/pages/guides/composition/LinkRouter.js b/docs/src/pages/guides/composition/LinkRouter.js
index 8880a6cae04a16..57adf56f670d2d 100644
--- a/docs/src/pages/guides/composition/LinkRouter.js
+++ b/docs/src/pages/guides/composition/LinkRouter.js
@@ -4,23 +4,19 @@ import { MemoryRouter as Router } from 'react-router';
 import { Link as RouterLink } from 'react-router-dom';
 import Link from '@material-ui/core/Link';
 
-// 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 LinkRouter() {
   return (
     <Router>
       <div>
-        <Link component={Link1} to="/">
+        <Link component={RouterLink} to="/">
           With prop forwarding
         </Link>
         <br />
-        <Link component={Link2}>Without prop forwarding</Link>
+        <Link component={LinkBehavior}>Without prop forwarding</Link>
       </div>
     </Router>
   );
diff --git a/docs/src/pages/guides/composition/LinkRouter.tsx b/docs/src/pages/guides/composition/LinkRouter.tsx
index ff4467291c4999..79a077fe73d3f1 100644
--- a/docs/src/pages/guides/composition/LinkRouter.tsx
+++ b/docs/src/pages/guides/composition/LinkRouter.tsx
@@ -5,25 +5,19 @@ import { Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-d
 import Link from '@material-ui/core/Link';
 import { Omit } from '@material-ui/types';
 
-// 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<HTMLAnchorElement, RouterLinkProps>((props, ref) => (
-  <RouterLink innerRef={ref} {...props} />
+const LinkBehavior = React.forwardRef<any, Omit<RouterLinkProps, 'to'>>((props, ref) => (
+  <RouterLink ref={ref} to="/getting-started/installation/" {...props} />
 ));
 
-const Link2 = React.forwardRef<HTMLAnchorElement, Omit<RouterLinkProps, 'innerRef' | 'to'>>(
-  (props, ref) => <RouterLink innerRef={ref} to="/getting-started/installation/" {...props} />,
-);
-
 export default function LinkRouter() {
   return (
     <Router>
       <div>
-        <Link component={Link1} to="/">
+        <Link component={RouterLink} to="/">
           With prop forwarding
         </Link>
         <br />
-        <Link component={Link2}>Without prop forwarding</Link>
+        <Link component={LinkBehavior}>Without prop forwarding</Link>
       </div>
     </Router>
   );
diff --git a/docs/src/pages/guides/composition/ListRouter.js b/docs/src/pages/guides/composition/ListRouter.js
index c2fce26daf6f72..62a5cda98879e8 100644
--- a/docs/src/pages/guides/composition/ListRouter.js
+++ b/docs/src/pages/guides/composition/ListRouter.js
@@ -17,12 +17,7 @@ function ListItemLink(props) {
   const { icon, primary, to } = props;
 
   const renderLink = React.useMemo(
-    () =>
-      React.forwardRef((itemProps, ref) => (
-        // With react-router-dom@^6.0.0 use `ref` instead of `innerRef`
-        // See https://github.com/ReactTraining/react-router/issues/6056
-        <RouterLink to={to} {...itemProps} innerRef={ref} />
-      )),
+    () => React.forwardRef((itemProps, ref) => <RouterLink to={to} ref={ref} {...itemProps} />),
     [to],
   );
 
diff --git a/docs/src/pages/guides/composition/ListRouter.tsx b/docs/src/pages/guides/composition/ListRouter.tsx
index 7ecc9ce0d07261..81288fe8c52257 100644
--- a/docs/src/pages/guides/composition/ListRouter.tsx
+++ b/docs/src/pages/guides/composition/ListRouter.tsx
@@ -24,13 +24,9 @@ function ListItemLink(props: ListItemLinkProps) {
 
   const renderLink = React.useMemo(
     () =>
-      React.forwardRef<HTMLAnchorElement, Omit<RouterLinkProps, 'innerRef' | 'to'>>(
-        (itemProps, ref) => (
-          // With react-router-dom@^6.0.0 use `ref` instead of `innerRef`
-          // See https://github.com/ReactTraining/react-router/issues/6056
-          <RouterLink to={to} {...itemProps} innerRef={ref} />
-        ),
-      ),
+      React.forwardRef<any, Omit<RouterLinkProps, 'to'>>((itemProps, ref) => (
+        <RouterLink to={to} ref={ref} {...itemProps} />
+      )),
     [to],
   );
 
diff --git a/docs/src/pages/guides/composition/composition.md b/docs/src/pages/guides/composition/composition.md
index 05d30b1937ee39..a7e9f2eef68136 100644
--- a/docs/src/pages/guides/composition/composition.md
+++ b/docs/src/pages/guides/composition/composition.md
@@ -92,9 +92,7 @@ function ListItemLink(props) {
   const renderLink = React.useMemo(
     () =>
       React.forwardRef((linkProps, ref) => (
-        // With react-router-dom@^6.0.0 use `ref` instead of `innerRef`
-        // See https://github.com/ReactTraining/react-router/issues/6056
-        <Link to={to} {...linkProps} innerRef={ref} />
+        <Link ref={ref} to={to} {...linkProps} />
       )),
     [to],
   );

From b3ec70341726128c8a8fee9bba537ab0c18e93e9 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 22 Dec 2019 20:08:32 +0100
Subject: [PATCH 7/8] remove correlation between codefund/carbon and fallback

---
 docs/src/modules/components/Ad.js             | 50 +++++++++++++++--
 docs/src/modules/components/AdInHouse.js      |  1 +
 docs/src/modules/components/Demo.js           | 54 ++++++++++---------
 docs/src/modules/components/DemoLanguages.js  | 10 ++--
 .../src/modules/components/GoogleAnalytics.js |  3 +-
 5 files changed, 83 insertions(+), 35 deletions(-)

diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js
index 01c7c0f2b32a36..1ae7a9d1237403 100644
--- a/docs/src/modules/components/Ad.js
+++ b/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}
diff --git a/docs/src/modules/components/AdInHouse.js b/docs/src/modules/components/AdInHouse.js
index 1f467accca4da8..237d5706fc80e2 100644
--- a/docs/src/modules/components/AdInHouse.js
+++ b/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}>
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index 7a39b301991b80..672a9b647964cb 100644
--- a/docs/src/modules/components/Demo.js
+++ b/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,7 +352,8 @@ 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'}
@@ -361,22 +361,6 @@ function Demo(props) {
                   <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,7 +369,8 @@ 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}
                   >
@@ -393,6 +378,23 @@ function Demo(props) {
                   </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,7 +419,8 @@ 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}
                 >
@@ -425,7 +428,8 @@ function Demo(props) {
                 </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}
                   >
@@ -433,14 +437,16 @@ function Demo(props) {
                   </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`)}
                 >
diff --git a/docs/src/modules/components/DemoLanguages.js b/docs/src/modules/components/DemoLanguages.js
index 0e917988fadc3d..f5f9b38c18c6eb 100644
--- a/docs/src/modules/components/DemoLanguages.js
+++ b/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,
 };
 
diff --git a/docs/src/modules/components/GoogleAnalytics.js b/docs/src/modules/components/GoogleAnalytics.js
index 1d58556ac2bac3..26fdd1a61aaf2c 100644
--- a/docs/src/modules/components/GoogleAnalytics.js
+++ b/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.

From 4b5baed16abcea600be89e8ab182fbe5eaab2ba3 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Mon, 23 Dec 2019 13:27:23 +0100
Subject: [PATCH 8/8] [docs] Fix hydration error

---
 docs/src/modules/components/MarkdownDocs.js    |  5 +++++
 docs/src/modules/components/MarkdownElement.js | 13 ++++++-------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
index 9a467e25b6deeb..e9bfe485480100 100644
--- a/docs/src/modules/components/MarkdownDocs.js
+++ b/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}>
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index 01f801e60bfa9f..1060b55a3a914b 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/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('');
 };