Skip to content

v5.0.0-alpha.14

Pre-release
Pre-release
Compare
Choose a tag to compare
@oliviertassinari oliviertassinari released this 24 Oct 10:12
v5.0.0-alpha.14
56520e7
Oct 23, 2020

Big thanks to the 23 contributors who made this release possible. Here are some highlights ✨:

  • 💄 Introduce a new sx prop (#23053, #23205) @mnajdova
    We have resumed the work on Material-UI System. This is made possible by the latest progress on the new styling solution of v5.
    You can read the introduction blog post that we did for the system two years ago.

    The system is meant to solve the following problems:

    1. Naming things is hard. How should a class name, JSS style rule, or styled component be named?
    2. Jumping between JS and CSS in the editor wastes time. This is particularly true as the complexity (LOCs/# of elements) of a component increases. It's still true when using the styled() API.
    3. Introducing a makeStyles for the first time in a component is daunting. For example, it's why this VS Code plugin exists. What if we had less code to type, gaining velocity when writing styles?
    4. Pulling values out from the theme can be cumbersome. How can we make it less painful to increase the usage of design tokens?

    This new iteration of the system brings two major improvements:

    • It moves from the support of a subset of CSS to the support of a superset of CSS.
      Learning the shorthand is optional. It's no longer necessary to moving back to styled() when the system doesn't support a specific CSS property.

    • It moves from support on Box only to any core component (starting with the slider).

      import Slider from '@material-ui/lab/SliderStyled';

// Set the primary color and a vertical margin of 16px on desktop.
<Slider sx={{ color: 'primary.main', my: { xs: 0, md: 2 } }} />;

    CodeSandbox example

  • ✨ Upgrade Popper.js from v1 to v2 (#21761) @joshwooding
    The change reduces the bundle size (-1 kB gzipped) while fixing bugs at the same time.

  • 🐛 Fix broken nested imports with the icons package (#23157) @eps1lon
    The revamp of the bundling strategy in #22814 has broken the nested imports.
    Imports such as the one below should work again with this release:

    import CloseIcon from '@material-ui/icons/Close';

  • And many more 🐛 bug fixes and 📚 improvements.

@material-ui/[email protected]

Breaking changes

  • [Popper] Upgrade to popper.js to v2 (#21761) @joshwooding
    This third-party library has introduced a lot of changes.

    You can read their migration guide or the following summary:

    • The CSS prefixes have changed:

      popper: {
  zIndex: 1,
- '&[x-placement*="bottom"] $arrow': {
+ '&[data-popper-placement*="bottom"] $arrow': {

    • Method names have changed.

      -popperRef.current.scheduleUpdate()
+popperRef.current.update()
      -popperRef.current.update()
+popperRef.current.forceUpdate()

    • Modifiers' API has changed a lot. There are too many changes to be covered here.

  • [withMobileDialog] Remove this higher-order component (#23202) @RDIL
    The hook API allows a simpler and more flexible solution than the HOC:

    -import withMobileDialog from '@material-ui/core/withMobileDialog';
+import { useTheme, useMediaQuery } from '@material-ui/core';

function ResponsiveDialog(props) {
- const { fullScreen } = props;
+ const theme = useTheme();
+ const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
  const [open, setOpen] = React.useState(false);

// ...

-export default withMobileDialog()(ResponsiveDialog);
+export default ResponsiveDialog;

Changes

@material-ui/[email protected]

@material-ui/[email protected]

@material-ui/[email protected]

  • [core] Fix bundles for packages without subpackages (#23157) @eps1lon

@material-ui/[email protected]

Breaking changes

  • [AvatarGroup] Move from lab to core (#23121) @mbrookes
    Move the component from the lab to the core. This component will become stable.

    -import AvatarGroup from '@material-ui/lab/AvatarGroup';
+import AvatarGroup from '@material-ui/core/AvatarGroup';

Changes

@material-ui/[email protected]

@material-ui/[email protected]

Docs

Core

Assets 2
Loading