Merge branch 'master' into examples/update-to-react18

mui · May 11, 2022 · ca00166 · ca00166
2 parents b50bc79 + 0dad28e
commit ca00166
Show file tree

Hide file tree

Showing 421 changed files with 9,256 additions and 3,706 deletions.
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -28,6 +28,7 @@
     "@mui/styled-engine-sc": "packages/mui-styled-engine-sc/build",
     "@mui/system": "packages/mui-system/build",
     "@mui/private-theming": "packages/mui-private-theming/build",
+    "@mui/private-classnames": "packages/mui-private-classnames/build",
     "@mui/types": "packages/mui-types/build",
     "@mui/utils": "packages/mui-utils/build",
     "@mui/base": "packages/mui-base/build",

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,171 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.7.0
+
+<!-- generated comparing v5.6.4..master -->
+
+_May 10, 2022_
+
+A big thanks to the 27 contributors who made this release possible. Here are some highlights ✨:
+
+🛠 This release is all about supporting CSS variables in many Material UI components.
+Kudos to all contributors!
+
+### `@mui/[email protected]`
+
+- [StepLabel, StepIcon] Add support for CSS variables (#32609) @vicasas
+- [Table, TableRow] Add support for CSS variables (#32614) @vicasas
+- [AppBar] Add a logo component for the responsive app bar demo (#32374) @ameetmadan
+- [Autocomplete] Fix clearing single array values (#32626) @mikepricedev
+- [Autocomplete] Fix keep listbox open on left/right keys when inputValue is not empty (#31407) @alisasanib
+- [Autocomplete] Add support for CSS variables (#32598) @ZeeshanTamboli
+- [Autocomplete] Render `endAdornment` only when necessary (#32386) @g1eny0ung
+- [ButtonGroup] Add support for CSS variables (#32498) @vicasas
+- [CardActionArea] Add support for CSS variables (#32554) @vicasas
+- [ClickAwayListener] Allow pointer up/down events to event handler (#32264) @vladjerca
+- [CssBaseline] Add support for CSS vars (#32618) @haneenmahd
+- [Dialog] Add support for CSS variables (#32555) @vicasas
+- [Divider] Add support for CSS variables (#32519) @vicasas
+- [Drawer] Add support for CSS variables (#32565) @nghiamvt
+- [Fab] Add support for CSS variables (#32564) @alisasanib
+- [FormControlLabel] Add support for CSS variables (#32588) @elliefoote
+- [FormHelperText] Add support for CSS variables (#32596) @ZeeshanTamboli
+- [FormLabel] Add support for CSS variables (#32602) @ZeeshanTamboli
+- [Icon] Add support for CSS variables (#32595) @Jamaalwbrown
+- [IconButton] Add support for CSS variables (#32590) @Ariyapong
+- [ImageListItemBar] Add support for CSS variables (#32578) @vicasas
+- [Input] Support CSS variables (#32128) @ivan-ngchakming
+- [InputAdornment] Add support CSS variables (#32607) @vicasas
+- [Link] Fix style overrides color prop (#32653) @siriwatknp
+- [ListItem] Add support for CSS variables (#32580) @dan-mba
+- [ListItemButton] Add support for CSS variables (#32582) @dan-mba
+- [ListItemIcon] Add support for CSS variables (#32583) @dan-mba
+- [ListSubheader] Add support for CSS variables (#32584) @dan-mba
+- [MenuItem] Add support for CSS variables (#32561) @nghiamvt
+- [MobileStepper] Add support for CSS vars (#32606) @haneenmahd
+- [Modal] Add support for CSS variables (#32605) @haneenmahd
+- [PaginationItem] Add support for CSS vars (#32612) @haneenmahd
+- [Rating] Add support for CSS variables (#32556) @vicasas
+- [Snackbar] Add support for CSS variables (#32603) @gin1314
+- [SpeedDial] Add support for CSS variables (#32613) @alisasanib
+- [Stepper] Export useStepperContext (#31398) @pzi
+- [SvgIcon] Add support for CSS variables (#32610) @vicasas
+- [TablePagination] Add support for CSS variables (#32615) @haneenmahd
+- [TableSortLabel]: Add support for CSS vars (#32616) @haneenmahd
+- [Tabs] Add support for CSS variables (#32547) @ZeeshanTamboli
+- [ToggleButton] Add support for CSS variables (#32600) @Ariyapong
+- [ToggleButtonGroup] Add support for CSS variables (#32617) @haneenmahd
+- [Tooltip] Add support for CSS variables (#32594) @gin1314
+
+### `@mui/[email protected]`
+
+- [System] Support CSS variables for iframes & custom nodes (#32496) @siriwatknp
+
+### `@mui/[email protected]`
+
+- [ButtonUnstyled] Fix keyboard navigation on customized elements (#32204) @michaldudak
+
+### `@mui/[email protected]`
+
+- [classnames] Add new package for classnames utils (#32502) @mnajdova
+
+### Docs
+
+- [docs] Correct links to prevent 301 redirects (#32692) @michaldudak
+- [docs] Move, split, and revise "Unstyled components" page (#32562) @samuelsycamore
+- [docs] Nest `ListItemButton` in `ListItem` in the Drawer examples (#31987) @stefanprobst
+- [docs] Apply callouts in the Material UI docs (#32567) @danilo-leal
+- [docs] Show product identifier on new X pages (#32657) @cherniavskii
+- [docs] Fix copy button childNode not found (#32652) @siriwatknp
+- [docs] Split install commands in isolated code blocks (#32566) @danilo-leal
+- [docs] Base Switch style revisions and final review (#32376) @samuelsycamore
+- [docs] Adds Badge link to Base doc nav (#32619) @samuelsycamore
+- [docs] Base Installation style revisions and final review (#32483) @samuelsycamore
+- [docs] Fix broken redirection (#32581) @oliviertassinari
+- [docs] Allows to use `import '<library name>'` in demonstrations (#32492) @alexfauquette
+- [docs] Hide copy button on search icon dialog (#32577) @siriwatknp
+- [docs] Use full API link for ThemeProvider (#32549) @jcvidiri
+- [Joy] Add principles page (#32648) @siriwatknp
+- [Joy] Add Button page (#32576) @siriwatknp
+- [Joy] Add "Quick start" and "Tutorial" pages (#32383) @siriwatknp
+- [website] Add store to the footer and "hiring" chip adjustment (#32650) @danilo-leal
+- [website] Optimize conversion to store (#32646) @oliviertassinari
+- [website] Remove copy button on marketing pages (#32649) @siriwatknp
+- [website] Add missing space in copy label (#32638) @flaviendelangle
+
+### Core
+
+- [core] Security updates (#32636) @michaldudak
+- [core] Fix `docs:dev` not working after upgrading `next` to 12.1.0 (#32552) @cherniavskii
+- [core] Update minimist to fix security vulnerability (#32575) @michaldudak
+
+All contributors of this release in alphabetical order: @alexfauquette, @alisasanib, @ameetmadan, @Ariyapong, @cherniavskii, @dan-mba, @danilo-leal, @elliefoote, @flaviendelangle, @g1eny0ung, @gin1314, @haneenmahd, @ivan-ngchakming, @Jamaalwbrown, @jcvidiri, @michaldudak, @mikepricedev, @mnajdova, @nghiamvt, @oliviertassinari, @pzi, @samuelsycamore, @siriwatknp, @stefanprobst, @vicasas, @vladjerca, @ZeeshanTamboli
+
+## 5.6.4
+
+<!-- generated comparing v5.6.3..master -->
+
+_May 2, 2022_
+
+A big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 💅 5 Material UI components were updated to support CSS variables by @ZeeshanTamboli & @vicasas
+- And more 🐛 bug fixes and 📚 improvements.
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 37 -->[Accordion] Add support for CSS variables (#32542) @ZeeshanTamboli
+- &#8203;<!-- 36 -->[AvatarGroup] Add support for CSS variables (#32507) @vicasas
+- &#8203;<!-- 35 -->[Badge] Add support for CSS variables (#32516) @vicasas
+- &#8203;<!-- 34 -->[BottomNavigation] Add support for CSS variables (#32517) @vicasas
+- &#8203;<!-- 33 -->[CircularProgress] Add support for CSS variables (#32543) @ZeeshanTamboli
+- &#8203;<!-- 07 -->[FilledInput] Fix type error from undefined `color` (#32258) @hbjORbj
+- &#8203;<!-- 02 -->[l10n] Fix typo in csCZ translation of Pagination component (#32509) @Martin005
+- &#8203;<!-- 01 -->[Tabs] Fix `TabIndicatorProps` prop missing `sx` prop (#32503) @b-novikov-ipersonality
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 32 -->[codemod] Leave numeric arguments to breakpoints functions unchanged (#32426) @ryancogswell
+- &#8203;<!-- 31 -->[codemod] Allow for line breaks within theme.spacing parentheses (#32432) @ryancogswell
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 06 -->[Joy] Miscellaneous fixes (#32541) @siriwatknp
+- &#8203;<!-- 05 -->[Joy] Add `extendSxProp` to Link (#32505) @siriwatknp
+- &#8203;<!-- 04 -->[Joy] Rename variants (#32489) @siriwatknp
+- &#8203;<!-- 03 -->[Joy] Add `extendTheme` (#32450) @siriwatknp
+
+### Docs
+
+- &#8203;<!-- 30 -->[docs] SEO fixes (#32515) @oliviertassinari
+- &#8203;<!-- 29 -->[docs] Replace `Overriding nested component styles` anchor link with text (#32487) @ZeeshanTamboli
+- &#8203;<!-- 28 -->[docs] Update the list of external domains (#32514) @oliviertassinari
+- &#8203;<!-- 27 -->[docs] Update Material UI code snippets for React 18 (#32361) @samuelsycamore
+- &#8203;<!-- 26 -->[docs] Base TextareaAutosize style revisions and final review (#32481) @samuelsycamore
+- &#8203;<!-- 25 -->[docs] Base ClickAwayListener style revisions and final review (#32156) @samuelsycamore
+- &#8203;<!-- 24 -->[docs] Base Button style revisions and final review (#32380) @samuelsycamore
+- &#8203;<!-- 23 -->[docs] Base NoSsr style revisions and final review (#32254) @samuelsycamore
+- &#8203;<!-- 22 -->[docs] Correctly capitalize Ctrl @oliviertassinari
+- &#8203;<!-- 21 -->[docs] Fix styling in `Basic Popper` demo on the MUI Base docs (#32488) @ZeeshanTamboli
+- &#8203;<!-- 20 -->[docs] Add "Overview" page to Base docs (#32310) @samuelsycamore
+- &#8203;<!-- 19 -->[docs] Add copy button to code block (#32390) @siriwatknp
+- &#8203;<!-- 18 -->[docs] Base Tabs style revisions and final review (#32423) @samuelsycamore
+- &#8203;<!-- 17 -->[docs] Base Popper style revisions and final review (#32412) @samuelsycamore
+- &#8203;<!-- 16 -->[docs] Improve sidenav for MUI X (#32435) @oliviertassinari
+- &#8203;<!-- 15 -->[docs] Don't redirect on deploy preview (#32399) @m4theushw
+- &#8203;<!-- 14 -->[docs] A few SEO fixes (#32431) @oliviertassinari
+- &#8203;<!-- 13 -->[docs] Update links to the new Group & Pivot pages (#32410) @flaviendelangle
+- &#8203;<!-- 12 -->[docs] Support callouts (#32402) @siriwatknp
+- &#8203;<!-- 11 -->[docs] Fix import path in the Snackbar article #32462 @mongolyy
+- &#8203;<!-- 10 -->[docs] Fix grammar mistake in shadows.md (#32454) @HexM7
+- &#8203;<!-- 09 -->[docs] Improve unstyled button docs (#32429) @oliviertassinari
+
+### Core
+
+- &#8203;<!-- 08 -->[experiment] Add template for testing Material UI components with CSS variables (#32500) @siriwatknp
+
+All contributors of this release in alphabetical order: @b-novikov-ipersonality, @flaviendelangle, @hbjORbj, @HexM7, @m4theushw, @Martin005, @mongolyy, @oliviertassinari, @ryancogswell, @samuelsycamore, @siriwatknp, @vicasas, @ZeeshanTamboli
+
 ## 5.6.3
 
 <!-- generated comparing v5.6.2..master -->

diff --git a/README.md b/README.md
@@ -143,8 +143,6 @@ function App() {
     </Button>
   );
 }
-
-ReactDOM.createRoot(document.querySelector('#app')).render(<App />);
 ```
 
 In the interactive demo below, try changing the code and see how it affects the output.

diff --git a/babel.config.js b/babel.config.js
@@ -18,6 +18,7 @@ const defaultAlias = {
   '@mui/styles': resolveAliasPath('./packages/mui-styles/src'),
   '@mui/system': resolveAliasPath('./packages/mui-system/src'),
   '@mui/private-theming': resolveAliasPath('./packages/mui-private-theming/src'),
+  '@mui/private-classnames': resolveAliasPath('./packages/mui-private-classnames/src'),
   '@mui/base': resolveAliasPath('./packages/mui-base/src'),
   '@mui/utils': resolveAliasPath('./packages/mui-utils/src'),
   '@mui/material-next': resolveAliasPath('./packages/mui-material-next/src'),

diff --git a/benchmark/package.json b/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.6.3",
-    "@mui/styles": "^5.6.2",
-    "@mui/system": "^5.6.3",
+    "@mui/material": "^5.7.0",
+    "@mui/styles": "^5.7.0",
+    "@mui/system": "^5.7.0",
     "@styled-system/css": "^5.1.5",
     "benchmark": "^2.1.4",
     "playwright": "^1.17.1",
@@ -29,7 +29,7 @@
     "redux": "^4.1.2",
     "serve-handler": "^6.1.3",
     "styled-components": "^5.3.5",
-    "theme-ui": "^0.14.2",
+    "theme-ui": "^0.14.5",
     "webpack": "^5.72.0",
     "webpack-cli": "^4.9.2"
   }

diff --git a/docs/babel.config.js b/docs/babel.config.js
@@ -25,6 +25,7 @@ const alias = {
   // '@mui/styled-engine': '../packages/mui-styled-engine-sc/src',
   '@mui/system': '../packages/mui-system/src',
   '@mui/private-theming': '../packages/mui-private-theming/src',
+  '@mui/private-classnames': '../packages/mui-private-classnames/src',
   '@mui/utils': '../packages/mui-utils/src',
   '@mui/base': '../packages/mui-base/src',
   '@mui/material-next': '../packages/mui-material-next/src',

diff --git a/docs/data/base/components/button/UseButton.js b/docs/data/base/components/button/UseButton.js
@@ -47,7 +47,6 @@ const CustomButton = React.forwardRef(function CustomButton(props, ref) {
   const { active, disabled, focusVisible, getRootProps } = useButton({
     ...props,
     ref,
-    component: CustomButtonRoot,
   });
 
   const classes = {

diff --git a/docs/data/base/components/button/UseButton.tsx b/docs/data/base/components/button/UseButton.tsx
@@ -49,7 +49,6 @@ const CustomButton = React.forwardRef(function CustomButton(
   const { active, disabled, focusVisible, getRootProps } = useButton({
     ...props,
     ref,
-    component: CustomButtonRoot,
   });
 
   const classes = {

diff --git a/docs/data/base/components/button/button.md b/docs/data/base/components/button/button.md
@@ -1,6 +1,6 @@
 ---
 product: base
-title: Unstyled React button
+title: Unstyled React Button component and hook
 components: ButtonUnstyled
 githubLabel: 'component: button'
 waiAria: https://www.w3.org/TR/wai-aria-practices/#button
@@ -10,7 +10,7 @@ waiAria: https://www.w3.org/TR/wai-aria-practices/#button
 
 <p class="description">Buttons allow users to take actions and make choices with a single tap.</p>
 
-## Basic usage
+## Basic button
 
 ```js
 import ButtonUnstyled from '@mui/base/ButtonUnstyled';
@@ -24,39 +24,41 @@ import ButtonUnstyled from '@mui/base/ButtonUnstyled';
 
 By default, the `ButtonUnstyled` component renders a native `button` HTML element.
 You can override this by setting the `component` or `components.Root` prop.
-If you provide a non-interactive element, such as a `span`, the `ButtonUnstyled` component will automatically add the necessary accessibility attributes.
 
-{{"demo": "UnstyledButtonsSpan.js"}}
+If you provide a non-interactive element such as a `<span>`, the `ButtonUnstyled` component will automatically add the necessary accessibility attributes.
+
+Compare the attributes on the `<span>` in this demo with the `ButtonUnstyled` from the previous demo:
 
-Compare the attributes on the `span` with the `button` from the previous demo.
+{{"demo": "UnstyledButtonsSpan.js"}}
 
-## Complex customization
+### Complex customization
 
-In addition to HTML elements, you can also use SVGs with the `ButtonUnstyled` component.
+`ButtonUnstyled` accepts a wide range of custom elements beyond HTML elements.
+You can even use SVGs, as the following demo illustrates:
 
 {{"demo": "UnstyledButtonCustom.js", "defaultCodeOpen": false}}
 
-## Focus of disabled buttons
+## Focus on disabled buttons
 
-Similarly to the native `<button>`, the `ButtonUnstyled` component can't receive focus when it's disabled.
+Similarly to the native HTML `<button>` element, the `ButtonUnstyled` component can't receive focus when it's disabled.
 This may reduce its accessibility, as screen readers won't be able to announce the existence and state of the button.
-The `focusableWhenDisabled` prop lets you change this behavior.
+
+The `focusableWhenDisabled` prop lets you change this behavior.  
 When this prop is set, the underlying button does not set the `disabled` prop.
 Instead, `aria-disabled` is used, which makes the button focusable.
 
-It should be used whenever the disabled buttons need to be read by screen readers.
-MUI Base uses this prop internally in [menu items](/base/react-menu/).
-It makes the keyboard navigation to disabled items possible (in compliance with [ARIA guidelines](https://www.w3.org/TR/wai-aria-practices-1.2/#h-note-17)).
+This should be used whenever the disabled button needs to be read by screen readers.
+
+MUI Base uses this prop internally in [menu items](/base/react-menu/), making it possible to use the keyboard to navigate to disabled items (in compliance with [ARIA guidelines](https://www.w3.org/TR/wai-aria-practices-1.2/#h-note-17)).
 
 {{"demo": "UnstyledButtonsDisabledFocus.js"}}
 
-It works the same when the root slot is customized.
-In this case, however, the `aria-disabled` attribute is used no matter the state of the `focusableWhenDisabled` prop.
+The `focusWhenDisabled` prop works the same when the root slot is customized, except that the `aria-disabled` attribute is used no regardless of the prop's state.
 The ability to receive focus is controlled internally by the `tabindex` attribute.
 
 {{"demo": "UnstyledButtonsDisabledFocusCustom.js"}}
 
-## useButton hook
+## The useButton hook
 
 ```js
 import { useButton } from '@mui/base/ButtonUnstyled';
@@ -66,6 +68,11 @@ The `useButton` hook lets you use the functionality of `ButtonUnstyled` in other
 It returns props to be placed on a custom button element, along with fields representing the internal state of the button.
 
 The `useButton` hook requires the `ref` of the element it's used on.
-Additionally, you need to provide the `component` prop (unless you intend to use the plain `button`).
+Additionally, you need to provide the `component` prop (unless you intend to use the native HTML `<button>`).
 
 {{"demo": "UseButton.js", "defaultCodeOpen": true}}
+
+## Limitations
+
+If a `ButtonUnstyled` is customized with a non-button element (i.e. `<ButtonUnstyled component="span" />`), it will not submit the form it's in when clicked.
+Similarly, `<ButtonUnstyled component="span" type="reset">` will not reset its parent form.
-Original file line number
+Diff line change
@@ Expand Up / @@ -143,8 +143,6 @@ function App() { @@
         </Button>
       );
     }
-    ReactDOM.createRoot(document.querySelector('#app')).render(<App />);
     ```
     In the interactive demo below, try changing the code and see how it affects the output.
@@ Expand Down @@