Merge branch 'master' into add-missing-button-classes-typings

.circleci/config.yml

@@ -341,7 +341,7 @@ jobs:
   test_browser:
     <<: *defaults
     docker:
-      - image: mcr.microsoft.com/playwright:v1.21.1-focal
+      - image: mcr.microsoft.com/playwright:v1.22.2-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -371,7 +371,7 @@ jobs:
   test_e2e:
     <<: *defaults
     docker:
-      - image: mcr.microsoft.com/playwright:v1.21.1-focal
+      - image: mcr.microsoft.com/playwright:v1.22.2-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -390,7 +390,7 @@ jobs:
   test_e2e_website:
     <<: *defaults
     docker:
-      - image: mcr.microsoft.com/playwright:v1.21.1-focal
+      - image: mcr.microsoft.com/playwright:v1.22.2-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -405,7 +405,7 @@ jobs:
   test_profile:
     <<: *defaults
     docker:
-      - image: mcr.microsoft.com/playwright:v1.21.1-focal
+      - image: mcr.microsoft.com/playwright:v1.22.2-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -432,7 +432,7 @@ jobs:
   test_regressions:
     <<: *defaults
     docker:
-      - image: mcr.microsoft.com/playwright:v1.21.1-focal
+      - image: mcr.microsoft.com/playwright:v1.22.2-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -486,7 +486,7 @@ jobs:
     <<: *defaults
     working_directory: /tmp/material-ui/test/bundling/fixtures/next-webpack4/
     docker:
-      - image: mcr.microsoft.com/playwright:v1.21.1-focal
+      - image: mcr.microsoft.com/playwright:v1.22.2-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -510,7 +510,7 @@ jobs:
     <<: *defaults
     working_directory: /tmp/material-ui/test/bundling/fixtures/next-webpack5/
     docker:
-      - image: mcr.microsoft.com/playwright:v1.21.1-focal
+      - image: mcr.microsoft.com/playwright:v1.22.2-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -534,7 +534,7 @@ jobs:
     <<: *defaults
     working_directory: /tmp/material-ui/test/bundling/fixtures/create-react-app/
     docker:
-      - image: mcr.microsoft.com/playwright:v1.21.1-focal
+      - image: mcr.microsoft.com/playwright:v1.22.2-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -558,7 +558,7 @@ jobs:
     <<: *defaults
     working_directory: /tmp/material-ui/test/bundling/fixtures/snowpack/
     docker:
-      - image: mcr.microsoft.com/playwright:v1.21.1-focal
+      - image: mcr.microsoft.com/playwright:v1.22.2-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -582,7 +582,7 @@ jobs:
     <<: *defaults
     working_directory: /tmp/material-ui/test/bundling/fixtures/vite/
     docker:
-      - image: mcr.microsoft.com/playwright:v1.21.1-focal
+      - image: mcr.microsoft.com/playwright:v1.22.2-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -606,7 +606,7 @@ jobs:
     <<: *defaults
     working_directory: /tmp/material-ui/test/bundling/fixtures/esbuild/
     docker:
-      - image: mcr.microsoft.com/playwright:v1.21.1-focal
+      - image: mcr.microsoft.com/playwright:v1.22.2-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -634,7 +634,7 @@ jobs:
     <<: *defaults
     working_directory: /tmp/material-ui/test/bundling/fixtures/gatsby/
     docker:
-      - image: mcr.microsoft.com/playwright:v1.21.1-focal
+      - image: mcr.microsoft.com/playwright:v1.22.2-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:
@@ -736,7 +736,7 @@ jobs:
   test_benchmark:
     <<: *defaults
     docker:
-      - image: mcr.microsoft.com/playwright:v1.21.1-focal
+      - image: mcr.microsoft.com/playwright:v1.22.2-focal
         environment:
           NODE_ENV: development # Needed if playwright is in `devDependencies`
     steps:

CHANGELOG.md

