[core] Batch small changes (mui#22183)

.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'),
       },
     },
   },

.github/ISSUE_TEMPLATE/1.bug.md

@@ -60,7 +60,7 @@ Steps:
 
 | Tech        | Version |
 | ----------- | ------- |
-| Material-UI | v4.?.?  |
+| Material-UI | v5.?.?  |
 | React       |         |
 | Browser     |         |
 | TypeScript  |         |

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/[email protected]`
 
+#### 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

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,

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

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:
 

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,

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" />

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.

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.

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: {

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: {

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,

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;

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',
+      },
+    ],
+  },
+};