github mui-org/material-ui v5.0.0-alpha.33

May 9, 2021

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

  • 💥 Make progress with the breaking changes. We have done 81 of the 109 changes planned. We will release 5.0.0-beta.0 on July 1st and start to promote its usage over v4. You can also follow our milestone for more details.
  • And many more 🐛 bug fixes and 📚 improvements.

@material-ui/core@5.0.0-alpha.33

Breaking changes

  • [core] Remove deprecated innerRef prop (#26028) @m4theushw

withStyles

Replace the innerRef prop with the ref prop. Refs are now automatically forwarded to the inner component.

  import * as React from 'react';
  import { withStyles } from '@material-ui/core/styles';
  const MyComponent = withStyles({
    root: {
      backgroundColor: 'red',
    },
  })(({ classes }) => <div className={classes.root} />);
  function MyOtherComponent(props) {
    const ref = React.useRef();
  - return <MyComponent innerRef={ref} />;
  + return <MyComponent ref={ref} />;
  }

withTheme

Replace the innerRef prop with the ref prop. Refs are now automatically forwarded to the inner component.

  import * as React from 'react';
  import { withTheme  } from '@material-ui/core/styles';
  const MyComponent = withTheme(({ theme }) => <div>{props.theme.direction}</div>);
  function MyOtherComponent(props) {
    const ref = React.useRef();
  - return <MyComponent innerRef={ref} />;
  + return <MyComponent ref={ref} />;
  }
  • [theme] Rename createMuiTheme to createTheme (#25992) @m4theushw

Developers only need one theme in their application. A prefix would suggest a second theme is needed. It's not the case. createMuiTheme will be removed in v6.

  -import { createMuiTheme } from '@material-ui/core/styles';
  +import { createTheme } from '@material-ui/core/styles';

  -const theme = createMuiTheme({
  +const theme = createTheme({
  • [theme] Remove MuiThemeProvider alias (#26171) @m4theushw

The MuiThemeProvider is no longer exported. Use ThemeProvider instead. It was removed from the documentation during v4-beta, 2 years ago.

  -import { MuiThemeProvider } from '@material-ui/core/styles';
  +import { ThemeProvider } from '@material-ui/core/styles';
  • [Box] Remove the clone prop (#26031) @m4theushw

Its behavior can be obtained using the sx prop.

  -<Box sx={{ border: '1px dashed grey' }} clone>
  -  <Button>Save</Button>
  -</Box>
  +<Button sx={{ border: '1px dashed grey' }}>Save</Button>
  • [Box] Remove render prop (#26113) @m4theushw

Its behavior can be obtained using the sx prop directly on the child if it's a Material-UI component. For non-Material-UI components use the sx prop in conjunction with the component prop:

  -<Box sx={{ border: '1px dashed grey' }}>
  -  {(props) => <Button {...props}>Save</Button>}
  -</Box>
  +<Button sx={{ border: '1px dashed grey' }}>Save</Button>
  -<Box sx={{ border: '1px dashed grey' }}>
  -  {(props) => <button {...props}>Save</button>}
  -</Box>
  +<Box component="button" sx={{ border: '1px dashed grey' }}>Save</Box>
  • [Checkbox] Make color="primary" default (#26002) @vicasas

This better matches the material design guidelines.

  -<Checkbox />
  +<Checkbox color="secondary />
  • [Select] Remove labelWidth prop (#26026) @m4theushw

The label prop now fulfills the same purpose, using CSS layout instead of JavaScript measurement to render the gap in the outlined. The TextField already handles it by default.

  -<Select variant="outlined" labelWidth={20} />
  +<Select label="Gender" />
  • [core] Remove styled JSS utility from @material-ui/core/styles (#26101) @mnajdova

The styled JSS utility is no longer exported from @material-ui/core/styles. You can use @material-ui/styles/styled 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/styles instead.

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

  +const theme = createTheme();
   const MyComponent = styled('div')(({ theme }) => ({ background: theme.palette.primary.main }));

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

For new components, you can instead use the experimentalStyled() helper powered by emotion/sc.

  import { experimentalStyled as styled } from '@material-ui/core/styles';
  • [Hidden] Remove component (#26135) @m4theushw

Removed in favor of using the sx prop or the useMediaQuery hook.

Use the sx prop to replace implementation="css":

  -<Hidden implementation="css" xlUp><Paper /></Hidden>
  -<Hidden implementation="css" xlUp><button /></Hidden>
  +<Paper sx={{ display: { xl: 'none', xs: 'block' } }} />
  +<Box component="button" sx={{ display: { xl: 'none', xs: 'block' } }} />

Use the useMediaQuery hook to replace implementation="js":

  -<Hidden implementation="js" xlUp><Paper /></Hidden>
  +const hidden = useMediaQuery(theme => theme.breakpoints.up('xl'));
  +return hidden ? null : <Paper />;
  • [withWidth] Remove API (#26136) @m4theushw

Removed in favor of the useMediaQuery hook. You can reproduce the same functionality creating a custom hook as described here.

  • [Autocomplete] Rename values of the reason argument (#26172) @m4theushw

Rename the values of the reason argument in onChange and onClose for consistency:

  1. create-option to createOption
  2. select-option to selectOption
  3. remove-option to removeOption
  • [core] Remove withTheme from @material-ui/core (#26051) @mnajdova

The withTheme utility has been removed from the @material-ui/core/styles package. You can use the @material-ui/styles/withTheme 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 from @material-ui/core/styles instead.

   import * as React from 'react';
  -import { withTheme } from '@material-ui/core/styles';
  +import { withTheme } from '@material-ui/styles';
  +import { createTheme, ThemeProvider } from '@material-ui/core/styles';

  +const theme = createTheme();
   const MyComponent = withTheme(({ theme }) => <div>{props.theme.direction}</div>);

   function App(props) {
  -  return <MyComponent />;
  +  return <ThemeProvider theme={theme}><MyComponent {...props} /></ThemeProvider>;
   }
  • [core] Remove createStyles from @material-ui/core (#26018) @mnajdova

    • The createGenerateClassName module is no longer exported from @material-ui/core/styles. You should import it directly from @material-ui/styles.
  -import { createGenerateClassName } from '@material-ui/core/styles';
  +import { createGenerateClassName } from '@material-ui/styles';
  • The jssPreset objeect is no longer exported from @material-ui/core/styles. You should import it directly from @material-ui/styles.
  -import { jssPreset } from '@material-ui/core/styles';
  +import { jssPreset } from '@material-ui/styles';
  • The ServerStyleSheets component is no longer exported from @material-ui/core/styles. You should import it directly from @material-ui/styles.
  -import { ServerStyleSheets } from '@material-ui/core/styles';
  +import { ServerStyleSheets } from '@material-ui/styles';
  • The StylesProvider component is no longer exported from @material-ui/core/styles. You should import it directly from @material-ui/styles.
  -import { StylesProvider } from '@material-ui/core/styles';
  +import { StylesProvider } from '@material-ui/styles';
  • The useThemeVariants hook is no longer exported from @material-ui/core/styles. You should import it directly from @material-ui/styles.
  -import { useThemeVariants } from '@material-ui/core/styles';
  +import { useThemeVariants } from '@material-ui/styles';

Changes

  • [Dialog] Improve support for custom breakpoints (#26092) @oliviertassinari
  • [IconButton] Fix default color prop (#26064) @Jack-Works
  • [Radio] Migrate RadioButtonIcon to emotion (#26068) @mnajdova
  • [SwipeableDrawer] Migrate SwipeArea to emotion (#26059) @mnajdova
  • [Table] Synchronize horizontal sticky header position with body (#26159) @LiKang6688
  • [Tabs] Fix support for null children in TabList (#26170) @hubertokf
  • [Tabs] Fix keyboard traversal over disabled tabs (#26061) @anish-khanna
  • [TextField] Fix missing standard variant classes in types (#26115) @siriwatknp
  • [TextField] Allow to customize Typography in FormControlLabel (#25883) @mousemke
  • [theme] Fix transition duration default value customization (#26054) @anshuman9999

@material-ui/lab@5.0.0-alpha.33

Breaking changes

  • [Timeline] Add support for position override on items (#25974) @simonecervini

Rename the align prop to position to reduce confusion.

  -<Timeline align="alternate">
  +<Timeline position="alternate">
  -<Timeline align="left">
  +<Timeline position="right">
  -<Timeline align="right">
  +<Timeline position="left">
  • [pickers] Remove customization of deep components (#26118) @eps1lon

Changes

  • [DatePicker] Migrate YearPicker to emotion (#25928) @siriwatknp
  • [DateRangePicker] Fix not being opened on click (#26016) @eps1lon
  • [pickers] Fix ref types (#26121) @eps1lon
  • [pickers] Rely on native behavior for disabled/readOnly behavior (#26055) @eps1lon
  • [pickers] Remove unused components from mobile and desktop variants (#26066) @eps1lon
  • [pickers] Document readonly/disabled pickers (#26056) @eps1lon
  • [pickers] Remove unused components from static variants (#26052) @eps1lon
  • [pickers] Toggle mobile keyboard view in the same commit as the view changes (#26017) @eps1lon
  • [pickers] Remove redundant aria-hidden (#26014) @eps1lon
  • [pickers] Ensure input value is reset in the same commit as the value (#25972) @eps1lon
  • [internal][pickers] Pass desktop wrapper props explicitly (#26120) @eps1lon
  • [internal][pickers] Move useInterceptProps into module (#26090) @eps1lon
  • [internal][pickers] Explicit default toolbar components (#26075) @eps1lon
  • [internal][pickers] Move validation from config to module (#26074) @eps1lon
  • [internal][pickers] Minimal types for defaultizing in useInterceptProps (#26063) @eps1lon
  • [internal][pickers] Don't validate inputFormat in production (#26053) @eps1lon
  • [internal][pickers] Remove unused styles (#26023) @eps1lon
  • [internal][pickers] Remove AllSharedPickerProps and AllSharedDateRangePickerProps (#26005) @eps1lon

Docs

  • [docs] Migrate Tabs, Table, Snackbar demos to emotion (#26175) @mnajdova
  • [docs] Fix dynamic global styles (#25690) @mnajdova
  • [docs] Fixed React.forwardRef missing display name ESLint error (#26160) @arpitBhalla
  • [docs] Migrate Tooltip, Steppers demos to emotion (#26165) @mnajdova
  • [docs] Migrate Dialog demos to emotion (#26162) @vicasas
  • [docs] Remove makeStyles from landing pages (#26130) @mnajdova
  • [docs] Add new customized switch examples (#26096) @DanielBretzigheimer
  • [docs] Migrate Autocomplete demos (#26127) @mnajdova
  • [docs] Remove @material-ui/core/styles from the styles pages (#26126) @mnajdova
  • [docs] Update templates, premium-themes to use makeStyles from @material-ui/styles (#26131) @mnajdova
  • [docs] Migrate TreeView demos (#26146) @mnajdova
  • [docs] More explicit breakpoint documentation in sx (#26140) @eps1lon
  • [docs] Explicitly describe how the media query affects the rendered version (#26129) @eps1lon
  • [docs] Fix 301 link to store (#26095) @oliviertassinari
  • [docs] Normalize name use for state in pickers demo (#26093) @oliviertassinari
  • [docs] Consistent type name in docs (#26077) @jamesaucode
  • [docs] Remove makeStyles dependency from core in modules (#26071) @mnajdova
  • [docs] Add links for demo in different deploys (#26065) @eps1lon
  • [docs] Add section for useFormControl (#25927) @t49tran
  • [docs] Add Styled Engine page (#25911) @mnajdova
  • [docs] Migrate Timeline demos to emotion (#26036) @vicasas
  • [docs] Document all the colors available (#26015) @anshuman9999
  • [docs] Avoid extracting classes twice (#25973) @oliviertassinari

Core

  • [test] Add test for behavior when picker variant changes (#26128) @eps1lon
  • [test] testing-library patterns for playwright tests (#25860) @eps1lon
  • [test] Remove scheduler/tracing (#26062) @eps1lon
  • [test] Remove duplicate property (#26011) @eps1lon
  • [core] Link to experimental size-comparison page (#26179) @eps1lon
  • [core] Update typings for theme's components (#26125) @mnajdova
  • [core] Improve react@experimental compat (#26116) @eps1lon
  • [core] Remove more dependencies on @material-ui/styles (#26100) @mnajdova
  • [core] Batch small changes (#26083) @oliviertassinari
  • [core] ComponentType -> JSXElementConstructor (#26081) @eps1lon
  • [core] Create new @material-ui/private-theming package (#25986) @mnajdova

All contributors of this release in alphabetical order: @anish-khanna, @anshuman9999, @arpitBhalla, @DanielBretzigheimer, @eps1lon, @hubertokf, @Jack-Works, @jamesaucode, @LiKang6688, @m4theushw, @mnajdova, @mousemke, @oliviertassinari, @simonecervini, @siriwatknp, @t49tran, @vicasas

latest releases: v4.12.2, v5.0.0-beta.1, v4.12.1...
pre-release2 months ago