Skip to content

v5.0.0-alpha.35

Pre-release
Pre-release
Compare
Choose a tag to compare
@oliviertassinari oliviertassinari released this 31 May 20:48
v5.0.0-alpha.35
6c0afb6
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.

May 31, 2021

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

  • 👩‍🎤 We have completed the migration to emotion/sc of all the components (@material-ui/core and @material-ui/lab) @siriwatknp, @mnajdova.
  • 📦 Save 12 kB gzipped by removing the dependency on @material-ui/styles (JSS) from the core and the lab (#26377, #26382, #26376) @mnajdova.
  • 📦 Reduce a bit the size of the icons package. We go from 16.8MB to 15.1MB (#26309) @eps1lon
  • 👩‍🎤 We are progressively moving all modules that are relevant to styling custom design systems in @material-ui/system. It's meant to be complementary with @material-ui/unstyled (#26379, #26485) @mnajdova.
  • ⚒️ Add many new codemods to automate the migration from v4 to v5 (#24867) @mbrookes.
  • And many more 🐛 bug fixes and 📚 improvements.

@material-ui/[email protected]

Breaking changes

  • [styles] Remove makeStyles from @material-ui/core (#26382) @mnajdova

    The makeStyles JSS utility is no longer exported from @material-ui/core. You can use @material-ui/styles instead. Make sure to add a ThemeProvider at the root of your application, as the defaultTheme is no longer available. If you are using this utility together with @material-ui/core, it's recommended you use the ThemeProvider component from @material-ui/core instead.

    -import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
import { createTheme, ThemeProvider } from '@material-ui/core/styles';

const theme = createTheme();
 const useStyles = makeStyles((theme) => ({
   background: theme.palette.primary.main,
 }));
 function Component() {
   const classes = useStyles();
   return <div className={classes.root} />
 }

 // In the root of your app
 function App(props) {
-  return <Component />;
+  return <ThemeProvider theme={theme}><Component {...props} /></ThemeProvider>;
 }

  • [styles] Remove withStyles from @material-ui/core (#26377) @mnajdova

    The withStyles JSS utility is no longer exported from @material-ui/core. You can use @material-ui/styles instead. Make sure to add a ThemeProvider at the root of your application, as the defaultTheme is no longer available. If you are using this utility together with @material-ui/core, you should use the ThemeProvider component from @material-ui/core instead.

    -import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
import { createTheme, ThemeProvider } from '@material-ui/core/styles';

const defaultTheme = createTheme();
 const MyComponent = withStyles((props) => {
   const { classes, className, ...other } = props;
   return <div className={clsx(className, classes.root)} {...other} />
 })(({ theme }) => ({ root: { background: theme.palette.primary.main }}));

 function App() {
-  return <MyComponent />;
+  return <ThemeProvider theme={defaultTheme}><MyComponent /></ThemeProvider>;
 }

  • [styles] Merge options in experimentalStyled (#26396) @mnajdova

    The options inside the experimentalStyled module are now merged under one object. In the coming weeks, we will rename ths module: styled() to signal that it's no longer experimental.

    -experimentalStyled(Button, { shouldForwardProp: (prop) => prop !== 'something' }, { skipSx: true })(...);
+experimentalStyled(Button, { shouldForwardProp: (prop) => prop !== 'something', skipSx: true })(...);

  • [Tabs] Update min & max width and remove minWidth media query (#26458) @siriwatknp

    Update the implementation to better match Material Design:

Changes

@material-ui/[email protected]

  • [codemod] Add multiple codemods to migrate components from v4 to v5 (#24867) @mbrookes
  • [codemod] Correct path and add target placeholder (#26414) @mbrookes

@material-ui/[email protected]

  • [icons] Use array children instead of React fragments (#26309) @eps1lon

@material-ui/[email protected]

@material-ui/[email protected]

@material-ui/[email protected]

Breaking changes

  • [pickers] Remove allowKeyboardControl (#26451) @eps1lon

  • [ClockPicker] Rework keyboard implementation (#26400) @eps1lon

    Remove the allowKeyboardControl prop from ClockPicker (and TimePicker and variants). Keyboard navigation now works by default.

Changes

Docs

Core

All contributors of this release in alphabetical order: @akshitsuri, @DanailH, @Dru89, @eps1lon, @Gautam-Arora24, @jeferson-sb, @m4theushw, @mbrookes, @mnajdova, @oliviertassinari, @pasDamola, @siriwatknp, @wolfykey

Assets 2
Loading