diff --git a/.eslintrc.js b/.eslintrc.js
index 9a8fd3fe4ed11f..b172f90d4af49d 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -227,7 +227,7 @@ module.exports = {
rules: {
'material-ui/no-hardcoded-labels': [
'error',
- { allow: ['Material-UI', 'Twitter', 'GitHub', 'StackOverflow'] },
+ { allow: ['MUI', 'Twitter', 'GitHub', 'StackOverflow'] },
],
},
},
diff --git a/.github/ISSUE_TEMPLATE/1.bug.md b/.github/ISSUE_TEMPLATE/1.bug.md
index 3d4e3c53367941..d1e93ed08d31d6 100644
--- a/.github/ISSUE_TEMPLATE/1.bug.md
+++ b/.github/ISSUE_TEMPLATE/1.bug.md
@@ -1,13 +1,13 @@
---
name: Bug report đ
-about: Create a bug report for Material-UI.
+about: Create a bug report for MUI.
labels: 'status: needs triage'
---
diff --git a/.github/ISSUE_TEMPLATE/2.feature.md b/.github/ISSUE_TEMPLATE/2.feature.md
index 9f7ca1d68497dd..01b9154dcfd1c0 100644
--- a/.github/ISSUE_TEMPLATE/2.feature.md
+++ b/.github/ISSUE_TEMPLATE/2.feature.md
@@ -7,7 +7,7 @@ labels: 'status: needs triage'
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
index d2a043e1fbcb6c..f27c03b69e9137 100644
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -2,4 +2,4 @@ blank_issues_enabled: false # force the usage of a template
contact_links:
- name: Support â
url: https://material-ui.com/getting-started/support/
- about: I need support with Material-UI.
\ No newline at end of file
+ about: I need support with MUI.
\ No newline at end of file
diff --git a/.github/support.yml b/.github/support.yml
index d71975077e08f5..c1eabe9d7e0c4e 100644
--- a/.github/support.yml
+++ b/.github/support.yml
@@ -6,7 +6,7 @@ supportLabel: support
# Comment to post on issues marked as support requests. Add a link
# to a support page, or set to `false` to disable
supportComment: |
- đ Thanks for using Material-UI!
+ đ Thanks for using MUI Core!
We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.
diff --git a/.tidelift.yml b/.tidelift.yml
index 162c094af78250..cac90cfab922d4 100644
--- a/.tidelift.yml
+++ b/.tidelift.yml
@@ -1,11 +1,11 @@
ci:
platform:
npm:
- # Don't run unmainted test on nomnom, it's only used by build tools, not in Material-UI.
+ # Don't run unmainted test on nomnom, it's only used by build tools, not in MUI.
nomnom:
tests:
unmaintained: skip
- # Don't run vulnerabity test on os-locale, it's only used by yargs in build tools, not in Material-UI.
+ # Don't run vulnerabity test on os-locale, it's only used by yargs in build tools, not in MUI.
os-locale:
tests:
vulnerable: skip
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 3505d867ee6073..5f33def572c931 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,15 +1,15 @@
-# Contributing to Material-UI
+# Contributing to MUI
-If you're reading this, you're awesome! Thank you for helping us make this project great and being a part of the Material-UI community. Here are a few guidelines that will help you along the way.
+If you're reading this, you're awesome! Thank you for helping us make this project great and being a part of the MUI community. Here are a few guidelines that will help you along the way.
## Code of Conduct
-Material-UI has adopted the [Contributor Covenant](https://www.contributor-covenant.org/) as its Code of Conduct, and we expect project participants to adhere to it.
+MUI has adopted the [Contributor Covenant](https://www.contributor-covenant.org/) as its Code of Conduct, and we expect project participants to adhere to it.
Please read [the full text](/CODE_OF_CONDUCT.md) so that you can understand what actions will and will not be tolerated.
## A large spectrum of contributions
-There are [many ways](https://material-ui.com/getting-started/faq/#material-ui-is-awesome-how-can-i-support-the-project) to contribute to Material-UI, code contribution is one aspect of it. For instance, documentation improvements are as important as code changes.
+There are [many ways](https://material-ui.com/getting-started/faq/#material-ui-is-awesome-how-can-i-support-the-project) to contribute to MUI, code contribution is one aspect of it. For instance, documentation improvements are as important as code changes.
## Your first Pull Request
@@ -33,7 +33,7 @@ If there has been no activity on the issue for 7 to 14 days, it is safe to assum
## Sending a Pull Request
-Material-UI is a community project, so Pull Requests are always welcome, but, before working on a large change, it is best to open an issue first to discuss it with the maintainers.
+MUI is a community project, so Pull Requests are always welcome, but, before working on a large change, it is best to open an issue first to discuss it with the maintainers.
When in doubt, keep your Pull Requests small. To give a Pull Request the best chance of getting accepted, don't bundle more than one feature or bug fix per Pull Request. It's often best to create two smaller Pull Requests than one big one.
@@ -78,7 +78,7 @@ The core team is monitoring for Pull Requests. We will review your Pull Request
### Trying changes on the documentation site
-The documentation site is built with Material-UI and contains examples of all the components.
+The documentation site is built with MUI and contains examples of all the components.
This is a great place to experiment with your changes.
It's the local development environment used by the maintainers.
@@ -130,7 +130,7 @@ The following section gives an overview of what each check is responsible for.
##### ci/codesandbox
This task should not fail in isolation. It creates multiple sandboxes on CodeSandbox.com that use the version
-of Material-UI that was built from this Pull Request. Use it to test more complex scenarios.
+of MUI that was built from this Pull Request. Use it to test more complex scenarios.
##### ci/circleci: checkout
@@ -204,7 +204,7 @@ $ yarn docs:api
### Coding style
-Please follow the coding style of the project. Material-UI uses prettier and eslint, so if possible, enable linting in your editor to get real-time feedback.
+Please follow the coding style of the project. MUI uses prettier and eslint, so if possible, enable linting in your editor to get real-time feedback.
- `yarn prettier` reformats the code.
- `yarn lint` runs manually the linting rules.
@@ -244,7 +244,7 @@ about translations](#translations).
#### 3. Write the content of the demo
-Material-UI documents how to use this library with TypeScript.
+MUI documents how to use this library with TypeScript.
If you are familiar with this language, write the demo in TypeScript, and only, in a \*.tsx file.
When you're done run `yarn docs:typescript:formatted` to automatically create the JavaScript version.
@@ -286,7 +286,7 @@ these changes across the localized versions.
## Roadmap
-To get a sense of where Material-UI is heading, or for ideas on where you could contribute, take a look at the [roadmap](https://material-ui.com/discover-more/roadmap/).
+To get a sense of where MUI is heading, or for ideas on where you could contribute, take a look at the [roadmap](https://material-ui.com/discover-more/roadmap/).
## License
diff --git a/README.md b/README.md
index cf24f87037da98..11189c483672c2 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,12 @@
-
+
-
Material-UI
+
MUI
-Quickly build beautiful [React](https://reactjs.org/) apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with [Material Design](https://material.io/design/introduction/).
+Quickly build beautiful [React](https://reactjs.org/) apps. MUI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with [Material Design](https://material.io/design/introduction/).
[](https://github.com/mui-org/material-ui/blob/master/LICENSE)
[](https://www.npmjs.com/package/@mui/material)
@@ -24,7 +24,7 @@ Quickly build beautiful [React](https://reactjs.org/) apps. Material-UI is a sim
## Installation
-Material-UI is available as an [npm package](https://www.npmjs.com/package/@mui/material).
+MUI is available as an [npm package](https://www.npmjs.com/package/@mui/material).
**[Stable channel v5](https://material-ui.com/)**
@@ -47,7 +47,7 @@ yarn add @mui/material @emotion/react @emotion/styled
Please note that `@next` will only point to pre-releases; to get the latest stable release use `@latest` instead.
-## Who sponsors Material-UI?
+## Who sponsors MUI?
### Diamond đ
@@ -56,7 +56,7 @@ Please note that `@next` will only point to pre-releases; to get the latest stab
-Diamond Sponsors are those who have pledged \$1,500/month or more to Material-UI.
+Diamond Sponsors are those who have pledged \$1,500/month or more to MUI.
### Gold đ
@@ -82,7 +82,7 @@ Direct
-Gold Sponsors are those who have pledged \$500/month or more to Material-UI.
+Gold Sponsors are those who have pledged \$500/month or more to MUI.
### There is more!
@@ -125,14 +125,14 @@ Check out our [documentation website](https://material-ui.com/).
## Premium Themes
-You can find complete templates & themes in the [Material-UI store](https://material-ui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=readme-store).
+You can find complete templates & themes in the [MUI store](https://material-ui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=readme-store).
## Contributing
-Read the [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to Material-UI.
+Read the [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to MUI.
Notice that contributions go far beyond pull requests and commits.
-Although we love giving you the opportunity to put your stamp on Material-UI, we also are thrilled to receive a variety of [other contributions](https://material-ui.com/getting-started/faq/#material-ui-is-awesome-how-can-i-support-the-project).
+Although we love giving you the opportunity to put your stamp on MUI, we also are thrilled to receive a variety of [other contributions](https://material-ui.com/getting-started/faq/#material-ui-is-awesome-how-can-i-support-the-project).
## Changelog
@@ -149,7 +149,7 @@ This project is licensed under the terms of the
## Sponsoring services
-These great services sponsor Material-UI's core infrastructure:
+These great services sponsor MUI's core infrastructure:
[](https://github.com/)
diff --git a/benchmark/browser/README.md b/benchmark/browser/README.md
index 580f128df80d7f..0e24be2a9f6609 100644
--- a/benchmark/browser/README.md
+++ b/benchmark/browser/README.md
@@ -23,7 +23,7 @@ React primitives:
34 Âą6%
React components:
45 Âą3%
-Styled Material-UI:
+Styled MUI:
73 Âą4%
Styled emotion:
67 Âą3%
@@ -33,7 +33,7 @@ makeStyles:
71 Âą3%
Box Baseline:
81 Âą3%
-Box Material-UI:
+Box MUI:
209 Âą15%
Box Theme-UI:
172 Âą8%
diff --git a/benchmark/browser/scripts/benchmark.js b/benchmark/browser/scripts/benchmark.js
index 1c19bacf05dbcd..8bbd823b548fc7 100644
--- a/benchmark/browser/scripts/benchmark.js
+++ b/benchmark/browser/scripts/benchmark.js
@@ -170,7 +170,7 @@ async function run() {
},
// Test that @mui/styled-engine doesn't add an signifiant overhead
{
- name: 'Styled Material-UI',
+ name: 'Styled MUI',
path: './styled-material-ui/index.js',
},
{
@@ -192,7 +192,7 @@ async function run() {
path: './box-baseline/index.js',
},
{
- name: 'Box Material-UI',
+ name: 'Box MUI',
path: './box-material-ui/index.js',
},
{
diff --git a/benchmark/package.json b/benchmark/package.json
index 90570b042b3c17..06a14190477a89 100644
--- a/benchmark/package.json
+++ b/benchmark/package.json
@@ -24,10 +24,10 @@
"react-dom": "^17.0.2",
"react-is": "^17.0.2",
"react-jss": "^10.7.1",
- "react-redux": "^7.1.1",
- "redux": "^4.0.4",
+ "react-redux": "^7.2.5",
+ "redux": "^4.1.1",
"serve-handler": "^6.1.3",
- "styled-components": "^5.0.0",
+ "styled-components": "^5.3.1",
"theme-ui": "^0.10.0",
"webpack": "^4.41.0",
"webpack-cli": "^4.0.0"
diff --git a/benchmark/server/README.md b/benchmark/server/README.md
index 51981a93b859dc..79053911b3b5d7 100644
--- a/benchmark/server/README.md
+++ b/benchmark/server/README.md
@@ -1,4 +1,4 @@
-# Material-UI benchmark
+# MUI benchmark
## `@mui/material`
diff --git a/benchmark/server/scenarios/core.js b/benchmark/server/scenarios/core.js
index a5c225847f4936..891e5981b0a482 100644
--- a/benchmark/server/scenarios/core.js
+++ b/benchmark/server/scenarios/core.js
@@ -24,7 +24,7 @@ suite
.add('ButtonBase', () => {
ReactDOMServer.renderToString(
- Material-UI
+ MUI,
);
})
@@ -43,10 +43,10 @@ suite
);
})
.add('ButtonBase enable ripple', () => {
- ReactDOMServer.renderToString(Material-UI);
+ ReactDOMServer.renderToString(MUI);
})
.add('ButtonBase disable ripple', () => {
- ReactDOMServer.renderToString(Material-UI);
+ ReactDOMServer.renderToString(MUI);
})
.on('cycle', (event) => {
console.log(String(event.target));
diff --git a/benchmark/server/scenarios/styles.js b/benchmark/server/scenarios/styles.js
index cbfc13bde79f39..1dd80ae0a7e6dd 100644
--- a/benchmark/server/scenarios/styles.js
+++ b/benchmark/server/scenarios/styles.js
@@ -93,7 +93,7 @@ suite
ReactDOMServer.renderToString(
{Array.from(new Array(5)).map((_, index) => (
- Material-UI
+ MUI
))}
,
);
@@ -105,7 +105,7 @@ suite
{Array.from(new Array(5)).map((_, index) => (
- Material-UI
+ MUI
))}
,
@@ -137,7 +137,7 @@ suite
{Array.from(new Array(5)).map((_, index) => (
))}
,
@@ -150,7 +150,7 @@ suite
{Array.from(new Array(5)).map((_, index) => (
- Material-UI
+ MUI
))}
,
@@ -162,7 +162,7 @@ suite
ReactDOMServer.renderToString(
{Array.from(new Array(5)).map((_, index) => (
- Material-UI
+ MUI
))}
,
);
@@ -173,7 +173,7 @@ suite
ReactDOMServer.renderToString(
{Array.from(new Array(5)).map((_, index) => (
- Material-UI
+ MUI
))}
,
);
@@ -185,7 +185,7 @@ suite
sheet.collectStyles(
{Array.from(new Array(5)).map((_, index) => (
- Material-UI
+ MUI
))}
,
),
@@ -196,7 +196,7 @@ suite
ReactDOMServer.renderToString(
{Array.from(new Array(5)).map((_, index) => (
- Material-UI
+ MUI
))}
,
);
@@ -205,7 +205,7 @@ suite
ReactDOMServer.renderToString(
{Array.from(new Array(5)).map((_, index) => (
- Material-UI
+ MUI
))}
,
);
@@ -215,7 +215,7 @@ suite
ReactDOMServer.renderToString(
{Array.from(new Array(5)).map((_, index) => (
- Material-UI
+ MUI
))}
,
),
@@ -225,7 +225,7 @@ suite
ReactDOMServer.renderToString(
{Array.from(new Array(5)).map((_, index) => (
- Material-UI
+ MUI
))}
,
);
diff --git a/docs/README.md b/docs/README.md
index cf7bbd24062c42..cf319eb266d76f 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,6 +1,6 @@
-# Material-UI docs
+# MUI docs
-This is the documentation website of Material-UI.
+This is the documentation website of MUI.
To start the docs site in development mode, from the project root, run:
@@ -15,7 +15,7 @@ _DO NOT USE NPM, use Yarn to install the dependencies._
## How can I add a new demo to the documentation?
[You can follow this guide](https://github.com/mui-org/material-ui/blob/HEAD/CONTRIBUTING.md)
-on how to get started contributing to Material-UI.
+on how to get started contributing to MUI.
## How do I help to improve the translations?
diff --git a/docs/next.config.js b/docs/next.config.js
index f67bd70b378d81..b1423fe434e929 100644
--- a/docs/next.config.js
+++ b/docs/next.config.js
@@ -64,9 +64,12 @@ module.exports = {
config.externals = [
(ctx, callback) => {
const { request } = ctx;
- const hasDependencyOnRepoPackages = ['notistack', '@material-ui/data-grid'].includes(
- request,
- );
+ const hasDependencyOnRepoPackages = [
+ 'notistack',
+ '@mui/x-data-grid',
+ '@mui/x-data-grid-pro',
+ '@mui/x-data-grid-generator',
+ ].includes(request);
if (hasDependencyOnRepoPackages) {
return callback(null);
@@ -106,7 +109,8 @@ module.exports = {
// transpile 3rd party packages with dependencies in this repository
{
test: /\.(js|mjs|jsx)$/,
- include: /node_modules(\/|\\)(notistack|@material-ui(\/|\\)data-grid)/,
+ include:
+ /node_modules(\/|\\)(notistack|@mui(\/|\\)x-data-grid|@mui(\/|\\)x-data-grid-pro|@mui(\/|\\)x-license-pro|@mui(\/|\\)x-data-grid-generator)/,
use: {
loader: 'babel-loader',
options: {
diff --git a/docs/notifications.json b/docs/notifications.json
index 6bb76283c322ad..ebb5ecb580c9f5 100644
--- a/docs/notifications.json
+++ b/docs/notifications.json
@@ -2,11 +2,11 @@
{
"id": 35,
"title": "Let's translate!",
- "text": "ĺ¸ŽĺŠ Material-UI ĺ°ć楣翝čŻćä¸ć. đ¨đł",
+ "text": "ĺ¸ŽĺŠ MUI ĺ°ć楣翝čŻćä¸ć. đ¨đł",
"userLanguage": "zh"
},
{
"id": 53,
- "text": "You can follow us on Twitter to receive exclusive tips and updates about Material-UI and the React ecosystem."
+ "text": "You can follow us on Twitter to receive exclusive tips and updates about MUI and the React ecosystem."
}
]
diff --git a/docs/package.json b/docs/package.json
index 8ca9370787de6c..b30a6e23a5975c 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -2,7 +2,7 @@
"name": "docs",
"version": "5.0.0",
"private": true,
- "author": "Material-UI Team",
+ "author": "MUI Team",
"license": "MIT",
"scripts": {
"build": "cross-env NODE_ENV=production NODE_OPTIONS=--max_old_space_size=4096 next build --profile",
@@ -30,7 +30,9 @@
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.15",
- "@material-ui/data-grid": "^4.0.0-alpha.37",
+ "@mui/x-data-grid": "^4.0.0",
+ "@mui/x-data-grid-pro": "^4.0.0",
+ "@mui/x-data-grid-generator": "^4.0.0",
"@mui/core": "5.0.0-alpha.46",
"@mui/docs": "5.0.0-rc.1",
"@mui/icons-material": "5.0.0-rc.1",
@@ -48,11 +50,11 @@
"@types/markdown-to-jsx": "^7.0.1",
"@types/react-dom": "^17.0.9",
"@types/react-router-dom": "^5.1.0",
- "@types/react-swipeable-views": "^0.13.0",
+ "@types/react-swipeable-views": "^0.13.1",
"@types/react-swipeable-views-utils": "^0.13.3",
- "@types/react-virtualized": "^9.21.4",
- "@types/react-window": "^1.7.0",
- "@types/styled-components": "5.1.12",
+ "@types/react-virtualized": "^9.21.13",
+ "@types/react-window": "^1.8.5",
+ "@types/styled-components": "5.1.14",
"accept-language": "^3.0.18",
"address": "^1.1.2",
"ast-types": "^0.14.2",
@@ -94,25 +96,25 @@
"react": "^17.0.2",
"react-docgen": "^5.4.0",
"react-dom": "^17.0.2",
- "react-draggable": "^4.0.3",
- "react-final-form": "^6.3.0",
+ "react-draggable": "^4.4.4",
+ "react-final-form": "^6.5.3",
"react-imask": "^6.1.0",
- "react-intersection-observer": "^8.32.0",
+ "react-intersection-observer": "^8.32.1",
"react-is": "^17.0.2",
"react-number-format": "^4.7.3",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.1",
"react-spring": "^8.0.27",
- "react-swipeable-views": "^0.14.0-alpha.0",
- "react-transition-group": "^4.4.1",
- "react-virtualized": "^9.21.1",
- "react-window": "^1.8.5",
- "recast": "^0.20.2",
- "recharts": "^2.1.0",
- "rimraf": "^3.0.0",
- "styled-components": "^5.0.0",
- "stylis": "^4.0.3",
- "stylis-plugin-rtl": "^2.0.2",
+ "react-swipeable-views": "^0.14.0",
+ "react-transition-group": "^4.4.2",
+ "react-virtualized": "^9.22.3",
+ "react-window": "^1.8.6",
+ "recast": "^0.20.5",
+ "recharts": "^2.1.2",
+ "rimraf": "^3.0.2",
+ "styled-components": "^5.3.1",
+ "stylis": "^4.0.10",
+ "stylis-plugin-rtl": "^2.1.0",
"stylis-plugin-rtl-sc": "npm:stylis-plugin-rtl@^1.1.0",
"webfontloader": "^1.6.28",
"webpack-bundle-analyzer": "^4.1.0"
diff --git a/docs/packages/feedback/README.md b/docs/packages/feedback/README.md
index 1330cfbf7eb40f..689ece6eacc855 100644
--- a/docs/packages/feedback/README.md
+++ b/docs/packages/feedback/README.md
@@ -1,6 +1,6 @@
# Rating
-This Lambda function stores and retrieves page feedback using DynamoDB. It is already deployed in the Material-UI AWS account. Request credentials if you need to update dev for testing, or to deploy a new prod version.
+This Lambda function stores and retrieves page feedback using DynamoDB. It is already deployed in the MUI AWS account. Request credentials if you need to update dev for testing, or to deploy a new prod version.
If you wish to deploy your own instance for testing, follow the steps below.
diff --git a/docs/packages/feedback/package.json b/docs/packages/feedback/package.json
index 0e2f1a598867e2..c5d0e5c22198a5 100644
--- a/docs/packages/feedback/package.json
+++ b/docs/packages/feedback/package.json
@@ -4,7 +4,7 @@
"description": "Store and retrieve page ratings and comments",
"main": "./index.js",
"license": "MIT",
- "author": "Material-UI Team",
+ "author": "MUI Team",
"private": true,
"files": [
"*.js"
diff --git a/docs/pages/_app.js b/docs/pages/_app.js
index 38229a48e364ee..3374361fd56ee4 100644
--- a/docs/pages/_app.js
+++ b/docs/pages/_app.js
@@ -1,3 +1,9 @@
+/* eslint-disable import/first */
+import { LicenseInfo } from '@mui/x-data-grid-pro';
+
+// Remove the license warning from demonstration purposes
+LicenseInfo.setLicenseKey(process.env.NEXT_PUBLIC_MUI_LICENSE);
+
import 'docs/src/modules/components/bootstrap';
// --- Post bootstrap -----
import * as React from 'react';
@@ -261,12 +267,12 @@ if (process.browser && process.env.NODE_ENV === 'production') {
console.log(
`%c
-ââââ ââââ ââââââ ââââââââââââââââââââââââ âââ ââââââ âââ âââ ââââââ
-âââââ ââââââââââââââââââââââââââââââââââââââââââââââââââââ âââ ââââââ
-âââââââââââââââââââ âââ ââââââ âââââââââââââââââââââââââââââââ ââââââ
-âââââââââââââââââââ âââ ââââââ âââââââââââââââââââââââââââââââ ââââââ
-âââ âââ ââââââ âââ âââ âââââââââââ âââââââââ âââââââââââ ââââââââââââ
-âââ ââââââ âââ âââ âââââââââââ âââââââââ âââââââââââ âââââââ âââ
+ââââ ââââ âââ âââ âââââââ
+âââââ âââââ âââ âââ âââââ
+âââââââââââ âââ âââ âââ
+âââââââââââ âââ âââ âââ
+âââ âââ âââ âââââââââ âââââââ
+âââ âââ âââââââ âââââââ
Tip: you can access the documentation \`theme\` object directly in the console.
`,
diff --git a/docs/pages/api-docs/checkbox.json b/docs/pages/api-docs/checkbox.json
index b9ac15e0b88e72..01b55d5de59bea 100644
--- a/docs/pages/api-docs/checkbox.json
+++ b/docs/pages/api-docs/checkbox.json
@@ -6,7 +6,7 @@
"color": {
"type": {
"name": "union",
- "description": "'default' | 'primary' | 'secondary' | 'error' | 'info' | 'succes' | 'warning' | string"
+ "description": "'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | string"
},
"default": "'primary'"
},
diff --git a/docs/pages/api-docs/image-list.json b/docs/pages/api-docs/image-list.json
index 58d2f4135f71d3..c40be0e6722417 100644
--- a/docs/pages/api-docs/image-list.json
+++ b/docs/pages/api-docs/image-list.json
@@ -12,8 +12,8 @@
"sx": { "type": { "name": "object" } },
"variant": {
"type": {
- "name": "union",
- "description": "'masonry' | 'quilted' | 'standard' | 'woven' | string"
+ "name": "enum",
+ "description": "'masonry' | 'quilted' | 'standard' | 'woven'"
},
"default": "'standard'"
}
diff --git a/docs/pages/blog/2019-developer-survey-results.md b/docs/pages/blog/2019-developer-survey-results.md
index 690f96d6c68265..e24c9011c4ef3b 100644
--- a/docs/pages/blog/2019-developer-survey-results.md
+++ b/docs/pages/blog/2019-developer-survey-results.md
@@ -1,12 +1,12 @@
---
-description: 2019 Material-UI Developer Survey results
+description: 2019 MUI Developer Survey results
---
-# 2019 Material-UI Developer Survey results
+# 2019 MUI Developer Survey results
Olivier Tassinari, Matt Brookes. March 16, 2019.
-While we are currently working on the upcoming release of Material-UI v4, we need to prioritize our
+While we are currently working on the upcoming release of MUI v4, we need to prioritize our
roadmap for the coming year. To refine our focus, we launched a developer survey last month,
to which we received 734 contributions. Thank you for your participation!
The survey is now closed and this is a summary of the results.
@@ -18,21 +18,21 @@ The survey was broken into three sections, "Introduction", "About you" and "Your
Here we asked for the good, the bad and the ugly. Thankfully, it's mostly good, but we can focus
on the things that will make it even better.
-### 1. How would you feel if you could no longer use Material-UI?
+### 1. How would you feel if you could no longer use MUI?
An overwhelming majority of respondents (over 93%), would be disappointed or very disappointed if
-they could no longer use Material-UI. The benchmark for "very disappointed" is 40%,
-so we're on the right track. Don't worry, Material-UI isn't going away any time soon â
+they could no longer use MUI. The benchmark for "very disappointed" is 40%,
+so we're on the right track. Don't worry, MUI isn't going away any time soon â
we want to focus on making even more of you "very disappointed", as it were!
Curiously, the 6.4% who said they would _not_ be disappointed if they could no longer use
-Material-UI collectively gave a Net Promoter Score of 68%, which is
+MUI collectively gave a Net Promoter Score of 68%, which is
[higher than that of all respondents as a whole](#5-how-likely-is-it-that-you-would-recommend-material-ui-to-a-friend-or-colleague),
so we know they love us really. đ
-### 2. Who do you think would most benefit from Material-UI?
+### 2. Who do you think would most benefit from MUI?
This word cloud was generated with [wordclouds.com](https://wordclouds.com).
@@ -41,17 +41,17 @@ This word cloud was generated with [wordclouds.com](https://wordclouds.com).
Developers, developers, developers! (And "anyone" and "everyone", apparently! ) This is understandable, given the
[job role demographic](#7-which-of-the-following-best-describes-your-current-job-role)
of the majority of respondents. We'll continue to work on the developer experience, making it
-easier to get started with, use, and customize Material-UI.
+easier to get started with, use, and customize MUI.
-### 3. What is the main benefit you receive from Material-UI?
+### 3. What is the main benefit you receive from MUI?
-
+
The responses variously commented on being able to focus on the business logic, time saved,
good looking components, ease of use, design consistency, good documentation.
We'll make sure that we continue to do more of the things that benefit you the most.
-### 4. How can we improve Material-UI for you?
+### 4. How can we improve MUI for you?
We have grouped the answers into different categories.
The prefix corresponds to the number of times the concern was mentioned.
@@ -161,7 +161,7 @@ It's sorted descending, with the most important concerns first:
- 1 **Styles: better docs**
- 1 **Testing**
-### 5. How likely is it that you would recommend Material-UI to a friend or colleague?
+### 5. How likely is it that you would recommend MUI to a friend or colleague?
@@ -173,13 +173,13 @@ It's sorted descending, with the most important concerns first:
Result.
-Developers gave Material-UI a [Net Promoter Score](https://en.wikipedia.org/wiki/Net_Promoter)
+Developers gave MUI a [Net Promoter Score](https://en.wikipedia.org/wiki/Net_Promoter)
(promoters less detractors) of 66%. Given the NPS range of -100 to +100, a "positive" score or NPS
above 0 is considered "good", +50 is "Excellent", and above 70 is considered "world class."
## About you
-### 6. How did you hear about Material-UI?
+### 6. How did you hear about MUI?
Multiple options were allowed.
@@ -206,9 +206,9 @@ No huge surprises here!
-Material-UI is most popular with small to medium sized organisations,
+MUI is most popular with small to medium sized organisations,
perhaps because beyond a certain size, organizations have teams building their own design system and framework.
-We want to continue to make it easy to use the component logic of Material-UI while allowing
+We want to continue to make it easy to use the component logic of MUI while allowing
designers to give it a bespoke look and feel for their organization.
### 9. How long have you been developing with JavaScript
@@ -221,28 +221,28 @@ A nice bell curve, with the majority of developers having 1 to 5 years experienc
-### 11. How long have you been developing with Material-UI?
+### 11. How long have you been developing with MUI?
We missed a trick by not including "2 years +" here, so "1 year +" looks stacked.
-The number of users of Material-UI continues to grow at a steady pace, and once on board, many
+The number of users of MUI continues to grow at a steady pace, and once on board, many
developers stick with it.
-### 12. What were you primarily using before Material-UI?
+### 12. What were you primarily using before MUI?
Given its relative popularity, and the move from CSS / HTML / jQuery towards front-end frameworks,
it should come as no big surprise to see that the majority of respondents were previously using Bootstrap.
-Custom solutions have also been replaced by Material-UI as your go-to UI library, along with a
+Custom solutions have also been replaced by MUI as your go-to UI library, along with a
long-tail of other frameworks.
-### 13. How many Material-UI based projects have you built?
+### 13. How many MUI based projects have you built?
-Over three quarters of you have built two or more projects with Material-UI, with 13.3% having six
+Over three quarters of you have built two or more projects with MUI, with 13.3% having six
or more projects under your belt. The 2.2% with ten or more, we salute you!
## Your product
diff --git a/docs/pages/blog/2019.md b/docs/pages/blog/2019.md
index cd9ee24f3e6903..ed3be12dc196c3 100644
--- a/docs/pages/blog/2019.md
+++ b/docs/pages/blog/2019.md
@@ -1,12 +1,12 @@
---
-description: 2019 was a great year for Material-UI. It puts us on an exciting path to solve even greater challenges in the coming years!
+description: 2019 was a great year for MUI. It puts us on an exciting path to solve even greater challenges in the coming years!
---
# 2019 in review and beyond
The core team. January 25, 2020.
-2019 was a great year for Material-UI.
+2019 was a great year for MUI.
It puts us on an exciting path to solve even greater challenges in the coming years!
## Growth
@@ -18,7 +18,7 @@ It puts us on an exciting path to solve even greater challenges in the coming ye
- đ° Grew financial support by 76% in 2019, compared to 2018.
- đ˘ From 1.5 to 3 full-time equivalent developers, spread among multiple financially supported [core team members](https://material-ui.com/discover-more/team/).
-The numbers speak for themselves. 2019 was super exciting and made Material-UI one of the most advanced open-source, React-based, UI component libraries!
+The numbers speak for themselves. 2019 was super exciting and made MUI one of the most advanced open-source, React-based, UI component libraries!
## In review
@@ -31,10 +31,10 @@ Some of the key factors:
- The results of the [2019 Developer Survey](https://medium.com/material-ui/2019-material-ui-developer-survey-results-c9589434bbcf) have highlighted the immense potential for working on advanced components and features, especially for enterprise users.
Developers are craving for a UI framework that they can learn once (e.g. few breaking changes, only one solution per problem) and use everywhere (e.g. comprehensive, customizable, high-quality).
- Bootstrap had successfully released [a theme store](https://themes.getbootstrap.com/).
- Following this approach opened an opportunity to capture a fraction of the value Material-UI creates for its users, and funnel it back into R&D on the framework.
+ Following this approach opened an opportunity to capture a fraction of the value MUI creates for its users, and funnel it back into R&D on the framework.
- The market for paid UI components is in the order of a couple of \$100m/year,
with dozens of companies positioned in this market.
- While React is only one technology among many (jQuery, Angular, ASP.NET, Blazor, Vue, WPF, UWP, etc) with which to build a UI, but we believe that Web and React will become the dominant technology in the next 5 years for enterprises. Material-UI is uniquely positioned to address this market with non-MIT features.
+ While React is only one technology among many (jQuery, Angular, ASP.NET, Blazor, Vue, WPF, UWP, etc) with which to build a UI, but we believe that Web and React will become the dominant technology in the next 5 years for enterprises. MUI is uniquely positioned to address this market with non-MIT features.
- Building UIs should be simpler, it still too slow and complex.
Designers and developers should benefit from a more integrated experience.
- Every now and then, we witness the appearance of a new React UI component library built from scratch ([UXPin](https://adele.uxpin.com/) keeps track of some of them).
@@ -66,7 +66,7 @@ Some of the key factors:
- We introduced [built-in localization](/guides/localization/).
- We removed a good number of external dependencies and increased the `features/bundle size` density.
- We introduced an [icon search page](/components/material-icons/).
-- We released a [store for Material-UI](https://material-ui.com/store/).
+- We released a [store for MUI](https://material-ui.com/store/).
## Looking at 2020
diff --git a/docs/pages/blog/2020-developer-survey-results.md b/docs/pages/blog/2020-developer-survey-results.md
index 68f9ef628cb1e1..1324d4fa0e1d15 100644
--- a/docs/pages/blog/2020-developer-survey-results.md
+++ b/docs/pages/blog/2020-developer-survey-results.md
@@ -1,8 +1,8 @@
---
-description: 2020 Material-UI Developer Survey results
+description: 2020 MUI Developer Survey results
---
-# 2020 Material-UI Developer Survey results
+# 2020 MUI Developer Survey results
Marija Najdova, Olivier Tassinari, Matt Brookes. June 27, 2020.
@@ -15,15 +15,15 @@ Like last year, the survey was again broken into three sections: ["Introduction"
In this section, we wanted to hear what developers think is going well, what we should keep doing, and which areas need improving to make the library even better.
-### 1. How would you feel if you could no longer use Material-UI?
+### 1. How would you feel if you could no longer use MUI?
-Similar to last year, over 94% of the respondents would be disappointed if they could no longer use Material-UI, which is very encouraging. We will keep working hard to hopefully move more of you into the "very disappointed" category!
+Similar to last year, over 94% of the respondents would be disappointed if they could no longer use MUI, which is very encouraging. We will keep working hard to hopefully move more of you into the "very disappointed" category!
-The number of respondents who would not be disappointed has moved down from 6.5% to 5.4%, which is technically a 17% improvement! đ We'd love to understand more about those who use Material-UI, but would happily use other solutions, so a follow-up question might be needed next year.
+The number of respondents who would not be disappointed has moved down from 6.5% to 5.4%, which is technically a 17% improvement! đ We'd love to understand more about those who use MUI, but would happily use other solutions, so a follow-up question might be needed next year.
-### 2. How likely is it that you would recommend Material-UI to a friend or colleague?
+### 2. How likely is it that you would recommend MUI to a friend or colleague?
@@ -32,7 +32,7 @@ The number of respondents who would not be disappointed has moved down from 6.5%
As last year, we again calculated the [Net Promoter Score](https://en.wikipedia.org/wiki/Net_Promoter)
(promoters less detractors). This year it is again a pretty high number 61.54%! (As the values for NPS range between -100 and +100, a "positive" score is considered "good", greater than 50 is "excellent", and above 70 is considered "world class").
-### 3. Who do you think would most benefit from Material-UI?
+### 3. Who do you think would most benefit from MUI?
@@ -41,13 +41,13 @@ As last year, we again calculated the [Net Promoter Score](https://en.wikipedia.
Developers are again at the center of our universe đ (And "people" and "teams" in general, of course!) This is understandable, given the [job role demographic](#8-which-of-the-following-best-describes-your-current-job-role)
of the majority of respondents. We will push hard on making the experience for you even better over the next year.
-### 4. What is the main benefit you receive from Material-UI?
+### 4. What is the main benefit you receive from MUI?
-
+
The responses to this question are a very clear indicator to us about what we need to continue to do more of. Some of the most common points were: the range of components, ease of use, documentation quality, as well as the design. We will, of course, continue to work on all of these.
-### 5. How can we improve Material-UI for you?
+### 5. How can we improve MUI for you?
As the answers to these questions were pretty different, we grouped them into different categories and counted the different number of times the concern was mentioned. You can see all of them sorted in descending order:
@@ -191,7 +191,7 @@ Decreasing pain:
- x0.1: Strict mode. We fixed a lot of strict mode compatibility issues this year. However, since Create React App has made this mode a default, we have seen a lot more requests for it.
- x0.1: Autocomplete. We added a new component, and have resolved a large number of issues opened since. This will be moved from lab to the core in v5.
- x0.2: Fewer breaking changes. Only releasing minor versions under v4 for over a year helps a lot. However, we still need to be careful with CSS changes.
-- x0.3: Accessibility. We have been able to leverage GitHub issues opened by a11y experts, often coming from large companies using Material-UI at scale to improve it a lot this year.
+- x0.3: Accessibility. We have been able to leverage GitHub issues opened by a11y experts, often coming from large companies using MUI at scale to improve it a lot this year.
- x0.4: Material design. We didn't do much for it this year, at least not as much as we could have. Maybe the reduction is because fewer people care? It seems that we start to resonate more with developers building custom design systems.
- x0.4: TypeScript. The continued migration of all the demos to TypeScript and of all the props to IntelliSense is paying off.
- x0.5: Date picker. We did a lot for it this year. We probably still need the range feature, and to move it into the main repository (docs migration, etc.) for consistency.
@@ -215,7 +215,7 @@ The number of answers was limited to 3.
## About you
-### 7. How did you hear about Material-UI?
+### 7. How did you hear about MUI?
@@ -241,17 +241,17 @@ We can see the normal distribution of developer experience here, where most have
-### 12. How long have you been developing with Material-UI?
+### 12. How long have you been developing with MUI?
-### 13. What were you primarily using before Material-UI?
+### 13. What were you primarily using before MUI?
-
+
-Similar to last year, it seems that most respondents were previously using Bootstrap. We can see also that custom solutions, as well as some other frameworks, were replaced with Material-UI.
+Similar to last year, it seems that most respondents were previously using Bootstrap. We can see also that custom solutions, as well as some other frameworks, were replaced with MUI.
-### 14. How many Material-UI based projects have you built?
+### 14. How many MUI based projects have you built?
@@ -279,7 +279,7 @@ section.
### 19. What styling system are you using?
-
+
The response seems to be similar to the one from the last year's survey, so we will push with better support for styled components.
@@ -302,8 +302,8 @@ We want to work on the problems that resonate the most with our users.
[It's clear](#5-how-can-we-improve-material-ui-for-you) that we should:
1. Provide more flexibility on the components, unstyled components (pure hooks?).
-1. Make the customization easier and implement custom themes with Material-UI. Maybe provide a theme builder.
-1. Provide a second theme, update the current components to better match Material Design, provide more simple components and features (e.g. dropzone, carousel) as well as provide a better DX (there are good ideas from other UI libraries to apply to Material-UI v5).
+1. Make the customization easier and implement custom themes with MUI. Maybe provide a theme builder.
+1. Provide a second theme, update the current components to better match Material Design, provide more simple components and features (e.g. dropzone, carousel) as well as provide a better DX (there are good ideas from other UI libraries to apply to MUI v5).
1. Improve upon the paid advanced versions of the components (e.g. complex data grid, date range picker, tree view drag & drop, virtualization, etc).
**We will update [our ROADMAP](/discover-more/roadmap/) in the coming days**.
diff --git a/docs/pages/blog/2020-introducing-sketch.md b/docs/pages/blog/2020-introducing-sketch.md
index 585afdaf56a3c0..604d0dbe104767 100644
--- a/docs/pages/blog/2020-introducing-sketch.md
+++ b/docs/pages/blog/2020-introducing-sketch.md
@@ -1,18 +1,18 @@
---
-description: Today, we're excited to announce the introduction of official Sketch symbols for Material-UI.
+description: Today, we're excited to announce the introduction of official Sketch symbols for MUI.
---
-# Introducing Material-UI for Sketch
+# Introducing MUI for Sketch
Olivier Tassinari. March 30, 2020.
-Today, we're excited to introduce the Sketch symbols đ for Material-UI.
+Today, we're excited to introduce the Sketch symbols đ for MUI.
[](https://material-ui.com/store/items/sketch-react/?utm_source=blog&utm_medium=blog&utm_campaign=introducing-sketch)
-The UI kit contains all the Material-UI components with states and variations which gives 1,500+ unique elements. All components are designed with the most up to date release.
+The UI kit contains all the MUI components with states and variations which gives 1,500+ unique elements. All components are designed with the most up to date release.
We dream of a world where designers and developers can share the same tools. We wish to streamline the creation process of great UIs.
This new product brings you one step closer to this long term goal. It enables designers to provide developers close to production "handoffs". It aims to **maximize efficiency and consistency**.
@@ -28,9 +28,9 @@ For instance, there is a [StackOverflow question](https://stackoverflow.com/ques
For a long time, we have ignored the problem. We were recommending users to try alternatives out. However, we realized that it wasn't a great answer. There were no good solutions out there:
-- **Sketch** has [some symbols](https://i.stack.imgur.com/vEEAA.png) for Material Design. Unfortunately, they cover <30% of the components available in Material-UI, use an outdated version of the specification, and focus on mobile (leaving desktop behind).
+- **Sketch** has [some symbols](https://i.stack.imgur.com/vEEAA.png) for Material Design. Unfortunately, they cover <30% of the components available in MUI, use an outdated version of the specification, and focus on mobile (leaving desktop behind).
- **Material Design** had a [Sketch plugin](https://material.io/resources/theme-editor/).
- Unfortunately, it was recently retired, was supporting fewer components than Material-UI, and didn't use the same wording/structure as Material-UI that made it harder to move from design to implementation.
+ Unfortunately, it was recently retired, was supporting fewer components than MUI, and didn't use the same wording/structure as MUI that made it harder to move from design to implementation.
- Anything else is paid.
### Gain efficiency
@@ -48,7 +48,7 @@ Create MVPs efficiently and save hundreds of hours on UI Design. This is a great
**Developers đ **
Gain in autonomy, design beautiful, consistent and accessible interface without relying on designers. You can preview how it will look before coding it.
-The UI kit was created specifically for Material-UI, a popular React UI library with a comprehensive set of components.
+The UI kit was created specifically for MUI, a popular React UI library with a comprehensive set of components.
## See it in action
@@ -67,7 +67,7 @@ According to a [recent user survey](https://medium.com/google-design/state-of-de
Popular tools used to manage Design Systems (n=1762)
We are working on the support of more popular tools.
-We have recently released the support of [Framer X](https://packages.framer.com/package/material-ui/material-ui) for Material-UI.
+We have recently released the support of [Framer X](https://packages.framer.com/package/material-ui/material-ui) for MUI.
We plan to release the support of **Figma** in the coming weeks. You can subscribe to the [newsletter of the store](https://material-ui.com/store/#subscribe) to be notified when available.
## Features
diff --git a/docs/pages/blog/2020-q1-update.md b/docs/pages/blog/2020-q1-update.md
index cdde4c9462a15a..228a7459179dab 100644
--- a/docs/pages/blog/2020-q1-update.md
+++ b/docs/pages/blog/2020-q1-update.md
@@ -64,7 +64,7 @@ But this summary is just scratching the surface. We have accepted 572 commits fr
## Company
-We are thrilled to welcome two new full-time developers on Material-UI:
+We are thrilled to welcome two new full-time developers on MUI:
- [Dmitriy Kovalenko](https://github.com/dmtrKovalenko), the author of @material-ui/pickers.
@@ -84,8 +84,8 @@ We are thrilled to welcome two new full-time developers on Material-UI:
We'll do our best, no guarantee!
-- đŁ We will analyze and publish the results of the "Material-UI Developer Survey 2020". If you haven't contributed to it yet, you can follow this link to [fill it in](https://forms.gle/TYWRdvgyZs4AhZNv8), thanks!
-- đ¨ We will release Figma assets for Material-UI.
+- đŁ We will analyze and publish the results of the "MUI Developer Survey 2020". If you haven't contributed to it yet, you can follow this link to [fill it in](https://forms.gle/TYWRdvgyZs4AhZNv8), thanks!
+- đ¨ We will release Figma assets for MUI.
diff --git a/docs/pages/blog/2020-q2-update.md b/docs/pages/blog/2020-q2-update.md
index 1b3c482d7c2a3c..4a0cb5d020818a 100644
--- a/docs/pages/blog/2020-q2-update.md
+++ b/docs/pages/blog/2020-q2-update.md
@@ -20,7 +20,7 @@ Here are the most significant improvements since March 2020:
-- đ¨ [Figma assets](https://material-ui.com/store/items/figma-react/) for Material-UI extend the support for design tools beyond Sketch.
+- đ¨ [Figma assets](https://material-ui.com/store/items/figma-react/) for MUI extend the support for design tools beyond Sketch.
@@ -38,7 +38,7 @@ Here are the most significant improvements since March 2020:
-- đŁ We have analyzed and published the results of the "Material-UI Developer Survey 2020". If you haven't read it yet, you can follow this link to [read it in detail](/blog/2020-developer-survey-results/). It contains a lot of interesting insights that will shape the future of the library and company. Thanks for the contributions! â¤ď¸
+- đŁ We have analyzed and published the results of the "MUI Developer Survey 2020". If you haven't read it yet, you can follow this link to [read it in detail](/blog/2020-developer-survey-results/). It contains a lot of interesting insights that will shape the future of the library and company. Thanks for the contributions! â¤ď¸
- đ¨đłđ§đˇ The non-API documentation has been fully translated to Chinese and Brazilian, thanks to the collaboration of [Danica Shen](https://github.com/DDDDDanica), [Yan Lee](https://github.com/AGDholo), and [Jairon Alves Lima](https://github.com/jaironalves), native speakers from the community đ.
diff --git a/docs/pages/blog/2020-q3-update.md b/docs/pages/blog/2020-q3-update.md
index c0a293e26fd7e7..0c6f99c0fdce8f 100644
--- a/docs/pages/blog/2020-q3-update.md
+++ b/docs/pages/blog/2020-q3-update.md
@@ -25,7 +25,7 @@ Here are the most significant improvements since June 2020. This was a dense qua
- âď¸ We have prepared the support for the upcoming release of [React v17](https://reactjs.org/blog/2020/08/10/react-v17-rc.html). Most of the work was about better handling events, and updating our test infrastructure to run the whole test suite with the _latest_ and _next_ version of React. We have also improved `StrictMode` support. The last standing issues are being addressed with the work on the style engine. More on that later in the post.
-- đ We have introduced a new dynamic variant API. This API allows developers to add new variants to Material-UI components right from the theme, without having to wrap the components. For instance with the Button:
+- đ We have introduced a new dynamic variant API. This API allows developers to add new variants to MUI components right from the theme, without having to wrap the components. For instance with the Button:
```tsx
// Define the style that should be applied for specific props.
@@ -72,19 +72,19 @@ Here are the most significant improvements since June 2020. This was a dense qua
After 6 months of development since the initial commit (March 15th, 2020), you can start using the component! (It targets v4.)
-- âĄď¸ The data grid effort has led to the introduction of a new repository: [_mui-org/material-ui-x_](https://github.com/mui-org/material-ui-x). This is the repository that will host all the future commercial components, all the components that we can't sustain with the open-source model. Material-UI X is our next iteration in scaling Material-UI, both as a company and as a comprehensive React library of components. While we have an existing sustainability model that can support, in long term, up to 10 people full-time, we are keen to push it by an order of magnitude.
+- âĄď¸ The data grid effort has led to the introduction of a new repository: [_mui-org/material-ui-x_](https://github.com/mui-org/material-ui-x). This is the repository that will host all the future commercial components, all the components that we can't sustain with the open-source model. MUI X is our next iteration in scaling MUI, both as a company and as a comprehensive React library of components. While we have an existing sustainability model that can support, in long term, up to 10 people full-time, we are keen to push it by an order of magnitude.
- đ We have migrated parts of the codebase to TypeScript.
We had to work on the code infrastructure of _mui-org/material-ui_ to prepare to host the date picker components that are written in TypeScript inside the lab (coming from _mui-org/material-ui-pickers_ that we will archive once we can).
-
Material-UI's repository
+
MUI's repository
On the other hand, we started using TypeScript from day one for _mui-org/material-ui-x_.
-
Material-UI X's repository
+
MUI X's repository
- đ We have migrated large parts of the test suite to react-testing-library.
15 months ago, we introduced the very [first test](https://github.com/mui-org/material-ui/pull/15732) using the library (to replace enzyme). Last month, react-testing-library had [more downloads](https://npm-stat.com/charts.html?package=enzyme&package=%40testing-library%2Freact&from=2019-10-10&to=2020-10-10) than enzyme!
@@ -121,7 +121,7 @@ Here are the most significant improvements since June 2020. This was a dense qua
## Company
-We are thrilled to welcome two new full-time developers to Material-UI:
+We are thrilled to welcome two new full-time developers to MUI:
- [Marija Najdova](https://github.com/mnajdova). Marija joins us from the Fluent-UI React team at Microsoft. She's allowing the community team to move faster. You can learn more about her in the [introduction blog post](/blog/marija-najdova-joining/).
@@ -142,7 +142,7 @@ We are thrilled to welcome two new full-time developers to Material-UI:
- âď¸ From 59.0k to 61.6k stars, leave us yours [đ](https://github.com/mui-org/material-ui).
- đ¨âđŠâđ§âđŚ From 1,825 to 1,934 contributors on GitHub. We add on average 1 new contributor every day.
-- đ˘ We have welcomed two new full-time developers to Material-UI.
+- đ˘ We have welcomed two new full-time developers to MUI.
## Our roadmap intent for Q4 2020
diff --git a/docs/pages/blog/2020.md b/docs/pages/blog/2020.md
index a2df78a79ae3d6..679be498b07968 100644
--- a/docs/pages/blog/2020.md
+++ b/docs/pages/blog/2020.md
@@ -1,12 +1,12 @@
---
title: 2020 in review and beyond
-description: 2020 has been another great year, not only for Material-UI, but also for the ecosystem.
+description: 2020 has been another great year, not only for MUI, but also for the ecosystem.
date: 2020-12-31T00:00:00.000Z
authors: ['oliviertassinari', 'mbrookes']
card: true
---
-2020 has been another great year, not only for Material-UI, but also for the ecosystem.
+2020 has been another great year, not only for MUI, but also for the ecosystem.
We have taken on ambitious challenges and started to scale the project.
## Growth
@@ -61,17 +61,17 @@ We will continue in the same direction, it's still [**day one**](https://www.sec
### Branding
-Up until now, we never had a mindful reflection on what the branding of Material-UI should be. We picked a color from the 2014 Material Design palette, and that's it.
+Up until now, we never had a mindful reflection on what the branding of MUI should be. We picked a color from the 2014 Material Design palette, and that's it.
The [material-ui.com](https://material-ui.com/) marketing website will soon wear a brand new style! We need to create our own identity, distinct from Material Design.
-### Material-UI X
+### MUI X
We started to deliver advanced React components in 2020 with the data grid, including a [commercial version](/components/data-grid/#commercial-version) and the beginning of a [date range picker](https://material-ui.com/components/date-range-picker/).
We will double down on these existing components as long as necessary to have them find the market.
By the end of 2021, we aim to have released these components as stable, implement all the [features planned](/components/data-grid/getting-started/#feature-comparison), and at least double the size of the team.
-### Material-UI v5
+### MUI v5
We will release the next major iteration of the library. A highlight of the key improvements coming â¨:
@@ -88,7 +88,7 @@ And [much more](https://github.com/mui-org/material-ui/issues/20012).
### A second theme
-While Material Design is a predominant design choice for building rich client-side applications, it's not the only popular design trend. We plan to provide a [second theme](https://github.com/mui-org/material-ui/issues/22485) to expand the range of use cases for Material-UI, striking a balance between:
+While Material Design is a predominant design choice for building rich client-side applications, it's not the only popular design trend. We plan to provide a [second theme](https://github.com/mui-org/material-ui/issues/22485) to expand the range of use cases for MUI, striking a balance between:
- alignment with the best-looking design trends of hot startups in the US.
- optimization of its usage for rich client-side applications while keeping it good enough for landing pages.
diff --git a/docs/pages/blog/2021-q1-update.md b/docs/pages/blog/2021-q1-update.md
index dbd0d80574de1d..9c66af6ed2d471 100644
--- a/docs/pages/blog/2021-q1-update.md
+++ b/docs/pages/blog/2021-q1-update.md
@@ -135,7 +135,7 @@ The date picker is at the border between the advanced components and the design
- đ¨ We have started to work on breaking changes to reach a stable state.
- đž We have extended the support of @mui/material to handle v4 and v5 at the same time.
In the future, we might desynchronize the release version of _mui/material-ui_ and _mui/material-ui-x_.
- For Material-UI X, we will likely need to release breaking changes at a higher frequency: every six months.
+ For MUI X, we will likely need to release breaking changes at a higher frequency: every six months.
- đ We have added a column selector.
@@ -182,7 +182,7 @@ This Handbook is the single **source of truth**. It's meant to be updated by any
We have seen a significant influx of stars this quarter.
- đ¨âđŠâđ§âđŚ From 2,052 to 2,141 contributors on GitHub. We add on average one new contributor every day.
- đ° Grew gross revenue at +4%/week on average during the period.
-- đ˘ We have welcomed one new member to Material-UI: [Matheus](/blog/matheus-wichman-joining/).
+- đ˘ We have welcomed one new member to MUI: [Matheus](/blog/matheus-wichman-joining/).
## Our roadmap intent for Q2 2021
diff --git a/docs/pages/blog/2021-q2-update.md b/docs/pages/blog/2021-q2-update.md
index 53e9bd000b9c41..df00408b7deab9 100644
--- a/docs/pages/blog/2021-q2-update.md
+++ b/docs/pages/blog/2021-q2-update.md
@@ -214,7 +214,7 @@ We have the following objectives:
- â¨ď¸ Fix the friction the community has during the upgrade to v5.
We want to make the upgrade feel painless.
- âď¸ Support [React 18](https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html). [Sebastian](https://github.com/eps1lon) is part of the React [Working Group](https://github.com/reactwg/react-18/discussions), focusing on making us ready ahead of time.
- We want our most demanding users to feel empowered by Material-UI, not slowed down by a third-party.
+ We want our most demanding users to feel empowered by MUI, not slowed down by a third-party.
- 𦴠Migrate more components to `@mui/core`. [MichaĹ](https://github.com/michaldudak) has recently added support for the [Switch](https://material-ui.com/components/switches/#unstyled-switches).
You can follow our progress in the [umbrella issue](https://github.com/mui-org/material-ui/issues/27170).
- đ Do a proof of concept on supporting a second design system.
diff --git a/docs/pages/blog/april-2019-update.md b/docs/pages/blog/april-2019-update.md
index acd62dc662c15b..397888d70bd86a 100644
--- a/docs/pages/blog/april-2019-update.md
+++ b/docs/pages/blog/april-2019-update.md
@@ -46,7 +46,7 @@ But this summary is just scratching the surface. We have accepted 243 commits fr
_(We'll do our best, no guarantee!)_
-- We will release Material-UI v4 stable during the React Europe conference.
+- We will release MUI v4 stable during the React Europe conference.
- We will start an effort to support more components. So far, we have identified a couple of useful ones:
- Layout
- Combobox
diff --git a/docs/pages/blog/danail-hadjiatanasov-joining.md b/docs/pages/blog/danail-hadjiatanasov-joining.md
index d5bd1e8c61edf7..1ed18f2fad5733 100644
--- a/docs/pages/blog/danail-hadjiatanasov-joining.md
+++ b/docs/pages/blog/danail-hadjiatanasov-joining.md
@@ -1,16 +1,16 @@
---
-title: Danail Hadjiatanasov joins Material-UI
-description: We are excited to share that Danail Hadjiatanasov has joined Material-UI as part of the enterprise team. This was his first full-time week.
+title: Danail Hadjiatanasov joins MUI
+description: We are excited to share that Danail Hadjiatanasov has joined MUI as part of the enterprise team. This was his first full-time week.
date: 2020-10-23T00:00:00.000Z
authors: ['oliviertassinari']
card: true
---
-We are excited to share that [Danail Hadjiatanasov](https://twitter.com/danail_h) has joined Material-UI as part of the enterprise team. This was his first full-time week.
+We are excited to share that [Danail Hadjiatanasov](https://twitter.com/danail_h) has joined MUI as part of the enterprise team. This was his first full-time week.
For the past 3 years Danail has been working in a company called [Backbase](https://www.backbase.com/) where he was responsible for building a UI library based on Angular that was specifically designed for banks. The UI library and its corresponding design system were sold under a commercial license, and today some of the biggest names in the banking industry have web applications powered by those UI components (RBC, Central 1, Deutsche Bank, BNP Paribas, and others).
-Although he was working with Angular, his true passion is React, having hacked side projects with it. Now he will be able to combine these two talents, and help take Material-UI X to the next level!
+Although he was working with Angular, his true passion is React, having hacked side projects with it. Now he will be able to combine these two talents, and help take MUI X to the next level!
Danail has already landed his first feature in the data grid: [column reordering](https://material-ui.com/components/data-grid/columns/#column-reorder):
diff --git a/docs/pages/blog/danilo-leal-joining.md b/docs/pages/blog/danilo-leal-joining.md
index 5ea178380f3d62..5090071fce9461 100644
--- a/docs/pages/blog/danilo-leal-joining.md
+++ b/docs/pages/blog/danilo-leal-joining.md
@@ -1,18 +1,18 @@
---
-title: Danilo Leal joins Material-UI
-description: We are excited to share that Danilo Leal has joined Material-UI.
+title: Danilo Leal joins MUI
+description: We are excited to share that Danilo Leal has joined MUI.
date: 2021-07-15T00:00:00.000Z
authors: ['oliviertassinari']
card: true
---
-We are excited to share that [Danilo Leal](https://daniloleal.co/) has joined Material-UI!
+We are excited to share that [Danilo Leal](https://daniloleal.co/) has joined MUI!
He started a couple of days ago as a lead designer.
-Before joining Material-UI, he worked as a designer at Loggi, a Brazilian logistics unicorn.
+Before joining MUI, he worked as a designer at Loggi, a Brazilian logistics unicorn.
He has spent the last five years diving into product design, product strategy, and design systems.
Danilo strongly believes that code is a fundamental piece of a designer's work. It is, after all, the real medium through where users experience the product.
-For instance, one of his continuous contributions to Loggi was deep-diving into Material-UI's codebase to fulfill Loggi's customization needs.
+For instance, one of his continuous contributions to Loggi was deep-diving into MUI's codebase to fulfill Loggi's customization needs.
His aspirations are well aligned with where we want to push the company in the long term.
He wants to challenge the status quo.
diff --git a/docs/pages/blog/march-2019-update.md b/docs/pages/blog/march-2019-update.md
index 892e8d8738ac30..4ea60690aeaa88 100644
--- a/docs/pages/blog/march-2019-update.md
+++ b/docs/pages/blog/march-2019-update.md
@@ -27,7 +27,7 @@ Here are the most significant improvements in March:
_(We'll do our best, no guarantee!)_
- We are almost done with [the v4.0.0-alpha breaking changes](https://github.com/mui-org/material-ui/issues/13663). You can already find [the upgrade path](/guides/migration-v3/) from v3 to v4 in the documentation. Next, we will release the first beta version (no more breaking changes).
- The results of the Material-UI developer survey suggested that there are too many breaking changes.
+ The results of the MUI developer survey suggested that there are too many breaking changes.
Don't worry, it's almost over! We will focus on providing more components once we have released v4 stable.
- We will continue, and hopefully complete, the tasks we undertook:
- TypeScript demo variants.
diff --git a/docs/pages/blog/marija-najdova-joining.md b/docs/pages/blog/marija-najdova-joining.md
index f0459ecc409361..30d471d7c87746 100644
--- a/docs/pages/blog/marija-najdova-joining.md
+++ b/docs/pages/blog/marija-najdova-joining.md
@@ -1,14 +1,14 @@
---
-title: Marija Najdova joins Material-UI
-description: We are excited to share that Marija Najdova has joined Material-UI. She has started this week full-time and is now part of the community team.
+title: Marija Najdova joins MUI
+description: We are excited to share that Marija Najdova has joined MUI. She has started this week full-time and is now part of the community team.
date: 2020-09-15T00:00:00.000Z
authors: ['oliviertassinari']
card: true
---
-We are excited to share that [Marija Najdova](https://twitter.com/marijanajdova) has joined Material-UI. She has started this week full-time, and is now part of the community team.
+We are excited to share that [Marija Najdova](https://twitter.com/marijanajdova) has joined MUI. She has started this week full-time, and is now part of the community team.
-Before joining Material-UI, Marija worked on the React implementation of [Fluent UI](https://www.microsoft.com/design/fluent/) at Microsoft. She's passionate about React, design systems, and component driven development. At Microsoft, as part of the Fluent UI core team since 2018, she was responsible for the icons, animations and various theme related features.
+Before joining MUI, Marija worked on the React implementation of [Fluent UI](https://www.microsoft.com/design/fluent/) at Microsoft. She's passionate about React, design systems, and component driven development. At Microsoft, as part of the Fluent UI core team since 2018, she was responsible for the icons, animations and various theme related features.
Marija is off to a running start, having made important changes happen during her free time, even before starting! These include a new structure for the theme object, as well as the ability to [add custom variants](https://material-ui.com/customization/theme-components/#adding-new-component-variants) in v5:
diff --git a/docs/pages/blog/material-ui-v1-is-out.md b/docs/pages/blog/material-ui-v1-is-out.md
index 48304611baa2d2..5ae518c76efdf8 100644
--- a/docs/pages/blog/material-ui-v1-is-out.md
+++ b/docs/pages/blog/material-ui-v1-is-out.md
@@ -1,8 +1,8 @@
---
-description: Material-UI v1 is out đ
+description: MUI v1 is out đ
---
-# Material-UI v1 is out đ
+# MUI v1 is out đ
The core team. May 18, 2018.
@@ -12,7 +12,7 @@ The core team. May 18, 2018.
Our new documentation header & logo by @hai-cea
-It has taken us two years to do it, but Material-UI v1 has finally arrived!
+It has taken us two years to do it, but MUI v1 has finally arrived!
We are so excited about this release, as it's setting a new course for the project. Thank you to _everyone_, especially to [the team](/discover-more/team/), and to everyone who's contributed code, issue triage, and support. **Thank you.**
â¨â¨â¨ See the [**1.0.0 Release Note**](https://github.com/mui-org/material-ui/releases/tag/v1.0.0) on GitHub. â¨â¨â¨
@@ -23,12 +23,12 @@ We are so excited about this release, as it's setting a new course for the proje
## High-level Goals for v1
-Material-UI was started [3 years ago](https://github.com/mui-org/material-ui/commit/28b768913b75752ecf9b6bb32766e27c241dbc46) by [@hai-cea](https://github.com/hai-cea). The React ecosystem has evolved considerably since then, and we have also learned along the way. Two years ago, [@nathanmarks](https://github.com/nathanmarks/) [started](https://github.com/mui-org/material-ui/commit/cf0934dda2ef83852ca094ac7250e2d562ce6156) an ambitious task to rebuild Material-UI from the ground-up, taking advantage of this knowledge to address long-standing issues in customizability, ease of use, and code quality.
+MUI was started [3 years ago](https://github.com/mui-org/material-ui/commit/28b768913b75752ecf9b6bb32766e27c241dbc46) by [@hai-cea](https://github.com/hai-cea). The React ecosystem has evolved considerably since then, and we have also learned along the way. Two years ago, [@nathanmarks](https://github.com/nathanmarks/) [started](https://github.com/mui-org/material-ui/commit/cf0934dda2ef83852ca094ac7250e2d562ce6156) an ambitious task to rebuild MUI from the ground-up, taking advantage of this knowledge to address long-standing issues in customizability, ease of use, and code quality.
### Customizability
-Material-UI v1 is our second stab at the execution of [the vision](https://material-ui-next.com/discover-more/vision/).
-We want Material-UI to become whatever is generally useful for application development, all in the spirit of the Material Design guidelines. Material-UI is not only an implementation of the Material Design guidelines, but a general use UI library of components that are needed by many. We are even allowing developers to build non Material themes on top of Material-UI components. We will soon open source examples of this.
+MUI v1 is our second stab at the execution of [the vision](https://material-ui-next.com/discover-more/vision/).
+We want MUI to become whatever is generally useful for application development, all in the spirit of the Material Design guidelines. MUI is not only an implementation of the Material Design guidelines, but a general use UI library of components that are needed by many. We are even allowing developers to build non Material themes on top of MUI components. We will soon open source examples of this.
- **CSS-in-JS**. We have seen [a great potential for **inline-styles** in the past](https://github.com/mui-org/material-ui/issues/30). It was an opportunity to solve four problems at once: removing the LESS toolchain dependency, allowing dynamic styles, allowing style code splitting and make overrides simpler.
Unfortunately, the [**execution didn't deliver**](https://github.com/mui-org/material-ui/issues/4066). We were lacking key features only available in CSS: media queries, pseudo selectors, pseudo elements, browser prefixes. Debugging was much harder. Overriding styles was very challenging â developers always had to look the implementation, and couldn't use CSS without relying on !important.
@@ -46,7 +46,7 @@ We know the ease of use is a critical part of user acquisition. The more user we
- **Examples**. We are hosting [example projects](https://github.com/mui-org/material-ui/tree/master/examples) with the most popular solutions to start a project: [create-react-app](https://github.com/facebook/create-react-app), [Next.js](https://github.com/zeit/next.js), [Gatsby](https://github.com/gatsbyjs/gatsby), and CDN.
-- **Isolation**. Our components now work in isolation. You should be able to use a single Material-UI component in an existing codebase without any side effect. No global CSS override needed, no bundle size bloat.
+- **Isolation**. Our components now work in isolation. You should be able to use a single MUI component in an existing codebase without any side effect. No global CSS override needed, no bundle size bloat.
- **Documentation**. We have made a huge investment in the documentation. We use [Next.js](https://github.com/zeit/next.js) for a blazingly fast navigation experience. It's also allowing us to provide a first server-side support for the components. We had added a search bar powered by [Algolia's DocSearch](https://community.algolia.com/docsearch/). (don't miss the s shortcut to focus the search bar). We have added many new documentation sections: guides, FAQ, etc. We have made the demos more interactive thanks to a direct integration with [CodeSandbox](https://codesandbox.io/s/4j7m47vlm4).
@@ -54,13 +54,13 @@ We know the ease of use is a critical part of user acquisition. The more user we
### Code quality
-Many people discover web development through Material-UI but it's also used in production to serve millions of customers. We have an important responsibility, our implementation needs to be rock solid.
+Many people discover web development through MUI but it's also used in production to serve millions of customers. We have an important responsibility, our implementation needs to be rock solid.
- **Best practices.** We are following the best practices as much as possible. We have made the components: fully accessible, fully [HTML5 compliant ](https://validator.w3.org/)and SEO friendly.
- report of the Material-UI documentation homepage](https://cdn-images-1.medium.com/max/2000/1*_x_j-jasswGw0WaDyeHk-g.png)
+ report of the MUI documentation homepage](https://cdn-images-1.medium.com/max/2000/1*_x_j-jasswGw0WaDyeHk-g.png)
-
Lighthouse report of the Material-UI documentation homepage
+
Lighthouse report of the MUI documentation homepage
- **Continuous integration.** Every single line of code is tested. We have an impressive [đŻ% test coverage](https://codecov.io/gh/mui-org/material-ui/branch/master). With more than 700 contributors, it's really important. All these tests allow us to quickly iterate and with confidence. We run the test suite runs on all the supported platforms. We also run more than [180 visual regression tests](https://www.argos-ci.com/mui-org/material-ui) thanks to [Argos-CI](https://www.argos-ci.com/).
@@ -68,7 +68,7 @@ Many people discover web development through Material-UI but it's also used in p
An example BrowserStack build
-- **Bundle size**. If you take all the Material-UI components, your bundle will weight more than 100 kB gzipped. Material-UI looks like a huge dependency but it's fine in practice with code splitting. You will most likely use ~40% of the library on a given page/screen. The bundle size is important. It's [constantly monitored](https://github.com/mui-org/material-ui/blob/ca69253843208c21593fff230151e1fffd93a566/.size-limit), which prevents us from introducing size regressions, and allows us to recognize positive efforts.
+- **Bundle size**. If you take all the MUI components, your bundle will weight more than 100 kB gzipped. MUI looks like a huge dependency but it's fine in practice with code splitting. You will most likely use ~40% of the library on a given page/screen. The bundle size is important. It's [constantly monitored](https://github.com/mui-org/material-ui/blob/ca69253843208c21593fff230151e1fffd93a566/.size-limit), which prevents us from introducing size regressions, and allows us to recognize positive efforts.
 output](https://cdn-images-1.medium.com/max/2000/1*AQoyq9OvjFZJE2Ep0UtCzA.png)
@@ -104,7 +104,7 @@ There are so many new things, we can't be exhaustive. Aside from what we have al
## Premium themes
-We have shipped the long-awaited Material-UI v1 stable release. With a new codebase designed to better support customization, it's the perfect timing to start building and promoting premium themes. We are very happy to announce [the first two](https://material-ui.com/store/) from [Creative Tim](https://material-ui.com/store/contributors/creative-tim/). More are coming.
+We have shipped the long-awaited MUI v1 stable release. With a new codebase designed to better support customization, it's the perfect timing to start building and promoting premium themes. We are very happy to announce [the first two](https://material-ui.com/store/) from [Creative Tim](https://material-ui.com/store/contributors/creative-tim/). More are coming.
@@ -116,10 +116,10 @@ We have shipped the long-awaited Material-UI v1 stable release. With a new codeb
## Thank you
-Finally, one last thank you to everyone who's contributed to Material-UI v1.
+Finally, one last thank you to everyone who's contributed to MUI v1.
I'm so excited at the idea we are making it stable, but rest assured, it's just the beginning. We will keep working hard on delivering the best possible UI library components.
-Material-UI is an MIT-licensed open source project. It's an independent project with ongoing development helped by the support of these awesome [backers](/discover-more/backers/). If you'd like to join them, please consider:
+MUI is an MIT-licensed open source project. It's an independent project with ongoing development helped by the support of these awesome [backers](/discover-more/backers/). If you'd like to join them, please consider:
- [Become a backer or sponsor on Patreon](https://www.patreon.com/oliviertassinari).
- [Become a backer or sponsor on OpenCollective](https://opencollective.com/material-ui).
diff --git a/docs/pages/blog/material-ui-v4-is-out.md b/docs/pages/blog/material-ui-v4-is-out.md
index d1302bca6b2883..3e8f0736025257 100644
--- a/docs/pages/blog/material-ui-v4-is-out.md
+++ b/docs/pages/blog/material-ui-v4-is-out.md
@@ -1,14 +1,14 @@
---
-description: Material-UI v4 is out đ
+description: MUI v4 is out đ
---
-# Material-UI v4 is out đ
+# MUI v4 is out đ
The core team. May 23, 2019.
> React components for faster and simpler web development. Build your own design system, or start with Material Design.
-Material-UI v4 has finally arrived. We are so excited about this release, as it defines better foundations for the UI components. Thank you to everyone, especially to [the team](/discover-more/team/), and to everyone who's contributed code, issue triage, and support. **Thank you.**
+MUI v4 has finally arrived. We are so excited about this release, as it defines better foundations for the UI components. Thank you to everyone, especially to [the team](/discover-more/team/), and to everyone who's contributed code, issue triage, and support. **Thank you.**
â¨â¨â¨ See the **[4.0.0 Release Note](https://github.com/mui-org/material-ui/releases/tag/v4.0.0)** on GitHub. â¨â¨â¨
@@ -25,7 +25,7 @@ Material-UI v4 has finally arrived. We are so excited about this release, as it
## High-level goals for v4
-Material-UI v1 was [released](https://medium.com/material-ui/material-ui-v1-is-out-e73ce13463eb) one year ago. Version 4 is our most important major release since then. For those unfamiliar with the history of the project, we didn't release a v2, and v3 only introduced a slight browsers support change.
+MUI v1 was [released](https://medium.com/material-ui/material-ui-v1-is-out-e73ce13463eb) one year ago. Version 4 is our most important major release since then. For those unfamiliar with the history of the project, we didn't release a v2, and v3 only introduced a slight browsers support change.
This release happens within our [fixed frequency](https://material-ui.com/versions/#release-frequency) release strategy. We try to release a major at least every 12 months and at most every 6 months. The migration from v0 to v1 was painful, it almost felt like using two different UI libraries. We've done our best to minimize the time needed to migrate from v3 to v4. To help ease the transition, you can follow this [migration guide](/guides/migration-v3/) đ. It shouldn't take more than a few hours.
@@ -49,14 +49,14 @@ The Material Design team at Google has made the customization of their design sy
After listening to v3 customization experiences of hundreds of developers, we realized that we could do better. We have found 4 classes of common problems.
-- **CSS specificity**. The developers' style specificity needs to be higher to win over the style Material-UI injects in the page. By default, Material-UI injects its style at the end of the `` element. However, styled components and other popular styling solutions inject the style just before it, losing specificity. To solve the problem, we have introduced a new prop: `injectFirst`.
+- **CSS specificity**. The developers' style specificity needs to be higher to win over the style MUI injects in the page. By default, MUI injects its style at the end of the `` element. However, styled components and other popular styling solutions inject the style just before it, losing specificity. To solve the problem, we have introduced a new prop: `injectFirst`.
```jsx
import { StylesProvider } from '@mui/styles';
{/* Your component tree.
- Styled components can override Material-UI's styles. */}
+ Styled components can override MUI's styles. */}
;
```
@@ -74,7 +74,7 @@ import { StylesProvider } from '@mui/styles';
â ď¸ Using global class names provide more power but comes with responsibility. We encourage patterns that increase your custom style isolation.
-- **Pseudo-classes.** A pseudo-class is a keyword added to a selector that specifies a special state of the selected element. The native elements support a wide range of pseudo-classes, the most popular ones being: `:focus`, `:hover`, `:active`. Sometimes, Material-UI can't use a pseudo-class as the state doesn't exist in the platform, e.g. the selected state of a menu item. Material-UI implements support of eight different [custom pseudo-classes](/customization/components/#pseudo-classes). It's important to understand that you need to increase the specificity when using a pseudo-class. For instance:
+- **Pseudo-classes.** A pseudo-class is a keyword added to a selector that specifies a special state of the selected element. The native elements support a wide range of pseudo-classes, the most popular ones being: `:focus`, `:hover`, `:active`. Sometimes, MUI can't use a pseudo-class as the state doesn't exist in the platform, e.g. the selected state of a menu item. MUI implements support of eight different [custom pseudo-classes](/customization/components/#pseudo-classes). It's important to understand that you need to increase the specificity when using a pseudo-class. For instance:
```css
.MenuItem {
@@ -117,7 +117,7 @@ function MyComponent() {
Documentation was reported as the 3rd most critical pain point in the developer survey. We have fixed some of the reported issues and aim to continuously improve going forward.
-- **TypeScript**. TypeScript's growth is impressive, the traffic of their documentation website has grown by a factor of 6 in 3 years. Material-UI v1 was released with built-in TypeScript definitions, but we needed to do more. Sebastian has led the effort to migrate all the demos from JavaScript to TypeScript. This has two important implications. First, we type check our demos, this drastically improves our TypeScript test coverage. We have fixed many issues during the migration. Second, if you are writing your application with TypeScript, you can directly copy & paste our demos without needing to convert them, or having to fix the obscure errors.
+- **TypeScript**. TypeScript's growth is impressive, the traffic of their documentation website has grown by a factor of 6 in 3 years. MUI v1 was released with built-in TypeScript definitions, but we needed to do more. Sebastian has led the effort to migrate all the demos from JavaScript to TypeScript. This has two important implications. First, we type check our demos, this drastically improves our TypeScript test coverage. We have fixed many issues during the migration. Second, if you are writing your application with TypeScript, you can directly copy & paste our demos without needing to convert them, or having to fix the obscure errors.
@@ -127,7 +127,7 @@ Documentation was reported as the 3rd most critical pain point in the developer
Use the JS/TS toggle to see code in JavaScript or TypeScript
-- **i18n**. Developers come to Material-UI's documentation from all around the world. We want to include as many people as possible đđđ. We have completed the effort started in v3 by working on the Algolia search support, Google search indexing, Table Of Contents and Side Nav infrastructure.
+- **i18n**. Developers come to MUI's documentation from all around the world. We want to include as many people as possible đđđ. We have completed the effort started in v3 by working on the Algolia search support, Google search indexing, Table Of Contents and Side Nav infrastructure.
We would like to thank [Danica Shen](https://github.com/DDDDDanica), [Dominik Engel](https://github.com/Domino987), and [Jairon Alves Lima](https://github.com/jaironalves) for their heroic work on the đ¨đł, đŠđŞ and đ§đˇ translations, while not forgetting the other 348 (and growing) translators.
@@ -136,9 +136,9 @@ Documentation was reported as the 3rd most critical pain point in the developer
### Performance
-You may be afraid that using Material-UI's components will bloat and slow down your website/application. Would you be better off writing your own components? Well, it's our mission to make this cost as minimal as possible đ.
+You may be afraid that using MUI's components will bloat and slow down your website/application. Would you be better off writing your own components? Well, it's our mission to make this cost as minimal as possible đ.
-- **Tree shaking**. Material-UI v4 is the first version to support native tree shaking with ES modules. This has one important DX benefitâyou can now use destructured imports when importing multiple components:
+- **Tree shaking**. MUI v4 is the first version to support native tree shaking with ES modules. This has one important DX benefitâyou can now use destructured imports when importing multiple components:
```js
import {
@@ -164,13 +164,13 @@ import {
Fine level tracking
- **Preact X.** We have introduced a working [integration example with Preact](https://github.com/mui-org/material-ui/blob/next/examples/preact/README.md). Preact is a fast, 1/10 smaller alternative to React, with the same modern API. We will do our best to support it.
-- **Runtime performance**. We have heard that some people struggle with the runtime cost of using Material-UI. We have solved a few problems reported, but nothing systematic. We have observed [a slight gain](https://github.com/mui-org/material-ui/pull/15023) by moving from the classes API to the hooks API. However, it's hard to make progress as we lack a properly setup performance bench. It's something to consider for v5.
+- **Runtime performance**. We have heard that some people struggle with the runtime cost of using MUI. We have solved a few problems reported, but nothing systematic. We have observed [a slight gain](https://github.com/mui-org/material-ui/pull/15023) by moving from the classes API to the hooks API. However, it's hard to make progress as we lack a properly setup performance bench. It's something to consider for v5.
### Preparing for the future
-Material-UI v4 depends on React âĽ16.8.0. This is the first version of React that supports the [new Hooks API](https://reactjs.org/docs/hooks-intro.html).
+MUI v4 depends on React âĽ16.8.0. This is the first version of React that supports the [new Hooks API](https://reactjs.org/docs/hooks-intro.html).
-- **Ref forwarding**. Most of the time, you use the `ref` prop to access the underlying DOM node of a React element. You might want to focus an element, compute the position of an element, and so on. You should never need to access a Material-UI component's instance methods, they are considered private. The components expose an `action` when it's really needed. For instance, you might want to update the tab indicator position when it goes out of sync with the tab item position. To ease this use case, Sebastian has lead an effort to implement [`React.forwardRef()`](https://reactjs.org/docs/react-api.html#reactforwardref). In practice, this means that you can retrieve a reference to the DOM node like you would do with a built-in component (`button`, `div`, etc.):
+- **Ref forwarding**. Most of the time, you use the `ref` prop to access the underlying DOM node of a React element. You might want to focus an element, compute the position of an element, and so on. You should never need to access a MUI component's instance methods, they are considered private. The components expose an `action` when it's really needed. For instance, you might want to update the tab indicator position when it goes out of sync with the tab item position. To ease this use case, Sebastian has lead an effort to implement [`React.forwardRef()`](https://reactjs.org/docs/react-api.html#reactforwardref). In practice, this means that you can retrieve a reference to the DOM node like you would do with a built-in component (`button`, `div`, etc.):
```jsx
import { Button } from '@mui/material';
@@ -202,7 +202,7 @@ function MyButton() {
Most of our users are interested in the good looking functional aspect of our components, rather than in a strict application of the Material Design guidelines. However, we think that it's important for us to keep up to date with the guidelines. The specification received it's most significant update since Google made it the design language for its apps in 2014, at [Google I/O 2018](https://design.google/library/io-2018-our-definitive-guide-design/).
-The Material Design "v2" announcement caught us by surprise when we released Material-UI v1. We have worked on upgrading our components since then. In v4, we have updated the styles of the Tab, Snackbar, Checkboxes, Radios, Switches, List, Dialog, and other components â¨.
+The Material Design "v2" announcement caught us by surprise when we released MUI v1. We have worked on upgrading our components since then. In v4, we have updated the styles of the Tab, Snackbar, Checkboxes, Radios, Switches, List, Dialog, and other components â¨.
@@ -308,8 +308,8 @@ import { Button } from '@mui/material';
;
```
-- **Styled components.** We have seen many people asking for migration to styled components. We want Material-UI v5 to be better aligned with the community's best-loved tools, but at the same time, we don't want to break your code.
- So we will work on isolating the components from the styling solution. The new _@mui/styles_ package is the first step in this direction. We envision a world where you can use Material-UI styled with styled components, linaria, and JSS or without any styles.
+- **Styled components.** We have seen many people asking for migration to styled components. We want MUI v5 to be better aligned with the community's best-loved tools, but at the same time, we don't want to break your code.
+ So we will work on isolating the components from the styling solution. The new _@mui/styles_ package is the first step in this direction. We envision a world where you can use MUI styled with styled components, linaria, and JSS or without any styles.
Developers should be able to use their preferred styling solution without paying the cost of two CSS-in-JS runtimes.
- **Accessibility.** While we try to fix all accessibility issues as they are reported by our users, we feel that we can do better. We want to run a professional ADA audit of all our components âżď¸.
@@ -320,11 +320,11 @@ We will follow the Bootstrap model.
We are working on [a Premium themes store](https://material-ui.com/store/).
We have built partnerships with the best theme authors of the ecosystem.
-Within a few weeks, you should find a collection of the best Material-UI templates and themes đ.
+Within a few weeks, you should find a collection of the best MUI templates and themes đ.
## Thank you
-Finally, one last thank you to everyone who's contributed to Material-UI v4.Â
+Finally, one last thank you to everyone who's contributed to MUI v4.Â
I'm so excited about this release! It's just the beginning. We will keep working hard on delivering the best possible React UI framework components.
diff --git a/docs/pages/blog/matheus-wichman-joining.md b/docs/pages/blog/matheus-wichman-joining.md
index 6cebcbc8bad2b2..fcf2863fa4169c 100644
--- a/docs/pages/blog/matheus-wichman-joining.md
+++ b/docs/pages/blog/matheus-wichman-joining.md
@@ -1,22 +1,22 @@
---
-title: Matheus Wichman joins Material-UI
-description: We are excited to share that Matheus Wichman has joined Material-UI.
+title: Matheus Wichman joins MUI
+description: We are excited to share that Matheus Wichman has joined MUI.
date: 2021-04-05T00:00:00.000Z
authors: ['oliviertassinari']
card: true
---
-We are excited to share that [Matheus Wichman](https://github.com/m4theushw) has joined Material-UI.
+We are excited to share that [Matheus Wichman](https://github.com/m4theushw) has joined MUI.
He started a couple of days ago full-time, and is part of the advanced components team.
-Before joining Material-UI, Matheus worked as a software engineer at a consulting agency in Brazil.
-He has spent the last three years focusing on React and the frontend world - his last project was for a payment processing company, where he created a design system based on Material-UI and developed new components for enterprise applications.
+Before joining MUI, Matheus worked as a software engineer at a consulting agency in Brazil.
+He has spent the last three years focusing on React and the frontend world - his last project was for a payment processing company, where he created a design system based on MUI and developed new components for enterprise applications.
Matheus is passionate about software development, so much so that he started his career very early on, coding in PHP and JavaScript, at age 14.
We were impressed by his capability to quickly jump into an unknown codebase and solve problems at their root.
In a couple of days, he has managed to report and fix bugs, both in the core components (_mui-org/material-ui_) and in the advanced components repository (_mui-org/material-ui-x_).
-While we can't predict the future, Matheus will initially help us deliver the planned breaking changes of Material-UI v5, increase the pace of development of the date range picker, and push the data grid forward.
+While we can't predict the future, Matheus will initially help us deliver the planned breaking changes of MUI v5, increase the pace of development of the date range picker, and push the data grid forward.
Matheus is the first of a series of 5 new positions we have recently opened and almost all filled.
We will cross the 10 person milestone in the coming weeks.
diff --git a/docs/pages/blog/may-2019-update.md b/docs/pages/blog/may-2019-update.md
index 91c8669799d747..375c55cd27b8b7 100644
--- a/docs/pages/blog/may-2019-update.md
+++ b/docs/pages/blog/may-2019-update.md
@@ -8,7 +8,7 @@ Olivier Tassinari. June 8, 2019.
Here are the most significant improvements in May:
-- đ We released Material-UI v4 stable during the React Europe conference.
+- đ We released MUI v4 stable during the React Europe conference.
You can find the details in our [blog post đ](https://medium.com/material-ui/material-ui-v4-is-out-4b7587d1e701) and a quick introduction in this [5 minutes talk](https://www.youtube.com/watch?v=m54_CPfbWow).
- đ We have made two subsequent releases after v4.0.0, containing a significant number of fixes (v4.0.1 and v4.0.2).
@@ -30,8 +30,8 @@ _(We'll do our best, no guarantee!)_
- We will start exploring how we can provide style adapters in v5 (styled-components, JSS, linaria, naked, etc.)
- We will experiment around advisory offerings for enterprises.
If you are an enterprise and are looking for one of the following:
- - A dedicated communication channel giving priority access to Material-UI engineers.
- - Architecture Reviews. Sit down with a Material-UI engineer and walk through all aspects of your Material-UI project and current tech stack or architecture, to identify issues and opportunities for improvement.
+ - A dedicated communication channel giving priority access to MUI engineers.
+ - Architecture Reviews. Sit down with a MUI engineer and walk through all aspects of your MUI project and current tech stack or architecture, to identify issues and opportunities for improvement.
You can contact us at advisory@material-ui.com.
diff --git a/docs/pages/blog/michal-dudak-joining.md b/docs/pages/blog/michal-dudak-joining.md
index 8967f24a62889c..8e6155ac5c7ca5 100644
--- a/docs/pages/blog/michal-dudak-joining.md
+++ b/docs/pages/blog/michal-dudak-joining.md
@@ -1,15 +1,15 @@
---
-title: MichaĹ Dudak joins Material-UI
-description: We are excited to share that MichaĹ Dudak has joined Material-UI.
+title: MichaĹ Dudak joins MUI
+description: We are excited to share that MichaĹ Dudak has joined MUI.
date: 2021-06-14T00:00:00.000Z
authors: ['oliviertassinari']
card: true
---
-We are excited to share that [MichaĹ Dudak](https://twitter.com/michaldudak) has joined Material-UI!
+We are excited to share that [MichaĹ Dudak](https://twitter.com/michaldudak) has joined MUI!
He started a couple of days ago full-time and is part of the core components team.
-Before joining Material-UI, MichaĹ worked as a full-stack engineer and software architect at Future Processing, a high-end development agency in Poland.
+Before joining MUI, MichaĹ worked as a full-stack engineer and software architect at Future Processing, a high-end development agency in Poland.
He has been a professional practitioner in the field for over a decade.
He admires great designs and clever solutions.
Creating with TypeScript and CSS is a pleasure for him.
@@ -17,7 +17,7 @@ Creating with TypeScript and CSS is a pleasure for him.
We were impressed by his technical challenge.
He leveraged most of the best practices we enforce when writing components, without prior experience contributing to our codebase.
-While we can't predict the future, MichaĹ is currently responsible for the development of a new vertical for Material-UI: the unstyled & headless React components.
+While we can't predict the future, MichaĹ is currently responsible for the development of a new vertical for MUI: the unstyled & headless React components.
Marija initiated this effort with a couple of new modules under the [@mui/core](https://unpkg.com/browse/@mui/core@latest/) package.
This is a strategic effort for us, with the intent to solve two problems:
diff --git a/docs/pages/blog/siriwat-kunaporn-joining.md b/docs/pages/blog/siriwat-kunaporn-joining.md
index 844ce9c810e8cf..821277c081437e 100644
--- a/docs/pages/blog/siriwat-kunaporn-joining.md
+++ b/docs/pages/blog/siriwat-kunaporn-joining.md
@@ -1,22 +1,22 @@
---
-title: Siriwat Kunaporn joins Material-UI
-description: We are excited to share that Siriwat Kunaporn has joined Material-UI.
+title: Siriwat Kunaporn joins MUI
+description: We are excited to share that Siriwat Kunaporn has joined MUI.
date: 2021-05-17T00:00:00.000Z
authors: ['oliviertassinari']
card: true
---
-We are excited to share that [Siriwat Kunaporn](https://twitter.com/siriwatknp) (Jun) has joined Material-UI.
+We are excited to share that [Siriwat Kunaporn](https://twitter.com/siriwatknp) (Jun) has joined MUI.
He started a couple of days ago full-time and is part of the core components team.
-Before joining Material-UI, Jun worked as a software engineer at ThoughtWorks.
+Before joining MUI, Jun worked as a software engineer at ThoughtWorks.
He has spent the last three years as a full-stack engineer, focusing more on React and the implementation of great-looking UIs. Jun is passionate about creating UIs that feel amazing.
-We were impressed by his previous work on exploring the customization potential of Material-UI in [MUI Treasury](https://mui-treasury.com/).
+We were impressed by his previous work on exploring the customization potential of MUI in [MUI Treasury](https://mui-treasury.com/).
He's has demonstrated his care of the details and interest in design.
-While we can't predict the future, Jun will initially help us get Material-UI v5 down the finish line.
-Then, he will be focusing almost exclusively on pushing Material-UI further in the design realm.
+While we can't predict the future, Jun will initially help us get MUI v5 down the finish line.
+Then, he will be focusing almost exclusively on pushing MUI further in the design realm.
We might start with a [second theme](https://github.com/mui-org/material-ui/issues/22485), a rebranding, a revamp of the documentation or the implementation of ["blocks"](https://deploy-preview-16--material-ui-blocks.netlify.app/).
Jun is the second of a series of 5 new positions we have recently opened and filled.
diff --git a/docs/pages/blog/spotlight-damien-tassone.md b/docs/pages/blog/spotlight-damien-tassone.md
index d257cbe46da36b..12c7de17af7b6d 100644
--- a/docs/pages/blog/spotlight-damien-tassone.md
+++ b/docs/pages/blog/spotlight-damien-tassone.md
@@ -1,14 +1,14 @@
---
title: A spotlight on Damien Tassone joining the team
-description: Damien Tassone has joined Material-UI. He's the first full-time member to focus on enterprise components.
+description: Damien Tassone has joined MUI. He's the first full-time member to focus on enterprise components.
date: 2020-09-15T00:00:00.000Z
authors: ['oliviertassinari"]
card: true
---
-A few months ago, right in the middle of the COVID-19 outbreak, [Damien Tassone](https://twitter.com/madKakoO) joined Material-UI. He's the first full-time member to focus on enterprise components. Back then, we only made a quick mention of it. It's never too late to introduce him properly.
+A few months ago, right in the middle of the COVID-19 outbreak, [Damien Tassone](https://twitter.com/madKakoO) joined MUI. He's the first full-time member to focus on enterprise components. Back then, we only made a quick mention of it. It's never too late to introduce him properly.
-Prior to joining Material-UI, Damien worked in the finance industry in London for a decade. Part of the initial Agile Market team at RBS, and more recently leading a large Commodity Trading application at Adaptive, Damien has developed his React experience as part of large projects where Components driven design plays a huge role in successfully delivering applications. He loves TypeScript.
+Prior to joining MUI, Damien worked in the finance industry in London for a decade. Part of the initial Agile Market team at RBS, and more recently leading a large Commodity Trading application at Adaptive, Damien has developed his React experience as part of large projects where Components driven design plays a huge role in successfully delivering applications. He loves TypeScript.
Right from the start, Damien has made fast and significant progress. He has been an amazing addition to the team, and thanks to him, we are on the verge of releasing a new advanced component: the [Data Grid](https://material-ui.com/components/data-grid).
diff --git a/docs/pages/branding/careers.tsx b/docs/pages/branding/careers.tsx
index c8b0dd6fa1f304..fdd8ec6f552c42 100644
--- a/docs/pages/branding/careers.tsx
+++ b/docs/pages/branding/careers.tsx
@@ -180,7 +180,7 @@ const futureRolesData = {
{
title: 'Support Engineer',
description:
- 'Ensure that our users wildly succeed on their journey with Material-UI. Youâll directly work with users, customers, and potential customers to unblock them from using the products, triage and resolve issues, and use this direct feedback to drive direct improvements in Material-UI.',
+ 'Ensure that our users wildly succeed on their journey with MUI. Youâll directly work with users, customers, and potential customers to unblock them from using the products, triage and resolve issues, and use this direct feedback to drive direct improvements in MUI.',
},
],
};
@@ -577,7 +577,7 @@ export default function Careers() {
diff --git a/docs/pages/branding/home.tsx b/docs/pages/branding/home.tsx
index c7e5ef7e43645b..312d55efa1bcfd 100644
--- a/docs/pages/branding/home.tsx
+++ b/docs/pages/branding/home.tsx
@@ -46,7 +46,7 @@ export default function Home() {
{
"@context": "https://schema.org",
"@type": "Organization",
- "name": "Material-UI",
+ "name": "MUI",
"url": "https://material-ui.com/",
"logo": "https://material-ui.com/static/logo.png",
"sameAs": [
diff --git a/docs/pages/branding/mui-x.tsx b/docs/pages/branding/mui-x.tsx
index 6ad061c771c3c9..0ce5f3564b2185 100644
--- a/docs/pages/branding/mui-x.tsx
+++ b/docs/pages/branding/mui-x.tsx
@@ -53,7 +53,7 @@ function AdvancedReactComponent() {
fontWeight: 'normal',
}}
>
- Material-UI X is the last React UI library you'll ever need.{' '}
+ MUI X is the last React UI library you'll ever need.{' '}
It contains the best React Data Grid on the market and a{' '}
growing list of
@@ -160,8 +160,8 @@ const materialUixData = [
title: 'Built exclusively for React',
description: (
- The team behind Material-UI has been developing for React, and only React, since 2014. We
- went all-in on React before most developers.
+ The team behind MUI has been developing for React, and only React, since 2014. We went
+ all-in on React before most developers.
As a result the components benefit from the expertise we have built, and leverage the power
@@ -174,12 +174,12 @@ const materialUixData = [
title: 'TypeScript support',
description: (
- Material-UI X components are written in TypeScript, this helps keep the type definitions
- always up to date.
+ MUI X components are written in TypeScript, this helps keep the type definitions always up
+ to date.
- Over half of all React web applications are built with TypeScript. If yours is, Material-UI
- X is ready for you. (And if it isn't â we've still got you covered! đ)
+ Over half of all React web applications are built with TypeScript. If yours is, MUI X is
+ ready for you. (And if it isn't â we've still got you covered! đ)
),
},
@@ -188,9 +188,8 @@ const materialUixData = [
title: 'The most popular library',
description: (
- The team behind Material-UI X also developed the most popular UI library for React:
- Material-UI. With Material-UI X you will benefit from the same expertise gained over many
- years.
+ The team behind MUI X also developed the most popular UI library for React: MUI. With MUI X
+ you will benefit from the same expertise gained over many years.
The components are built to the same quality standards: end-to-end tests, polished
API, type safe, accessible, fast, small. đ
@@ -207,7 +206,7 @@ const materialUixData = [
such as a data grid, there isn't even an open source alternative to turn to.
- Material-UI X will support all the most needed UI components, without sacrificing quality.
+ MUI X will support all the most needed UI components, without sacrificing quality.
),
},
@@ -227,8 +226,8 @@ const materialUixData = [
what good is that nice design system if you can't use it?
- Material-UI X is simple to customize by design, which means that you are in complete and
- full control of how your components render down to the very last component, class or style.
+ MUI X is simple to customize by design, which means that you are in complete and full
+ control of how your components render down to the very last component, class or style.
),
},
@@ -260,8 +259,8 @@ function WhyMaterialUix() {
}}
>
Looking to get ahead? We have timely resources. Switch to{' '}
- Material-UI X to get
- more components.
+ MUI X to get more
+ components.
{materialUixData.map((material) => (
@@ -374,7 +373,7 @@ function ReactDataGridMarket() {
Packed with exclusive features
- The Material-UI X React Data Grid is packed with exclusive features that will
+ The MUI X React Data Grid is packed with exclusive features that will
enrich the experience of your data tables.
@@ -435,8 +434,7 @@ const communityData = [
url: 'https://twitter.com/jimboolean/status/1276549134128943106',
description: (
- Working with Material-UI is like working with an entire UI development team, minus the
- overhead.
+ Working with MUI is like working with an entire UI development team, minus the overhead.
The theming tooling is simple and well-done. The components are common, customizable, and
@@ -470,7 +468,7 @@ const communityData = [
id: '@matthiasmargot',
avatar: '/static/branding/mui-x/avatar-matthiasmargot.jpg',
url: 'https://twitter.com/matthiasmargot/status/1215482285681795072',
- description: `The DX on Material-UI is absolutely insane and that package has shaped my approach to
+ description: `The DX on MUI is absolutely insane and that package has shaped my approach to
Component API Design / Composition Design & Style System Design. I think those guys got it
idiomatically right, wonderful product.`,
},
@@ -479,7 +477,7 @@ const communityData = [
id: '@SharpeMartha',
avatar: '/static/branding/mui-x/avatar-SharpeMartha.jpg',
url: 'https://twitter.com/SharpeMartha/status/1277983914355818496',
- description: `Spent the morning going through the docs for Material-UI. Such an amazing framework with
+ description: `Spent the morning going through the docs for MUI. Such an amazing framework with
amazing documentation! I tried using it several months ago, but struggled to grasp how a
lot of it worked. Apparently, my understanding of React has been upgraded since then.
Smiling face with smiling eyes.`,
@@ -856,8 +854,8 @@ export default function Page() {
return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs/pages/company/technical-product-manager.js b/docs/pages/company/technical-product-manager.js
new file mode 100644
index 00000000000000..926b5af56dab5e
--- /dev/null
+++ b/docs/pages/company/technical-product-manager.js
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import TopLayoutCompany from 'docs/src/modules/components/TopLayoutCompany';
+import {
+ demos,
+ docs,
+ demoComponents,
+} from 'docs/src/pages/company/careers/technical-product-manager.md?@mui/markdown';
+
+export default function Page() {
+ return ;
+}
diff --git a/docs/pages/index.tsx b/docs/pages/index.tsx
index e9b0ad7c31822f..11750a377c3f8d 100644
--- a/docs/pages/index.tsx
+++ b/docs/pages/index.tsx
@@ -176,7 +176,7 @@ export default function LandingPage() {
{
"@context": "https://schema.org",
"@type": "Organization",
- "name": "Material-UI",
+ "name": "MUI",
"url": "https://material-ui.com/",
"logo": "https://material-ui.com/static/logo.png",
"sameAs": [
diff --git a/docs/pages/premium-themes/onepirate/forgot-password.js b/docs/pages/premium-themes/onepirate/forgot-password.js
index c501d7f1edbe4a..855d9e8c8b9fc7 100644
--- a/docs/pages/premium-themes/onepirate/forgot-password.js
+++ b/docs/pages/premium-themes/onepirate/forgot-password.js
@@ -4,7 +4,7 @@ import ForgotPassword from 'docs/src/pages/premium-themes/onepirate/ForgotPasswo
export default function Page() {
return (
-
+
);
diff --git a/docs/pages/premium-themes/onepirate/index.js b/docs/pages/premium-themes/onepirate/index.js
index 74de2f0a8ea71c..aee0a27d1f9247 100644
--- a/docs/pages/premium-themes/onepirate/index.js
+++ b/docs/pages/premium-themes/onepirate/index.js
@@ -4,7 +4,7 @@ import Home from 'docs/src/pages/premium-themes/onepirate/Home';
export default function Page() {
return (
-
+
);
diff --git a/docs/pages/premium-themes/onepirate/privacy.js b/docs/pages/premium-themes/onepirate/privacy.js
index b199edd477df78..ea922c59f9c27a 100644
--- a/docs/pages/premium-themes/onepirate/privacy.js
+++ b/docs/pages/premium-themes/onepirate/privacy.js
@@ -4,7 +4,7 @@ import Privacy from 'docs/src/pages/premium-themes/onepirate/Privacy';
export default function Page() {
return (
-
+
);
diff --git a/docs/pages/premium-themes/onepirate/sign-in.js b/docs/pages/premium-themes/onepirate/sign-in.js
index 6012eeb2bb4450..07efcff0beff6c 100644
--- a/docs/pages/premium-themes/onepirate/sign-in.js
+++ b/docs/pages/premium-themes/onepirate/sign-in.js
@@ -4,7 +4,7 @@ import SignIn from 'docs/src/pages/premium-themes/onepirate/SignIn';
export default function Page() {
return (
-
+
);
diff --git a/docs/pages/premium-themes/onepirate/sign-up.js b/docs/pages/premium-themes/onepirate/sign-up.js
index f497f92d1e3d65..eca3657e3dd296 100644
--- a/docs/pages/premium-themes/onepirate/sign-up.js
+++ b/docs/pages/premium-themes/onepirate/sign-up.js
@@ -4,7 +4,7 @@ import SignUp from 'docs/src/pages/premium-themes/onepirate/SignUp';
export default function Page() {
return (
-
+
);
diff --git a/docs/pages/premium-themes/onepirate/terms.js b/docs/pages/premium-themes/onepirate/terms.js
index 2810988713a1a4..abaeea05e513c7 100644
--- a/docs/pages/premium-themes/onepirate/terms.js
+++ b/docs/pages/premium-themes/onepirate/terms.js
@@ -4,7 +4,7 @@ import Terms from 'docs/src/pages/premium-themes/onepirate/Terms';
export default function Page() {
return (
-
+
);
diff --git a/docs/pages/premium-themes/paperbase/index.js b/docs/pages/premium-themes/paperbase/index.js
index 51260de5e75b99..eed920a97e4b87 100644
--- a/docs/pages/premium-themes/paperbase/index.js
+++ b/docs/pages/premium-themes/paperbase/index.js
@@ -5,7 +5,7 @@ import Paperbase from 'docs/src/pages/premium-themes/paperbase/Paperbase';
export default function Page() {
return (
diff --git a/docs/public/_redirects b/docs/public/_redirects
index 19899ed4b504af..a3902d984cd575 100644
--- a/docs/public/_redirects
+++ b/docs/public/_redirects
@@ -159,9 +159,9 @@ https://v3-9-0.material-ui.com/* https://v3.material-ui.com/:splat 301!
## material-ui-x
## Unlike the store that expect to be hosted under a subfolder,
## material-ui-x is configured to be hosted at the root.
-/api/*/ https://next--material-ui-x.netlify.app/api/:splat/ 200
-/:lang/api/*/ https://next--material-ui-x.netlify.app/:lang/api/:splat/ 200
-/components/* https://next--material-ui-x.netlify.app/components/:splat 200
-/:lang/components/* https://next--material-ui-x.netlify.app/:lang/components/:splat 200
-/_next/* https://next--material-ui-x.netlify.app/_next/:splat 200
-/static/x/* https://next--material-ui-x.netlify.app/static/x/:splat 200
+/api/*/ https://docs-v5--material-ui-x.netlify.app/api/:splat/ 200
+/:lang/api/*/ https://docs-v5--material-ui-x.netlify.app/:lang/api/:splat/ 200
+/components/* https://docs-v5--material-ui-x.netlify.app/components/:splat 200
+/:lang/components/* https://docs-v5--material-ui-x.netlify.app/:lang/components/:splat 200
+/_next/* https://docs-v5--material-ui-x.netlify.app/_next/:splat 200
+/static/x/* https://docs-v5--material-ui-x.netlify.app/static/x/:splat 200
diff --git a/docs/public/static/branding/companies/boeing-dark.svg b/docs/public/static/branding/companies/boeing-dark.svg
index af14c37e4c221d..2f77a01be06809 100644
--- a/docs/public/static/branding/companies/boeing-dark.svg
+++ b/docs/public/static/branding/companies/boeing-dark.svg
@@ -1 +1,4 @@
-
\ No newline at end of file
+
diff --git a/docs/public/static/branding/companies/boeing-light.svg b/docs/public/static/branding/companies/boeing-light.svg
index 8aa9289dc73723..af5fb185b95099 100644
--- a/docs/public/static/branding/companies/boeing-light.svg
+++ b/docs/public/static/branding/companies/boeing-light.svg
@@ -1 +1,4 @@
-
\ No newline at end of file
+
diff --git a/docs/public/static/branding/companies/deloitte-dark.svg b/docs/public/static/branding/companies/deloitte-dark.svg
index c4f696d089b99b..bcd802f29ab97b 100644
--- a/docs/public/static/branding/companies/deloitte-dark.svg
+++ b/docs/public/static/branding/companies/deloitte-dark.svg
@@ -1 +1,4 @@
-
\ No newline at end of file
+
diff --git a/docs/public/static/branding/companies/deloitte-light.svg b/docs/public/static/branding/companies/deloitte-light.svg
index adc0c46e653131..6966df29a3c33a 100644
--- a/docs/public/static/branding/companies/deloitte-light.svg
+++ b/docs/public/static/branding/companies/deloitte-light.svg
@@ -1 +1,4 @@
-
\ No newline at end of file
+
diff --git a/docs/public/static/branding/companies/siemens-dark.svg b/docs/public/static/branding/companies/siemens-dark.svg
index a6e6138b180f4e..81322130f31f7d 100644
--- a/docs/public/static/branding/companies/siemens-dark.svg
+++ b/docs/public/static/branding/companies/siemens-dark.svg
@@ -1 +1,3 @@
-
\ No newline at end of file
+
diff --git a/docs/public/static/branding/companies/siemens-light.svg b/docs/public/static/branding/companies/siemens-light.svg
index eacca89863f0b8..81322130f31f7d 100644
--- a/docs/public/static/branding/companies/siemens-light.svg
+++ b/docs/public/static/branding/companies/siemens-light.svg
@@ -1 +1,3 @@
-
\ No newline at end of file
+
diff --git a/docs/public/static/branding/companies/southwest-dark.svg b/docs/public/static/branding/companies/southwest-dark.svg
index 4ea55bb461ee86..7786bb3fbe040e 100644
--- a/docs/public/static/branding/companies/southwest-dark.svg
+++ b/docs/public/static/branding/companies/southwest-dark.svg
@@ -1 +1,7 @@
-
\ No newline at end of file
+
diff --git a/docs/public/static/branding/companies/southwest-light.svg b/docs/public/static/branding/companies/southwest-light.svg
index 6a3ec2dc9ac1df..28ad5d8224e4d3 100644
--- a/docs/public/static/branding/companies/southwest-light.svg
+++ b/docs/public/static/branding/companies/southwest-light.svg
@@ -1 +1,7 @@
-
\ No newline at end of file
+
diff --git a/docs/public/static/branding/companies/volvo-dark.svg b/docs/public/static/branding/companies/volvo-dark.svg
index a333de4bae2801..4669394e433f78 100644
--- a/docs/public/static/branding/companies/volvo-dark.svg
+++ b/docs/public/static/branding/companies/volvo-dark.svg
@@ -1 +1,10 @@
-
\ No newline at end of file
+
diff --git a/docs/public/static/branding/companies/volvo-light.svg b/docs/public/static/branding/companies/volvo-light.svg
index 119f7a82f36310..022cd8970d1663 100644
--- a/docs/public/static/branding/companies/volvo-light.svg
+++ b/docs/public/static/branding/companies/volvo-light.svg
@@ -1 +1,10 @@
-
\ No newline at end of file
+
diff --git a/docs/public/static/branding/mui-x/chart-dark1.png b/docs/public/static/branding/mui-x/chart-dark1.png
new file mode 100644
index 00000000000000..04da60024105ca
Binary files /dev/null and b/docs/public/static/branding/mui-x/chart-dark1.png differ
diff --git a/docs/public/static/branding/mui-x/chart-dark2.png b/docs/public/static/branding/mui-x/chart-dark2.png
new file mode 100644
index 00000000000000..cd80c68890312b
Binary files /dev/null and b/docs/public/static/branding/mui-x/chart-dark2.png differ
diff --git a/docs/public/static/branding/mui-x/chart-dark3.png b/docs/public/static/branding/mui-x/chart-dark3.png
new file mode 100644
index 00000000000000..981aa4a7001202
Binary files /dev/null and b/docs/public/static/branding/mui-x/chart-dark3.png differ
diff --git a/docs/public/static/branding/mui-x/chart-dark4.png b/docs/public/static/branding/mui-x/chart-dark4.png
new file mode 100644
index 00000000000000..e449e93673ab67
Binary files /dev/null and b/docs/public/static/branding/mui-x/chart-dark4.png differ
diff --git a/docs/public/static/branding/mui-x/chart-light1.png b/docs/public/static/branding/mui-x/chart-light1.png
new file mode 100644
index 00000000000000..08eed22fd24636
Binary files /dev/null and b/docs/public/static/branding/mui-x/chart-light1.png differ
diff --git a/docs/public/static/branding/mui-x/chart-light2.png b/docs/public/static/branding/mui-x/chart-light2.png
new file mode 100644
index 00000000000000..f6f3bf37451c29
Binary files /dev/null and b/docs/public/static/branding/mui-x/chart-light2.png differ
diff --git a/docs/public/static/branding/mui-x/chart-light3.png b/docs/public/static/branding/mui-x/chart-light3.png
new file mode 100644
index 00000000000000..3cc0c2659bde8e
Binary files /dev/null and b/docs/public/static/branding/mui-x/chart-light3.png differ
diff --git a/docs/public/static/branding/mui-x/chart-light4.png b/docs/public/static/branding/mui-x/chart-light4.png
new file mode 100644
index 00000000000000..0c9d9d9e7a3bcd
Binary files /dev/null and b/docs/public/static/branding/mui-x/chart-light4.png differ
diff --git a/docs/public/static/branding/mui-x/sparkline-dark1.png b/docs/public/static/branding/mui-x/sparkline-dark1.png
new file mode 100644
index 00000000000000..9351de0390d2bd
Binary files /dev/null and b/docs/public/static/branding/mui-x/sparkline-dark1.png differ
diff --git a/docs/public/static/branding/mui-x/sparkline-dark2.png b/docs/public/static/branding/mui-x/sparkline-dark2.png
new file mode 100644
index 00000000000000..05884527fec1a3
Binary files /dev/null and b/docs/public/static/branding/mui-x/sparkline-dark2.png differ
diff --git a/docs/public/static/branding/mui-x/sparkline-light1.png b/docs/public/static/branding/mui-x/sparkline-light1.png
new file mode 100644
index 00000000000000..87069c0ab0d78b
Binary files /dev/null and b/docs/public/static/branding/mui-x/sparkline-light1.png differ
diff --git a/docs/public/static/branding/mui-x/sparkline-light2.png b/docs/public/static/branding/mui-x/sparkline-light2.png
new file mode 100644
index 00000000000000..ac2a143549e21b
Binary files /dev/null and b/docs/public/static/branding/mui-x/sparkline-light2.png differ
diff --git a/docs/public/static/error-codes.json b/docs/public/static/error-codes.json
index 4d59f1fc17a0e9..e023da04023a4a 100644
--- a/docs/public/static/error-codes.json
+++ b/docs/public/static/error-codes.json
@@ -1,18 +1,18 @@
{
- "1": "Material-UI: Expected valid input target. Did you use a custom `inputComponent` and forget to forward refs? See https://material-ui.com/r/input-component-ref-interface for more info.",
- "2": "Material-UI: The `value` prop must be an array when using the `Select` component with `multiple`.",
- "3": "Material-UI: Unsupported `%s` color.\nWe support the following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla().",
- "4": "Material-UI: The color provided to augmentColor(color) is invalid.\nThe color object needs to have a `main` property or a `%s` property.",
- "5": "Material-UI: The color provided to augmentColor(color) is invalid.\n`color.main` should be a string, but `%s` was provided instead.\n\nDid you intend to use one of the following approaches?\n\nimport {Â green } from \"@mui/material/colors\";\n\nconst theme1 = createTheme({ palette: {\n primary: green,\n} });\n\nconst theme2 = createTheme({ palette: {\n primary: { main: green[500] },\n} });",
- "6": "Material-UI: Unsupported non-unitless line height with grid alignment.\nUse unitless line heights instead.",
- "7": "Material-UI: `capitalize(string)` expects a string argument.",
- "8": "Material-UI: Unsupported `%s` color.\nWe support the following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().",
- "9": "Material-UI: Unsupported `%s` color.\nThe following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().",
- "10": "Material-UI: unsupported `%s` color space.\nThe following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.",
- "11": "Material-UI: The color%s provided to augmentColor(color) is invalid.\nThe color object needs to have a `main` property or a `%s` property.",
- "12": "Material-UI: The color%s provided to augmentColor(color) is invalid.\n`color.main` should be a string, but `%s` was provided instead.\n\nDid you intend to use one of the following approaches?\n\nimport { green } from \"@mui/material/colors\";\n\nconst theme1 = createTheme({ palette: {\n primary: green,\n} });\n\nconst theme2 = createTheme({ palette: {\n primary: { main: green[500] },\n} });",
+ "1": "MUI: Expected valid input target. Did you use a custom `inputComponent` and forget to forward refs? See https://material-ui.com/r/input-component-ref-interface for more info.",
+ "2": "MUI: The `value` prop must be an array when using the `Select` component with `multiple`.",
+ "3": "MUI: Unsupported `%s` color.\nWe support the following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla().",
+ "4": "MUI: The color provided to augmentColor(color) is invalid.\nThe color object needs to have a `main` property or a `%s` property.",
+ "5": "MUI: The color provided to augmentColor(color) is invalid.\n`color.main` should be a string, but `%s` was provided instead.\n\nDid you intend to use one of the following approaches?\n\nimport {Â green } from \"@mui/material/colors\";\n\nconst theme1 = createTheme({ palette: {\n primary: green,\n} });\n\nconst theme2 = createTheme({ palette: {\n primary: { main: green[500] },\n} });",
+ "6": "MUI: Unsupported non-unitless line height with grid alignment.\nUse unitless line heights instead.",
+ "7": "MUI: `capitalize(string)` expects a string argument.",
+ "8": "MUI: Unsupported `%s` color.\nWe support the following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().",
+ "9": "MUI: Unsupported `%s` color.\nThe following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().",
+ "10": "MUI: unsupported `%s` color space.\nThe following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.",
+ "11": "MUI: The color%s provided to augmentColor(color) is invalid.\nThe color object needs to have a `main` property or a `%s` property.",
+ "12": "MUI: The color%s provided to augmentColor(color) is invalid.\n`color.main` should be a string, but `%s` was provided instead.\n\nDid you intend to use one of the following approaches?\n\nimport { green } from \"@mui/material/colors\";\n\nconst theme1 = createTheme({ palette: {\n primary: green,\n} });\n\nconst theme2 = createTheme({ palette: {\n primary: { main: green[500] },\n} });",
"13": "Can not find utils in context. It looks like you forgot to wrap your component in LocalizationProvider, or pass dateAdapter prop directly.",
- "14": "Material-UI: makeStyles is not longer exported from @mui/material/styles.\nYou have to import it from @mui/styles.\nSee https://material-ui.com/r/migration-v4/#material-ui-core-styles for more details.",
- "15": "Material-UI: withStyles is not longer exported from @mui/material/styles.\nYou have to import it from @mui/styles.\nSee https://material-ui.com/r/migration-v4/#material-ui-core-styles for more details.",
- "16": "Material-UI: withTheme is not longer exported from @mui/material/styles.\nYou have to import it from @mui/styles.\nSee https://material-ui.com/r/migration-v4/#material-ui-core-styles for more details."
+ "14": "MUI: makeStyles is not longer exported from @mui/material/styles.\nYou have to import it from @mui/styles.\nSee https://material-ui.com/r/migration-v4/#material-ui-core-styles for more details.",
+ "15": "MUI: withStyles is not longer exported from @mui/material/styles.\nYou have to import it from @mui/styles.\nSee https://material-ui.com/r/migration-v4/#material-ui-core-styles for more details.",
+ "16": "MUI: withTheme is not longer exported from @mui/material/styles.\nYou have to import it from @mui/styles.\nSee https://material-ui.com/r/migration-v4/#material-ui-core-styles for more details."
}
diff --git a/docs/public/static/hiring-toc-dark.png b/docs/public/static/hiring-toc-dark.png
new file mode 100644
index 00000000000000..2f52678354b9d4
Binary files /dev/null and b/docs/public/static/hiring-toc-dark.png differ
diff --git a/docs/public/static/hiring-toc-light.png b/docs/public/static/hiring-toc-light.png
new file mode 100644
index 00000000000000..125e86743eb6df
Binary files /dev/null and b/docs/public/static/hiring-toc-light.png differ
diff --git a/docs/public/static/images/image-list/bike.jpg b/docs/public/static/images/image-list/bike.jpg
new file mode 100644
index 00000000000000..0646f5154ab25b
Binary files /dev/null and b/docs/public/static/images/image-list/bike.jpg differ
diff --git a/docs/public/static/images/image-list/breakfast.jpg b/docs/public/static/images/image-list/breakfast.jpg
new file mode 100644
index 00000000000000..9af6842ff31262
Binary files /dev/null and b/docs/public/static/images/image-list/breakfast.jpg differ
diff --git a/docs/public/static/images/image-list/burgers.jpg b/docs/public/static/images/image-list/burgers.jpg
new file mode 100644
index 00000000000000..a293a33dacd4f1
Binary files /dev/null and b/docs/public/static/images/image-list/burgers.jpg differ
diff --git a/docs/public/static/images/image-list/camera.jpg b/docs/public/static/images/image-list/camera.jpg
new file mode 100644
index 00000000000000..f870b196490b00
Binary files /dev/null and b/docs/public/static/images/image-list/camera.jpg differ
diff --git a/docs/public/static/images/image-list/hats.jpg b/docs/public/static/images/image-list/hats.jpg
new file mode 100644
index 00000000000000..51e7c3cdd6f6c9
Binary files /dev/null and b/docs/public/static/images/image-list/hats.jpg differ
diff --git a/docs/public/static/images/image-list/honey.jpg b/docs/public/static/images/image-list/honey.jpg
new file mode 100644
index 00000000000000..29fb65474a50ed
Binary files /dev/null and b/docs/public/static/images/image-list/honey.jpg differ
diff --git a/docs/public/static/images/image-list/morning.jpg b/docs/public/static/images/image-list/morning.jpg
new file mode 100644
index 00000000000000..0e2530e5cd0a0a
Binary files /dev/null and b/docs/public/static/images/image-list/morning.jpg differ
diff --git a/docs/public/static/images/image-list/mushroom.jpg b/docs/public/static/images/image-list/mushroom.jpg
new file mode 100644
index 00000000000000..1bcd0495750a96
Binary files /dev/null and b/docs/public/static/images/image-list/mushroom.jpg differ
diff --git a/docs/public/static/images/image-list/olive.jpg b/docs/public/static/images/image-list/olive.jpg
new file mode 100644
index 00000000000000..6260d2d53484b0
Binary files /dev/null and b/docs/public/static/images/image-list/olive.jpg differ
diff --git a/docs/public/static/images/image-list/plant.jpg b/docs/public/static/images/image-list/plant.jpg
new file mode 100644
index 00000000000000..e0550cf2b37976
Binary files /dev/null and b/docs/public/static/images/image-list/plant.jpg differ
diff --git a/docs/public/static/images/image-list/star.jpg b/docs/public/static/images/image-list/star.jpg
new file mode 100644
index 00000000000000..411a865ebcaef8
Binary files /dev/null and b/docs/public/static/images/image-list/star.jpg differ
diff --git a/docs/public/static/images/image-list/vegetables.jpg b/docs/public/static/images/image-list/vegetables.jpg
new file mode 100644
index 00000000000000..f2c082ba711b5f
Binary files /dev/null and b/docs/public/static/images/image-list/vegetables.jpg differ
diff --git a/docs/public/static/images/users/coursera.svg b/docs/public/static/images/users/coursera.svg
deleted file mode 100644
index 192994e51d6e12..00000000000000
--- a/docs/public/static/images/users/coursera.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/public/static/images/users/spotify.svg b/docs/public/static/images/users/spotify.svg
new file mode 100644
index 00000000000000..d0347db9bd7315
--- /dev/null
+++ b/docs/public/static/images/users/spotify.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/docs/public/static/manifest.json b/docs/public/static/manifest.json
index 62978671be119e..4c319e292c8434 100644
--- a/docs/public/static/manifest.json
+++ b/docs/public/static/manifest.json
@@ -1,5 +1,5 @@
{
- "name": "Material-UI",
+ "name": "MUI",
"short_name": "MUI",
"display": "minimal-ui",
"start_url": "/",
diff --git a/docs/src/components/action/Highlighter.tsx b/docs/src/components/action/Highlighter.tsx
index 50e16c21c712d7..dc91a1e3a6dbf9 100644
--- a/docs/src/components/action/Highlighter.tsx
+++ b/docs/src/components/action/Highlighter.tsx
@@ -15,9 +15,27 @@ export default function Highlighter({
white: '#fff',
comfort: 'grey.50',
};
+ const ref = React.useRef(null);
return (
{
+ if (ref.current) {
+ ref.current.scrollIntoView({ block: 'nearest' });
+ }
+ if (props.onClick) {
+ props.onClick(event);
+ }
+ }}
+ onFocusVisible={(event) => {
+ if (ref.current) {
+ ref.current.scrollIntoView({ block: 'nearest' });
+ }
+ if (props.onFocusVisible) {
+ props.onFocusVisible(event);
+ }
+ }}
sx={{
justifyContent: 'flex-start',
textAlign: 'left',
@@ -45,6 +63,9 @@ export default function Highlighter({
},
},
}),
+ '&.Mui-disabled': {
+ opacity: 0.4,
+ },
...props.sx,
}}
/>
diff --git a/docs/src/components/action/Item.tsx b/docs/src/components/action/Item.tsx
index 8e801a6aefdf6f..e102981a43e9d5 100644
--- a/docs/src/components/action/Item.tsx
+++ b/docs/src/components/action/Item.tsx
@@ -14,6 +14,9 @@ export function Group({ desktopColumns = 1, ...props }: { desktopColumns?: numbe
display: 'grid',
gap: 1,
gridTemplateColumns: `repeat(${desktopColumns}, 1fr)`,
+ '@media (prefers-reduced-motion: no-preference)': {
+ scrollBehavior: 'smooth',
+ },
'& > *': {
minWidth: {
xs: desktopColumns === 1 ? 300 : 225,
diff --git a/docs/src/components/action/More.tsx b/docs/src/components/action/More.tsx
index dd6be455bc1241..f39ee88bf3c7ef 100644
--- a/docs/src/components/action/More.tsx
+++ b/docs/src/components/action/More.tsx
@@ -6,9 +6,27 @@ import AddCircleOutlineRounded from '@mui/icons-material/AddCircleOutlineRounded
import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
export default (function More(props: ButtonBaseProps) {
+ const ref = React.useRef(null);
return (
{
+ if (ref.current) {
+ ref.current.scrollIntoView({ block: 'nearest' });
+ }
+ if (props.onClick) {
+ props.onClick(event);
+ }
+ }}
+ onFocusVisible={(event) => {
+ if (ref.current) {
+ ref.current.scrollIntoView({ block: 'nearest' });
+ }
+ if (props.onFocusVisible) {
+ props.onFocusVisible(event);
+ }
+ }}
sx={{
p: 2,
display: 'flex',
diff --git a/docs/src/components/action/StylingInfo.tsx b/docs/src/components/action/StylingInfo.tsx
index ebec5d6c892df6..1e687b83391a7c 100644
--- a/docs/src/components/action/StylingInfo.tsx
+++ b/docs/src/components/action/StylingInfo.tsx
@@ -9,8 +9,26 @@ import Link from 'docs/src/modules/components/Link';
import { brandingDarkTheme } from 'docs/src/modules/brandingTheme';
import ROUTES from 'docs/src/route';
-export default function StylingInfo({ appeared, ...props }: { appeared: boolean } & BoxProps) {
+export default function StylingInfo({
+ appeared,
+ content,
+ ...props
+}: { appeared: boolean; content?: React.ReactElement } & BoxProps) {
const [hidden, setHidden] = React.useState(false);
+ const defaultContent = (
+
+
+ Own the styling!
+
+
+ Build your own design system using the{' '}
+
+ sophisticated theming features
+
+ . You can also start by using Google's Material Design.
+
+
+ );
return (
)}
-
- Own the styling!
-
-
- Build your own design system using the{' '}
-
- sophisticated theming features
-
- . You can also start by using Google's Material Design.
-
+ {content || defaultContent}
);
diff --git a/docs/src/components/animation/FlashCode.tsx b/docs/src/components/animation/FlashCode.tsx
new file mode 100644
index 00000000000000..bfec209f7459e4
--- /dev/null
+++ b/docs/src/components/animation/FlashCode.tsx
@@ -0,0 +1,24 @@
+import { styled, alpha } from '@mui/material/styles';
+import { shouldForwardProp } from '@mui/system';
+
+const FlashCode = styled('div', {
+ shouldForwardProp: (prop) =>
+ shouldForwardProp(prop) && prop !== 'endLine' && prop !== 'startLine' && prop !== 'lineHeight',
+})<{ endLine?: number; startLine?: number; lineHeight?: number | string }>(
+ ({ theme, startLine = 0, endLine = startLine, lineHeight = '0.75rem' }) => ({
+ borderRadius: 2,
+ pointerEvents: 'none',
+ position: 'absolute',
+ left: 0,
+ right: 0,
+ top: `calc(${lineHeight} * 1.5 * ${startLine})`,
+ height: `calc(${lineHeight} * 1.5 * ${endLine - startLine + 1})`,
+ transition: '0.3s',
+ ...theme.typography.caption,
+ backgroundColor: alpha(theme.palette.primary.main, 0.2),
+ border: '1px solid',
+ borderColor: theme.palette.primary.dark,
+ }),
+);
+
+export default FlashCode;
diff --git a/docs/src/components/home/AdvancedShowcase.tsx b/docs/src/components/home/AdvancedShowcase.tsx
index 9cc16109267da9..00241ad6dd9ede 100644
--- a/docs/src/components/home/AdvancedShowcase.tsx
+++ b/docs/src/components/home/AdvancedShowcase.tsx
@@ -1,265 +1,16 @@
import * as React from 'react';
-import { DataGrid, GridCellParams, GridColDef } from '@material-ui/data-grid';
-import { debounce } from '@mui/material/utils';
-import { alpha } from '@mui/material/styles';
-import GlobalStyles from '@mui/material/GlobalStyles';
+import { DataGrid, GridCellParams, GridRenderEditCellParams, GridColDef } from '@mui/x-data-grid';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
-import Chip from '@mui/material/Chip';
-import MenuItem from '@mui/material/MenuItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
import Typography from '@mui/material/Typography';
-import Tooltip from '@mui/material/Tooltip';
-import Slider from '@mui/material/Slider';
-import Select from '@mui/material/Select';
import ShowcaseContainer from 'docs/src/components/home/ShowcaseContainer';
-import ReportProblemIcon from '@mui/icons-material/ReportProblem';
-import InfoIcon from '@mui/icons-material/Info';
-import AutorenewIcon from '@mui/icons-material/Autorenew';
-import DoneIcon from '@mui/icons-material/Done';
import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
-
-const ProgressBar = React.memo(function ProgressBar(props: ProgressBarProps) {
- const { value } = props;
- const valueInPercent = value * 100;
-
- return (
- (theme.palette.mode === 'dark' ? 'primaryDark.700' : 'grey.100'),
- }}
- >
- {`${valueInPercent.toLocaleString()} %`}
- (theme.palette.mode === 'dark' ? 'error.700' : 'error.200'),
- }),
- ...(valueInPercent >= 30 &&
- valueInPercent <= 70 && {
- bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'warning.900' : 'warning.400'),
- }),
- ...(valueInPercent > 70 && {
- bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'success.800' : 'success.300'),
- }),
- width: `${valueInPercent}%`,
- }}
- />
-
- );
-});
-
-interface StatusProps {
- status: string;
-}
-
-const Status = React.memo((props: StatusProps) => {
- const { status } = props;
- let label = status;
- if (status === 'PartiallyFilled') {
- label = 'Partial';
- }
- return (
- alpha(theme.palette.primary[500], 0.1),
- color: (theme) => (theme.palette.mode === 'dark' ? 'primary.300' : 'primary.600'),
- }),
- ...(status === 'Filled' && {
- borderColor: 'success.500',
- bgcolor: (theme) => alpha(theme.palette.success[500], 0.1),
- color: (theme) => (theme.palette.mode === 'dark' ? 'success.500' : 'success.800'),
- }),
- ...(status === 'PartiallyFilled' && {
- borderColor: 'warning.600',
- bgcolor: (theme) => alpha(theme.palette.warning[500], 0.1),
- color: (theme) => (theme.palette.mode === 'dark' ? 'warning.300' : 'warning.900'),
- }),
- ...(status === 'Rejected' && {
- borderColor: 'error.500',
- bgcolor: (theme) => alpha(theme.palette.error[500], 0.1),
- color: (theme) => (theme.palette.mode === 'dark' ? 'error.400' : 'error.600'),
- }),
- }}
- />
- );
-});
-
-function ValueLabelComponent(props: {
- open: boolean;
- value: number;
- children: React.ReactElement;
-}) {
- const { children, open, value } = props;
- return (
-
- {children}
-
- );
-}
-
-function EditProgress(props: GridCellParams) {
- const { id, value, api, field } = props;
- const [valueState, setValueState] = React.useState(Number(value));
-
- const updateCellEditProps = React.useCallback(
- (newValue) => {
- api.setEditCellValue({ id, field, value: newValue });
- },
- [api, field, id],
- );
-
- const debouncedUpdateCellEditProps = React.useMemo(
- () => debounce(updateCellEditProps, 60),
- [updateCellEditProps],
- );
-
- const handleChange = (event: Event, newValue: number | number[]) => {
- setValueState(newValue as number);
- debouncedUpdateCellEditProps(newValue);
- };
-
- React.useEffect(() => {
- setValueState(Number(value));
- }, [value]);
-
- const handleRef = (element: any) => {
- if (element) {
- element.querySelector('[role="slider"]')?.focus();
- }
- };
-
- return (
- (theme.palette.mode === 'dark' ? 'primaryDark.700' : 'grey.100'),
- },
- '& .MuiSlider-track': {
- border: 0,
- ...(valueState < 0.3 && {
- bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'error.800' : 'error.500'),
- }),
- ...(valueState >= 0.3 &&
- valueState <= 0.7 && {
- bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'warning.800' : 'warning.500'),
- }),
- ...(valueState > 0.7 && {
- bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'success.800' : 'success.500'),
- }),
- },
- '& .MuiSlider-thumb': {
- cursor: 'col-resize',
- height: '100%',
- width: 5,
- borderRadius: '0px',
- marginTop: 0,
- backgroundColor: alpha('#000000', 0.2),
- },
- }}
- value={valueState}
- max={1}
- step={0.00001}
- onChange={handleChange}
- components={{
- ValueLabel: ValueLabelComponent,
- }}
- valueLabelDisplay="auto"
- valueLabelFormat={(newValue) => `${(newValue * 100).toLocaleString()} %`}
- />
- );
-}
-
-const STATUS_OPTIONS = ['Open', 'PartiallyFilled', 'Filled', 'Rejected'];
-
-function EditStatus(props: GridCellParams) {
- const { id, value, api, field } = props;
-
- const handleChange = (event: any) => {
- api.setEditCellValue({ id, field, value: event.target.value }, event);
- if (!event.key) {
- api.commitCellChange({ id, field });
- api.setCellMode(id, field, 'view');
- }
- };
-
- const handleClose = (event: {}, reason: 'backdropClick' | 'escapeKeyDown') => {
- if (reason === 'backdropClick') {
- api.setCellMode(id, field, 'view');
- }
- };
-
- return (
-
- );
-}
+import XGridGlobalStyles from 'docs/src/components/home/XGridGlobalStyles';
+import ProgressBar from 'docs/src/components/x-grid/ProgressBar';
+import EditProgress from 'docs/src/components/x-grid/EditProgress';
+import Status from 'docs/src/components/x-grid/Status';
+import EditStatus from 'docs/src/components/x-grid/EditStatus';
const columns: Array = [
{
@@ -280,7 +31,7 @@ const columns: Array = [
renderCell: (params: GridCellParams) => {
return ;
},
- renderEditCell: (params: GridCellParams) => {
+ renderEditCell: (params: GridRenderEditCellParams) => {
return ;
},
},
@@ -293,16 +44,12 @@ const columns: Array = [
renderCell: (params: GridCellParams) => {
return ;
},
- renderEditCell: (params: GridCellParams) => {
+ renderEditCell: (params: GridRenderEditCellParams) => {
return ;
},
},
];
-interface ProgressBarProps {
- value: number;
-}
-
const code = ` svg': {
- fontSize: '1.25rem',
- },
- },
- // table head elements
- '& .MuiDataGrid-menuIcon svg': {
- fontSize: '1rem',
- },
- '& .MuiDataGrid-columnsContainer': {
- borderColor: (theme) =>
- theme.palette.mode === 'dark' ? 'primaryDark.500' : 'grey.200',
- bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.800' : '#fff'),
- },
- '& .MuiDataGrid-columnHeaderTitleContainer': {
- padding: 0,
- },
- '& .MuiDataGrid-columnSeparator': {
- display: 'none',
- },
- '& .MuiDataGrid-columnHeaderTitle': {
- flexGrow: 1,
- },
- // -------------------------------
- // table body elements
- '& .MuiDataGrid-viewport': {
- bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.900' : 'grey.50'),
- },
- '& .MuiDataGrid-cell': {
- borderColor: (theme) =>
- theme.palette.mode === 'dark' ? 'primaryDark.700' : 'grey.200',
- },
- '& .MuiDataGrid-editInputCell': {
- fontSize: '0.75rem',
- '& > input': {
- px: 1,
- },
- },
- '& .MuiDataGrid-cell--editing': {
- '& .MuiSelect-root': {
- '& .MuiListItemIcon-root': {
- display: 'none',
- },
- '& .MuiTypography-root': {
- fontSize: '0.75rem',
- },
- },
- },
- '& .MuiTablePagination-root': {
- mr: 1,
- '& .MuiIconButton-root': {
- '&:not([disabled])': {
- color: (theme) => (theme.palette.mode === 'dark' ? '#fff' : 'primary.main'),
- },
- borderRadius: 1,
- p: 0.5,
- border: '1px solid',
- bgcolor: (theme) =>
- theme.palette.mode === 'dark' ? 'primaryDark.600' : 'transparent',
- borderColor: (theme) =>
- theme.palette.mode === 'dark' ? 'primaryDark.600' : 'grey.200',
- '&:last-of-type': {
- ml: 1,
- },
- '& > svg': {
- fontSize: '1.25rem',
- },
- },
- },
- },
}}
preview={
(theme.palette.mode === 'dark' ? 'primaryDark.800' : '#fff'),
}}
>
-
+ = [
name: 'southwest',
alt: 'Southwest logo',
width: 125,
- height: 19,
+ height: 52,
},
{
name: 'boeing',
alt: 'Boeing logo',
width: 95,
- height: 22,
+ height: 52,
},
{
name: 'siemens',
alt: 'Siemens logo',
width: 105,
- height: 25,
+ height: 52,
},
{
name: 'deloitte',
alt: 'Deloitte logo',
width: 97,
- height: 21,
+ height: 52,
},
{
name: 'volvo',
alt: 'Volvo logo',
width: 131,
- height: 18,
+ height: 52,
},
{
name: 'unity',
alt: 'Unity logo',
width: 69,
- height: 25,
+ height: 52,
},
];
diff --git a/docs/src/components/home/CoreShowcase.tsx b/docs/src/components/home/CoreShowcase.tsx
index 21a9c818b2ee98..913dccc05ff73a 100644
--- a/docs/src/components/home/CoreShowcase.tsx
+++ b/docs/src/components/home/CoreShowcase.tsx
@@ -1,6 +1,5 @@
import * as React from 'react';
-import { ThemeProvider, createTheme, useTheme, styled, alpha } from '@mui/material/styles';
-import { shouldForwardProp } from '@mui/system';
+import { ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
@@ -12,6 +11,7 @@ import ShowcaseContainer from 'docs/src/components/home/ShowcaseContainer';
import PointerContainer, { Data } from 'docs/src/components/home/ElementPointer';
import TouchAppRounded from '@mui/icons-material/TouchAppRounded';
import StylingInfo from 'docs/src/components/action/StylingInfo';
+import FlashCode from 'docs/src/components/animation/FlashCode';
const darkDesignTokens = getDesignTokens('dark');
@@ -54,24 +54,6 @@ darkBrandingTheme = createTheme(darkBrandingTheme, {
},
});
-const FlashCode = styled('div', {
- shouldForwardProp: (prop) =>
- shouldForwardProp(prop) && prop !== 'endLine' && prop !== 'startLine',
-})<{ endLine?: number; startLine?: number }>(({ theme, startLine = 0, endLine = 1 }) => ({
- borderRadius: 2,
- pointerEvents: 'none',
- position: 'absolute',
- left: 0,
- right: 0,
- top: `calc(0.75rem * 1.5 * ${startLine})`,
- height: `calc(0.75rem * 1.5 * ${endLine - startLine + 1})`,
- transition: '0.3s',
- ...theme.typography.caption,
- backgroundColor: alpha(theme.palette.primary.main, 0.2),
- border: '1px solid',
- borderColor: theme.palette.primary.dark,
-}));
-
const lineMapping: Record = {
avatar: 2,
divider: 13,
diff --git a/docs/src/components/home/GetStartedButtons.tsx b/docs/src/components/home/GetStartedButtons.tsx
index 584cd0719a5954..8054da89c599c4 100644
--- a/docs/src/components/home/GetStartedButtons.tsx
+++ b/docs/src/components/home/GetStartedButtons.tsx
@@ -10,8 +10,9 @@ import Link from 'docs/src/modules/components/Link';
export default function GetStartedButtons({
installation = 'npm install @mui/material',
+ to = ROUTES.documentation,
...props
-}: { installation?: string } & BoxProps) {
+}: { installation?: string; to?: string } & BoxProps) {
const [copied, setCopied] = React.useState(false);
const handleCopy = () => {
setCopied(true);
@@ -30,7 +31,7 @@ export default function GetStartedButtons({
}}
>
diff --git a/docs/src/components/productX/XComponents.tsx b/docs/src/components/productX/XComponents.tsx
new file mode 100644
index 00000000000000..10fc29dafe5267
--- /dev/null
+++ b/docs/src/components/productX/XComponents.tsx
@@ -0,0 +1,231 @@
+import * as React from 'react';
+import { shouldForwardProp } from '@mui/system';
+import { ThemeProvider, styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Fade from '@mui/material/Fade';
+import Grid from '@mui/material/Grid';
+import Chip from '@mui/material/Chip';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import Section from 'docs/src/layouts/Section';
+import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
+import GradientText from 'docs/src/components/typography/GradientText';
+import Item, { Group } from 'docs/src/components/action/Item';
+import Highlighter from 'docs/src/components/action/Highlighter';
+import TableChartRounded from '@mui/icons-material/TableChartRounded';
+import DateRangeRounded from '@mui/icons-material/DateRangeRounded';
+import AccountTreeRounded from '@mui/icons-material/AccountTreeRounded';
+import ShowChartRounded from '@mui/icons-material/ShowChartRounded';
+import BarChartRounded from '@mui/icons-material/BarChartRounded';
+import XGridFullDemo from 'docs/src/components/productX/XGridFullDemo';
+import XDateRangeDemo from 'docs/src/components/productX/XDateRangeDemo';
+import XTreeViewDemo from 'docs/src/components/productX/XTreeViewDemo';
+import More from 'docs/src/components/action/More';
+import ROUTES from 'docs/src/route';
+import EmailSubscribe from 'docs/src/components/footer/EmailSubscribe';
+import Frame from 'docs/src/components/action/Frame';
+import { brandingDarkTheme } from 'docs/src/modules/brandingTheme';
+
+const DEMOS = ['Data Grid', 'Date Picker', 'Tree View', 'Sparkline', 'Charts'];
+
+const AspectRatioImage = styled('div', {
+ shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'src' && prop !== 'ratio',
+})<{ ratio: number; src: string }>(({ src, ratio, theme }) => ({
+ height: 0,
+ backgroundImage: `url(${src.replace('$mode', theme.palette.mode)})`,
+ backgroundRepeat: 'no-repeat',
+ backgroundSize: 'contain',
+ paddingBottom: `${(1 / ratio) * 100}%`,
+ margin: 'auto',
+}));
+
+const PrefetchImages = () => {
+ function makeImg(component: 'sparkline' | 'chart', mode: string, num: number) {
+ return {
+ loading: 'lazy' as const,
+ width: 100,
+ height: 100,
+ src: `/static/branding/mui-x/${component}-${mode}${num}.png`,
+ };
+ }
+ return (
+ img': {
+ position: 'absolute',
+ },
+ }}
+ >
+ {[...Array(2)].map((_, index) => (
+
+
+
+
+ ))}
+ {[...Array(4)].map((_, index) => (
+
+
+
+
+ ))}
+
+ );
+};
+
+export default function XComponents() {
+ const [demo, setDemo] = React.useState(DEMOS[0]);
+ const icons = {
+ [DEMOS[0]]: ,
+ [DEMOS[1]]: ,
+ [DEMOS[2]]: ,
+ [DEMOS[3]]: ,
+ [DEMOS[4]]: ,
+ };
+ return (
+
+
+
+
+
+ Powerful components for advanced use-cases
+
+ }
+ description="The MUI X package enables applications to have complex use-cases, supported by several advanced components."
+ />
+
+
+ {DEMOS.map((name) => (
+ setDemo(name)}>
+
+
+ ))}
+
+
+
+
+
+ {demo === DEMOS[0] && (
+
+
+
+
+
+ )}
+ {demo === DEMOS[1] && (
+
+
+
+
+
+ )}
+ {demo === DEMOS[2] && (
+
+
+
+
+
+ )}
+ {(demo === DEMOS[3] || demo === DEMOS[4]) && (
+
+
+
+
+
+
+
+
+
+ {demo === DEMOS[3] && (
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+ {demo === DEMOS[4] && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+ Coming soon!
+
+
+ Subscribe to our newsletter to get first-hand info about the development and
+ release of new components.
+
+ div': {
+ maxWidth: 'initial',
+ border: '1px solid',
+ borderColor: 'primaryDark.600',
+ },
+ }}
+ />
+
+
+
+
+
+ )}
+
+
+
+ );
+}
diff --git a/docs/src/components/productX/XDataGrid.tsx b/docs/src/components/productX/XDataGrid.tsx
new file mode 100644
index 00000000000000..f59130c850dc9e
--- /dev/null
+++ b/docs/src/components/productX/XDataGrid.tsx
@@ -0,0 +1,241 @@
+import * as React from 'react';
+import { DataGridPro, GridApi } from '@mui/x-data-grid-pro';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import Paper from '@mui/material/Paper';
+import Section from 'docs/src/layouts/Section';
+import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
+import GradientText from 'docs/src/components/typography/GradientText';
+import Item, { Group } from 'docs/src/components/action/Item';
+import Highlighter from 'docs/src/components/action/Highlighter';
+import More from 'docs/src/components/action/More';
+import EditRoundedIcon from '@mui/icons-material/EditRounded';
+import LibraryAddCheckRounded from '@mui/icons-material/LibraryAddCheckRounded';
+import SortByAlphaRounded from '@mui/icons-material/SortByAlphaRounded';
+import AutoStoriesOutlined from '@mui/icons-material/AutoStoriesOutlined';
+import FilterAltRounded from '@mui/icons-material/FilterAltRounded';
+import Frame from 'docs/src/components/action/Frame';
+import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
+import FlashCode from 'docs/src/components/animation/FlashCode';
+import XGridGlobalStyles from 'docs/src/components/home/XGridGlobalStyles';
+import StylingInfo from 'docs/src/components/action/StylingInfo';
+import Link from 'docs/src/modules/components/Link';
+import ROUTES from 'docs/src/route';
+
+const DEMOS = ['Editing', 'Selection', 'Sorting', 'Pagination', 'Filtering'] as const;
+
+const code = ``;
+
+const startLine = {
+ [DEMOS[0]]: 5,
+ [DEMOS[1]]: 10,
+ [DEMOS[2]]: 6,
+ [DEMOS[3]]: 12,
+ [DEMOS[4]]: 7,
+};
+
+const dataGridStyleOverrides = ;
+
+export default function XDataGrid() {
+ const [demo, setDemo] = React.useState(null);
+ const gridApiRef = React.useRef();
+ const icons = {
+ [DEMOS[0]]: ,
+ [DEMOS[1]]: ,
+ [DEMOS[2]]: ,
+ [DEMOS[3]]: ,
+ [DEMOS[4]]: ,
+ };
+ const { loading, data } = useDemoData({
+ dataSet: 'Employee',
+ rowLength: 1000,
+ maxColumns: 5,
+ editable: true,
+ });
+ const firstRowId = data.rows[0]?.id;
+ React.useEffect(() => {
+ if (gridApiRef && gridApiRef.current && !loading) {
+ if (demo) {
+ gridApiRef.current.scroll({ top: 0, left: 0 });
+ }
+ if (demo === DEMOS[0]) {
+ document.body.focus();
+ setTimeout(() => {
+ const cell = document.querySelector(
+ '#data-grid-demo div[role="cell"][data-field="name"]',
+ );
+ if (cell) {
+ const clickEvent = document.createEvent('MouseEvents');
+ clickEvent.initEvent('dblclick', true, true);
+ cell.dispatchEvent(clickEvent);
+ }
+ }, 120);
+ }
+ if (demo === DEMOS[1]) {
+ const checkbox = document.querySelector(
+ '#data-grid-demo div[data-field="__check__"] input',
+ ) as HTMLInputElement | null;
+ if (checkbox) {
+ checkbox.click();
+ }
+ }
+ if (demo === DEMOS[2]) {
+ const sorter = document.querySelector(
+ '#data-grid-demo button[aria-label="Sort"]',
+ ) as HTMLButtonElement | null;
+ if (sorter) {
+ sorter.click();
+ }
+ }
+ if (demo === DEMOS[3]) {
+ const nextPage = document.querySelector(
+ '#data-grid-demo button[aria-label="Go to next page"]',
+ ) as HTMLButtonElement | null;
+ if (nextPage) {
+ nextPage.click();
+ }
+ }
+ if (demo === DEMOS[4]) {
+ document.body.focus();
+ gridApiRef.current.showFilterPanel('name');
+ }
+ }
+ }, [demo, loading, firstRowId]);
+ return (
+
+
+
+
+
+ A level of performance and quality that hasn't
+ been seen before
+
+ }
+ description="The MUI Data Grid is a data table powerhouse. It is packed with exclusive features that will enrich the experience of dealing with and maintaining lots of data."
+ />
+
+
+ {DEMOS.map((name) => (
+ setDemo(name)}
+ >
+
+
+ ))}
+
+
+
+
+
+ theme.palette.mode === 'dark' ? 'primaryDark.600' : 'grey.200',
+ '& .MuiDataGrid-root': {
+ '& .MuiAvatar-root': { width: 24, height: 24, fontSize: 14, fontWeight: 'bold' },
+ '& .MuiDataGrid-footerContainer': {
+ minHeight: 48,
+ borderTop: '1px solid',
+ borderColor: (theme) =>
+ theme.palette.mode === 'dark' ? 'primaryDark.600' : 'grey.200',
+ },
+ '& .MuiTablePagination-root': {
+ fontSize: '0.75rem',
+ '& p': {
+ fontSize: '0.75rem',
+ },
+ '& .MuiToolbar-root': {
+ minHeight: 48,
+ },
+ },
+ },
+ }}
+ >
+ {dataGridStyleOverrides}
+ }
+ loading={loading}
+ density="compact"
+ checkboxSelection
+ disableSelectionOnClick
+ pagination
+ />
+
+
+
+
+
+
+ {demo && }
+
+
+ {demo === DEMOS[3] && 'Pagination > 100 rows per page is a paid feature!'}
+ {demo === DEMOS[4] && 'Multi-column filtering is a paid feature!'}
+
+
+ The Data Grid and all other MUI X components are available on free and paid
+ versions. More details about each plan and its features, on{' '}
+
+ the pricing page
+
+ .
+
+
+ }
+ sx={{ mx: -2, mb: -1 }}
+ />
+
+
+
+
+
+ );
+}
diff --git a/docs/src/components/productX/XDateRangeDemo.tsx b/docs/src/components/productX/XDateRangeDemo.tsx
new file mode 100644
index 00000000000000..c387506bc797fa
--- /dev/null
+++ b/docs/src/components/productX/XDateRangeDemo.tsx
@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { ThemeProvider } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import TextField from '@mui/material/TextField';
+import { DateRange } from '@mui/lab/DateRangePicker';
+import StaticDateRangePicker from '@mui/lab/StaticDateRangePicker';
+import AdapterDateFns from '@mui/lab/AdapterDateFns';
+import LocalizationProvider from '@mui/lab/LocalizationProvider';
+import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
+import Frame from 'docs/src/components/action/Frame';
+import { brandingDarkTheme } from 'docs/src/modules/brandingTheme';
+
+const startDate = new Date();
+startDate.setDate(10);
+const endDate = new Date();
+endDate.setDate(endDate.getDate() + 28);
+
+export default function XDateRangeDemo() {
+ const [value, setValue] = React.useState>([startDate, endDate]);
+ return (
+
+
+ div': {
+ borderRadius: 1,
+ overflow: 'auto',
+ bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.900' : '#fff'),
+ },
+ '& > div > div > div > div': {
+ flexGrow: 1,
+ },
+ '& .MuiTypography-subtitle1': {
+ fontSize: '0.875rem',
+ },
+ '& .MuiTypography-caption': {
+ width: 28,
+ height: 32,
+ },
+ '& .PrivatePickersSlideTransition-root': {
+ minWidth: 258,
+ minHeight: 238,
+ },
+ '& [role="row"]': {
+ margin: '4px 0',
+ },
+ '& .MuiDateRangePickerDay-root': {
+ lineHeight: 0,
+ margin: 0,
+ },
+ '& .MuiPickersDay-root': {
+ width: 28,
+ height: 28,
+ fontWeight: 400,
+ },
+ }}
+ >
+
+ {
+ setValue(newValue);
+ }}
+ renderInput={(startProps, endProps) => (
+
+
+ to
+
+
+ )}
+ />
+
+
+
+
+
+
+
+
+ Start
+
+
+ {value[0]?.toDateString()}
+
+
+
+ {' '}
+
+
+
+ End
+
+
+ {value[1]?.toDateString()}
+
+
+
+
+
+
+ );
+}
diff --git a/docs/src/components/productX/XGridFullDemo.tsx b/docs/src/components/productX/XGridFullDemo.tsx
new file mode 100644
index 00000000000000..2000336fd59fef
--- /dev/null
+++ b/docs/src/components/productX/XGridFullDemo.tsx
@@ -0,0 +1,215 @@
+import * as React from 'react';
+import { DataGridPro, GridToolbar } from '@mui/x-data-grid-pro';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import { ThemeProvider } from '@mui/material/styles';
+import FormControl from '@mui/material/FormControl';
+import FormGroup from '@mui/material/FormGroup';
+import Button from '@mui/material/Button';
+import Paper from '@mui/material/Paper';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import Frame from 'docs/src/components/action/Frame';
+import { brandingDarkTheme } from 'docs/src/modules/brandingTheme';
+import XGridGlobalStyles from 'docs/src/components/home/XGridGlobalStyles';
+
+const dataGridStyleOverrides = ;
+
+type GridDataType = 'Employee' | 'Commodity';
+
+interface GridPaginationSettings {
+ pagination: boolean;
+ autoPageSize: boolean;
+ pageSize: number | undefined;
+}
+
+interface GridConfigOptions {
+ size: number;
+ type: GridDataType;
+ pagesize: number;
+}
+
+interface GridToolbarContainerProps {
+ onApply: (options: GridConfigOptions) => void;
+ size: number;
+ type: GridDataType;
+}
+
+function SettingsPanel(props: GridToolbarContainerProps) {
+ const { onApply, type, size } = props;
+ const [sizeState, setSize] = React.useState(size);
+ const [typeState, setType] = React.useState(type);
+ const [selectedPaginationValue, setSelectedPaginationValue] = React.useState(-1);
+
+ const handleSizeChange = React.useCallback((event) => {
+ setSize(Number(event.target.value));
+ }, []);
+
+ const handleDatasetChange = React.useCallback((event) => {
+ setType(event.target.value);
+ }, []);
+
+ const handlePaginationChange = React.useCallback((event) => {
+ setSelectedPaginationValue(event.target.value);
+ }, []);
+
+ const handleApplyChanges = React.useCallback(() => {
+ onApply({
+ size: sizeState,
+ type: typeState,
+ pagesize: selectedPaginationValue,
+ });
+ }, [sizeState, typeState, selectedPaginationValue, onApply]);
+
+ return (
+ *': { '&:not(:first-child)': { ml: 1 }, '&:last-child': { ml: 'auto' } },
+ '& .MuiFilledInput-root': {
+ borderRadius: 1,
+ backgroundColor: 'transparent',
+ },
+ '& .MuiInputBase-sizeSmall': {
+ fontSize: '0.875rem',
+ },
+ }}
+ >
+
+ Dataset
+
+
+
+ Rows
+
+
+
+ Page Size
+
+
+
+
+ );
+}
+
+export default function XGridFullDemo() {
+ const [type, setType] = React.useState('Commodity');
+ const [size, setSize] = React.useState(100);
+ const { loading, data, setRowLength, loadNewData } = useDemoData({
+ dataSet: type,
+ rowLength: size,
+ maxColumns: 40,
+ editable: true,
+ });
+
+ const [pagination, setPagination] = React.useState({
+ pagination: false,
+ autoPageSize: false,
+ pageSize: undefined,
+ });
+
+ const handleApplyClick = (settings: GridConfigOptions) => {
+ if (size !== settings.size) {
+ setSize(settings.size);
+ }
+
+ if (type !== settings.type) {
+ setType(settings.type);
+ }
+
+ if (size !== settings.size || type !== settings.type) {
+ setRowLength(settings.size);
+ loadNewData();
+ }
+
+ const newPaginationSettings: GridPaginationSettings = {
+ pagination: settings.pagesize !== -1,
+ autoPageSize: settings.pagesize === 0,
+ pageSize: settings.pagesize > 0 ? settings.pagesize : undefined,
+ };
+
+ setPagination((currentPaginationSettings: GridPaginationSettings): GridPaginationSettings => {
+ if (
+ currentPaginationSettings.pagination === newPaginationSettings.pagination &&
+ currentPaginationSettings.autoPageSize === newPaginationSettings.autoPageSize &&
+ currentPaginationSettings.pageSize === newPaginationSettings.pageSize
+ ) {
+ return currentPaginationSettings;
+ }
+ return newPaginationSettings;
+ });
+ };
+
+ return (
+
+
+ {dataGridStyleOverrides}
+ (theme.palette.mode === 'dark' ? 'primaryDark.900' : '#fff'),
+ '& .MuiAvatar-root': { width: 24, height: 24, fontSize: 14, fontWeight: 'bold' },
+ '& .MuiDataGrid-renderingZone': {
+ '& .MuiDataGrid-cell': {
+ bgcolor: (theme) =>
+ theme.palette.mode === 'dark' ? 'primaryDark.800' : 'grey.50',
+ },
+ },
+ '& .MuiDataGrid-footerContainer': {
+ minHeight: 48,
+ borderTop: '1px solid',
+ borderColor: (theme) =>
+ theme.palette.mode === 'dark' ? 'primaryDark.600' : 'grey.200',
+ },
+ '& .MuiTablePagination-root': {
+ fontSize: '0.75rem',
+ '& p': {
+ fontSize: '0.75rem',
+ },
+ '& .MuiToolbar-root': {
+ minHeight: 48,
+ },
+ },
+ },
+ }}
+ >
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs/src/components/productX/XHero.tsx b/docs/src/components/productX/XHero.tsx
new file mode 100644
index 00000000000000..8c7d99a9c80575
--- /dev/null
+++ b/docs/src/components/productX/XHero.tsx
@@ -0,0 +1,201 @@
+import * as React from 'react';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import { red } from '@mui/material/colors';
+import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import TextField from '@mui/material/TextField';
+import { DateRange } from '@mui/lab/DateRangePicker';
+import StaticDateRangePicker from '@mui/lab/StaticDateRangePicker';
+import AdapterDateFns from '@mui/lab/AdapterDateFns';
+import LocalizationProvider from '@mui/lab/LocalizationProvider';
+import GradientText from 'docs/src/components/typography/GradientText';
+import GetStartedButtons from 'docs/src/components/home/GetStartedButtons';
+import HeroContainer from 'docs/src/layouts/HeroContainer';
+import IconImage from 'docs/src/components/icon/IconImage';
+import FolderTreeView from 'docs/src/components/showcase/FolderTreeView';
+import ROUTES from 'docs/src/route';
+
+const startDate = new Date();
+startDate.setDate(10);
+const endDate = new Date();
+endDate.setDate(endDate.getDate() + 28);
+
+export default function XHero() {
+ const { loading, data } = useDemoData({
+ dataSet: 'Commodity',
+ rowLength: 10000,
+ maxColumns: 40,
+ editable: true,
+ });
+ const [value, setValue] = React.useState>([startDate, endDate]);
+ return (
+
+ (theme.palette.mode === 'dark' ? 'primary.400' : 'primary.600')}
+ sx={{
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: { xs: 'center', md: 'flex-start' },
+ '& > *': { mr: 1, width: 28, height: 28 },
+ }}
+ >
+ MUI X
+
+
+ Performant
+
+ advanced
+ components
+
+
+ Build complex and data-rich applications using a growing list of advanced components.
+ We're kicking it off with the most powerful Data Grid on the market.
+
+
+
+ }
+ rightSx={{
+ p: { md: 2, lg: 3, xl: 4 },
+ }}
+ right={
+
+
+
+ theme.palette.mode === 'dark' ? 'primaryDark.600' : 'grey.100',
+ }}
+ >
+
+ Trades, October 2020
+
+
+ svg': {
+ fontSize: '1.25rem',
+ },
+ },
+ '& .MuiDataGrid-columnHeaderTitleContainer': {
+ padding: 0,
+ },
+ '& .MuiDataGrid-columnHeaderTitle': {
+ flexGrow: 1,
+ fontSize: '0.875rem',
+ },
+ '& button, & button > svg': {
+ fontSize: 16,
+ },
+ '& .MuiDataGrid-viewport': {
+ '& .MuiDataGrid-cell': {
+ fontSize: '0.875rem',
+ color: 'text.secondary',
+ },
+ '& .MuiInputBase-input': {
+ fontSize: '0.875rem',
+ px: 0.5,
+ },
+ },
+ '& .MuiDataGrid-cell[data-field="status"][data-value="Rejected"]': {
+ '& .MuiChip-root': {
+ color: (theme) => (theme.palette.mode === 'dark' ? red[300] : red[500]),
+ },
+ },
+ },
+ }}
+ >
+
+
+
+
+
+
+ Cool Project
+
+
+
+
+ div': { borderRadius: 1, overflow: 'auto', bgcolor: 'transparent' },
+ '& .MuiTypography-subtitle1': {
+ fontSize: '0.875rem',
+ },
+ '& .MuiTypography-caption': {
+ width: { xs: 28, xl: 32 },
+ height: 32,
+ },
+ '& .PrivatePickersSlideTransition-root': {
+ minWidth: { xs: 268, xl: 300 },
+ minHeight: { xs: 238, xl: 288 },
+ },
+ '& [role="row"]': {
+ margin: { xs: '4px 0', xl: '6px 0' },
+ },
+ '& .MuiDateRangePickerDay-root': {
+ lineHeight: 0,
+ margin: 0,
+ },
+ '& .MuiPickersDay-root': {
+ width: { xs: 28, xl: 32 },
+ height: { xs: 28, xl: 32 },
+ fontWeight: 400,
+ },
+ }}
+ >
+
+ {
+ setValue(newValue);
+ }}
+ renderInput={(startProps, endProps) => (
+
+
+ to
+
+
+ )}
+ />
+
+
+
+
+ }
+ />
+ );
+}
diff --git a/docs/src/components/productX/XRoadmap.tsx b/docs/src/components/productX/XRoadmap.tsx
new file mode 100644
index 00000000000000..4c912619d22039
--- /dev/null
+++ b/docs/src/components/productX/XRoadmap.tsx
@@ -0,0 +1,190 @@
+import * as React from 'react';
+import { ThemeProvider } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
+import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
+import Section from 'docs/src/layouts/Section';
+import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
+import Link from 'docs/src/modules/components/Link';
+import ROUTES from 'docs/src/route';
+import { brandingDarkTheme } from 'docs/src/modules/brandingTheme';
+import TableChartRounded from '@mui/icons-material/TableChartRounded';
+import DateRangeRounded from '@mui/icons-material/DateRangeRounded';
+import AccountTreeRounded from '@mui/icons-material/AccountTreeRounded';
+import ShowChartRounded from '@mui/icons-material/ShowChartRounded';
+import BarChartRounded from '@mui/icons-material/BarChartRounded';
+import FileUploadRounded from '@mui/icons-material/FileUploadRounded';
+import PendingActionsRounded from '@mui/icons-material/PendingActions';
+import SpeedRounded from '@mui/icons-material/SpeedRounded';
+
+export default function XRoadmap() {
+ function renderList(content: React.ReactElement, nested?: boolean) {
+ return (
+
+ {content}
+
+ );
+ }
+ const bullet = (
+
+ );
+ return (
+
+
+
+
+
+
+
+ }
+ >
+ See the roadmap
+
+
+
+
+
+
+ Released
+ More updates coming.
+ {renderList(
+
+
+ Data Grid
+
+ Date Picker
+
+ Tree View
+ ,
+ )}
+
+
+
+
+ Working in progress
+ Getting there.
+ {renderList(
+
+
+
+
+ Data Grid
+ {bullet}
+ Tree data
+ {bullet}
+ Grouping
+ {bullet}
+ Column pinning
+ {bullet}
+
+ And more!
+
+ ,
+ true,
+ )}
+
+
+
+
+ On the list
+ Sometime soonâŚ
+ {renderList(
+
+
+ Sparkline
+
+ Charts
+
+ Upload
+
+ Scheduler
+
+ Gauge
+ ,
+ )}
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs/src/components/productX/XTheming.tsx b/docs/src/components/productX/XTheming.tsx
new file mode 100644
index 00000000000000..511f05a3baad77
--- /dev/null
+++ b/docs/src/components/productX/XTheming.tsx
@@ -0,0 +1,189 @@
+import * as React from 'react';
+import {
+ DataGridPro,
+ GridColDef,
+ GridCellParams,
+ GridRenderEditCellParams,
+} from '@mui/x-data-grid-pro';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import { createTheme, ThemeProvider, Theme } from '@mui/material/styles';
+import { red } from '@mui/material/colors';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import Paper from '@mui/material/Paper';
+import Section from 'docs/src/layouts/Section';
+import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
+import GradientText from 'docs/src/components/typography/GradientText';
+import Item, { Group } from 'docs/src/components/action/Item';
+import Highlighter from 'docs/src/components/action/Highlighter';
+import SvgTwinkle from 'docs/src/icons/SvgTwinkle';
+import SvgMaterialDesign from 'docs/src/icons/SvgMaterialDesign';
+import XGridGlobalStyles from 'docs/src/components/home/XGridGlobalStyles';
+import ProgressBar from 'docs/src/components/x-grid/ProgressBar';
+import EditProgress from 'docs/src/components/x-grid/EditProgress';
+import Status from 'docs/src/components/x-grid/Status';
+import EditStatus from 'docs/src/components/x-grid/EditStatus';
+
+const lightTheme = createTheme();
+const darkTheme = createTheme({ palette: { mode: 'dark' } });
+
+const dataGridStyleOverrides = ;
+
+export default function XTheming() {
+ const [customized, setCustomized] = React.useState(true);
+ const { loading, data } = useDemoData({
+ dataSet: 'Commodity',
+ rowLength: 1000,
+ maxColumns: 40,
+ editable: true,
+ });
+ const baseFilledQuantityCol = data.columns.find(({ field }) => field === 'filledQuantity');
+ const baseStatusCol = data.columns.find(({ field }) => field === 'status');
+ function getColumns() {
+ const columns: Array = [
+ {
+ field: 'desk',
+ headerName: 'desk',
+ width: customized ? 72 : 100,
+ sortable: false,
+ editable: true,
+ },
+ {
+ field: 'commodity',
+ headerName: 'Commodity',
+ width: customized ? 132 : 160,
+ editable: true,
+ },
+ {
+ field: 'traderName',
+ headerName: 'Trader Name',
+ width: customized ? 148 : 172,
+ editable: true,
+ },
+ {
+ field: 'filledQuantity',
+ headerName: 'Filled',
+ ...baseFilledQuantityCol,
+ width: customized ? 130 : 150,
+ sortable: false,
+ editable: true,
+ ...(customized && {
+ renderCell: (params: GridCellParams) => {
+ return ;
+ },
+ renderEditCell: (params: GridRenderEditCellParams) => {
+ return ;
+ },
+ }),
+ },
+ {
+ field: 'status',
+ headerName: 'Status',
+ ...baseStatusCol,
+ width: 150,
+ sortable: false,
+ editable: true,
+ ...(customized && {
+ renderCell: (params: GridCellParams) => {
+ return ;
+ },
+ renderEditCell: (params: GridRenderEditCellParams) => {
+ return ;
+ },
+ }),
+ },
+ ];
+ return columns;
+ }
+ return (
+
+
+
+
+
+ Advanced and beautiful
+
+ }
+ description="Use the sophisticated theming features to make the MUI X components looks exactly as you want. "
+ />
+
+
+ setCustomized(true)}>
+ }
+ title="Custom Theme"
+ description="Theming allows you to use your brand's design tokens, easily making the components reflect its look and feel."
+ />
+
+ setCustomized(false)}>
+ }
+ title="Material Design"
+ description="Every component comes with Google's tried and tested design system ready for use."
+ />
+
+
+
+
+ {customized ? (
+
+ theme.palette.mode === 'dark' ? 'primaryDark.600' : 'grey.200',
+ }}
+ >
+ {dataGridStyleOverrides}
+
+
+ ) : (
+ {
+ if (globalTheme.palette.mode === 'dark') {
+ return darkTheme;
+ }
+ return lightTheme;
+ }}
+ >
+ (theme.palette.mode === 'dark' ? red[300] : red[500]),
+ },
+ },
+ }}
+ >
+
+
+
+ )}
+
+
+
+ );
+}
diff --git a/docs/src/components/productX/XTreeViewDemo.tsx b/docs/src/components/productX/XTreeViewDemo.tsx
new file mode 100644
index 00000000000000..76a433a6f57b19
--- /dev/null
+++ b/docs/src/components/productX/XTreeViewDemo.tsx
@@ -0,0 +1,308 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import TreeView from '@mui/lab/TreeView';
+import MuiTreeItem, { useTreeItem, TreeItemProps, TreeItemContentProps } from '@mui/lab/TreeItem';
+import Typography from '@mui/material/Typography';
+import AddBoxOutlined from '@mui/icons-material/AddBoxOutlined';
+import IndeterminateCheckBoxOutlined from '@mui/icons-material/IndeterminateCheckBoxOutlined';
+import FolderRounded from '@mui/icons-material/FolderRounded';
+import FolderOpenRounded from '@mui/icons-material/FolderOpenRounded';
+import PhotoOutlined from '@mui/icons-material/PhotoOutlined';
+import PictureAsPdfOutlined from '@mui/icons-material/PictureAsPdfOutlined';
+import VideocamOutlined from '@mui/icons-material/VideocamOutlined';
+import FourKOutlined from '@mui/icons-material/FourKOutlined';
+import Frame from 'docs/src/components/action/Frame';
+
+const CustomContent = React.forwardRef(function CustomContent(
+ props: TreeItemContentProps & { lastNestedChild?: boolean },
+ ref,
+) {
+ const {
+ lastNestedChild,
+ classes,
+ className,
+ label,
+ nodeId,
+ icon: iconProp,
+ expansionIcon,
+ displayIcon,
+ } = props;
+
+ const {
+ disabled,
+ expanded,
+ selected,
+ focused,
+ handleExpansion,
+ handleSelection,
+ preventSelection,
+ } = useTreeItem(nodeId);
+
+ const icon = iconProp || expansionIcon || displayIcon;
+
+ const handleMouseDown = (event: React.MouseEvent) => {
+ preventSelection(event);
+ };
+
+ const handleExpansionClick = (event: React.MouseEvent) => {
+ handleExpansion(event);
+ handleSelection(event);
+ };
+
+ const handleSelectionClick = (event: React.MouseEvent) => {
+ handleSelection(event);
+ };
+
+ const renderExtension = () => {
+ if (typeof label !== 'string') {
+ return label;
+ }
+ const extension = (label || '').split('.').slice(-1)[0];
+ if (extension.match(/(jpg|jpeg|png)/)) {
+ return ;
+ }
+ if (extension === 'pdf') {
+ return ;
+ }
+ if (extension === 'mp4') {
+ return ;
+ }
+ if (extension === 'mkv') {
+ return ;
+ }
+ return (
+
+ );
+ };
+
+ return (
+ /* @ts-ignore -- Key event is handled by the TreeView */
+ }
+ sx={{
+ border: 'none',
+ borderRadius: '5px',
+ textAlign: 'left',
+ position: 'relative',
+ zIndex: 1,
+ '& svg': {
+ fontSize: 18,
+ color: nodeId.startsWith('root') ? 'primary.main' : 'grey.600',
+ },
+ '&:not(.CustomContent-last)': {
+ '& svg': {
+ '&:first-of-type': {
+ fontSize: 14,
+ color: 'primary.main',
+ },
+ },
+ },
+ }}
+ >
+ {icon}
+ {lastNestedChild && renderExtension()}
+ {!lastNestedChild && (expanded ? : )}
+
+ {label}
+
+
+ );
+});
+
+const StyledTreeItem = styled(MuiTreeItem)(({ theme }) => ({
+ paddingTop: 5,
+ '& .MuiTreeItem-content .MuiTreeItem-label': {
+ paddingLeft: theme.spacing(0.75),
+ },
+ '& .MuiTreeItem-root': {
+ position: 'relative',
+ '&:last-of-type': {
+ '&:before': {
+ height: 30 / 2,
+ },
+ },
+ '&:before': {
+ content: '""',
+ display: 'block',
+ position: 'absolute',
+ left: -18,
+ height: '100%',
+ width: 2,
+ backgroundColor:
+ theme.palette.mode === 'dark' ? theme.palette.primaryDark[500] : theme.palette.grey[200],
+ },
+ },
+ '& .MuiTreeItem-content': {
+ padding: theme.spacing('2px', 0.5),
+ },
+ '& .MuiTreeItem-group': {
+ marginLeft: 0,
+ paddingLeft: theme.spacing(3),
+ '& .MuiTreeItem-content': {
+ '&:before': {
+ content: '""',
+ position: 'absolute',
+ display: 'block',
+ width: 24,
+ height: 2,
+ backgroundColor:
+ theme.palette.mode === 'dark' ? theme.palette.primaryDark[500] : theme.palette.grey[200],
+ top: '50%',
+ left: 6,
+ transform: 'translate(-100%, -50%)',
+ },
+ },
+ },
+}));
+
+const TreeItem = (
+ props: TreeItemProps & {
+ ContentProps?: { lastNestedChild?: boolean };
+ },
+) => ;
+
+export default function XDateRangeDemo() {
+ return (
+
+
+ (theme.palette.mode === 'dark' ? 'primaryDark.900' : '#fff'),
+ }}
+ >
+ }
+ defaultExpandIcon={}
+ sx={{ height: { xs: 300, sm: 380 }, overflowY: 'auto', p: 1 }}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs/src/components/showcase/FolderTreeView.tsx b/docs/src/components/showcase/FolderTreeView.tsx
new file mode 100644
index 00000000000000..465d245c7390bb
--- /dev/null
+++ b/docs/src/components/showcase/FolderTreeView.tsx
@@ -0,0 +1,193 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import TreeView from '@mui/lab/TreeView';
+import TreeItem, { useTreeItem, TreeItemProps, TreeItemContentProps } from '@mui/lab/TreeItem';
+import Typography from '@mui/material/Typography';
+import KeyboardArrowDownRounded from '@mui/icons-material/KeyboardArrowDownRounded';
+import KeyboardArrowUpRounded from '@mui/icons-material/KeyboardArrowUpRounded';
+import FolderRounded from '@mui/icons-material/FolderRounded';
+
+const CustomContent = React.forwardRef(function CustomContent(
+ props: TreeItemContentProps & { lastNestedChild?: boolean },
+ ref,
+) {
+ const {
+ lastNestedChild,
+ classes,
+ className,
+ label,
+ nodeId,
+ icon: iconProp,
+ expansionIcon,
+ displayIcon,
+ } = props;
+
+ const {
+ disabled,
+ expanded,
+ selected,
+ focused,
+ handleExpansion,
+ handleSelection,
+ preventSelection,
+ } = useTreeItem(nodeId);
+
+ const icon = iconProp || expansionIcon || displayIcon;
+
+ const handleMouseDown = (event: React.MouseEvent) => {
+ preventSelection(event);
+ };
+
+ const handleExpansionClick = (event: React.MouseEvent) => {
+ handleExpansion(event);
+ };
+
+ const handleSelectionClick = (event: React.MouseEvent) => {
+ handleSelection(event);
+ };
+
+ return (
+ /* @ts-ignore -- Key event is handled by the TreeView */
+ }
+ >
+ {lastNestedChild ? (
+
+ ) : (
+
+ )}
+
+ {label}
+
+ {icon}
+
+ );
+});
+
+const StyledTreeItem = styled(TreeItem)(({ theme }) => ({
+ '& .MuiTreeItem-content': {
+ border: 'none',
+ backgroundColor: 'transparent',
+ borderRadius: 5,
+ padding: theme.spacing(0.5),
+ textAlign: 'left',
+ position: 'relative',
+ zIndex: 1,
+ },
+ '& .MuiTreeItem-content .MuiTreeItem-label': {
+ paddingLeft: theme.spacing(1),
+ },
+ '& .MuiTreeItem-root': {
+ position: 'relative',
+ '&:last-of-type': {
+ '&:before': {
+ height: 34 / 2,
+ },
+ },
+ '&:before': {
+ content: '""',
+ display: 'block',
+ position: 'absolute',
+ left: -18,
+ height: '100%',
+ width: 2,
+ backgroundColor:
+ theme.palette.mode === 'dark' ? theme.palette.primaryDark[600] : theme.palette.grey[200],
+ },
+ },
+ '& .MuiTreeItem-group': {
+ marginLeft: 0,
+ paddingLeft: theme.spacing(3),
+ '& .MuiTreeItem-content': {
+ '&:before': {
+ content: '""',
+ position: 'absolute',
+ display: 'block',
+ width: 24,
+ height: 2,
+ backgroundColor:
+ theme.palette.mode === 'dark' ? theme.palette.primaryDark[600] : theme.palette.grey[200],
+ top: '50%',
+ left: 6,
+ transform: 'translate(-100%, -50%)',
+ },
+ },
+ },
+}));
+
+const CustomTreeItem = (
+ props: TreeItemProps & {
+ ContentProps?: { lastNestedChild?: boolean };
+ },
+) => ;
+
+export default function FolderTreeView() {
+ return (
+ }
+ defaultExpandIcon={}
+ defaultEndIcon={}
+ sx={{ p: 1, overflowY: 'auto' }}
+ >
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs/src/components/showcase/RealEstateCard.tsx b/docs/src/components/showcase/RealEstateCard.tsx
index bdbc83371d8c66..fdebfc48f3fb44 100644
--- a/docs/src/components/showcase/RealEstateCard.tsx
+++ b/docs/src/components/showcase/RealEstateCard.tsx
@@ -13,6 +13,7 @@ export default function RealEstateCard(props: CardProps) {
sx={{
display: 'flex',
flexWrap: 'wrap',
+ backgroundColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.800' : '#fff'),
p: 1,
zIndex: 1,
...props.sx,
diff --git a/docs/src/components/x-grid/EditProgress.tsx b/docs/src/components/x-grid/EditProgress.tsx
new file mode 100644
index 00000000000000..fc50df90444328
--- /dev/null
+++ b/docs/src/components/x-grid/EditProgress.tsx
@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { GridRenderEditCellParams } from '@mui/x-data-grid';
+import { debounce } from '@mui/material/utils';
+import { alpha } from '@mui/material/styles';
+import Slider from '@mui/material/Slider';
+import Tooltip from '@mui/material/Tooltip';
+
+function ValueLabelComponent(props: {
+ open: boolean;
+ value: number;
+ children: React.ReactElement;
+}) {
+ const { children, open, value } = props;
+ return (
+
+ {children}
+
+ );
+}
+
+export default function EditProgress(props: GridRenderEditCellParams) {
+ const { id, value, api, field } = props;
+ const [valueState, setValueState] = React.useState(Number(value));
+
+ const updateCellEditProps = React.useCallback(
+ (newValue) => {
+ api.setEditCellValue({ id, field, value: newValue });
+ },
+ [api, field, id],
+ );
+
+ const debouncedUpdateCellEditProps = React.useMemo(
+ () => debounce(updateCellEditProps, 60),
+ [updateCellEditProps],
+ );
+
+ const handleChange = (event: Event, newValue: number | number[]) => {
+ setValueState(newValue as number);
+ debouncedUpdateCellEditProps(newValue);
+ };
+
+ React.useEffect(() => {
+ setValueState(Number(value));
+ }, [value]);
+
+ const handleRef = (element: any) => {
+ if (element) {
+ const input = element.querySelector('input') as null | HTMLInputElement;
+ if (input) {
+ input.focus();
+ }
+ }
+ };
+
+ return (
+ (theme.palette.mode === 'dark' ? 'primaryDark.700' : 'grey.100'),
+ },
+ '& .MuiSlider-track': {
+ border: 0,
+ ...(valueState < 0.3 && {
+ bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'error.800' : 'error.500'),
+ }),
+ ...(valueState >= 0.3 &&
+ valueState <= 0.7 && {
+ bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'warning.800' : 'warning.500'),
+ }),
+ ...(valueState > 0.7 && {
+ bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'success.800' : 'success.500'),
+ }),
+ },
+ '& .MuiSlider-thumb': {
+ cursor: 'col-resize',
+ height: '100%',
+ width: 5,
+ borderRadius: '0px',
+ marginTop: 0,
+ backgroundColor: alpha('#000000', 0.2),
+ },
+ }}
+ value={valueState}
+ max={1}
+ step={0.00001}
+ onChange={handleChange}
+ components={{
+ ValueLabel: ValueLabelComponent,
+ }}
+ valueLabelDisplay="auto"
+ valueLabelFormat={(newValue) => `${(newValue * 100).toLocaleString()} %`}
+ />
+ );
+}
diff --git a/docs/src/components/x-grid/EditStatus.tsx b/docs/src/components/x-grid/EditStatus.tsx
new file mode 100644
index 00000000000000..7cc932cb59dc27
--- /dev/null
+++ b/docs/src/components/x-grid/EditStatus.tsx
@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { GridRenderEditCellParams } from '@mui/x-data-grid';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import ReportProblemIcon from '@mui/icons-material/ReportProblem';
+import InfoIcon from '@mui/icons-material/Info';
+import AutorenewIcon from '@mui/icons-material/Autorenew';
+import DoneIcon from '@mui/icons-material/Done';
+
+const STATUS_OPTIONS = ['Open', 'PartiallyFilled', 'Filled', 'Rejected'];
+
+export default function EditStatus(props: GridRenderEditCellParams) {
+ const { id, value, api, field } = props;
+
+ const handleChange = (event: any) => {
+ api.setEditCellValue({ id, field, value: event.target.value }, event);
+ if (!event.key) {
+ api.commitCellChange({ id, field });
+ api.setCellMode(id, field, 'view');
+ }
+ };
+
+ const handleClose = (event: {}, reason: 'backdropClick' | 'escapeKeyDown') => {
+ if (reason === 'backdropClick') {
+ api.setCellMode(id, field, 'view');
+ }
+ };
+
+ return (
+
+ );
+}
diff --git a/docs/src/components/x-grid/ProgressBar.tsx b/docs/src/components/x-grid/ProgressBar.tsx
new file mode 100644
index 00000000000000..0f438f2a874391
--- /dev/null
+++ b/docs/src/components/x-grid/ProgressBar.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+
+interface ProgressBarProps {
+ value: number;
+}
+
+const ProgressBar = React.memo(function ProgressBar(props: ProgressBarProps) {
+ const { value } = props;
+ const valueInPercent = value * 100;
+
+ return (
+ (theme.palette.mode === 'dark' ? 'primaryDark.700' : 'grey.100'),
+ }}
+ >
+ {`${valueInPercent.toLocaleString()} %`}
+ (theme.palette.mode === 'dark' ? 'error.700' : 'error.200'),
+ }),
+ ...(valueInPercent >= 30 &&
+ valueInPercent <= 70 && {
+ bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'warning.900' : 'warning.400'),
+ }),
+ ...(valueInPercent > 70 && {
+ bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'success.800' : 'success.300'),
+ }),
+ width: `${valueInPercent}%`,
+ }}
+ />
+
+ );
+});
+
+export default ProgressBar;
diff --git a/docs/src/components/x-grid/Status.tsx b/docs/src/components/x-grid/Status.tsx
new file mode 100644
index 00000000000000..08764eb98ed412
--- /dev/null
+++ b/docs/src/components/x-grid/Status.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { alpha } from '@mui/material/styles';
+import Chip from '@mui/material/Chip';
+
+interface StatusProps {
+ status: string;
+}
+
+const Status = React.memo((props: StatusProps) => {
+ const { status } = props;
+ let label = status;
+ if (status === 'PartiallyFilled') {
+ label = 'Partial';
+ }
+ return (
+ alpha(theme.palette.primary[500], 0.1),
+ color: (theme) => (theme.palette.mode === 'dark' ? 'primary.300' : 'primary.600'),
+ }),
+ ...(status === 'Filled' && {
+ borderColor: 'success.500',
+ bgcolor: (theme) => alpha(theme.palette.success[500], 0.1),
+ color: (theme) => (theme.palette.mode === 'dark' ? 'success.500' : 'success.800'),
+ }),
+ ...(status === 'PartiallyFilled' && {
+ borderColor: 'warning.600',
+ bgcolor: (theme) => alpha(theme.palette.warning[500], 0.1),
+ color: (theme) => (theme.palette.mode === 'dark' ? 'warning.300' : 'warning.900'),
+ }),
+ ...(status === 'Rejected' && {
+ borderColor: 'error.500',
+ bgcolor: (theme) => alpha(theme.palette.error[500], 0.1),
+ color: (theme) => (theme.palette.mode === 'dark' ? 'error.400' : 'error.600'),
+ }),
+ }}
+ />
+ );
+});
+
+export default Status;
diff --git a/docs/src/modules/branding/BrandingBeginToday.tsx b/docs/src/modules/branding/BrandingBeginToday.tsx
index 1d8a1d55e33547..6560feca1f72a9 100644
--- a/docs/src/modules/branding/BrandingBeginToday.tsx
+++ b/docs/src/modules/branding/BrandingBeginToday.tsx
@@ -58,10 +58,10 @@ export default function BrandingBeginToday() {
}}
/>
- Begin with Material-UI today
+ Begin with MUI today
- Start with Material-UI and discover the benefits
+ Start with MUI and discover the benefits
);
diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts
index 825ebb08357d8a..5012559d867803 100644
--- a/docs/src/modules/brandingTheme.ts
+++ b/docs/src/modules/brandingTheme.ts
@@ -1,4 +1,5 @@
import { deepmerge } from '@mui/utils';
+import ArrowDropDownRounded from '@mui/icons-material/ArrowDropDownRounded';
import { createTheme, ThemeOptions, Theme } from '@mui/material/styles';
declare module '@mui/material/styles/createPalette' {
@@ -397,6 +398,16 @@ export function getThemedComponents(theme: Theme) {
},
},
},
+ MuiSelect: {
+ defaultProps: {
+ IconComponent: ArrowDropDownRounded,
+ },
+ styleOverrides: {
+ iconFilled: {
+ top: 'calc(50% - .25em)',
+ },
+ },
+ },
MuiTab: {
defaultProps: {
disableTouchRipple: true,
@@ -487,6 +498,12 @@ export function getThemedComponents(theme: Theme) {
width: 32,
height: 20,
padding: 0,
+ '& .MuiSwitch-switchBase': {
+ '&.Mui-checked': {
+ transform: 'translateX(11px)',
+ color: '#fff',
+ },
+ },
},
switchBase: {
height: 20,
@@ -496,10 +513,6 @@ export function getThemedComponents(theme: Theme) {
'&.Mui-checked + .MuiSwitch-track': {
opacity: 1,
},
- '&.Mui-checked': {
- transform: 'translateX(11px)',
- color: '#fff',
- },
},
track: {
opacity: 1,
diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js
index 962baf31922d8c..f14c2bc7525429 100644
--- a/docs/src/modules/components/Ad.js
+++ b/docs/src/modules/components/Ad.js
@@ -40,7 +40,7 @@ const inHouseAds = [
name: 'scaffoldhub',
link: 'https://scaffoldhub.io/?partner=1',
img: '/static/ads-in-house/scaffoldhub.png',
- description: 'ScaffoldHub. Automate building your full-stack Material-UI web-app.',
+ description: 'ScaffoldHub. Automate building your full-stack MUI web-app.',
},
{
name: 'templates',
@@ -61,21 +61,19 @@ const inHouseAds = [
link: 'https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=enterprise&utm_content=ad',
img: '/static/ads-in-house/tidelift.png',
description:
- 'Material-UI for enterprise. Save time and reduce risk. Managed open source â backed by maintainers.',
+ 'MUI for enterprise. Save time and reduce risk. Managed open source â backed by maintainers.',
},
{
name: 'sketch',
link: 'https://material-ui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=in-house-sketch',
img: '/static/ads-in-house/sketch.png',
- description:
- 'For Sketch. A large UI kit with over 600 handcrafted Material-UI symbols đ.',
+ description: 'For Sketch. A large UI kit with over 600 handcrafted MUI symbols đ.',
},
{
name: 'figma',
link: 'https://material-ui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=in-house-figma',
img: '/static/ads-in-house/figma.png',
- description:
- 'For Figma. A large UI kit with over 600 handcrafted Material-UI components đ¨.',
+ description: 'For Figma. A large UI kit with over 600 handcrafted MUI components đ¨.',
},
];
diff --git a/docs/src/modules/components/AdInHouse.js b/docs/src/modules/components/AdInHouse.js
index 4f37b6155cfa77..6e2ad7e64fbefe 100644
--- a/docs/src/modules/components/AdInHouse.js
+++ b/docs/src/modules/components/AdInHouse.js
@@ -6,7 +6,7 @@ import AdDisplay from 'docs/src/modules/components/AdDisplay';
export default function AdInHouse(props) {
const { ad } = props;
- return ;
+ return ;
}
AdInHouse.propTypes = {
diff --git a/docs/src/modules/components/ApiPage.js b/docs/src/modules/components/ApiPage.js
index 03ae13c5754640..50985477f00444 100644
--- a/docs/src/modules/components/ApiPage.js
+++ b/docs/src/modules/components/ApiPage.js
@@ -264,7 +264,7 @@ function ApiDocs(props) {
disableAd={false}
disableToc={false}
location={apiSourceLocation}
- title={`${componentName} API â Material-UI`}
+ title={`${componentName} API â MUI`}
toc={toc}
>
diff --git a/docs/src/modules/components/AppFooter.js b/docs/src/modules/components/AppFooter.js
index a4dcba42ffa759..b5322b0476176f 100644
--- a/docs/src/modules/components/AppFooter.js
+++ b/docs/src/modules/components/AppFooter.js
@@ -95,7 +95,7 @@ export default function AppFooter() {
- Material-UI
+ MUI
@@ -235,7 +235,7 @@ export default function AppFooter() {
{' Copyright Š '}
{new Date().getFullYear()}
- {' Material-UI. '}
+ {' MUI. '}
diff --git a/docs/src/modules/components/AppLayoutDocs.js b/docs/src/modules/components/AppLayoutDocs.js
index 733a3561fe3adf..2a2d9c6f0dbe2c 100644
--- a/docs/src/modules/components/AppLayoutDocs.js
+++ b/docs/src/modules/components/AppLayoutDocs.js
@@ -87,7 +87,7 @@ function AppLayoutDocs(props) {
return (
-
+
{disableAd ? null : (
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index b11a59282b7b6e..b23303f9db3db2 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -175,6 +175,10 @@ export default function Demo(props) {
}
const [codeOpen, setCodeOpen] = React.useState(demoOptions.defaultCodeOpen || false);
+ const shownOnce = React.useRef(false);
+ if (codeOpen) {
+ shownOnce.current = true;
+ }
React.useEffect(() => {
const navigatedDemoName = getDemoName(window.location.hash);
diff --git a/docs/src/modules/components/DemoErrorBoundary.js b/docs/src/modules/components/DemoErrorBoundary.js
index 2ba155b338b093..e0e7a5c5cb5c8d 100644
--- a/docs/src/modules/components/DemoErrorBoundary.js
+++ b/docs/src/modules/components/DemoErrorBoundary.js
@@ -54,7 +54,7 @@ export default class DemoErrorBoundary extends React.Component {
## Your Environment
| Tech | Version |
|--------------|---------|
-| Material-UI | v${process.env.LIB_VERSION} |
+| MUI | v${process.env.LIB_VERSION} |
| netlify deploy | ${process.env.NETLIFY_DEPLOY_URL} |
| Browser | ${
typeof window !== 'undefined' && window.navigator
diff --git a/docs/src/modules/components/DemoToolbar.js b/docs/src/modules/components/DemoToolbar.js
index 00278faffdaa4f..cfbd076ba9e5e4 100644
--- a/docs/src/modules/components/DemoToolbar.js
+++ b/docs/src/modules/components/DemoToolbar.js
@@ -139,7 +139,7 @@ function useToolbar(controlRefs, options = {}) {
// eslint-disable-next-line no-lonely-if
if (process.env.NODE_ENV !== 'production') {
console.error(
- 'Material-UI: The toolbar contains a focusable element that is not controlled by the toolbar. ' +
+ 'MUI: The toolbar contains a focusable element that is not controlled by the toolbar. ' +
'Make sure you have attached `getControlProps(index)` to every focusable element within this toolbar.',
);
}
@@ -151,7 +151,7 @@ function useToolbar(controlRefs, options = {}) {
handleToolbarFocus = (event) => {
if (findControlIndex(event.target) === -1) {
console.error(
- 'Material-UI: The toolbar contains a focusable element that is not controlled by the toolbar. ' +
+ 'MUI: The toolbar contains a focusable element that is not controlled by the toolbar. ' +
'Make sure you have attached `getControlProps(index)` to every focusable element within this toolbar.',
);
}
diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js
index 2ad0d61dee77b5..401853b19fe644 100644
--- a/docs/src/modules/components/ThemeContext.js
+++ b/docs/src/modules/components/ThemeContext.js
@@ -228,6 +228,12 @@ export function ThemeProvider(props) {
...paletteColors,
mode: paletteMode,
},
+ // v5 migration
+ props: {
+ MuiBadge: {
+ overlap: 'rectangular',
+ },
+ },
spacing,
},
dense ? highDensity : null,
diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js
index 3f4d6596ed51c8..f1258ffea88047 100644
--- a/docs/src/modules/components/TopLayoutBlog.js
+++ b/docs/src/modules/components/TopLayoutBlog.js
@@ -87,7 +87,7 @@ function TopLayoutBlog(props) {
return (
({
root: {
flex: '1 0 100%',
+ // Adding top buffer because of the v5 banner
+ marginTop: BANNER_HEIGHT,
},
container: {
marginBottom: theme.spacing(20),
@@ -29,7 +32,7 @@ function TopLayoutCompany(props) {
return (
-
+
{rendered.map((chunk, index) => {
diff --git a/docs/src/modules/utils/helpers.ts b/docs/src/modules/utils/helpers.ts
index ec9aca2472246b..4297ab0c76178e 100644
--- a/docs/src/modules/utils/helpers.ts
+++ b/docs/src/modules/utils/helpers.ts
@@ -77,7 +77,7 @@ const packagesWithBundledTypes = ['date-fns', '@emotion/react', '@emotion/styled
function addTypeDeps(deps: Record): void {
const packagesWithDTPackage = Object.keys(deps)
.filter((name) => packagesWithBundledTypes.indexOf(name) === -1)
- // All the Material-UI packages come with bundled types
+ // All the MUI packages come with bundled types
.filter((name) => name.indexOf('@mui/') !== 0);
packagesWithDTPackage.forEach((name) => {
diff --git a/docs/src/pages/company/about/about.md b/docs/src/pages/company/about/about.md
index ba2bcf6c68afb0..856353098436d0 100644
--- a/docs/src/pages/company/about/about.md
+++ b/docs/src/pages/company/about/about.md
@@ -18,6 +18,6 @@ Our core values include transparency (our work is public most of the time); crea
## Our Story
-Material-UI started back in 2014 to unify React and Material Design.
+MUI started back in 2014 to unify React and Material Design.
-Today, Material-UI has grown to become one of the world's most popular React UI libraries â backed by a vibrant community of more than 1M developers in over 180 countries.
+Today, MUI has grown to become one of the world's most popular React UI libraries â backed by a vibrant community of more than 1M developers in over 180 countries.
diff --git a/docs/src/pages/company/careers/careers.md b/docs/src/pages/company/careers/careers.md
index 00ece3b731e4d0..b9d8f5f6f0db06 100644
--- a/docs/src/pages/company/careers/careers.md
+++ b/docs/src/pages/company/careers/careers.md
@@ -1,8 +1,8 @@
-# Careers at Material-UI
+# Careers at MUI
-
We build the next generation of tools for UI development. Material-UI is focused on making React UI development faster, simpler, and accessible to more people.
+
We build the next generation of tools for UI development. MUI is focused on making React UI development faster, simpler, and accessible to more people.
-The open-source project started back in 2014 to unify React and Material Design. Today, Material-UI has grown to become one of the world's most popular React UI libraries, backed by a vibrant community of more than 2M developers in over 180 countries.
+The open-source project started back in 2014 to unify React and Material Design. Today, MUI has grown to become one of the world's most popular React UI libraries, backed by a vibrant community of more than 2M developers in over 180 countries.
The company is bootstrapped (so far).
It was incorporated in mid-2019 and yet growing fast (x2-3 YoY).
@@ -20,7 +20,7 @@ We doubled the team in 2020 and are on track to do the same in 2021.
- **Remote**: Our entire company is distributed.
- **Gatherings**: We meet up once or twice a year for a short week of meetings, events, and fun!
-- **Equipment**: Material-UI will let you choose new hardware of your choice (up to $2,500 USD).
+- **Equipment**: MUI will let you choose new hardware of your choice (up to $2,500 USD).
- **Flexible hours**: We work from different timezones. When the work is done doesn't really matter.
- **Time off**: We provide five weeks of paid time off.
@@ -71,7 +71,7 @@ If you don't want to wait for the positions to be opened, you can jump ahead and
### Customer Success
-- **Support Engineer**. Ensure that our users wildly succeed on their journey with Material-UI. You'll directly work with users, customers, and potential customers to unblock them from using the products, triage and resolve issues, and use this direct feedback to drive improvements in Material-UI.
+- **Support Engineer**. Ensure that our users wildly succeed on their journey with MUI. You'll directly work with users, customers, and potential customers to unblock them from using the products, triage and resolve issues, and use this direct feedback to drive improvements in MUI.
## FAQs
@@ -79,10 +79,10 @@ If you don't want to wait for the positions to be opened, you can jump ahead and
No. If a job is visible on our careers page, then you can still apply.
-### Does Material-UI do whiteboarding during interviews?
+### Does MUI do whiteboarding during interviews?
No. We ask applicants to complete challenges that are close to their future day-to-day contributions.
-### Does Material-UI offer contractor job opportunities?
+### Does MUI offer contractor job opportunities?
Yes. People outside of France will be hired as full-time contractors. (Benefits may vary.)
diff --git a/docs/src/pages/company/careers/developer-advocate.md b/docs/src/pages/company/careers/developer-advocate.md
index 86251ebe9f89e0..f9dbf63ab8be3d 100644
--- a/docs/src/pages/company/careers/developer-advocate.md
+++ b/docs/src/pages/company/careers/developer-advocate.md
@@ -23,17 +23,17 @@ In our [last developer survey](/blog/2020-developer-survey-results/#5-how-can-we
### Why this is interesting
-Our solution is empowering React developers to build awesome applications. It should be easy, it shouldn't require any advanced technical skills. Hundreds of thousands of developers use Material-UI every month.
+Our solution is empowering React developers to build awesome applications. It should be easy, it shouldn't require any advanced technical skills. Hundreds of thousands of developers use MUI every month.
## About the role
-We are looking for a dedicated educator and experienced developer to join us as a Developer Advocate to help people get familiar with and use Material-UI most effectively.
+We are looking for a dedicated educator and experienced developer to join us as a Developer Advocate to help people get familiar with and use MUI most effectively.
### What you'll do on a day-to-day basis
- You will compose blog posts. You will be writing tutorials and other technical blog posts.
- You will participate in and speak at events, and online live-streams.
-- You will create technical videos, video tutorials, demos, and additional videos for the Material-UI YouTube channel.
+- You will create technical videos, video tutorials, demos, and additional videos for the MUI YouTube channel.
- You will build apps, examples, and improve the documentation where needed.
- You will give feedback to product management, to influence the product roadmaps based on developers' needs.
diff --git a/docs/src/pages/company/careers/full-stack-engineer.md b/docs/src/pages/company/careers/full-stack-engineer.md
index fedfa4acbeaadb..9927ff4cb86b48 100644
--- a/docs/src/pages/company/careers/full-stack-engineer.md
+++ b/docs/src/pages/company/careers/full-stack-engineer.md
@@ -26,7 +26,7 @@ We believe that the best way to improve on these dimensions is to eliminate [80%
### Why this is interesting
-Our solution empowers React developers to build awesome applications â hundreds of thousands of developers use Material-UI every month.
+Our solution empowers React developers to build awesome applications â hundreds of thousands of developers use MUI every month.
But providing React components isn't enough.
In our [last developer survey](/blog/2020-developer-survey-results/), we learned that the majority of our audience are full-stack developers.
@@ -51,7 +51,7 @@ You are curious, you enjoy taking risks, and learning.
### Skills you should have
-- **Expertise in the modern JavaScript ecosystem**. Material-UI is built on the shoulders of giants, making use of technologies such as ES2020+, TypeScript, Node.js, React, Next.js, and Babel. The knowledge of SQL, Docker, and the AWS stack will prove itself valuable.
+- **Expertise in the modern JavaScript ecosystem**. MUI is built on the shoulders of giants, making use of technologies such as ES2020+, TypeScript, Node.js, React, Next.js, and Babel. The knowledge of SQL, Docker, and the AWS stack will prove itself valuable.
- âYou are autonomous and a faster learner. You are proactive and can start projects without constant direction.
- You ship code often that is elegant to use and read, and you take ownership of it. You can be relied upon throughout its lifecycle.
- You can put a lot of thoughts into design, product roadmap, and the details of each feature. You won't only take a project and make it "functional."
diff --git a/docs/src/pages/company/careers/product-manager.md b/docs/src/pages/company/careers/product-manager.md
index 969a99992dd0e1..13eafe0dab39c1 100644
--- a/docs/src/pages/company/careers/product-manager.md
+++ b/docs/src/pages/company/careers/product-manager.md
@@ -25,7 +25,7 @@ Our users are continuously providing feedback on the most important [pains they
### Why this is interesting
-Our solution is empowering React developers to build awesome applications. It should be easy, it shouldn't require any advanced technical skills. Hundreds of thousands of developers use Material-UI every month.
+Our solution is empowering React developers to build awesome applications. It should be easy, it shouldn't require any advanced technical skills. Hundreds of thousands of developers use MUI every month.
We are the second most used UI library in the world, after Bootstrap.
Our enterprise components portfolio is still small, with a million interesting and challenging problems to solve.
diff --git a/docs/src/pages/company/careers/react-engineer.md b/docs/src/pages/company/careers/react-engineer.md
index f3e8382468b1cf..4ac4437d77e47e 100644
--- a/docs/src/pages/company/careers/react-engineer.md
+++ b/docs/src/pages/company/careers/react-engineer.md
@@ -30,7 +30,7 @@ We also need help to continue to improve the health of the open-source product:
Our solution is empowering React developers to build awesome applications.
It should be easy, it shouldn't require any advanced technical skills.
-Hundreds of thousands of developers use Material-UI every month.
+Hundreds of thousands of developers use MUI every month.
Our enterprise components portfolio is still small, with a million interesting and challenging problems to solve.
@@ -41,12 +41,12 @@ Our enterprise components portfolio is still small, with a million interesting a
Depending on the day or the team you join, you'll:
- **Help guide architectural decisions**.
- The future of Material-UI is discussed and planned in our public RFCs and issues.
- You'll be helping drive these conversations and guiding Material-UI toward the best possible solutions.
+ The future of MUI is discussed and planned in our public RFCs and issues.
+ You'll be helping drive these conversations and guiding MUI toward the best possible solutions.
- **Contribute to deep, meaningful refactors and feature releases**.
- Material-UI is a complex codebase. Components we've shipped recently, such as the data grid have required months of dedicated, careful work.
+ MUI is a complex codebase. Components we've shipped recently, such as the data grid have required months of dedicated, careful work.
- **Reduce friction**.
- A large amount of the work on Material-UI is reducing friction and making it easier to use.
+ A large amount of the work on MUI is reducing friction and making it easier to use.
This might involve careful API design, identifying and fixing top bugs, creating easier to understand error messages, and writing documentation and blog posts about features you ship.
- **Collaborate with the community**.
Many small as well as meaningful fixes and features have been contributed by the community. Your role is to draw the best out of the community â to inspire those across the world to create and contribute through your reviews of their issues and pull requests.
@@ -61,7 +61,7 @@ Depending on the day or the team you join, you'll:
- **You'll be at the cutting edge of application development** â working on one of the fastest-growing UI libraries on the market.
- **You'll be part of an active, open, friendly community** of developers that are excited about building awesome applications.
-- **Your role will be key to making Material-UI the go-to UI framework** for building applications, websites, and design systems with React.
+- **Your role will be key to making MUI the go-to UI framework** for building applications, websites, and design systems with React.
### The worst parts of this job
@@ -71,7 +71,7 @@ Depending on the day or the team you join, you'll:
It's fun, rewarding work, but it can be very challenging.
- **We move quickly, but don't sacrifice quality**.
We ship early, often, and quickly. You may not be initially comfortable with the cadence with which we ship high-quality features and improvements to end-users. By doing so, we sacrifice on solving each problem 100% in exchange for fast feedback. Solving 50-70% of the issue with quality should be enough for any given iteration. Our users quickly tell us when we haven't pushed a solution far enough.
-- **Material-UI is a large codebase**. You may bang your head against the wall at times, and then write tests to assist future you đ.
+- **MUI is a large codebase**. You may bang your head against the wall at times, and then write tests to assist future you đ.
The work you will be doing is somewhat unique and idiosyncratic. You probably have not had a similar role before.
- **In open-source, you're faced with a nonstop stream of bug reports and support requests**. That means you need to develop an intuition for when to ignore something, and when to dig in further.
@@ -82,7 +82,7 @@ We're looking for someone with strong front-end skills. More important than spec
### Skills you should have
- **Expertise in the modern JavaScript ecosystem**.
- Material-UI is built on the shoulders of giants, making use of technologies such as ES2020, TypeScript, Node.js, React, Next.js, webpack, and Babel.
+ MUI is built on the shoulders of giants, making use of technologies such as ES2020, TypeScript, Node.js, React, Next.js, webpack, and Babel.
- **A track record of demonstrating an eye for product and solving real-world user problems**. If you have a knack for solving problems at the root cause, shipping beautiful user interfaces and intuitive APIs, we want you on our team.
- **Experience building and shipping production code in a team setting** with a passion for writing tested, performant, and high-quality code.
- **Strong written and verbal communication skills**.
@@ -105,7 +105,7 @@ We're looking for someone with strong front-end skills. More important than spec
- **You've maintained an active repository before**.
Maybe you've helped maintain a popular open-source repository, or perhaps you've worked on internal repositories that saw contributions from multiple teams.
Previous experience with highly active repository workflows is a definite plus for this role.
-- **You have contributed code to Material-UI before**. A history of contributing to Material-UI would be a definite plus.
+- **You have contributed code to MUI before**. A history of contributing to MUI would be a definite plus.
## Compensation
diff --git a/docs/src/pages/company/careers/technical-product-manager.md b/docs/src/pages/company/careers/technical-product-manager.md
new file mode 100644
index 00000000000000..35ffaf26690f3b
--- /dev/null
+++ b/docs/src/pages/company/careers/technical-product-manager.md
@@ -0,0 +1,67 @@
+# Technical Product Manager
+
+
We are looking for a technical product manager to guide our roadmap and build a great product.
+
+## Details of the Role
+
+- Location: Remote (preference for UTC-5 to UTC+4).
+- Type of work: Contractor (full-time, convertible to an employee position in the future).
+- Start date: Immediately.
+- We're a remote company, we prefer asynchronous communication over meetings.
+- We work independently, the rest of us won't know what you're doing day-to-day unless you tell us.
+
+## About us
+
+See the [careers](/company/careers/) and [about us](https://next.material-ui.com/branding/about/) pages.
+
+### Why we're hiring
+
+Both our open-source community and our premium products are growing fast (x2-3 YoY).
+We need talented people to keep that going!
+
+The advanced components team (X) needs help to build its best features.
+We have started with the [data grid](/components/data-grid/) a year ago, but it's the beginning.
+Our users are continuously providing feedback on the most important [pains they face](https://github.com/mui-org/material-ui-x/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc).
+
+### Why this is interesting
+
+Our solution is empowering React developers to build awesome applications. It should be easy, it shouldn't require any advanced technical skills. Hundreds of thousands of developers use Material-UI every month.
+We are the second most used UI library in the world, after Bootstrap.
+
+Our enterprise components portfolio is still small, with a million interesting and challenging problems to solve.
+
+## About the role
+
+You will be joining the advanced components team.
+
+### What you'll do on a day-to-day basis
+
+- You will coordinate with the engineering to ensure that the product being delivered at each iteration solves the problem.
+ This involves growing a deep understanding of our technical choices and constraints.
+- If time allows you to, you will assist the engineering team and implement some of the items in the backlog, up to part-time.
+- You will drive the revenue and community growth by owning KPIs.
+- You will grow and cultivate a deep understanding of the problems that developers have when they deal with enterprise applications. This means that you will observe and reach out to the community, run research interviews and share your insights with the team.
+- You will keep a close eye on feature requests, issues, and general improvements (mostly through GitHub issues and occasionally Zendesk), to curate opportunities based on our strategy.
+- You will build a strategy for your product area and contribute to the overall product strategy, e.g. establishing a go-to-market strategy.
+- You will assess the impact of initiatives through telemetry data and qualitative feedback to help us develop our understanding further, and decide on the next steps.
+
+## About you
+
+### Skills you should have
+
+- 3+ years prior experience working as a Front-end engineer, with React ideally.
+- 1+ years experience as Product Manager or closely related roles such as Product Owner, Program Manager, or Solutions Architect.
+- Able to switch between the big picture and detailed view multiple times a day.
+
+### What it would be nice if you had, but isn't required
+
+- Experience building developer tools.
+- Experience working with open-source and having interacted with open-source communities.
+
+## Compensation
+
+Competitive compensation of up to \$140,000 USD/year, depending on the profile. It could go higher for a person that can significantly push the mission forward. You can find the other perks & benefits in the [careers](/company/careers/#perks-amp-benefits) page.
+
+## Apply
+
+[Apply for this position đŽ](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Technical%20Product%20Manager)
diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-pt.md b/docs/src/pages/components/about-the-lab/about-the-lab-pt.md
index 9313a744418a0a..57b48c880e1086 100644
--- a/docs/src/pages/components/about-the-lab/about-the-lab-pt.md
+++ b/docs/src/pages/components/about-the-lab/about-the-lab-pt.md
@@ -30,10 +30,10 @@ yarn add @material-ui/lab
O lab tem dependĂŞncias com os componentes do core. Se vocĂŞ ainda nĂŁo estĂĄ utilizando o Material-UI em seu projeto, poderĂĄ instalĂĄ-lo com:
```sh
-// usando npm
+// utilizando o npm
npm install @material-ui/core
-// usando yarn
+// utilizando o yarn
yarn add @material-ui/core
```
diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-ru.md b/docs/src/pages/components/about-the-lab/about-the-lab-ru.md
index 85257ccc6fcfb3..a5b2290bbf0f68 100644
--- a/docs/src/pages/components/about-the-lab/about-the-lab-ru.md
+++ b/docs/src/pages/components/about-the-lab/about-the-lab-ru.md
@@ -20,10 +20,10 @@
ĐŁŃŃанОвиŃĐľ ĐżĐ°ĐşĐľŃ Đ˛ каŃаНОг ĐżŃОокŃĐ° кОПандОК:
```sh
-// Đ´ĐťŃ npm
+// npm
npm install @material-ui/lab
-// Đ´ĐťŃ yarn
+// yarn
yarn add @material-ui/lab
```
diff --git a/docs/src/pages/components/about-the-lab/about-the-lab.md b/docs/src/pages/components/about-the-lab/about-the-lab.md
index dcd4d8f1eb294c..13f6c76e135fcb 100644
--- a/docs/src/pages/components/about-the-lab/about-the-lab.md
+++ b/docs/src/pages/components/about-the-lab/about-the-lab.md
@@ -8,7 +8,7 @@ As developers use and test the components and report issues, the maintainers lea
For a component to be ready to move to the core, the following criteria are considered:
-- It needs to be **used**. The Material-UI team uses Google Analytics in the documentation (among other metrics) to evaluate the usage of each component. A lab component with low usage either means that it isn't fully working yet, or that there is low demand for it.
+- It needs to be **used**. The MUI team uses Google Analytics in the documentation (among other metrics) to evaluate the usage of each component. A lab component with low usage either means that it isn't fully working yet, or that there is low demand for it.
- It needs to match the **code quality** of the core components. It doesn't have to be perfect to be part of the core, but the component should be reliable enough that developers can depend on it.
- Each component needs **type definitions**. It is not currently required that a lab component is typed, but it would need to be typed to move to the core.
- Requires good **test coverage**. Some of the lab components don't currently have comprehensive tests.
@@ -28,7 +28,7 @@ yarn add @mui/lab
```
The lab has a peer dependency on the core components.
-If you are not already using Material-UI in your project, you can install it with:
+If you are not already using MUI in your project, you can install it with:
```sh
// with npm
diff --git a/docs/src/pages/components/accordion/accordion.md b/docs/src/pages/components/accordion/accordion.md
index be2511d22b6e2c..c284bf20f6f4c8 100644
--- a/docs/src/pages/components/accordion/accordion.md
+++ b/docs/src/pages/components/accordion/accordion.md
@@ -14,7 +14,7 @@ An accordion is a lightweight container that may either be used standalone, or b
{{"component": "modules/components/ComponentLinkHeader.js"}}
-> **Note:** Accordions are no longer documented in the [Material Design guidelines](https://material.io/), but Material-UI will continue to support them. It was formerly known as the "expansion panel".
+> **Note:** Accordions are no longer documented in the [Material Design guidelines](https://material.io/), but MUI will continue to support them. It was formerly known as the "expansion panel".
## Basic accordion
diff --git a/docs/src/pages/components/alert/alert-pt.md b/docs/src/pages/components/alert/alert-pt.md
index 85e9f47b760a27..eaaf568c03d7fc 100644
--- a/docs/src/pages/components/alert/alert-pt.md
+++ b/docs/src/pages/components/alert/alert-pt.md
@@ -45,7 +45,7 @@ A propriedade `icon` permite que vocĂŞ adicione um Ăcone no inĂcio do componen
VocĂŞ pode alterar a severidade padrĂŁo e o mapeamento do Ăcone com a propriedade `iconMapping`. Isso pode ser definido globalmente utilizando a [customização do tema](/customization/theme-components/#default-props).
-Definir a propriedade Ăcone como falso removerĂĄ o Ăcone completamente.
+Definir a propriedade `icon` como falso removerĂĄ o Ăcone completamente.
{{"demo": "pages/components/alert/IconAlerts.js"}}
diff --git a/docs/src/pages/components/alert/alert-ru.md b/docs/src/pages/components/alert/alert-ru.md
index ae1c7a7a3b5715..6e5843dd4a6173 100644
--- a/docs/src/pages/components/alert/alert-ru.md
+++ b/docs/src/pages/components/alert/alert-ru.md
@@ -9,7 +9,7 @@ waiAria: 'https://www.w3.org/TR/wai-aria-practices/#alert'
diff --git a/docs/src/pages/components/badges/badges-es.md b/docs/src/pages/components/badges/badges-es.md
index e0c74fef332554..fd4bb62fc30565 100644
--- a/docs/src/pages/components/badges/badges-es.md
+++ b/docs/src/pages/components/badges/badges-es.md
@@ -34,7 +34,7 @@ El badge se oculta automĂĄticamente con `badgeContent` igual a cero. Usted puede
## Valor mĂĄximo
-Usted puede usar la propiedad `max` para establecer el valor mĂĄximo que puede contener el Badge.
+Puedes usar la propiedad `max` para limitar el valor mĂĄximo del contenido del badge.
{{"demo": "pages/components/badges/BadgeMax.js"}}
diff --git a/docs/src/pages/components/badges/badges-fr.md b/docs/src/pages/components/badges/badges-fr.md
index 1037dbe6810f01..82fe1666829f31 100644
--- a/docs/src/pages/components/badges/badges-fr.md
+++ b/docs/src/pages/components/badges/badges-fr.md
@@ -24,7 +24,7 @@ Voici un exemple de personnalisation du composant. Vous pouvez en apprendre plus
## VisibilitĂŠ du badge
-La visibilitĂŠ des badges peut ĂŞtre contrĂ´lĂŠe Ă l'aide de la propriĂŠtĂŠ `invisible`.
+La visibilitĂŠ des badges peut ĂŞtre contrĂ´lĂŠe en utilisant le prop `invisible`.
{{"demo": "pages/components/badges/BadgeVisibility.js"}}
@@ -34,7 +34,7 @@ Le badge se cache automatiquement quand badgeContent est null. Vous pouvez la re
## Valeur maximale
-Vous pouvez utiliser la propriĂŠtĂŠ `max` pour limiter la valeur du contenu du badge.
+Vous pouvez utiliser le prop `max` pour plafonner la valeur du contenu du badge.
{{"demo": "pages/components/badges/BadgeMax.js"}}
@@ -46,7 +46,7 @@ La propriĂŠtĂŠ `dot` change un badge en petit point. Cela peut ĂŞtre utilisĂŠ co
## Chevauchement des badges
-You can use the `overlap` property to place the badge relative to the corner of the wrapped element.
+Vous pouvez utiliser le prop `overlap` pour placer le badge relatif au coin de l'ĂŠlĂŠment enveloppĂŠ.
{{"demo": "pages/components/badges/BadgeOverlap.js"}}
diff --git a/docs/src/pages/components/badges/badges-ja.md b/docs/src/pages/components/badges/badges-ja.md
index 6522a45143f3d3..b7cb044bc3c7ab 100644
--- a/docs/src/pages/components/badges/badges-ja.md
+++ b/docs/src/pages/components/badges/badges-ja.md
@@ -40,7 +40,7 @@ BadgeContentă0ăŽĺ ´ĺăăăă¸ăŻčŞĺçăŤé襨示ăŤăŞăăžăă
## ăăăăăă¸
-`dot`ăăăăăŁăŻăăăă¸ăĺ°ăăŞăăăăŤĺ¤ć´ăăžăă ăăăŻăä˝ăăĺ¤ć´ăăăăă¨ăăŤăŚăłăăăăŤéçĽăăăăăŤä˝żç¨ă§ăăžăă
+`dot`ăăăăăŁăŻăăăă¸ăĺ°ăăŞăăăăŤĺ¤ć´ăăžăă ăăăŻăä˝ăăĺ¤ć´ăăăăă¨ăăŤăŚăłăăăăŤéçĽăăăăăŤä˝żç¨ă§ăăžăă ăăăŻăä˝ăăĺ¤ć´ăăăăă¨ăăŤăŚăłăăăăŤéçĽăăăăăŤä˝żç¨ă§ăăžăă ăăăŻăä˝ăăĺ¤ć´ăăăăă¨ăăŤăŚăłăăăăŤéçĽăăăăăŤä˝żç¨ă§ăăžăă ăăăŻăä˝ăăĺ¤ć´ăăăăă¨ăăŤăŚăłăăăăŤéçĽăăăăăŤä˝żç¨ă§ăăžăă ăăăŻăä˝ăăĺ¤ć´ăăăăă¨ăăŤăŚăłăăăăŤéçĽăăăăăŤä˝żç¨ă§ăăžăă
{{"demo": "pages/components/badges/DotBadge.js"}}
diff --git a/docs/src/pages/components/badges/badges-zh.md b/docs/src/pages/components/badges/badges-zh.md
index 190ef1071141e5..86157bfbb62940 100644
--- a/docs/src/pages/components/badges/badges-zh.md
+++ b/docs/src/pages/components/badges/badges-zh.md
@@ -34,7 +34,7 @@ githubLabel: 'component: Badge'
## ć大ĺź
-ć¨ĺŻäťĽä˝żç¨ `max` ĺąć§ćĽéĺśĺž˝çŤ ĺ 厚çć大ĺźă
+ć¨ĺŻäťĽä˝żç¨ `max` ĺąć§ćĽéĺśĺž˝çŤ çťäťśĺ 厚çć大ĺźă
{{"demo": "pages/components/badges/BadgeMax.js"}}
@@ -46,7 +46,7 @@ githubLabel: 'component: Badge'
## ĺž˝çŤ çťäťśç overlap ĺąć§
-ć¨ĺŻäťĽä˝żç¨ `overlap` čżä¸Şĺąć§ďźĺ¨ĺ°čŁ çĺ ç´ ç¸ĺŻšçä¸č§ćĽćžç¤şĺž˝çŤ çťäťśă
+ä˝ ĺŻäťĽä˝żç¨ `overlap` ĺąć§ćĽĺ°ĺž˝çŤ çťäťśćžç˝Žĺ°ĺ°ĺ°čŁ çĺ ç´ ä¸ä¸Şç¸ĺŻšä˝ç˝Žçč§č˝ă
{{"demo": "pages/components/badges/BadgeOverlap.js"}}
diff --git a/docs/src/pages/components/box/box-ja.md b/docs/src/pages/components/box/box-ja.md
index a1cba5e0cbb091..2be1a1f37567f5 100644
--- a/docs/src/pages/components/box/box-ja.md
+++ b/docs/src/pages/components/box/box-ja.md
@@ -9,7 +9,7 @@ githubLabel: 'component: Box'
BoxăłăłăăźăăłăăŻă`@material-ui/system`ă§ĺ Źéăăă[ăăšăŚăŽăšăżă¤ăŤé˘ć°](/system/basics/#all-inclusive) ăăăăąăźă¸ĺăăžăă
-[The palette](/system/palette/) styleé˘ć°ă
+[palette](/system/palette/) styleé˘ć°ă
## äž
diff --git a/docs/src/pages/components/box/box.md b/docs/src/pages/components/box/box.md
index 8935d4f0f527eb..2fe5865f5022ca 100644
--- a/docs/src/pages/components/box/box.md
+++ b/docs/src/pages/components/box/box.md
@@ -22,7 +22,7 @@ In addition, the `sx` prop allows you to specify any other CSS rules you may nee
{{"demo": "pages/components/box/BoxSx.js", "defaultCodeOpen": true }}
-## Overriding Material-UI components
+## Overriding MUI components
The Box component wraps your component.
It creates a new DOM element, a `
` that by default can be changed with the `component` prop.
@@ -36,7 +36,7 @@ For instance, you can change the margin this way.
However, sometimes you have to target the underlying DOM element.
As an example, you may want to change the border of the Button.
The Button component defines its own styles. CSS inheritance doesn't help.
-To workaround the problem, you can use the [`sx`](/system/basics/#the-sx-prop) prop directly on the child if it is a Material-UI component.
+To workaround the problem, you can use the [`sx`](/system/basics/#the-sx-prop) prop directly on the child if it is a MUI component.
```diff
-
@@ -45,7 +45,7 @@ To workaround the problem, you can use the [`sx`](/system/basics/#the-sx-prop) p
+
```
-For non-Material-UI components, use the `component` prop.
+For non-MUI components, use the `component` prop.
```diff
-
diff --git a/docs/src/pages/components/breadcrumbs/ActiveLastBreadcrumb.js b/docs/src/pages/components/breadcrumbs/ActiveLastBreadcrumb.js
index 75ddb90da1e956..7b0414c02c6290 100644
--- a/docs/src/pages/components/breadcrumbs/ActiveLastBreadcrumb.js
+++ b/docs/src/pages/components/breadcrumbs/ActiveLastBreadcrumb.js
@@ -12,7 +12,7 @@ export default function ActiveLastBreadcrumb() {
- Material-UI
+ MUI
- Material-UI
+ MUI
- Material-UI
+ MUI
- Material-UI
+ MUI
- Material-UI
+ MUI
- Material-UI
+ MUI
,
) {
export default function CustomSeparator() {
const breadcrumbs = [
- Material-UI
+ MUI
,
- Material-UI
+ MUI
- Material-UI
+ MUI
{ alert('clicked') }}>Click me
+
```
Ten en cuenta que la documentaciĂłn [evita](/guides/api/#native-properties) mencionar las propiedades nativas (existen varias) en la secciĂłn API de los componentes.
@@ -151,7 +151,7 @@ Sin embargo:
```jsx
```
diff --git a/docs/src/pages/components/buttons/buttons-fr.md b/docs/src/pages/components/buttons/buttons-fr.md
index c10d6b8c3f0b65..a6b3799e47336d 100644
--- a/docs/src/pages/components/buttons/buttons-fr.md
+++ b/docs/src/pages/components/buttons/buttons-fr.md
@@ -151,7 +151,7 @@ Toutefois :
```jsx
```
diff --git a/docs/src/pages/components/buttons/buttons-ja.md b/docs/src/pages/components/buttons/buttons-ja.md
index 8015f24c83257c..d76f8308f78270 100644
--- a/docs/src/pages/components/buttons/buttons-ja.md
+++ b/docs/src/pages/components/buttons/buttons-ja.md
@@ -78,7 +78,7 @@ For larger or smaller buttons, use the `size` prop.
## Buttons with icons and label
-ăă´ăŻăăŹăźăłăăăšăăăăčŞčăăăăăăăăăżăłăŤă˘ă¤ăłăłăčż˝ĺ ăăŚă˘ăăŞăąăźăˇă§ăłăŽUXă埡ĺăăăĺ ´ĺăăăăžăă ăă¨ăă°ăĺé¤ăăżăłăŤăăżçŽąă˘ă¤ăłăłăäťăăăăăŞĺ ´ĺă§ăă
+ăă´ăŻăăŹăźăłăăăšăăăăčŞčăăăăăăăăăżăłăŤă˘ă¤ăłăłăčż˝ĺ ăăŚă˘ăăŞăąăźăˇă§ăłăŽUXă埡ĺăăăĺ ´ĺăăăăžăă ăă¨ăă°ăĺé¤ăăżăłăŤăăżçŽąă˘ă¤ăłăłăäťăăăăăŞĺ ´ĺă§ăă ăă¨ăă°ăĺé¤ăăżăłăŤăăżçŽąă˘ă¤ăłăłăäťăăăăăŞĺ ´ĺă§ăă ăă¨ăă°ăĺé¤ăăżăłăŤăăżçŽąă˘ă¤ăłăłăäťăăăăăŞĺ ´ĺă§ăă ăă¨ăă°ăĺé¤ăăżăłăŤăăżçŽąă˘ă¤ăłăłăäťăăăăăŞĺ ´ĺă§ăă ăă¨ăă°ăĺé¤ăăżăłăŤăăżçŽąă˘ă¤ăłăłăäťăăăăăŞĺ ´ĺă§ăă ăă¨ăă°ăĺé¤ăăżăłăŤăăżçŽąă˘ă¤ăłăłăäťăăăăăŞĺ ´ĺă§ăă
{{"demo": "pages/components/buttons/IconLabelButtons.js"}}
diff --git a/docs/src/pages/components/cards/cards-de.md b/docs/src/pages/components/cards/cards-de.md
index 768f56ff200dec..b57325b5c9fd5c 100644
--- a/docs/src/pages/components/cards/cards-de.md
+++ b/docs/src/pages/components/cards/cards-de.md
@@ -5,7 +5,7 @@ githubLabel: 'component: Card'
materialDesign: https://material.io/components/cards
---
-# Card (karte)
+# Karte (Card)
Karten enthalten Inhalte und Aktionen zu einem bestimmten Thema.
diff --git a/docs/src/pages/components/cards/cards-pt.md b/docs/src/pages/components/cards/cards-pt.md
index 98624efce5891c..926cb80eb4cd24 100644
--- a/docs/src/pages/components/cards/cards-pt.md
+++ b/docs/src/pages/components/cards/cards-pt.md
@@ -39,7 +39,7 @@ Exemplo de um cartão usando uma imagem para reforçar o conteúdo.
{{"demo": "pages/components/cards/MediaCard.js", "bg": true}}
-Por padrĂŁo, nĂłs usamos uma combinação de um elemento `<div>` e um *background image* para exibir o componente media. Isto pode ser problemĂĄtico em algumas situaçþes. Por exemplo, vocĂŞ pode querer exibir um vĂdeo ou uma imagem responsiva. Use a propriedade `component` para estes casos de uso:
+Por padrão, nós usamos a combinação de um elemento `
` e uma *imagem de fundo* para exibir a mĂdia. Isto pode ser problemĂĄtico em algumas situaçþes. Por exemplo, vocĂŞ pode querer exibir um vĂdeo ou uma imagem responsiva. Use a propriedade `component` para estas situaçþes:
{{"demo": "pages/components/cards/ImgMediaCard.js", "bg": true}}
diff --git a/docs/src/pages/components/checkboxes/checkboxes-fr.md b/docs/src/pages/components/checkboxes/checkboxes-fr.md
index 7e0a2c3b19dd9f..971b8ffc8433af 100644
--- a/docs/src/pages/components/checkboxes/checkboxes-fr.md
+++ b/docs/src/pages/components/checkboxes/checkboxes-fr.md
@@ -76,8 +76,8 @@ Voici un exemple de personnalisation du composant. Vous pouvez en savoir plus da
## Quand les utiliser
-- [Cases Ă cocher vs. Radio Buttons](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/)
-- [Cases Ă cocher vs. Switches (interrupteurs)](https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8)
+- [Checkbox vs. Radio Buttons](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/)
+- [Checkbox vs. Switches (interrupteurs)](https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8)
## AccessibilitĂŠ
diff --git a/docs/src/pages/components/checkboxes/checkboxes-pt.md b/docs/src/pages/components/checkboxes/checkboxes-pt.md
index 53063f3d6bf0e1..7dc07978fd3b31 100644
--- a/docs/src/pages/components/checkboxes/checkboxes-pt.md
+++ b/docs/src/pages/components/checkboxes/checkboxes-pt.md
@@ -10,7 +10,7 @@ waiAria: 'https://www.w3.org/TR/wai-aria-practices/#checkbox'
Caixas de seleção permitem ao usuårio selecionar um ou mais itens de um conjunto.
-[Caixas de Seleção](https://material.io/design/components/selection-controls.html#checkboxes) podem ser usadas para ativar ou desativar uma opção.
+[Caixas de seleção](https://material.io/design/components/selection-controls.html#checkboxes) podem ser usadas para ativar ou desativar uma opção.
Se você tem vårias opçþes aparecendo em uma lista, você pode economizar espaço usando caixas de seleção ao invÊs de interruptores liga/desliga. Se você tem uma única opção, evite usar uma caixa de seleção e use um interruptor de liga/desliga.
@@ -76,15 +76,15 @@ Aqui estå um exemplo de customização do componente. Você pode aprender mais
## Quando usar
-- [Caixas de Seleção vs. Botþes de Opção](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/)
-- [Caixas de Seleção vs. Interruptores](https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8)
+- [Caixas de seleção vs. botþes de opção](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/)
+- [Caixas de seleção vs. Interruptores](https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8)
## Acessibilidade
(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#checkbox)
- Todos os controles de formulårio devem ter rótulos, e isso inclui os botþes de opção, caixas de seleção e interruptores. Na maioria dos casos, isso Ê feito usando o elemento `
](https://github.com/)
diff --git a/benchmark/browser/README.md b/benchmark/browser/README.md
index 580f128df80d7f..0e24be2a9f6609 100644
--- a/benchmark/browser/README.md
+++ b/benchmark/browser/README.md
@@ -23,7 +23,7 @@ React primitives:
34 Âą6%
React components:
45 Âą3%
-Styled Material-UI:
+Styled MUI:
73 Âą4%
Styled emotion:
67 Âą3%
@@ -33,7 +33,7 @@ makeStyles:
71 Âą3%
Box Baseline:
81 Âą3%
-Box Material-UI:
+Box MUI:
209 Âą15%
Box Theme-UI:
172 Âą8%
diff --git a/benchmark/browser/scripts/benchmark.js b/benchmark/browser/scripts/benchmark.js
index 1c19bacf05dbcd..8bbd823b548fc7 100644
--- a/benchmark/browser/scripts/benchmark.js
+++ b/benchmark/browser/scripts/benchmark.js
@@ -170,7 +170,7 @@ async function run() {
},
// Test that @mui/styled-engine doesn't add an signifiant overhead
{
- name: 'Styled Material-UI',
+ name: 'Styled MUI',
path: './styled-material-ui/index.js',
},
{
@@ -192,7 +192,7 @@ async function run() {
path: './box-baseline/index.js',
},
{
- name: 'Box Material-UI',
+ name: 'Box MUI',
path: './box-material-ui/index.js',
},
{
diff --git a/benchmark/package.json b/benchmark/package.json
index 90570b042b3c17..06a14190477a89 100644
--- a/benchmark/package.json
+++ b/benchmark/package.json
@@ -24,10 +24,10 @@
"react-dom": "^17.0.2",
"react-is": "^17.0.2",
"react-jss": "^10.7.1",
- "react-redux": "^7.1.1",
- "redux": "^4.0.4",
+ "react-redux": "^7.2.5",
+ "redux": "^4.1.1",
"serve-handler": "^6.1.3",
- "styled-components": "^5.0.0",
+ "styled-components": "^5.3.1",
"theme-ui": "^0.10.0",
"webpack": "^4.41.0",
"webpack-cli": "^4.0.0"
diff --git a/benchmark/server/README.md b/benchmark/server/README.md
index 51981a93b859dc..79053911b3b5d7 100644
--- a/benchmark/server/README.md
+++ b/benchmark/server/README.md
@@ -1,4 +1,4 @@
-# Material-UI benchmark
+# MUI benchmark
## `@mui/material`
diff --git a/benchmark/server/scenarios/core.js b/benchmark/server/scenarios/core.js
index a5c225847f4936..891e5981b0a482 100644
--- a/benchmark/server/scenarios/core.js
+++ b/benchmark/server/scenarios/core.js
@@ -24,7 +24,7 @@ suite
.add('ButtonBase', () => {
ReactDOMServer.renderToString(
An overwhelming majority of respondents (over 93%), would be disappointed or very disappointed if
-they could no longer use Material-UI. The benchmark for "very disappointed" is 40%,
-so we're on the right track. Don't worry, Material-UI isn't going away any time soon â
+they could no longer use MUI. The benchmark for "very disappointed" is 40%,
+so we're on the right track. Don't worry, MUI isn't going away any time soon â
we want to focus on making even more of you "very disappointed", as it were!
Curiously, the 6.4% who said they would _not_ be disappointed if they could no longer use
-Material-UI collectively gave a Net Promoter Score of 68%, which is
+MUI collectively gave a Net Promoter Score of 68%, which is
[higher than that of all respondents as a whole](#5-how-likely-is-it-that-you-would-recommend-material-ui-to-a-friend-or-colleague),
so we know they love us really. đ
-### 2. Who do you think would most benefit from Material-UI?
+### 2. Who do you think would most benefit from MUI?
This word cloud was generated with [wordclouds.com](https://wordclouds.com).
@@ -41,17 +41,17 @@ This word cloud was generated with [wordclouds.com](https://wordclouds.com).
Developers, developers, developers! (And "anyone" and "everyone", apparently! ) This is understandable, given the
[job role demographic](#7-which-of-the-following-best-describes-your-current-job-role)
of the majority of respondents. We'll continue to work on the developer experience, making it
-easier to get started with, use, and customize Material-UI.
+easier to get started with, use, and customize MUI.
-### 3. What is the main benefit you receive from Material-UI?
+### 3. What is the main benefit you receive from MUI?
-
+
@@ -173,13 +173,13 @@ It's sorted descending, with the most important concerns first:
-Material-UI is most popular with small to medium sized organisations,
+MUI is most popular with small to medium sized organisations,
perhaps because beyond a certain size, organizations have teams building their own design system and framework.
-We want to continue to make it easy to use the component logic of Material-UI while allowing
+We want to continue to make it easy to use the component logic of MUI while allowing
designers to give it a bespoke look and feel for their organization.
### 9. How long have you been developing with JavaScript
@@ -221,28 +221,28 @@ A nice bell curve, with the majority of developers having 1 to 5 years experienc
-### 11. How long have you been developing with Material-UI?
+### 11. How long have you been developing with MUI?
We missed a trick by not including "2 years +" here, so "1 year +" looks stacked.
-The number of users of Material-UI continues to grow at a steady pace, and once on board, many
+The number of users of MUI continues to grow at a steady pace, and once on board, many
developers stick with it.
-### 12. What were you primarily using before Material-UI?
+### 12. What were you primarily using before MUI?
Given its relative popularity, and the move from CSS / HTML / jQuery towards front-end frameworks,
it should come as no big surprise to see that the majority of respondents were previously using Bootstrap.
-Custom solutions have also been replaced by Material-UI as your go-to UI library, along with a
+Custom solutions have also been replaced by MUI as your go-to UI library, along with a
long-tail of other frameworks.
-### 13. How many Material-UI based projects have you built?
+### 13. How many MUI based projects have you built?
-Over three quarters of you have built two or more projects with Material-UI, with 13.3% having six
+Over three quarters of you have built two or more projects with MUI, with 13.3% having six
or more projects under your belt. The 2.2% with ten or more, we salute you!
## Your product
diff --git a/docs/pages/blog/2019.md b/docs/pages/blog/2019.md
index cd9ee24f3e6903..ed3be12dc196c3 100644
--- a/docs/pages/blog/2019.md
+++ b/docs/pages/blog/2019.md
@@ -1,12 +1,12 @@
---
-description: 2019 was a great year for Material-UI. It puts us on an exciting path to solve even greater challenges in the coming years!
+description: 2019 was a great year for MUI. It puts us on an exciting path to solve even greater challenges in the coming years!
---
# 2019 in review and beyond
The core team. January 25, 2020.
-2019 was a great year for Material-UI.
+2019 was a great year for MUI.
It puts us on an exciting path to solve even greater challenges in the coming years!
## Growth
@@ -18,7 +18,7 @@ It puts us on an exciting path to solve even greater challenges in the coming ye
- đ° Grew financial support by 76% in 2019, compared to 2018.
- đ˘ From 1.5 to 3 full-time equivalent developers, spread among multiple financially supported [core team members](https://material-ui.com/discover-more/team/).
-The numbers speak for themselves. 2019 was super exciting and made Material-UI one of the most advanced open-source, React-based, UI component libraries!
+The numbers speak for themselves. 2019 was super exciting and made MUI one of the most advanced open-source, React-based, UI component libraries!
## In review
@@ -31,10 +31,10 @@ Some of the key factors:
- The results of the [2019 Developer Survey](https://medium.com/material-ui/2019-material-ui-developer-survey-results-c9589434bbcf) have highlighted the immense potential for working on advanced components and features, especially for enterprise users.
Developers are craving for a UI framework that they can learn once (e.g. few breaking changes, only one solution per problem) and use everywhere (e.g. comprehensive, customizable, high-quality).
- Bootstrap had successfully released [a theme store](https://themes.getbootstrap.com/).
- Following this approach opened an opportunity to capture a fraction of the value Material-UI creates for its users, and funnel it back into R&D on the framework.
+ Following this approach opened an opportunity to capture a fraction of the value MUI creates for its users, and funnel it back into R&D on the framework.
- The market for paid UI components is in the order of a couple of \$100m/year,
with dozens of companies positioned in this market.
- While React is only one technology among many (jQuery, Angular, ASP.NET, Blazor, Vue, WPF, UWP, etc) with which to build a UI, but we believe that Web and React will become the dominant technology in the next 5 years for enterprises. Material-UI is uniquely positioned to address this market with non-MIT features.
+ While React is only one technology among many (jQuery, Angular, ASP.NET, Blazor, Vue, WPF, UWP, etc) with which to build a UI, but we believe that Web and React will become the dominant technology in the next 5 years for enterprises. MUI is uniquely positioned to address this market with non-MIT features.
- Building UIs should be simpler, it still too slow and complex.
Designers and developers should benefit from a more integrated experience.
- Every now and then, we witness the appearance of a new React UI component library built from scratch ([UXPin](https://adele.uxpin.com/) keeps track of some of them).
@@ -66,7 +66,7 @@ Some of the key factors:
- We introduced [built-in localization](/guides/localization/).
- We removed a good number of external dependencies and increased the `features/bundle size` density.
- We introduced an [icon search page](/components/material-icons/).
-- We released a [store for Material-UI](https://material-ui.com/store/).
+- We released a [store for MUI](https://material-ui.com/store/).
## Looking at 2020
diff --git a/docs/pages/blog/2020-developer-survey-results.md b/docs/pages/blog/2020-developer-survey-results.md
index 68f9ef628cb1e1..1324d4fa0e1d15 100644
--- a/docs/pages/blog/2020-developer-survey-results.md
+++ b/docs/pages/blog/2020-developer-survey-results.md
@@ -1,8 +1,8 @@
---
-description: 2020 Material-UI Developer Survey results
+description: 2020 MUI Developer Survey results
---
-# 2020 Material-UI Developer Survey results
+# 2020 MUI Developer Survey results
Marija Najdova, Olivier Tassinari, Matt Brookes. June 27, 2020.
@@ -15,15 +15,15 @@ Like last year, the survey was again broken into three sections: ["Introduction"
In this section, we wanted to hear what developers think is going well, what we should keep doing, and which areas need improving to make the library even better.
-### 1. How would you feel if you could no longer use Material-UI?
+### 1. How would you feel if you could no longer use MUI?
-Similar to last year, over 94% of the respondents would be disappointed if they could no longer use Material-UI, which is very encouraging. We will keep working hard to hopefully move more of you into the "very disappointed" category!
+Similar to last year, over 94% of the respondents would be disappointed if they could no longer use MUI, which is very encouraging. We will keep working hard to hopefully move more of you into the "very disappointed" category!
-The number of respondents who would not be disappointed has moved down from 6.5% to 5.4%, which is technically a 17% improvement! đ We'd love to understand more about those who use Material-UI, but would happily use other solutions, so a follow-up question might be needed next year.
+The number of respondents who would not be disappointed has moved down from 6.5% to 5.4%, which is technically a 17% improvement! đ We'd love to understand more about those who use MUI, but would happily use other solutions, so a follow-up question might be needed next year.
-### 2. How likely is it that you would recommend Material-UI to a friend or colleague?
+### 2. How likely is it that you would recommend MUI to a friend or colleague?
@@ -41,13 +41,13 @@ As last year, we again calculated the [Net Promoter Score](https://en.wikipedia.
Developers are again at the center of our universe đ (And "people" and "teams" in general, of course!) This is understandable, given the [job role demographic](#8-which-of-the-following-best-describes-your-current-job-role)
of the majority of respondents. We will push hard on making the experience for you even better over the next year.
-### 4. What is the main benefit you receive from Material-UI?
+### 4. What is the main benefit you receive from MUI?
-
+
@@ -241,17 +241,17 @@ We can see the normal distribution of developer experience here, where most have
-### 12. How long have you been developing with Material-UI?
+### 12. How long have you been developing with MUI?
-### 13. What were you primarily using before Material-UI?
+### 13. What were you primarily using before MUI?
-
+
@@ -279,7 +279,7 @@ section.
### 19. What styling system are you using?
-
+
@@ -84,8 +84,8 @@ We are thrilled to welcome two new full-time developers on Material-UI:
We'll do our best, no guarantee!
-- đŁ We will analyze and publish the results of the "Material-UI Developer Survey 2020". If you haven't contributed to it yet, you can follow this link to [fill it in](https://forms.gle/TYWRdvgyZs4AhZNv8), thanks!
-- đ¨ We will release Figma assets for Material-UI.
+- đŁ We will analyze and publish the results of the "MUI Developer Survey 2020". If you haven't contributed to it yet, you can follow this link to [fill it in](https://forms.gle/TYWRdvgyZs4AhZNv8), thanks!
+- đ¨ We will release Figma assets for MUI.
diff --git a/docs/pages/blog/2020-q2-update.md b/docs/pages/blog/2020-q2-update.md
index 1b3c482d7c2a3c..4a0cb5d020818a 100644
--- a/docs/pages/blog/2020-q2-update.md
+++ b/docs/pages/blog/2020-q2-update.md
@@ -20,7 +20,7 @@ Here are the most significant improvements since March 2020:
-- đ¨ [Figma assets](https://material-ui.com/store/items/figma-react/) for Material-UI extend the support for design tools beyond Sketch.
+- đ¨ [Figma assets](https://material-ui.com/store/items/figma-react/) for MUI extend the support for design tools beyond Sketch.
-- đŁ We have analyzed and published the results of the "Material-UI Developer Survey 2020". If you haven't read it yet, you can follow this link to [read it in detail](/blog/2020-developer-survey-results/). It contains a lot of interesting insights that will shape the future of the library and company. Thanks for the contributions! â¤ď¸
+- đŁ We have analyzed and published the results of the "MUI Developer Survey 2020". If you haven't read it yet, you can follow this link to [read it in detail](/blog/2020-developer-survey-results/). It contains a lot of interesting insights that will shape the future of the library and company. Thanks for the contributions! â¤ď¸
- đ¨đłđ§đˇ The non-API documentation has been fully translated to Chinese and Brazilian, thanks to the collaboration of [Danica Shen](https://github.com/DDDDDanica), [Yan Lee](https://github.com/AGDholo), and [Jairon Alves Lima](https://github.com/jaironalves), native speakers from the community đ.
diff --git a/docs/pages/blog/2020-q3-update.md b/docs/pages/blog/2020-q3-update.md
index c0a293e26fd7e7..0c6f99c0fdce8f 100644
--- a/docs/pages/blog/2020-q3-update.md
+++ b/docs/pages/blog/2020-q3-update.md
@@ -25,7 +25,7 @@ Here are the most significant improvements since June 2020. This was a dense qua
- âď¸ We have prepared the support for the upcoming release of [React v17](https://reactjs.org/blog/2020/08/10/react-v17-rc.html). Most of the work was about better handling events, and updating our test infrastructure to run the whole test suite with the _latest_ and _next_ version of React.
- 
- 
@@ -182,7 +182,7 @@ This Handbook is the single **source of truth**. It's meant to be updated by any
We have seen a significant influx of stars this quarter.
- đ¨âđŠâđ§âđŚ From 2,052 to 2,141 contributors on GitHub. We add on average one new contributor every day.
- đ° Grew gross revenue at +4%/week on average during the period.
-- đ˘ We have welcomed one new member to Material-UI: [Matheus](/blog/matheus-wichman-joining/).
+- đ˘ We have welcomed one new member to MUI: [Matheus](/blog/matheus-wichman-joining/).
## Our roadmap intent for Q2 2021
diff --git a/docs/pages/blog/2021-q2-update.md b/docs/pages/blog/2021-q2-update.md
index 53e9bd000b9c41..df00408b7deab9 100644
--- a/docs/pages/blog/2021-q2-update.md
+++ b/docs/pages/blog/2021-q2-update.md
@@ -214,7 +214,7 @@ We have the following objectives:
- â¨ď¸ Fix the friction the community has during the upgrade to v5.
We want to make the upgrade feel painless.
- âď¸ Support [React 18](https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html). [Sebastian](https://github.com/eps1lon) is part of the React [Working Group](https://github.com/reactwg/react-18/discussions), focusing on making us ready ahead of time.
- We want our most demanding users to feel empowered by Material-UI, not slowed down by a third-party.
+ We want our most demanding users to feel empowered by MUI, not slowed down by a third-party.
- 𦴠Migrate more components to `@mui/core`. [MichaĹ](https://github.com/michaldudak) has recently added support for the [Switch](https://material-ui.com/components/switches/#unstyled-switches).
You can follow our progress in the [umbrella issue](https://github.com/mui-org/material-ui/issues/27170).
- đ Do a proof of concept on supporting a second design system.
diff --git a/docs/pages/blog/april-2019-update.md b/docs/pages/blog/april-2019-update.md
index acd62dc662c15b..397888d70bd86a 100644
--- a/docs/pages/blog/april-2019-update.md
+++ b/docs/pages/blog/april-2019-update.md
@@ -46,7 +46,7 @@ But this summary is just scratching the surface. We have accepted 243 commits fr
_(We'll do our best, no guarantee!)_
-- We will release Material-UI v4 stable during the React Europe conference.
+- We will release MUI v4 stable during the React Europe conference.
- We will start an effort to support more components. So far, we have identified a couple of useful ones:
- Layout
- Combobox
diff --git a/docs/pages/blog/danail-hadjiatanasov-joining.md b/docs/pages/blog/danail-hadjiatanasov-joining.md
index d5bd1e8c61edf7..1ed18f2fad5733 100644
--- a/docs/pages/blog/danail-hadjiatanasov-joining.md
+++ b/docs/pages/blog/danail-hadjiatanasov-joining.md
@@ -1,16 +1,16 @@
---
-title: Danail Hadjiatanasov joins Material-UI
-description: We are excited to share that Danail Hadjiatanasov has joined Material-UI as part of the enterprise team. This was his first full-time week.
+title: Danail Hadjiatanasov joins MUI
+description: We are excited to share that Danail Hadjiatanasov has joined MUI as part of the enterprise team. This was his first full-time week.
date: 2020-10-23T00:00:00.000Z
authors: ['oliviertassinari']
card: true
---
-We are excited to share that [Danail Hadjiatanasov](https://twitter.com/danail_h) has joined Material-UI as part of the enterprise team. This was his first full-time week.
+We are excited to share that [Danail Hadjiatanasov](https://twitter.com/danail_h) has joined MUI as part of the enterprise team. This was his first full-time week.
For the past 3 years Danail has been working in a company called [Backbase](https://www.backbase.com/) where he was responsible for building a UI library based on Angular that was specifically designed for banks. The UI library and its corresponding design system were sold under a commercial license, and today some of the biggest names in the banking industry have web applications powered by those UI components (RBC, Central 1, Deutsche Bank, BNP Paribas, and others).
-Although he was working with Angular, his true passion is React, having hacked side projects with it. Now he will be able to combine these two talents, and help take Material-UI X to the next level!
+Although he was working with Angular, his true passion is React, having hacked side projects with it. Now he will be able to combine these two talents, and help take MUI X to the next level!
Danail has already landed his first feature in the data grid: [column reordering](https://material-ui.com/components/data-grid/columns/#column-reorder):
diff --git a/docs/pages/blog/danilo-leal-joining.md b/docs/pages/blog/danilo-leal-joining.md
index 5ea178380f3d62..5090071fce9461 100644
--- a/docs/pages/blog/danilo-leal-joining.md
+++ b/docs/pages/blog/danilo-leal-joining.md
@@ -1,18 +1,18 @@
---
-title: Danilo Leal joins Material-UI
-description: We are excited to share that Danilo Leal has joined Material-UI.
+title: Danilo Leal joins MUI
+description: We are excited to share that Danilo Leal has joined MUI.
date: 2021-07-15T00:00:00.000Z
authors: ['oliviertassinari']
card: true
---
-We are excited to share that [Danilo Leal](https://daniloleal.co/) has joined Material-UI!
+We are excited to share that [Danilo Leal](https://daniloleal.co/) has joined MUI!
He started a couple of days ago as a lead designer.
-Before joining Material-UI, he worked as a designer at Loggi, a Brazilian logistics unicorn.
+Before joining MUI, he worked as a designer at Loggi, a Brazilian logistics unicorn.
He has spent the last five years diving into product design, product strategy, and design systems.
Danilo strongly believes that code is a fundamental piece of a designer's work. It is, after all, the real medium through where users experience the product.
-For instance, one of his continuous contributions to Loggi was deep-diving into Material-UI's codebase to fulfill Loggi's customization needs.
+For instance, one of his continuous contributions to Loggi was deep-diving into MUI's codebase to fulfill Loggi's customization needs.
His aspirations are well aligned with where we want to push the company in the long term.
He wants to challenge the status quo.
diff --git a/docs/pages/blog/march-2019-update.md b/docs/pages/blog/march-2019-update.md
index 892e8d8738ac30..4ea60690aeaa88 100644
--- a/docs/pages/blog/march-2019-update.md
+++ b/docs/pages/blog/march-2019-update.md
@@ -27,7 +27,7 @@ Here are the most significant improvements in March:
_(We'll do our best, no guarantee!)_
- We are almost done with [the v4.0.0-alpha breaking changes](https://github.com/mui-org/material-ui/issues/13663). You can already find [the upgrade path](/guides/migration-v3/) from v3 to v4 in the documentation. Next, we will release the first beta version (no more breaking changes).
- The results of the Material-UI developer survey suggested that there are too many breaking changes.
+ The results of the MUI developer survey suggested that there are too many breaking changes.
Don't worry, it's almost over! We will focus on providing more components once we have released v4 stable.
- We will continue, and hopefully complete, the tasks we undertook:
- TypeScript demo variants.
diff --git a/docs/pages/blog/marija-najdova-joining.md b/docs/pages/blog/marija-najdova-joining.md
index f0459ecc409361..30d471d7c87746 100644
--- a/docs/pages/blog/marija-najdova-joining.md
+++ b/docs/pages/blog/marija-najdova-joining.md
@@ -1,14 +1,14 @@
---
-title: Marija Najdova joins Material-UI
-description: We are excited to share that Marija Najdova has joined Material-UI. She has started this week full-time and is now part of the community team.
+title: Marija Najdova joins MUI
+description: We are excited to share that Marija Najdova has joined MUI. She has started this week full-time and is now part of the community team.
date: 2020-09-15T00:00:00.000Z
authors: ['oliviertassinari']
card: true
---
-We are excited to share that [Marija Najdova](https://twitter.com/marijanajdova) has joined Material-UI. She has started this week full-time, and is now part of the community team.
+We are excited to share that [Marija Najdova](https://twitter.com/marijanajdova) has joined MUI. She has started this week full-time, and is now part of the community team.
-Before joining Material-UI, Marija worked on the React implementation of [Fluent UI](https://www.microsoft.com/design/fluent/) at Microsoft. She's passionate about React, design systems, and component driven development. At Microsoft, as part of the Fluent UI core team since 2018, she was responsible for the icons, animations and various theme related features.
+Before joining MUI, Marija worked on the React implementation of [Fluent UI](https://www.microsoft.com/design/fluent/) at Microsoft. She's passionate about React, design systems, and component driven development. At Microsoft, as part of the Fluent UI core team since 2018, she was responsible for the icons, animations and various theme related features.
Marija is off to a running start, having made important changes happen during her free time, even before starting! These include a new structure for the theme object, as well as the ability to [add custom variants](https://material-ui.com/customization/theme-components/#adding-new-component-variants) in v5:
diff --git a/docs/pages/blog/material-ui-v1-is-out.md b/docs/pages/blog/material-ui-v1-is-out.md
index 48304611baa2d2..5ae518c76efdf8 100644
--- a/docs/pages/blog/material-ui-v1-is-out.md
+++ b/docs/pages/blog/material-ui-v1-is-out.md
@@ -1,8 +1,8 @@
---
-description: Material-UI v1 is out đ
+description: MUI v1 is out đ
---
-# Material-UI v1 is out đ
+# MUI v1 is out đ
The core team. May 18, 2018.
@@ -12,7 +12,7 @@ The core team. May 18, 2018.
- Material-UI
+ MUI