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. 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. -
💡
IconButton
now supports 3 sizes (small, medium, large
). See demo. -
♿️ We have improved the default style of the
Link
to be more accessible (#26145) @ahmed-28
@material-ui/core@5.0.0-alpha.38
Breaking changes
-
[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:<Menu + anchorOrigin={{ + vertical: 'top', + horizontal: 'left', + }}
-
The
MenuItem
component inherits theButtonBase
component instead ofListItem
. The class names related to "MuiListItem-*" are removed and themingListItem
is no longer affectingMenuItem
.-<li className="MuiButtonBase-root MuiMenuItem-root MuiListItem-root"> +<li className="MuiButtonBase-root MuiMenuItem-root">
-
The prop
listItemClasses
was removed, you can useclasses
instead.-<MenuItem listItemClasses={{...}}> +<MenuItem classes={{...}}>
-
-
[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.
{ 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.
import { createTheme } from '@material-ui/core/styles'; const theme = createTheme({ breakpoints: { values: { xs: 0, sm: 600, md: 960, lg: 1280, xl: 1920, }, }, });
-
[IconButton] Add size `large` and update styles (#26748) @siriwatknp
The default size's padding is reduced to
8px
which makes the default IconButton size of40px
. To get the old default size (48px
), usesize="large"
. The change was done to better match Google's products when Material Design stopped documenting the icon button pattern.- <IconButton> + <IconButton size="large">
-
[Slider] Adjust css to match the specification (#26632) @siriwatknp
Rework the CSS to match the latest Material Design guidelines and make custom styles more intuitive. See documentation.
You can reduce the density of the slider, closer to v4 with the
size="small"
prop. -
[IconButton] Remove label span (#26801) @siriwatknp
span
element that wraps children has been removed.label
classKey is also removed. More details about this change.<button class="MuiIconButton-root"> - <span class="MuiIconButton-label"> <svg /> - </span> </button>
-
[core] Remove `unstable_` prefix on the `useThemeProps` hook (#26777) @mnajdova
The following utilities were renamed to not contain the
unstable_
prefix:@material-ui/sytstem
import { - unstable_useThemeProps, + useThemeProps, } from '@material-ui/system';
@material-ui/core
import { - unstable_useThemeProps, + useThemeProps, } from '@material-ui/core/styles';
Changes
- [Alert] Add support for custom colors (#26831) @varandasi
- [Button] Fix loading text invisible when disabled (#26857) @DanielBretzigheimer
- [ButtonBase] Consider as a link with a custom component and `to` prop (#26576) @shadab14meb346
- [ButtonBase] Derive state on render instead of in layout effects (#26762) @eps1lon
- [Drawer] Fix incorrect z-index (#26791) @michal-perlakowski
- [Drawer] Remove incorrect transition handler props (#26835) @eps1lon
- [Link] Improve accessibility support (#26145) @ahmed-28
- [Modal] Fix calculating scrollbar size when using custom scrollbar (#26816) @michal-perlakowski
- [Rating] Make input ids less predictable (#26493) @eps1lon
- [Stepper] Add componentsProps.label to StepLabel (#26807) @michal-perlakowski
- [Tabs] Show error when Tab has display: none (#26783) @michal-perlakowski
- [theme] Add base color palette type to components (#26697) @siriwatknp
@material-ui/system@5.0.0-alpha.38
Breaking Changes
-
[system] Normalize api for `createBox` (#26820) @mnajdova
import { createBox } from '@material-ui/system'; -const styled = createBox(defaultTheme); +const styled = createBox({ defaultTheme });
Changes
Docs
- [docs] Fix misspelling of the word Typography (#26898) @dmrqx
- [docs] Instruct users to install @material-ui/icons with the next tag (#26873) @michal-perlakowski
- [docs] Sync translations (#26828) @l10nbot
- [docs] Improve grammar of autocomplete/autofill section (#26798) @dijonkitchen
- [docs] Explain "inherited props" better in the props table (#26778) @eps1lon
- [docs] Fix documentation for upgrading to v5 (#26812) @tungdt-90
- [docs] Improve notification color (#26796) @mnajdova
- [docs] Fix various a11y issues with /customization/color (#26757) @eps1lon
- [docs] Move custom theme to frame (#26744) @siriwatknp
- [docs] Fix small PT typo fix: inciar -> iniciar (#26775) @brunocavalcante
- [I10n] Add Chinese (Hong Kong) (zh-HK) locale (#26637) @kshuiroy
- [l10n] Add sinhalese (siLK) locale (#26875) @pavinduLakshan
- [examples] Rename nextjs typescript theme from tsx to ts (#26862) @Izhaki
Core
- [test] Fix Drawer test API @oliviertassinari
- [test] Adjust expected useAutocomplete error messages for React 18 (#26858) @eps1lon
- [test] Convert Drawer tests to testing-library (#26837) @eps1lon
- [test] Convert remaining enzyme tests to testing-library (#26832) @eps1lon
- [test] Ignore ReactDOM.hydrate deprecation warnings (#26815) @eps1lon
- [test] Reduce flakiness (#26761) @eps1lon
- [useId] Reduce likelyhood of collisions (#26758) @eps1lon
- yarn deduplicate @oliviertassinari
- Fix running framer's prettier under pwsh (#26819) @michaldudak
- [core] Update babel-plugin-optimize-clsx (#26861) @oliviertassinari
- [core] Assume no document.all at runtime (#26821) @eps1lon
- [core] Remove dependency on `@material-ui/private-theming` (#26793) @mnajdova
- [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