Merge branch 'next' into docs/demo-loader

CHANGELOG.md

@@ -1,5 +1,207 @@
 ### [Versions](https://material-ui.com/versions/)
 
+## 5.0.0-alpha.38
+
+<!-- generated comparing v5.0.0-alpha.37..next -->
+
+_Jun 23, 2021_
+
+Big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 We have only 2 left in the [breaking changes](https://github.com/mui-org/material-ui/issues/20012). The plan to release 5.0.0-beta.0 is on July 1st and will start to promote its usage over v4.
+- 🎨 We have updated `Slider` to match current [Material Design guidelines](https://material.io/components/sliders).
+
+ <a href="https://next.material-ui.com/components/slider/#continuous-sliders"><img width="247" alt="" src="https://user-images.githubusercontent.com/3165635/121884800-a8808600-cd13-11eb-8cdf-e25de8f1ba73.png" style="margin: auto"></a>
+
+- 💡 `IconButton` now supports 3 sizes (`small, medium, large`). [See demo](/components/buttons/#sizes-2).
+- ♿️ We have improved the default style of the `Link` to be more accessible (#26145) @ahmed-28
+
+ <a href="https://next.material-ui.com/components/links/"><img width="543" alt="" src="https://user-images.githubusercontent.com/3165635/123097983-ef1b6200-d430-11eb-97da-b491fba5df49.png"></a>
+
+### `@material-ui/core@5.0.0-alpha.38`
+
+#### Breaking changes
+
+- <!-- 05 --> [Menu] Use ButtonBase in MenuItem (#26591) @siriwatknp
+
+ - Change the default value of `anchorOrigin.vertical` to follow the Material Design guidelines. The menu now displays below the anchor instead of on top of it. You can restore the previous behavior with:
+
+ ```diff
+ <Menu
+ + anchorOrigin={{
+ + vertical: 'top',
+ + horizontal: 'left',
+ + }}
+ ```
+
+ - The `MenuItem` component inherits the `ButtonBase` component instead of `ListItem`. The class names related to "MuiListItem-\*" are removed and theming `ListItem` is no longer affecting `MenuItem`.
+
+ ```diff
+ -<li className="MuiButtonBase-root MuiMenuItem-root MuiListItem-root">
+ +<li className="MuiButtonBase-root MuiMenuItem-root">
+ ```
+
+ - The prop `listItemClasses` was removed, you can use `classes` instead.
+
+ ```diff
+ -<MenuItem listItemClasses={{...}}>
+ +<MenuItem classes={{...}}>
+ ```
+
+- <!-- 09 --> [theme] Improve default breakpoints (#26746) @siriwatknp
+
+ The default breakpoints were changed to better match the common use cases. They also better match the Material Design guidelines. [Read more about the change](https://github.com/mui-org/material-ui/issues/21902).
+
+ ```diff
+ {
+ xs: 0,
+ sm: 600,
+ - md: 960,
+ + md: 900,
+ - lg: 1280,
+ + lg: 1200,
+ - xl: 1920,
+ + xl: 1536,
+ }
+ ```
+
+ If you prefer the old breakpoint values, use the snippet below.
+
+ ```js
+ import { createTheme } from '@material-ui/core/styles';
+
+ const theme = createTheme({
+ breakpoints: {
+ values: {
+ xs: 0,
+ sm: 600,
+ md: 960,
+ lg: 1280,
+ xl: 1920,
+ },
+ },
+ });
+ ```
+
+- <!-- 10 --> [IconButton] Add size `large` and update styles (#26748) @siriwatknp
+
+ The default size's padding is reduced to `8px` which makes the default IconButton size of `40px`. To get the old default size (`48px`), use `size="large"`. The change was done to better match Google's products when Material Design stopped documenting the icon button pattern.
+
+ ```diff
+ - <IconButton>
+ + <IconButton size="large">
+ ```
+
+- <!-- 08 --> [Slider] Adjust css to match the specification (#26632) @siriwatknp
+
+ Rework the CSS to match the latest [Material Design guidelines](https://material.io/components/sliders) and make custom styles more intuitive. [See documentation](https://next.material-ui.com/components/slider/).
+
+ <a href="https://next.material-ui.com/components/slider/#continuous-sliders"><img width="247" alt="" src="https://user-images.githubusercontent.com/3165635/121884800-a8808600-cd13-11eb-8cdf-e25de8f1ba73.png" style="margin: auto"></a>
+
+ You can reduce the density of the slider, closer to v4 with the [`size="small"` prop](https://next.material-ui.com/components/slider/#sizes).
+
+ <a href="https://next.material-ui.com/components/slider/#sizes"><img width="330" alt="" src="https://user-images.githubusercontent.com/3165635/123076549-8aa0d880-d419-11eb-8835-06cd2b21b2d3.png" style="margin: auto"></a>
+
+- <!-- 14 --> [IconButton] Remove label span (#26801) @siriwatknp
+
+ `span` element that wraps children has been removed. `label` classKey is also removed. More details about [this change](https://github.com/mui-org/material-ui/pull/26666).
+
+ ```diff
+ <button class="MuiIconButton-root">
+ - <span class="MuiIconButton-label">
+ <svg />
+ - </span>
+ </button>
+ ```
+
+- <!-- 19 --> [core] Remove `unstable_` prefix on the `useThemeProps` hook (#26777) @mnajdova
+
+ The following utilities were renamed to not contain the `unstable_` prefix:
+
+ - `@material-ui/sytstem`
+
+ ```diff
+ import {
+ - unstable_useThemeProps,
+ + useThemeProps,
+ } from '@material-ui/system';
+ ```
+
+ - `@material-ui/core`
+
+ ```diff
+ import {
+ - unstable_useThemeProps,
+ + useThemeProps,
+ } from '@material-ui/core/styles';
+ ```
+
+#### Changes
+
+- <!-- 33 --> [Alert] Add support for custom colors (#26831) @varandasi
+- <!-- 32 --> [Button] Fix loading text invisible when disabled (#26857) @DanielBretzigheimer
+- <!-- 43 --> [ButtonBase] Consider as a link with a custom component and `to` prop (#26576) @shadab14meb346
+- <!-- 17 --> [ButtonBase] Derive state on render instead of in layout effects (#26762) @eps1lon
+- <!-- 37 --> [Drawer] Fix incorrect z-index (#26791) @michal-perlakowski
+- <!-- 28 --> [Drawer] Remove incorrect transition handler props (#26835) @eps1lon
+- <!-- 01 --> [Link] Improve accessibility support (#26145) @ahmed-28
+- <!-- 41 --> [Modal] Fix calculating scrollbar size when using custom scrollbar (#26816) @michal-perlakowski
+- <!-- 29 --> [Rating] Make input ids less predictable (#26493) @eps1lon
+- <!-- 27 --> [Stepper] Add componentsProps.label to StepLabel (#26807) @michal-perlakowski
+- <!-- 36 --> [Tabs] Show error when Tab has display: none (#26783) @michal-perlakowski
+- <!-- 46 --> [theme] Add base color palette type to components (#26697) @siriwatknp
+
+### `@material-ui/system@5.0.0-alpha.38`
+
+#### Breaking Changes
+
+- <!-- 35 --> [system] Normalize api for `createBox` (#26820) @mnajdova
+
+ ```diff
+ import { createBox } from '@material-ui/system';
+
+ -const styled = createBox(defaultTheme);
+ +const styled = createBox({ defaultTheme });
+ ```
+
+#### Changes
+
+- <!-- 12 --> [system] Add ThemeProvider component (#26787) @mnajdova
+
+### Docs
+
+- <!-- 45 --> [docs] Fix misspelling of the word Typography (#26898) @dmrqx
+- <!-- 42 --> [docs] Instruct users to install @material-ui/icons with the next tag (#26873) @michal-perlakowski
+- <!-- 26 --> [docs] Sync translations (#26828) @l10nbot
+- <!-- 25 --> [docs] Improve grammar of autocomplete/autofill section (#26798) @dijonkitchen
+- <!-- 18 --> [docs] Explain "inherited props" better in the props table (#26778) @eps1lon
+- <!-- 16 --> [docs] Fix documentation for upgrading to v5 (#26812) @tungdt-90
+- <!-- 13 --> [docs] Improve notification color (#26796) @mnajdova
+- <!-- 11 --> [docs] Fix various a11y issues with /customization/color (#26757) @eps1lon
+- <!-- 04 --> [docs] Move custom theme to frame (#26744) @siriwatknp
+- <!-- 02 --> [docs] Fix small PT typo fix: inciar -> iniciar (#26775) @brunocavalcante
+- <!-- 03 --> [I10n] Add Chinese (Hong Kong) (zh-HK) locale (#26637) @kshuiroy
+- <!-- 44 --> [l10n] Add sinhalese (siLK) locale (#26875) @pavinduLakshan
+- <!-- 39 --> [examples] Rename nextjs typescript theme from tsx to ts (#26862) @Izhaki
+
+### Core
+
+- <!-- 38 --> [test] Fix Drawer test API @oliviertassinari
+- <!-- 34 --> [test] Adjust expected useAutocomplete error messages for React 18 (#26858) @eps1lon
+- <!-- 30 --> [test] Convert Drawer tests to testing-library (#26837) @eps1lon
+- <!-- 23 --> [test] Convert remaining enzyme tests to testing-library (#26832) @eps1lon
+- <!-- 22 --> [test] Ignore ReactDOM.hydrate deprecation warnings (#26815) @eps1lon
+- <!-- 06 --> [test] Reduce flakiness (#26761) @eps1lon
+- <!-- 07 --> [useId] Reduce likelyhood of collisions (#26758) @eps1lon
+- <!-- 31 --> yarn deduplicate @oliviertassinari
+- <!-- 21 --> Fix running framer's prettier under pwsh (#26819) @michaldudak
+- <!-- 40 --> [core] Update babel-plugin-optimize-clsx (#26861) @oliviertassinari
+- <!-- 24 --> [core] Assume no document.all at runtime (#26821) @eps1lon
+- <!-- 20 --> [core] Remove dependency on `@material-ui/private-theming` (#26793) @mnajdova
+- <!-- 15 --> [core] Remove dependency on `@material-ui/styled-engine` (#26792) @mnajdova
+
+All contributors of this release in alphabetical order: @ahmed-28, @brunocavalcante, @DanielBretzigheimer, @dijonkitchen, @dmrqx, @eps1lon, @Izhaki, @kshuiroy, @l10nbot, @michal-perlakowski, @michaldudak, @mnajdova, @oliviertassinari, @pavinduLakshan, @shadab14meb346, @siriwatknp, @tungdt-90, @varandasi
+
 ## 5.0.0-alpha.37
 
 <!-- generated comparing v5.0.0-alpha.36..next -->

babel.config.js

@@ -96,6 +96,9 @@ module.exports = function getBabelConfig(api) {
  }
 
  return {
+ assumptions: {
+ noDocumentAll: true,
+ },
  presets,
  plugins,
  ignore: [/@babel[\\|/]runtime/], // Fix a Windows issue.

benchmark/package.json

@@ -1,6 +1,6 @@
 {
  "name": "benchmark",
- "version": "5.0.0-alpha.37",
+ "version": "5.0.0-alpha.38",
  "private": "true",
  "scripts": {
  "browser": "yarn webpack --config browser/webpack.config.js && node browser/scripts/benchmark.js",
@@ -14,9 +14,9 @@
  "@chakra-ui/system": "^1.0.0",
  "@emotion/react": "^11.0.0",
  "@emotion/styled": "^11.0.0",
- "@material-ui/core": "5.0.0-alpha.37",
- "@material-ui/styles": "5.0.0-alpha.35",
- "@material-ui/system": "5.0.0-alpha.37",
+ "@material-ui/core": "5.0.0-alpha.38",
+ "@material-ui/styles": "5.0.0-alpha.36",
+ "@material-ui/system": "5.0.0-alpha.38",
  "@styled-system/css": "^5.1.5",
  "benchmark": "^2.1.4",
  "playwright": "^1.6.1",

docs/babel.config.js

@@ -37,6 +37,10 @@ const { version: transformRuntimeVersion } = fse.readJSONSync(
 );
 
 module.exports = {
+ // TODO: Enable once nextjs uses babel 7.13
+ // assumptions: {
+ // noDocumentAll: true,
+ // },
  presets: [
  // backport of https://github.com/zeit/next.js/pull/9511
  [

docs/package.json

@@ -1,6 +1,6 @@
 {
  "name": "docs",
- "version": "5.0.0-alpha.37",
+ "version": "5.0.0-alpha.38",
  "private": true,
  "author": "Material-UI Team",
  "license": "MIT",
@@ -30,17 +30,17 @@
  "@fortawesome/fontawesome-svg-core": "^1.2.30",
  "@fortawesome/free-solid-svg-icons": "^5.14.0",
  "@fortawesome/react-fontawesome": "^0.1.11",
- "@material-ui/core": "5.0.0-alpha.37",
+ "@material-ui/core": "5.0.0-alpha.38",
  "@material-ui/data-grid": "^4.0.0-alpha.29",
- "@material-ui/docs": "5.0.0-alpha.36",
+ "@material-ui/docs": "5.0.0-alpha.37",
  "@material-ui/icons": "5.0.0-alpha.37",
- "@material-ui/lab": "5.0.0-alpha.37",
+ "@material-ui/lab": "5.0.0-alpha.38",
  "@material-ui/styled-engine": "5.0.0-alpha.34",
  "@material-ui/styled-engine-sc": "5.0.0-alpha.35",
- "@material-ui/styles": "5.0.0-alpha.35",
- "@material-ui/system": "5.0.0-alpha.37",
+ "@material-ui/styles": "5.0.0-alpha.36",
+ "@material-ui/system": "5.0.0-alpha.38",
  "@material-ui/types": "6.0.1",
- "@material-ui/unstyled": "5.0.0-alpha.37",
+ "@material-ui/unstyled": "5.0.0-alpha.38",
  "@trendmicro/react-interpolate": "^0.5.5",
  "@types/autosuggest-highlight": "^3.1.0",
  "@types/css-mediaquery": "^0.1.0",
@@ -53,14 +53,14 @@
  "@types/react-text-mask": "^5.4.6",
  "@types/react-virtualized": "^9.21.4",
  "@types/react-window": "^1.7.0",
- "@types/styled-components": "5.1.9",
+ "@types/styled-components": "5.1.10",
  "accept-language": "^3.0.18",
  "address": "^1.0.3",
  "ast-types": "^0.14.1",
  "autoprefixer": "^10.0.1",
  "autosuggest-highlight": "^3.1.1",
  "babel-plugin-module-resolver": "^4.0.0",
- "babel-plugin-optimize-clsx": "^2.4.1",
+ "babel-plugin-optimize-clsx": "^2.6.2",
  "babel-plugin-react-remove-properties": "^0.3.0",
  "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
  "clean-css": "^5.0.1",

docs/pages/api-docs/alert.json

@@ -6,8 +6,8 @@
  "closeText": { "type": { "name": "string" }, "default": "'Close'" },
  "color": {
  "type": {
- "name": "enum",
- "description": "'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'"
+ "name": "union",
+ "description": "'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
  }
  },
  "icon": { "type": { "name": "node" } },

docs/pages/api-docs/badge.json

@@ -13,7 +13,7 @@
  "color": {
  "type": {
  "name": "union",
- "description": "'default'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
+ "description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
  },
  "default": "'default'"
  },
@@ -57,7 +57,10 @@
  "invisible",
  "colorPrimary",
  "colorSecondary",
- "colorError"
+ "colorError",
+ "colorInfo",
+ "colorSuccess",
+ "colorWarning"
  ],
  "globalClasses": {},
  "name": "MuiBadge"

docs/pages/api-docs/checkbox.json

@@ -6,7 +6,7 @@
  "color": {
  "type": {
  "name": "union",
- "description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
+ "description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'succes'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
  },
  "default": "'primary'"
  },

docs/pages/api-docs/chip.json

@@ -7,7 +7,7 @@
  "color": {
  "type": {
  "name": "union",
- "description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
+ "description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
  },
  "default": "'default'"
  },

docs/pages/api-docs/circular-progress.json

@@ -4,7 +4,7 @@
  "color": {
  "type": {
  "name": "union",
- "description": "'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
+ "description": "'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
  },
  "default": "'primary'"
  },

docs/pages/api-docs/dialog.json

@@ -3,7 +3,10 @@
  "open": { "type": { "name": "bool" }, "required": true },
  "aria-describedby": { "type": { "name": "string" } },
  "aria-labelledby": { "type": { "name": "string" } },
- "BackdropComponent": { "type": { "name": "elementType" } },
+ "BackdropComponent": {
+ "type": { "name": "elementType" },
+ "default": "styled(Backdrop, {\n name: 'MuiModal',\n slot: 'Backdrop',\n overridesResolver: (props, styles) => {\n return styles.backdrop;\n },\n})({\n zIndex: -1,\n})"
+ },
  "children": { "type": { "name": "node" } },
  "classes": { "type": { "name": "object" } },
  "disableEscapeKeyDown": { "type": { "name": "bool" } },

docs/pages/api-docs/form-control.json

@@ -5,7 +5,7 @@
  "color": {
  "type": {
  "name": "union",
- "description": "'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
+ "description": "'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
  },
  "default": "'primary'"
  },

docs/pages/api-docs/form-label.json

@@ -2,7 +2,12 @@
  "props": {
  "children": { "type": { "name": "node" } },
  "classes": { "type": { "name": "object" } },
- "color": { "type": { "name": "enum", "description": "'primary'<br>&#124;&nbsp;'secondary'" } },
+ "color": {
+ "type": {
+ "name": "enum",
+ "description": "'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'"
+ }
+ },
  "component": { "type": { "name": "elementType" } },
  "disabled": { "type": { "name": "bool" } },
  "error": { "type": { "name": "bool" } },