Skip to content

v5.0.0-alpha.6

Pre-release
Pre-release
Compare
Choose a tag to compare
@oliviertassinari oliviertassinari released this 13 Aug 16:59
v5.0.0-alpha.6
15fd623
Aug 13, 2020

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

  • 💅 Introduce a new dynamic variant API (#21648) @mnajdova.
    This API allows developers to add new variants on the Material-UI's components right from the theme, without having to wrap the components.
    For instance with the Button:

    // Define the style that should be applied, for specific props.
const theme = createMuiTheme({
  variants: {
    MuiButton: [
      {
        props: { variant: 'dashed', color: 'secondary' },
        styles: {
          border: `4px dashed ${red[500]}`,
        },
      },
    ],
  },
});

// Retain type safety.
declare module '@material-ui/core/Button/Button' {
  interface ButtonPropsVariantOverrides {
    dashed: true;
  }
}

// Enjoy!
<Button variant="dashed" />

    More details in the documentation and RFC.

  • 👮 Add documentation for the TrapFocus component (#22062) @oliviertassinari.

  • ⚛️ Prepare support for React v17 (#22093, #22105, #22143, #22111) @eps1lon.

  • 🚧 We have undertaken breaking changes.

@material-ui/[email protected]

Breaking changes

  • [Avatar] Rename variant circle -> circular for consistency (#22015) @kodai3
    Rename circle to circular for consistency. The possible values should be adjectives, not nouns:

    -<Avatar variant="circle">
+<Avatar variant="circular">

  • [Badge] Rename overlap circle -> circular and rectangle -> rectangular for consistency (#22050) @kodai3
    Rename circle to circular and rectangle to rectangular for consistency. The possible values should be adjectives, not nouns:

    -<Badge overlap="circle">
-<Badge overlap="rectangle">
+<Badge overlap="circular">
+<Badge overlap="rectangular">

  • [CircularProgress] Remove static variant, simplify determinate (#22060) @mbrookes
    The static variant has been merged into the determinate variant, with the latter assuming the appearance of the former.
    The removed variant was rarely useful. It was an exception to Material Design, and was removed from the specification.

    -<CircularProgress variant="determinate" />
    -<CircularProgress variant="static" classes={{ static: 'className' }} />
+<CircularProgress variant="determinate" classes={{ determinate: 'className' }} />

  • [Dialog] Remove transition onX props (#22113) @mbrookes
    The onE* transition props were removed. Use TransitionProps instead.

    <Dialog
-  onEnter={onEnter}
-  onEntered={onEntered},
-  onEntering={onEntered},
-  onExit={onEntered},
-  onExited={onEntered},
-  onExiting={onEntered}
+  TransitionProps={{
+    onEnter,
+    onEntered,
+    onEntering,
+    onExit,
+    onExited,
+    onExiting,
+  }}
/>

  • [Fab] Rename round -> circular for consistency (#21903) @kodai3
    Rename round to circular for consistency. The possible values should be adjectives, not nouns:

    -<Fab variant="round">
+<Fab variant="circular">

  • [List] Improve hover/select/focus UI display (#21930) @joshwooding

  • [Pagination] Rename round -> circular for consistency (#22009) @kodai3
    Rename round to circular for consistency. The possible values should be adjectives, not nouns:

    -<Pagination shape="round">
-<PaginationItem shape="round">
+<Pagination shape="circular">
+<PaginationItem shape="circular">

  • [RootRef] Remove component (#21974) @eps1lon
    This component was removed. You can get a reference to the underlying DOM node of our components via ref prop.
    The component relied on ReactDOM.findDOMNode which is deprecated in React.StrictMode.

    -<RootRef rootRef={ref}>
-  <Button />
-</RootRef>
+<Button ref={ref} />

  • [Snackbar] Change the default position on desktop (#21980) @kodai3
    The notification now displays at the bottom left on large screens.
    It better matches the behavior of Gmail, Google Keep, material.io, etc.
    You can restore the previous behavior with:

    -<Snackbar />
+<Snackbar anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} />

  • [Snackbar] Remove transition onX props (#22107) @mbrookes
    The onE* transition props were removed. Use TransitionProps instead.

    <Snackbar
-  onEnter={onEnter}
-  onEntered={onEntered},
-  onEntering={onEntered},
-  onExit={onEntered},
-  onExited={onEntered},
-  onExiting={onEntered}
+  TransitionProps={{
+    onEnter,
+    onEntered,
+    onEntering,
+    onExit,
+    onExited,
+    onExiting,
+  }}
/>

  • [TextareaAutosize] Rename rowsMax->maxRows & rowsMin->minRows (#21873) @mhayk
    Rename rowsMin/rowsMax prop with mi Rows/maxRows for consistency with HTML attributes.

    -<TextField rowsMax={6}>
-<TextareAutosize rowsMin={1}>
-<TextareAutosize rowsMax={6}>
+<TextField maxRows={6}>
+<TextareAutosize minRows={1}>
+<TextareAutosize maxRows={6}>

  • [TextField] Better isolate static textarea behavior to dynamic one (#21995) @AxartInc
    Better isolate the fixed textarea height behavior to the dynamic one.
    You need to use the rowsMin prop in the following case:

    -<TextField rows={2} rowsMax={5} />
+<TextField rowsMin={2} rowsMax={5} />

    Remove the rows prop, use the rowsMin prop instead.
    This change aims to clarify the behavior of the prop.

    -<TextareaAutosize rows={2} />
+<TextareaAutosize rowsMin={2} />

  • [theme] Remove theme.mixins.gutters (#22109) @joshwooding
    The abstraction hasn't proven to be used frequently enough to be valuable.

    -theme.mixins.gutters(),
+paddingLeft: theme.spacing(2),
+paddingRight: theme.spacing(2),
+[theme.breakpoints.up('sm')]: {
+  paddingLeft: theme.spacing(3),
+  paddingRight: theme.spacing(3),
+},

Changes

@material-ui/[email protected]

Breaking changes

  • [Skeleton] Rename variant circle -> circular and rect -> rectangular for consistency (#22053) @kodai3
    Rename circle to circular and rect to rectangular for consistency. The possible values should be adjectives, not nouns:

    -<Skeleton variant="circle">
-<Skeleton variant="rect">
+<Skeleton variant="circular">
+<Skeleton variant="rectangular">

Changes

@material-ui/[email protected]

Docs

Core

Assets 2
Loading