Skip to content

v5.0.0-alpha.38

Pre-release
Pre-release
Compare
Choose a tag to compare
@siriwatknp siriwatknp released this 24 Jun 03:51
v5.0.0-alpha.38
f60126f
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.

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/[email protected]

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 the ButtonBase component instead of ListItem. The class names related to "MuiListItem-*" are removed and theming ListItem is no longer affecting MenuItem.

      -<li className="MuiButtonBase-root MuiMenuItem-root MuiListItem-root">
+<li className="MuiButtonBase-root MuiMenuItem-root">

    • The prop listItemClasses was removed, you can use classes 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 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.

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

@material-ui/[email protected]

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

Core

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

Assets 2
Loading