From 8ba0e5142eb0e6daa7816b4831cca270ae896f30 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Fri, 14 Aug 2020 00:50:20 +0200
Subject: [PATCH] [core] Batch small changes (#22183)

---
 .eslintrc.js                                  |  4 +-
 .github/ISSUE_TEMPLATE/1.bug.md               |  2 +-
 CHANGELOG.md                                  | 20 +++++++--
 docs/scripts/formattedTSDemos.js              |  2 +-
 docs/src/pages/components/chips/chips.md      |  2 +-
 .../pages/components/tree-view/tree-view.md   |  2 +-
 .../pages/guides/migration-v4/migration-v4.md | 41 ++++++++++++++++--
 docs/webpackBaseConfig.js                     | 42 -------------------
 .../src/TreeItem/TreeItem.test.js             |  6 +--
 .../material-ui/scripts/export-coverage.sh    |  6 ---
 .../ClickAwayListener/ClickAwayListener.js    |  2 +-
 packages/material-ui/src/Modal/Modal.js       |  2 +-
 .../typescript-to-proptypes/src/injector.ts   |  2 +-
 .../typescript-to-proptypes/src/parser.ts     |  4 +-
 test/regressions/webpack.config.js            |  2 +-
 test/utils/setupJSDOM.js                      |  2 -
 webpackBaseConfig.js                          | 42 +++++++++++++++++++
 17 files changed, 111 insertions(+), 72 deletions(-)
 delete mode 100644 docs/webpackBaseConfig.js
 delete mode 100755 packages/material-ui/scripts/export-coverage.sh
 create mode 100644 webpackBaseConfig.js

diff --git a/.eslintrc.js b/.eslintrc.js
index 709593603d5138..68a9b935236eb2 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -22,11 +22,11 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 7,
   },
-  plugins: ['material-ui', 'react-hooks', '@typescript-eslint'],
+  plugins: ['eslint-plugin-material-ui', 'eslint-plugin-react-hooks', '@typescript-eslint/eslint-plugin'],
   settings: {
     'import/resolver': {
       webpack: {
-        config: path.join(__dirname, './docs/webpackBaseConfig.js'),
+        config: path.join(__dirname, './webpackBaseConfig.js'),
       },
     },
   },
diff --git a/.github/ISSUE_TEMPLATE/1.bug.md b/.github/ISSUE_TEMPLATE/1.bug.md
index 2736492a851fc1..8d5ef874dfcf5f 100644
--- a/.github/ISSUE_TEMPLATE/1.bug.md
+++ b/.github/ISSUE_TEMPLATE/1.bug.md
@@ -60,7 +60,7 @@ Steps:
 
 | Tech        | Version |
 | ----------- | ------- |
-| Material-UI | v4.?.?  |
+| Material-UI | v5.?.?  |
 | React       |         |
 | Browser     |         |
 | TypeScript  |         |
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 06f0abc8a1672e..56178af4a555aa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -34,7 +34,7 @@ Here are some highlights ✨:
   }
 
   // Enjoy!
-  <Button variant="dashed" />
+  <Button variant="dashed" />;
   ```
 
   More details in [the documentation](https://material-ui.com/customization/components/#adding-new-component-variants) and [RFC](#21749).
@@ -135,7 +135,7 @@ Here are some highlights ✨:
   It better matches the behavior of Gmail, Google Keep, material.io, etc.
   You can restore the previous behavior with:
 
-   ```diff
+  ```diff
   -<Snackbar />
   +<Snackbar anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} />
   ```
