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!
-
+ ;
```
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
-
+
```
@@ -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
+ -
+ +
+ ```
+
+#### 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. ``)
+### 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
+
```
-> 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
+
```
+### Dialog
+
+- The onE\* transition props were removed. Use TransitionProps instead.
+
+ ```diff
+
+ ```
+
### 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}
- />
- ', () => {
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(
@@ -1157,7 +1157,7 @@ describe('', () => {
});
});
- 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(
@@ -1474,7 +1474,7 @@ describe('', () => {
expect(getByTestId('five')).to.have.attribute('aria-selected', 'true');
});
- it('mouse behaviour after deselection', () => {
+ it('mouse behavior after deselection', () => {
const { getByTestId, getByText } = render(
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',
+ },
+ ],
+ },
+};