npm @material-ui/system 4.0.0-alpha.0

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

  • Increase React peer dependency to v16.8.0 (#14432) @oliviertassinari
  • Improve the spacing API (#14099) @ifndefdeadmau5
  • Improve ES modules tree shake-ability (#13391) @eps1lon
  • Remove recompose dependency (#14479)
  • And many more 🐛 bug fixes and 📝 documentation improvements.

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

  • [theme] Make theme.palette.augmentColor() pure (#13899) @ryancogswell

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 />
  • [core] Drop official node 6 support (#14379) @eps1lon

Deprecation

  • theme.spacing.unit usage is deprecated, you can use the new API (#14099) @ifndefdeadmau5:
    [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

  • [ListItem] Improve phrasing of error message (#14437) @netzwerg
  • [styles] Replace classnames with clsx (#14152) @TrySound
  • [Modal] Make children property required (#14444) @erichodges
  • [Select] Open select when focused with enter (#14452) @oknechirik
  • [Popper] Add hook API demo (#14464) @oliviertassinari
  • [Breadcrumbs] Fix wrong aria label property (#14486) @MalignantShadow
  • [Tooltip] Fix children focus detection (#14496) @codeheroics
  • [MenuItem] Improve note about using ellipsis (#14371) @charlax
  • [Tabs] Fix scrollbar appearing briefly on scroller (#14384) @ekoeditaa
  • [Chip] Fix role prop when not clickable (#14365) @pandaiolo
  • [Box] Add typings (#14397) @eps1lon
  • [Dialog] Fix inconsistencies with scroll="body" (#14398) @TomiCake
  • [TextField] Allow overriding default TextField props from the theme (#14252) @janowsiany
  • [Drawer] Add 'root' to class declaration (#14408) @sowings13
  • [theme] Improve the state warning (#14412) @oliviertassinari
  • [InputBase] Provide input adornments with FormControlContext (#14364) @mtidei

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

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

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

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

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

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

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

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

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

Breaking changes

  • [Breadcrumbs] Move to the core (#14436) @oliviertassinari
    diff -import Breadcrumbs from '@material-ui/lab/Breadcrumbs'; +import Breadcrumbs from '@material-ui/core/Breadcrumbs';
    - [ToggleButton] Update styles for Material v2 (#14278) @mbrookes
    ⚠️ The height has changed - it might break your layout.
    #### Changes
    - [core] Increase React peer dependency to v16.8.0 (#14432) @oliviertassinari
    - [Slider] Fix a11y issues with the handle (#14461) @eps1lon
    ### Docs
    - [docs] Improve overrides.md wording (#14403) @i0
    - [docs] Remove unneeded input from select docs (#14443) @eladmotola
    - [docs] Fix broken font-awesome icons in documentation (#14454) @EndiM
    - [docs] Reword certain phrases to improve i10n (#14457) @eps1lon
    - [docs] Fix IE11 crash on demo pages (#14466) @eps1lon
    - [docs] Add french translation (#14467) @zek0faws
    - [docs] Standardise compose util usage (#14472) @mbrookes
    - [docs] Additional tweaks to English l10n strings (#14471) @mbrookes
    - [examples] Improve the v3/v4 distinction (#14476) @oliviertassinari
    - [docs] Change interpolation library (#14481) @mbrookes
    - [docs] Fix showcase (#14494) @oliviertassinari
    - [docs] New translations (#14501) @mbrookes
    - [examples] Fix download link in example README (#14372) @clk1006
    - [docs] Revise the wrapping components guide wording (#14381) @mbrookes
    - [README] Fix the underscored space on hover, rearrange thanks (#14388) @mbrookes
    - [docs] Update use-media-query.md (#14389) @edwin32
    - [docs] Fix the SW cache between updates (#14390) @oliviertassinari
    - [docs] Add analytics to language notifications (#14402) @mbrookes
    - [docs] Targeted edit button URL (#14395) @mbrookes
    - [docs] Remove recompose/compose (#14421) @mbrookes
    - [docs] Generalize non-markdown I18n (#14413) @mbrookes
    - [docs] Fix the css-in-js styled section to match currying implementation (#14418) @gutofoletto
    ### Core
    - [core] Use frozen-lockfile by default (#14433) @eps1lon
    - [utils] Add support for forwardRef components in getDisplayName (#14429) @eps1lon
    - [test] Back to 100% test coverage (#14458, #14460) @oliviertassinari
    - [core] Upgrade the dev dependencies (#14463, #14385) @oliviertassinari
    - [core] Prepare next versions (#14473) @oliviertassinari
    - [typescript] Enable generic props for certain components (#13868) @pelotom
    - [core] Remove recompose (#14479) @oliviertassinari
    - [typescript] Add type test for style lib interopability (#14482) @eps1lon
    - [core] Upgrade to Next.js 8 (#14493)
    - [core] Improve tree-shakeability (#13391) @eps1lon
    - [core] Use common copy-files script (#14406) @eps1lon
    - [core] Enable innerRef on ListItem and MenuItem (#14423) @eps1lon
    - [core] Remove typings for /es build (#14422) @eps1lon
    - [core] Enable innerRef on Backdrop, List, MenuList and Paper (#13722) @eps1lon
latest releases: 5.0.0-alpha.13, 5.0.0-alpha.11, 5.0.0-alpha.6...
20 months ago