v5.0.0 alpha.38

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

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

framer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framer",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "description": "Builds Material-UI for Framer X",
   "repository": "https://github.com/mui-org/material-ui",
   "author": "Material-UI Team",
@@ -11,7 +11,7 @@
     "@types/react": "^17.0.0",
     "case": "1.6.3",
     "deepmerge": "^4.0.0",
-    "docs": "5.0.0-alpha.37",
+    "docs": "5.0.0-alpha.38",
     "framer": "^1.2.5",
     "framer-motion": "^4.0.0",
     "mustache": "^4.0.0",

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.0.0-alpha.37",
+  "version": "5.0.0-alpha.38",
   "private": true,
   "scripts": {
     "proptypes": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./scripts/generateProptypes.ts",

packages/material-ui-docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@material-ui/docs",
-  "version": "5.0.0-alpha.36",
+  "version": "5.0.0-alpha.37",
   "private": false,
   "author": "Material-UI Team",
   "description": "Material-UI Docs - Documentation building blocks.",
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.4.4",
-    "@material-ui/utils": "5.0.0-alpha.35",
+    "@material-ui/utils": "5.0.0-alpha.36",
     "nprogress": "^0.2.0"
   },
   "publishConfig": {

packages/material-ui-lab/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@material-ui/lab",
-  "version": "5.0.0-alpha.37",
+  "version": "5.0.0-alpha.38",
   "private": false,
   "author": "Material-UI Team",
   "description": "Laboratory for new Material-UI modules.",
@@ -68,8 +68,8 @@
     "@date-io/dayjs": "^2.10.6",
     "@date-io/luxon": "^2.10.6",
     "@date-io/moment": "^2.10.6",
-    "@material-ui/system": "5.0.0-alpha.37",
-    "@material-ui/utils": "5.0.0-alpha.35",
+    "@material-ui/system": "5.0.0-alpha.38",
+    "@material-ui/utils": "5.0.0-alpha.36",
     "clsx": "^1.0.4",
     "prop-types": "^15.7.2",
     "react-is": "^17.0.0",

packages/material-ui-private-theming/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@material-ui/private-theming",
-  "version": "5.0.0-alpha.35",
+  "version": "5.0.0-alpha.36",
   "private": false,
   "author": "Material-UI Team",
   "description": "Material-UI Theming - The React theme context to be shared between `@material-ui/styles` and `@material-ui/core`.",
@@ -48,7 +48,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.4.4",
-    "@material-ui/utils": "5.0.0-alpha.35",
+    "@material-ui/utils": "5.0.0-alpha.36",
     "prop-types": "^15.7.2"
   },
   "sideEffects": false,

packages/material-ui-styles/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@material-ui/styles",
-  "version": "5.0.0-alpha.35",
+  "version": "5.0.0-alpha.36",
   "private": false,
   "author": "Material-UI Team",
   "description": "Material-UI Styles - The styling solution of Material-UI.",
@@ -49,9 +49,9 @@
   "dependencies": {
     "@babel/runtime": "^7.4.4",
     "@emotion/hash": "^0.8.0",
-    "@material-ui/private-theming": "5.0.0-alpha.35",
+    "@material-ui/private-theming": "5.0.0-alpha.36",
     "@material-ui/types": "6.0.1",
-    "@material-ui/utils": "5.0.0-alpha.35",
+    "@material-ui/utils": "5.0.0-alpha.36",
     "clsx": "^1.0.4",
     "csstype": "^3.0.2",
     "hoist-non-react-statics": "^3.3.2",

packages/material-ui-system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@material-ui/system",
-  "version": "5.0.0-alpha.37",
+  "version": "5.0.0-alpha.38",
   "private": false,
   "author": "Material-UI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -56,10 +56,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.4.4",
-    "@material-ui/private-theming": "5.0.0-alpha.35",
+    "@material-ui/private-theming": "5.0.0-alpha.36",
     "@material-ui/styled-engine": "5.0.0-alpha.34",
     "@material-ui/types": "6.0.1",
-    "@material-ui/utils": "5.0.0-alpha.35",
+    "@material-ui/utils": "5.0.0-alpha.36",
     "clsx": "^1.0.4",
     "csstype": "^3.0.2",
     "prop-types": "^15.7.2"

packages/material-ui-unstyled/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@material-ui/unstyled",
-  "version": "5.0.0-alpha.37",
+  "version": "5.0.0-alpha.38",
   "private": false,
   "author": "Material-UI Team",
   "description": "Unstyled React components with which to implement custom design systems.",
@@ -48,7 +48,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.4.4",
-    "@material-ui/utils": "5.0.0-alpha.35",
+    "@material-ui/utils": "5.0.0-alpha.36",
     "clsx": "^1.0.4",
     "prop-types": "^15.7.2",
     "react-is": "^17.0.0"