npm @material-ui/system 4.0.0-alpha.0
on Node.js NPM

latest releases: 4.12.2, 5.0.0-beta.5, 5.0.0-beta.4...
5 years ago
Feb 12, 2019

This is our first unstable release toward Material-UI v4.0.0. We try to release a major every 6-12 months.
This gives us the opportunity to remove deprecated APIs, upgrade our peer dependencies and more importantly, keep up with the direction the community is taking.

A big thanks to the 28 contributors who made this release possible!

Here are some highlights ✨:

@material-ui/core@v4.0.0-alpha.0

Breaking changes

  • [core] Increase React peer dependency to v16.8.0 (#14432) @oliviertassinari

    The upgrade path to React 16.8.0 should be pretty easy for our users.
    Introducing this breaking change in v4 enables the following:

    • We can remove the recompose dependency and use the new React.memo() API.
    • Before or after v4 is out, we can gradually migrate the core components to use the Hook API.

  • [Grid] Use a unitless spacing API (#14099) @ifndefdeadmau5

In order to support arbitrary spacing values and to remove the need to mentally county by 8, we are changing the spacing API: 

  /**
   * Defines the space between the type `item` component.
   * It can only be used on a type `container` component.
   */
-  spacing: PropTypes.oneOf([0, 8, 16, 24, 32, 40]),
+  spacing: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]),

Going forward, you can use the theme to implement a custom Grid spacing transformation function: https://material-ui.com/system/spacing/#transformation.

The theme.palette.augmentColor() method no longer performs a side effect on its input color.
In order to use it correctly, you have to use the output of this function. 

-const background = { main: color };
-theme.palette.augmentColor(background);
+const background = theme.palette.augmentColor({ main: color });

console.log({ background });

  • [core] Change UMD output name to 'MaterialUI' (#13142) @tkrotoff

    This change eases the use of Material-UI with a CDN: 

    const {
  Button,
  TextField,
-} = window['material-ui'];
+} = MaterialUI;

    It's consistent with the other projects:

    • material-ui => MaterialUI
    • react-dom => ReactDOM
    • prop-types => PropTypes

  • [Button] Remove deprecated props and styles (#14383) @mbrookes

Remove the deprecated button flat, raised and fab variants: 

-<Button variant="raised" />
+<Button variant="contained" />
-<Button variant="flat" />
+<Button variant="text" />
-import Button from '@material-ui/core/Button';
-<Button variant="fab" />
+import Fab from '@material-ui/core/Fab';
+<Fab />

Deprecation

    [theme.breakpoints.up('sm')]: {
-     paddingTop: theme.spacing.unit * 12,
+     paddingTop: theme.spacing(12),
    },

Tip: you can provide more than one argument: theme.spacing(1, 2) // = '8px 16px'

Changes

@material-ui/styles@v4.0.0-alpha.0

@material-ui/system@v4.0.0-alpha.0

@material-ui/icons@v4.0.0-alpha.0

@material-ui/docs@v4.0.0-alpha.0

@material-ui/lab@v4.0.0-alpha.0

Breaking changes

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

⚠️ The height has changed - it might break your layout.

Changes

Docs

Core

Check out latest releases or
releases around @material-ui/system 4.0.0-alpha.0

Don't miss a new system release

NewReleases is sending notifications on new releases.

Get notifications