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

Apr 17, 2019

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

Here are some highlights ✨:

  • 🔥 Many new TypeScript & hook demos @donigianrp, @sperry94, @jasondashwang, @cahilfoley, @bh1505 and @kenzhemir
  • 🎀 5 more core components migrated from Classes to Hooks @joshwooding.
  • 📐 Update the List to better match the Material Design specification.
  • 🎁 Add new TransferList component @mbrookes.
  • And many more 🐛 bug fixes and 💄 improvements.

We hope the next release can be 4.0.0-beta.0.
Here are the last breaking changes we want to introduce:

  • Remove the dangerouslyUseGlobalCSS option (make it the default behavior) (#15140)
  • Require the Slide and Modal child element to be able to hold a ref (#15344, #15347)
  • Hide the EventListener dependency of ClickAwayListener (#15126)

We have done a lot of changes in the alpha phase.
The beta phase will be used to stabilize the library, we might have introduced bugs.
We will encourage people to try the beta out. We hope the migration will be smooth with the upgrade guide.

We hope 2-3 weeks of beta will be enough. We plan on releasing v4 stable in May.


Breaking change

  • [Paper] Reduce the default elevation (#15243) @oliviertassinari
    Change the default Paper elevation to match the Card and the Expansion Panel:
  -<Paper />
  +<Paper elevation={2} />
  • [List] Update to match the specification (#15339) @oliviertassinari
    Rework the list components to match the specification:

    • The usage of the ListItemAvatar component is required when using an avatar
    • The usage of the ListItemIcon component is required when using a left checkbox
    • The edge property should be set on the icon buttons.
  • [actions] Rename disableActionSpacing to disableSpacing (#15355) @oliviertassinari

    • [CardActions] Rename the disableActionSpacing prop disableSpacing.
    • [CardActions] Remove the disableActionSpacing CSS class.
    • [CardActions] Rename the action CSS class spacing.
    • [DialogActions] Rename the disableActionSpacing prop disableSpacing.
    • [DialogActions] Rename the action CSS class spacing.
    • [ExpansionPanelActions] Rename the action CSS class spacing.
  • [Tooltip] Convert to function component (#15291) @joshwooding

    • The child of the Tooltip needs to be able to hold a ref
  class Component extends React.Component {
    render() {
      return <div />
  -const MyComponent = props => <div {...props} />
  +const MyComponent = React.forwardRef((props, ref) => <div ref={ref} {...props} />);
  <Tooltip><Component /></Tooltip>
  <Tooltip><MyComponent /></Tooltip>
  <Tooltip><div /></Tooltip>


  • [ScrollbarSize] Convert to function component (#15233) @joshwooding
  • [InputBase] Fix placeholder bug in Edge (#15267) @rodrigolabs
  • [TransferList] Add new component (#15232) @mbrookes
  • [withMobileDialog] Improve types (#15276) @eps1lon
  • [Collapse] Convert to function component (#15248) @joshwooding
  • [DialogContent] Add divider prop type for TypeScript (#15273) @sperry94
  • [Tab] Remove outdated classes from the definitions (#15297) @zheeeng
  • [Tooltip] Suppress disabled button warning when controlled (#15304) @tasinet
  • [typescript] Generic props for FormControl, FormLabel, List (#15292)
  • [Select] Fix incorrect type in onChange (#15272) @sperry94
  • [Popper] Fix to defer setting of exited state to Transition component (#15250) @Sharakai
  • [Modal] Fix to defer setting of exited state to Transition component (#15266) @Sharakai
  • [InputBase] Fix onFilled/onEmpty being called during render (#15319) @eps1lon
  • [Tooltip] Convert to function component (#15291) @joshwooding
  • [Ripple] Convert to function component (#15345) @joshwooding
  • [Textarea] Refactor the implementation (#15331) @oliviertassinari
  • [Modal] Add reason parameter to onClose function signature (#15373) @JarkEMones
  • [Box] Test props to attributes forwarding (#15365) @eps1lon
  • [Container] Add component prop for TypeScript (#15369) @Amere
  • [Popper] Fix popperOptions prop (#15359) @jaipe


  • Fix dependency duplication issue @oliviertassinari
  • [styles] Improve typings for makeStyles (#15366) @geirsagberg


  • [system] Add types (#15357) @eps1lon


  • [NProgressBar] Add types (#15380) @eps1lon


  • [docs] Fix layout glitch when changing sort-by in showcases (#15255) @thomasnordquist
  • [docs] Add Checkbox TypeScript demo (#15222) @donigianrp
  • [docs] Add CheckboxLabel TypeScript demo (#15237) @donigianrp
  • [docs] Adding Most Stepper TypeScript Demos (#15223) @sperry94
  • [docs] Add CustomInputBase TypeScript demo (#15209) @jasondashwang
  • [docs] Add most Drawer TypeScript demos (#15119) @cahilfoley
  • [docs] Slight grammar changes to (#15257) @raybooysen
  • [docs] Document sharing makeStyles between components (#15234) @johnraz
  • [docs] Improve the @material-ui/styles documentation (#15236) @oliviertassinari
  • [docs] Add CheckboxesGroup TypeScript demo (#15228) @donigianrp
  • [docs] Delete legacy lab/layout (#15285) @mbrookes
  • [docs] Proof the Styles section (#15268) @mbrookes
  • [docs] Enable react profiling in production (#15282) @eps1lon
  • [docs] Improve table demos (#15281) @eps1lon
  • [docs] Add ClippedDrawer TypeScript demo (#15284) @cahilfoley
  • [docs] Add most Dialog TypeScript demos (#15271) @sperry94
  • [docs] Who's using Material-UI? (#15301) @mbrookes
  • [examples] Fix HTML end tag (#15293) @raybooysen
  • [docs] Update version filter (#15307) @mbrookes
  • [docs] Removed styled-components in gatsby-next dependencies (#15313) @tatchi
  • [docs] Improve ServerStyleSheets documentation (#15287) @raymondsze
  • [docs] Add Select TypeScript demos (#15288) @cahilfoley
  • [docs] Fix placeholder position in react-select demo (#15332) @merceyz
  • [docs] Add some List TypeScript demos (#15323) @bh1505
  • [docs] Disable the table of content on a few pages (#15338) @oliviertassinari
  • [docs] Document ref forwarding (requirements) (#15298) @eps1lon
  • [example] Add Reason example (#15340) @Tevinthuku
  • [docs] Migrate docs' breadcrumbs page to hooks (#15349) @kenzhemir
  • [docs] Provide a definition to root element and component (#15337) @oliviertassinari
  • [docs] update FAQ doc (#15356) @gautam-pahuja
  • [docs] Expand demo by default instead of duplicating the code (#15364) @eps1lon
  • [docs] Promote material-table (#15367) @oliviertassinari
  • [docs] Improve the customization demos (#15368) @oliviertassinari
  • [docs] Use tsx syntax highlighting (#15385) @eps1lon


  • [core] Allow docs:dev access over local network (#15259) @eps1lon
  • [core] Type ref for components (#15199) @eps1lon
  • [core] Dedupe lockfile (#15260) @eps1lon
  • [core] Ref cleanup (#15261) @eps1lon
  • [test] Add undesired withStyles + generic props component behavior (#15215) @eps1lon
  • [Transition] Update transition tests (#15249) @joshwooding
  • [core] Switch from buttonRef to ref usage (#15296) @eps1lon
  • [core] Synchronise value and checked prop typing (#15245) @joshwooding
  • [test] Use skip instead of testComponentPropWith: false (#15309) @eps1lon
  • [core] Reduce calls to actions props (#15312) @eps1lon
  • [test] Use actual React.memo (#15321) @eps1lon
  • [core] Add strict option to createMount (#15317) @eps1lon
  • [core] Use implicit children spread (#15354) @oliviertassinari
  • [core] Reduce calls to actions prop (#15370) @eps1lon
  • [core] Upgrade react-transition-group (#15375) @eps1lon
  • [test] Add missing styles tests (#15376) @ellisio
  • [test] Add hoc + overrideable component workaround (#15381) @ellisio
  • [utils] Fix lazy and memo components issuing forward ref warnings (#15322) @eps1lon
latest releases: 5.0.0-alpha.14, 5.0.0-alpha.13, 5.0.0-alpha.11...
18 months ago