@@ -262,7 +262,7 @@ Here are some highlights ✨:
 - [docs] Disallow undefined array members at runtime where they're unexpected (#21990) @eps1lon
 - [docs] Improve Autocomplete GitHub demo (#22153) @aquibbaig
 - [docs] Improve draggable dialog demo wording (#22021) @Sanskar95
-- [docs] Improve transition props API descriptions  (#21952) @maksimgm
+- [docs] Improve transition props API descriptions (#21952) @maksimgm
 - [docs] Port buildApi to TypeScript (#22055) @eps1lon
 - [docs] Update build instructions for component API (#21970) @eps1lon
 - [docs] Update grouped instruction of autocomplete (#22056) @yfng96
@@ -294,13 +294,25 @@ Big thanks to the 18 contributors who made this release possible.
 
 ### `@material-ui/core@v5.0.0-alpha.5`
 
+#### Breaking changes
+
+- [Grid] Rename justify prop to justifyContent (#21845) @mnajdova
+
+  Rename `justify` prop with `justifyContent` to be aligned with the CSS property name.
+
+  ```diff
+  -<Grid justify="center">
+  +<Grid justifyContent="center">
+  ```
+
+#### Changes
+
 - [Accordion] Add new classes key (#21920) @natac13
 - [Accordion] Fix IconButtonProps spreading logic (#21850) @kgregory
 - [Avatar] Fix group size (#21896) @natac13
 - [Button] Custom variant (#21648) @mnajdova
 - [CssBaseline] Export ScopedCssBaseline from barrel index (#21869) @mherczeg
 - [Dialog] Fix body scrollbar close behavior (#21951) @maksimgm
-- [Grid] Rename justify prop to justifyContent (#21845) @mnajdova
 - [Icon] Hide name placeholder while "Material Icons" font is loading (#21950) @maksimgm
 - [Select] Ensure that onChange is called before onClose (#21878) @DanailH
 - [Slider] Make `index` public in the ValueLabel props (#21932) @govardhan-srinivas
diff --git a/docs/scripts/formattedTSDemos.js b/docs/scripts/formattedTSDemos.js
index d9559f1f50017b..6d538632e9b29a 100644
--- a/docs/scripts/formattedTSDemos.js
+++ b/docs/scripts/formattedTSDemos.js
@@ -23,7 +23,7 @@ const tsConfig = typescriptToProptypes.loadConfig(path.resolve(__dirname, '../ts
 
 const babelConfig = {
   presets: ['@babel/preset-typescript'],
-  plugins: ['unwrap-createstyles'],
+  plugins: ['babel-plugin-unwrap-createstyles'],
   generatorOpts: { retainLines: true },
   babelrc: false,
   configFile: false,
diff --git a/docs/src/pages/components/chips/chips.md b/docs/src/pages/components/chips/chips.md
index 4c66d40f2bc4a6..f5ff0ee91ff45e 100644
--- a/docs/src/pages/components/chips/chips.md
+++ b/docs/src/pages/components/chips/chips.md
@@ -10,7 +10,7 @@ components: Chip
 [Chips](https://material.io/design/components/chips.html) allow users to enter information, make selections, filter content, or trigger actions.
 
 While included here as a standalone component, the most common use will
-be in some form of input, so some of the behaviour demonstrated here is
+be in some form of input, so some of the behavior demonstrated here is
 not shown in context.
 
 ## Chip
diff --git a/docs/src/pages/components/tree-view/tree-view.md b/docs/src/pages/components/tree-view/tree-view.md
index fc9c6196f3faa9..d95c5b9b8d2cc7 100644
--- a/docs/src/pages/components/tree-view/tree-view.md
+++ b/docs/src/pages/components/tree-view/tree-view.md
@@ -61,7 +61,7 @@ const data = {
 
 {{"demo": "pages/components/tree-view/DisabledTreeItems.js"}}
 
-The behaviour of disabled tree items depends on the `disabledItemsFocusable` prop.
+The behavior of disabled tree items depends on the `disabledItemsFocusable` prop.
 
 If it is false:
 
diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
index 3ede35d1cc163d..c36969787c6ee2 100644
--- a/docs/src/pages/guides/migration-v4/migration-v4.md
+++ b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -51,6 +51,20 @@ Support for non-ref-forwarding class components in the `component` prop or as an
 Otherwise check out the ["Caveat with refs" section in our composition guide](/guides/composition/#caveat-with-refs) to find out how to migrate.
 This change affects almost all components where you're using the `component` prop or passing `children` to components that require `children` to be elements (e.g. `<MenuList><CustomMenuItem /></MenuList>`)
 
+### Theme
+
+- The "gutters" abstraction hasn't proven to be used frequently enough to be valuable.
+
+  ```diff
+  -theme.mixins.gutters(),
+  +paddingLeft: theme.spacing(2),
+  +paddingRight: theme.spacing(2),
+  +[theme.breakpoints.up('sm')]: {
+  +  paddingLeft: theme.spacing(3),
+  +  paddingRight: theme.spacing(3),
+  +},
+  ```
+
 ### Avatar
 
 - Rename `circle` to `circular` for consistency. The possible values should be adjectives, not nouns:
@@ -123,7 +137,7 @@ This change affects almost all components where you're using the `component` pro
   +<CircularProgress variant="determinate" classes={{ determinate: 'className' }} />
   ```
 
-> NB: If you had previously customised determinate, your customisations are probably no longer valid. Please remove them.
+> NB: If you had previously customized determinate, your customizations are probably no longer valid. Please remove them.
 
 ### Collapse
 
@@ -141,6 +155,29 @@ This change affects almost all components where you're using the `component` pro
   +<Collapse classes={{ root: 'collapse' }}>
   ```
 
+### Dialog
+
+- The onE\* transition props were removed. Use TransitionProps instead.
+
+  ```diff
+  <Dialog
+  -  onEnter={onEnter}
+  -  onEntered={onEntered},
+  -  onEntering={onEntered},
+  -  onExit={onEntered},
+  -  onExited={onEntered},
+  -  onExiting={onEntered}
+  +  TransitionProps={{
+  +    onEnter,
+  +    onEntered,
+  +    onEntering,
+  +    onExit,
+  +    onExited,
+  +    onExiting,
+  +  }}
+  />
+  ```
+
 ### Divider
 
 - Use border instead of background color. It prevents inconsistent height on scaled screens. For people customizing the color of the border, the change requires changing the override CSS property:
@@ -290,8 +327,6 @@ This change affects almost all components where you're using the `component` pro
   -  onExit={onEntered},
   -  onExited={onEntered},
   -  onExiting={onEntered}
-  />
-  <Snackbar
   +  TransitionProps={{
   +    onEnter,
   +    onEntered,
diff --git a/docs/webpackBaseConfig.js b/docs/webpackBaseConfig.js
deleted file mode 100644
index bbff5bf9e1db07..00000000000000
--- a/docs/webpackBaseConfig.js
+++ /dev/null
@@ -1,42 +0,0 @@
-const path = require('path');
-
-// This module isn't used to build the documentation. We use Next.js for that.
-// This module is used by the visual regression tests to run the demos.
-module.exports = {
-  context: path.resolve(__dirname),
-  resolve: {
-    modules: [path.join(__dirname, '../'), 'node_modules'],
-    alias: {
-      '@material-ui/core': path.resolve(__dirname, '../packages/material-ui/src'),
-      '@material-ui/docs': path.resolve(__dirname, '../packages/material-ui-docs/src'),
-      '@material-ui/icons': path.resolve(__dirname, '../packages/material-ui-icons/src'),
-      '@material-ui/lab': path.resolve(__dirname, '../packages/material-ui-lab/src'),
-      '@material-ui/styles': path.resolve(__dirname, '../packages/material-ui-styles/src'),
-      '@material-ui/system': path.resolve(__dirname, '../packages/material-ui-system/src'),
-      '@material-ui/utils': path.resolve(__dirname, '../packages/material-ui-utils/src'),
-      docs: path.resolve(__dirname, '../docs'),
-    },
-    extensions: ['.js', '.ts', '.tsx', '.d.ts'],
-  },
-  output: {
-    path: path.join(__dirname, 'build'),
-    filename: 'bundle.js',
-    publicPath: '/build/',
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(js|ts|tsx)$/,
-        exclude: /node_modules/,
-        loader: 'babel-loader',
-        query: {
-          cacheDirectory: true,
-        },
-      },
-      {
-        test: /\.md$/,
-        loader: 'raw-loader',
-      },
-    ],
-  },
-};
diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.test.js b/packages/material-ui-lab/src/TreeItem/TreeItem.test.js
index 2b391b1424f2e1..42731ca888818e 100644
--- a/packages/material-ui-lab/src/TreeItem/TreeItem.test.js
+++ b/packages/material-ui-lab/src/TreeItem/TreeItem.test.js
@@ -1125,7 +1125,7 @@ describe('<TreeItem />', () => {
 
     describe('Multi Selection', () => {
       describe('deselection', () => {
-        describe('mouse behaviour when multiple nodes are selected', () => {
+        describe('mouse behavior when multiple nodes are selected', () => {
           specify('clicking a selected node holding ctrl should deselect the node', () => {
             const { getByText, getByTestId } = render(
               <TreeView multiSelect defaultSelected={['one', 'two']}>
@@ -1157,7 +1157,7 @@ describe('<TreeItem />', () => {
           });
         });
 
-        describe('mouse behaviour when one node is selected', () => {
+        describe('mouse behavior when one node is selected', () => {
           it('clicking a selected node shout not deselect the node', () => {
             const { getByText, getByTestId } = render(
               <TreeView multiSelect defaultSelected={['one']}>
@@ -1474,7 +1474,7 @@ describe('<TreeItem />', () => {
           expect(getByTestId('five')).to.have.attribute('aria-selected', 'true');
         });
 
-        it('mouse behaviour after deselection', () => {
+        it('mouse behavior after deselection', () => {
           const { getByTestId, getByText } = render(
             <TreeView multiSelect>
               <TreeItem nodeId="one" label="one" data-testid="one" />
diff --git a/packages/material-ui/scripts/export-coverage.sh b/packages/material-ui/scripts/export-coverage.sh
deleted file mode 100755
index e3de08b506962f..00000000000000
--- a/packages/material-ui/scripts/export-coverage.sh
+++ /dev/null
@@ -1,6 +0,0 @@
-#!/bin/bash
-set -ev
-
-if [ ! -z "${COVERALLS_REPO_TOKEN}" ]; then
-  cat ./test/coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
-fi
diff --git a/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js b/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js
index fe2c352cb46db2..34143d8b5b5da0 100644
--- a/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js
+++ b/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js
@@ -44,7 +44,7 @@ function ClickAwayListener(props) {
 
   // The handler doesn't take event.defaultPrevented into account:
   //
-  // event.preventDefault() is meant to stop default behaviours like
+  // event.preventDefault() is meant to stop default behaviors like
   // clicking a checkbox to check it, hitting a button to submit a form,
   // and hitting left arrow to move the cursor in a text input etc.
   // Only special HTML elements have these default behaviors.
diff --git a/packages/material-ui/src/Modal/Modal.js b/packages/material-ui/src/Modal/Modal.js
index 6ecb214623ec33..3c6701f8e10d14 100644
--- a/packages/material-ui/src/Modal/Modal.js
+++ b/packages/material-ui/src/Modal/Modal.js
@@ -185,7 +185,7 @@ const Modal = React.forwardRef(function Modal(inProps, ref) {
   const handleKeyDown = (event) => {
     // The handler doesn't take event.defaultPrevented into account:
     //
-    // event.preventDefault() is meant to stop default behaviours like
+    // event.preventDefault() is meant to stop default behaviors like
     // clicking a checkbox to check it, hitting a button to submit a form,
     // and hitting left arrow to move the cursor in a text input etc.
     // Only special HTML elements have these default behaviors.
diff --git a/packages/typescript-to-proptypes/src/injector.ts b/packages/typescript-to-proptypes/src/injector.ts
index 04cea1025b751b..d4a56931b95d3c 100644
--- a/packages/typescript-to-proptypes/src/injector.ts
+++ b/packages/typescript-to-proptypes/src/injector.ts
@@ -18,7 +18,7 @@ export type InjectOptions = {
   /**
    * Used to control which props are includes in the result
    * @returns true to include the prop, false to skip it, or undefined to
-   * use the default behaviour
+   * use the default behavior
    * @default includeUnusedProps ? true : data.usedProps.includes(data.prop.name)
    */
   shouldInclude?(data: {
diff --git a/packages/typescript-to-proptypes/src/parser.ts b/packages/typescript-to-proptypes/src/parser.ts
index ada2bea48127ee..a64fa67313c6da 100644
--- a/packages/typescript-to-proptypes/src/parser.ts
+++ b/packages/typescript-to-proptypes/src/parser.ts
@@ -9,14 +9,14 @@ export interface ParserOptions {
   /**
    * Called before a PropType is added to a component/object
    * @returns true to include the PropType, false to skip it, or undefined to
-   * use the default behaviour
+   * use the default behavior
    * @default name !== 'ref'
    */
   shouldInclude: (data: { name: string; depth: number }) => boolean | undefined;
   /**
    * Called before the shape of an object is resolved
    * @returns true to resolve the shape of the object, false to just use a object, or undefined to
-   * use the default behaviour
+   * use the default behavior
    * @default propertyCount <= 50 && depth <= 3
    */
   shouldResolveObject: (data: {
diff --git a/test/regressions/webpack.config.js b/test/regressions/webpack.config.js
index 15b5eef02804e5..f58dbcb436e582 100644
--- a/test/regressions/webpack.config.js
+++ b/test/regressions/webpack.config.js
@@ -1,6 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
-const webpackBaseConfig = require('../../docs/webpackBaseConfig');
+const webpackBaseConfig = require('../../webpackBaseConfig');
 
 module.exports = {
   ...webpackBaseConfig,
diff --git a/test/utils/setupJSDOM.js b/test/utils/setupJSDOM.js
index a6edb229cb7e1c..c05514623374b2 100644
--- a/test/utils/setupJSDOM.js
+++ b/test/utils/setupJSDOM.js
@@ -3,8 +3,6 @@ const Mocha = require('mocha');
 const testingLibrary = require('@testing-library/dom');
 const createDOM = require('./createDOM');
 
-process.browser = true;
-
 // Enable missing act warnings: https://github.com/facebook/react/blob/v16.13.1/packages/react-reconciler/src/ReactFiberHooks.js#L965
 // TODO: Revisit once https://github.com/facebook/react/issues/15439 is resolved.
 global.jest = null;
diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js
new file mode 100644
index 00000000000000..331edf3ba2df71
--- /dev/null
+++ b/webpackBaseConfig.js
@@ -0,0 +1,42 @@
+const path = require('path');
+
+// This module isn't used to build the documentation. We use Next.js for that.
+// This module is used by the visual regression tests to run the demos.
+module.exports = {
+  context: path.resolve(__dirname),
+  resolve: {
+    modules: [__dirname, 'node_modules'],
+    alias: {
+      '@material-ui/core': path.resolve(__dirname, './packages/material-ui/src'),
+      '@material-ui/docs': path.resolve(__dirname, './packages/material-ui-docs/src'),
+      '@material-ui/icons': path.resolve(__dirname, './packages/material-ui-icons/src'),
+      '@material-ui/lab': path.resolve(__dirname, './packages/material-ui-lab/src'),
+      '@material-ui/styles': path.resolve(__dirname, './packages/material-ui-styles/src'),
+      '@material-ui/system': path.resolve(__dirname, './packages/material-ui-system/src'),
+      '@material-ui/utils': path.resolve(__dirname, './packages/material-ui-utils/src'),
+      docs: path.resolve(__dirname, './docs'),
+    },
+    extensions: ['.js', '.ts', '.tsx', '.d.ts'],
+  },
+  output: {
+    path: path.join(__dirname, 'build'),
+    filename: 'bundle.js',
+    publicPath: '/build/',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|ts|tsx)$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+        query: {
+          cacheDirectory: true,
+        },
+      },
+      {
+        test: /\.md$/,
+        loader: 'raw-loader',
+      },
+    ],
+  },
+};