@@ -1,5 +1,77 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.8.3
+
+<!-- generated comparing v5.8.2..master -->
+
+_Jun 7, 2022_
+
+A big thanks to the 15 contributors who made this release possible.
+This release is mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+## `@mui/material@5.8.3`
+
+- [Alert] Constrain message width and allow overflow (#32747) @Janpot
+- [Checkbox] Add support for CSS variables (#32579) @haneenmahd
+- [Slider] Fix positioning of tooltips on vertical slider (#32919) @abhinav-22-tech
+
+## `@mui/system@5.8.3`
+
+- [system] Configurable attributes for libraries (#32971) @siriwatknp
+
+## `@mui/codemod@5.8.3
+
+- [codemod] Fix infinite loop in jss-to-tss-react and add TODO (#33048) @ryancogswell
+
+## `@mui/lab@5.0.0-alpha.85`
+
+- [pickers] Add deprecations when importing pickers from the lab (#32950) @flaviendelangle
+
+## `@mui/joy@5.0.0-alpha.31`
+
+- [Joy] Add `Slider` component and demos (#32694) @hbjORbj
+- [Joy] Add articles about customization approaches (#32887) @siriwatknp
+- [Joy] Add automatic adjustment page to core features (#32980) @siriwatknp
+- [Joy] Add docs about dark mode (#33002) @siriwatknp
+- [Joy] Add template UIs & first look blog post (#32791) @danilo-leal
+
+## `@mui/base@5.0.0-alpha.84`
+
+- [base] Remove @mui/system in tests (#32945) @kevinji
+- [ButtonUnstyled] Accept callbacks in componentsProps (#32991) @michaldudak
+- [SwitchUnstyled] Accept callbacks in componentsProps (#32993) @michaldudak
+- [TablePaginationUnstyled] Define ownerState and slot props' types (#32905) @michaldudak
+- [TabPanelUnstyled] Define ownerState and slot props' types (#32928) @michaldudak
+- [TabsListUnstyled] Define ownerState and slot props' types (#32925) @michaldudak
+
+## Docs
+
+- [blog] Fix anchor link scroll (#32994) @oliviertassinari
+- [docs] Add "Migration" section to sidebar and revise v4-v5 content (#32740) @samuelsycamore
+- [docs] Add What doesn't count as a breaking change? (#32850) @oliviertassinari
+- [docs] Fix 301 link @oliviertassinari
+- [docs] Fix icon color in `BadgeUnstyled` docs (#32976) @ZeeshanTamboli
+- [docs] Improve product identifier (#32707) @danilo-leal
+- [docs] Improve UX with back to top (#32896) @oliviertassinari
+- [docs] Polish overview page to Material UI (#32954) @oliviertassinari
+- [docs] Redirect older URLs (#33037) @oliviertassinari
+- [docs] Remove pickers page from the Lab section (#32961) @DanailH
+- [docs] Show product identifier on updated MUI X Introduction pages (#32966) @samuelsycamore
+- [docs] Throw on 301 links (#32939) @oliviertassinari
+- [website] Add Gerda to the about page (#33038) @danilo-leal
+- [website] Polish the pricing page (#32811) @oliviertassinari
+- [website] Remove unnecessary `address` dependency (#32957) @michaldudak
+
+## Core
+
+- [core] Improve icon synonyms (#32742) @oliviertassinari
+- [core] Prepare Next.js config for React 18 (#32963) @michaldudak
+- [core] Remove dead logic (#32940) @oliviertassinari
+- [core] Update dependencies to fix security vulnerabilities (#32947) @michaldudak
+- Add security link to README for Tidelift @mbrookes
+
+All contributors of this release in alphabetical order: @abhinav-22-tech, @DanailH, @danilo-leal, @flaviendelangle, @haneenmahd, @hbjORbj, @Janpot, @kevinji, @mbrookes, @michaldudak, @oliviertassinari, @ryancogswell, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
+
 ## 5.8.2
 
 <!-- generated comparing v5.8.1..master -->
@@ -2598,7 +2670,7 @@ _Sep 1, 2021_
 A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
 
 - 🎉 Renamed packages to `@mui/*` as part of rebranding the company, following the strategy of expanding the library scope beyond Material Design. For more details about it, check the [GitHub discussion](https://github.com/mui/material-ui/discussions/27803).
-- 🛠 Added `mui-replace` codemod for migrating `@material-ui/*` to new packages `@mui/*`. Check out this [codemod detail](https://github.com/mui/material-ui/blob/next/packages/mui-codemod/README.md#mui-replace) or head to [migration guide](https://mui.com/material-ui/guides/migration-v4/#preset-safe)
+- 🛠 Added `mui-replace` codemod for migrating `@material-ui/*` to new packages `@mui/*`. Check out this [codemod detail](https://github.com/mui/material-ui/blob/next/packages/mui-codemod/README.md#mui-replace) or head to [migration guide](https://mui.com/material-ui/migration/migration-v4/#preset-safe)
 - 🧪 Added new `<Mansory>` component to the lab, [check it out](https://mui.com/components/masonry/). It has been crafted by our first intern, @hbjORbj 👏!
 
 ### `@mui/material@5.0.0-rc.0`
@@ -4003,7 +4075,7 @@ A big thanks to the 16 contributors who made this release possible. Here are som
   />
   ```
 
-> Follow [this link](https://mui.com/material-ui/guides/migration-v4/#main-content) for full migration from v4 => v5
+> Follow [this link](https://mui.com/material-ui/migration/migration-v4/) for full migration from v4 => v5
 
 #### Changes
 

CHANGELOG.old.md

@@ -3853,7 +3853,7 @@ We will focus or effort on the stability of the library for the next two weeks.
 We don't plan more breaking changes, at the exception of changes that are required to fix bugs or that have minor impacts.
 We hope we can release v4 on May 15th, one year after v1.
 
-Please try the beta out! You can find an [upgrade guide](https://mui.com/material-ui/guides/migration-v3/) to ease the transition.
+Please try the beta out! You can find an [upgrade guide](https://mui.com/material-ui/migration/migration-v3/) to ease the transition.
 You will learn more about v4 in the final release blog post and our plans for the future.
 
 ### `@material-ui/core@v4.0.0-beta.0`
@@ -3988,7 +3988,7 @@ Here are the last breaking changes we want to introduce:
 
 We have done a lot of changes in the alpha phase.
 The beta phase will be used to stabilize the library, we might have introduced bugs.
-We will encourage people to try the beta out. We hope the migration will be smooth [with the upgrade guide](https://mui.com/material-ui/guides/migration-v3/).
+We will encourage people to try the beta out. We hope the migration will be smooth [with the upgrade guide](https://mui.com/material-ui/migration/migration-v3/).
 
 We hope 2-3 weeks of beta will be enough. We plan on releasing v4 stable in May.
 

README.md

@@ -48,9 +48,9 @@ yarn add @mui/material @emotion/react @emotion/styled
 <details>
   <summary>Older versions</summary>
 
-- **[v4.x](https://v4.mui.com/)** ([Migration from v4 to v5](https://mui.com/material-ui/guides/migration-v4/))
-- **[v3.x](https://v3.mui.com/)** ([Migration from v3 to v4](https://mui.com/material-ui/guides/migration-v3/))
-- **[v0.x](https://v0.mui.com/)** ([Migration to v1](https://mui.com/material-ui/guides/migration-v0x/))
+- **[v4.x](https://v4.mui.com/)** ([Migration from v4 to v5](https://mui.com/material-ui/migration/migration-v4/))
+- **[v3.x](https://v3.mui.com/)** ([Migration from v3 to v4](https://mui.com/material-ui/migration/migration-v3/))
+- **[v0.x](https://v0.mui.com/)** ([Migration to v1](https://mui.com/material-ui/migration/migration-v0x/))
 
 </details>
 

benchmark/package.json

@@ -15,9 +15,9 @@
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mdx-js/react": "^2.1.1",
-    "@mui/material": "^5.8.2",
-    "@mui/styles": "^5.8.0",
-    "@mui/system": "^5.8.2",
+    "@mui/material": "^5.8.3",
+    "@mui/styles": "^5.8.3",
+    "@mui/system": "^5.8.3",
     "@styled-system/css": "^5.1.5",
     "benchmark": "^2.1.4",
     "playwright": "^1.17.1",
@@ -26,11 +26,11 @@
     "react-is": "^17.0.2",
     "react-jss": "^10.9.0",
     "react-redux": "^7.2.8",
-    "redux": "^4.1.2",
+    "redux": "^4.2.0",
     "serve-handler": "^6.1.3",
     "styled-components": "^5.3.5",
     "theme-ui": "^0.14.5",
-    "webpack": "^5.72.1",
+    "webpack": "^5.73.0",
     "webpack-cli": "^4.9.2"
   }
 }

docs/data/joy/components/aspect-ratio/BasicRatio.js

@@ -10,12 +10,7 @@ export default function BasicRatio() {
       sx={{ width: 300, borderRadius: 'md', overflow: 'auto' }}
     >
       <AspectRatio>
-        <Typography
-          level="h2"
-          sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
-        >
-          16 : 9
-        </Typography>
+        <Typography level="h2">16 : 9</Typography>
       </AspectRatio>
     </Sheet>
   );

docs/data/joy/components/aspect-ratio/BasicRatio.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import AspectRatio from '@mui/joy/AspectRatio';
+import Sheet from '@mui/joy/Sheet';
+import Typography from '@mui/joy/Typography';
+
+export default function BasicRatio() {
+  return (
+    <Sheet
+      variant="outlined"
+      sx={{ width: 300, borderRadius: 'md', overflow: 'auto' }}
+    >
+      <AspectRatio>
+        <Typography level="h2">16 : 9</Typography>
+      </AspectRatio>
+    </Sheet>
+  );
+}

docs/data/joy/components/aspect-ratio/BasicRatio.tsx.preview

@@ -0,0 +1,8 @@
+<Sheet
+  variant="outlined"
+  sx={{ width: 300, borderRadius: 'md', overflow: 'auto' }}
+>
+  <AspectRatio>
+    <Typography level="h2">16 : 9</Typography>
+  </AspectRatio>
+</Sheet>

docs/data/joy/components/aspect-ratio/CarouselRatio.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import AspectRatio from '@mui/joy/AspectRatio';
 import Box from '@mui/joy/Box';
 import Typography from '@mui/joy/Typography';
-import Sheet from '@mui/joy/Sheet';
+import Card from '@mui/joy/Card';
 
 const data = [
   {
@@ -28,6 +28,7 @@ export default function FlexRowRatio() {
       sx={{
         display: 'flex',
         gap: 1,
+        py: 1,
         overflow: 'auto',
         width: 343,
         scrollSnapType: 'x mandatory',
@@ -38,15 +39,13 @@ export default function FlexRowRatio() {
       }}
     >
       {data.map((item) => (
-        <Sheet
+        <Card
+          row
           key={item.title}
           variant="outlined"
           sx={{
             gap: 2,
-            p: 2,
-            display: 'flex',
-            alignItems: 'center',
-            borderRadius: 'sm',
+            '--Card-padding': (theme) => theme.spacing(2),
           }}
         >
           <AspectRatio
@@ -59,7 +58,7 @@ export default function FlexRowRatio() {
             <Typography fontWeight="md">{item.title}</Typography>
             <Typography level="body2">{item.description}</Typography>
           </Box>
-        </Sheet>
+        </Card>
       ))}
     </Box>
   );