npm @material-ui/core 5.0.0-alpha.11
on Node.js NPM

latest releases: 4.12.4, 5.0.0-beta.5, 5.0.0-beta.4...
3 years ago
Sep 26, 2020

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

  • 👩‍🎨 A first iteration on the new styling solution. @mnajdova

    You can find a new version of the slider in the lab powered by emotion.

    In the event that you are already using styled-components in your application, you can swap emotion for styled-components 💅. Check this CodeSandbox for a demo. It relies on aliases to prevent any bundle size overhead.

    The new styling solution saves 2kB gzipped in the bundle compared to JSS, and about 14 kB gzipped if you were already using emotion or styled-components.

    Last but not least, the change allows us to take advantage of dynamic style props. We will use them for dynamic color props, variant props, and new style props (an improved system).

    This change has been in our roadmap for more than a year.
    We announced it in the v4 release blog post as a direction v5 would take.

  • 🛠 A first iteration on the unstyled components. @mnajdova

    You can find a new version of the slider in the lab without any styles.
    The unstyled component weighs 6.5 kB gzipped, compared with 26 kB for the styled version when used standalone. The component is best suited for use when you want to fully customize the look of the component without reimplementing the JavaScript and accessibility logic.

  • ⚡️ A first alpha of the DataGrid component. @dtassone

    It has taken 6 months of development since the initial commit (March 15th, 2020) to make the first alpha release of the grid. The component comes in two versions:
    @material-ui/data-grid is licensed under MIT, while @material-ui/x-grid is licensed under a commercial license.

  • 🪓 Keep working on the breaking changes. @mbrookes

    We aim to complete most of the breaking changes during the alpha stage of v5.
    We will move to beta once all the breaking changes we have anticipated are handled.
    As always, you should find a clear and simple upgrade path for each of them.
    You can learn more about the breaking changes left to be done in #22700.

  • And many more 🐛 bug fixes and 📚 improvements.

@material-ui/core@v5.0.0-alpha.11

Breaking changes

  • [Chip] Rename default variant to filled (#22683) @mnajdova
    Rename default variant to filled for consistency. 

    -<Chip variant="default">
+<Chip variant="filled">

  • [Tabs] Add allowScrollButtonsMobile prop for mobile view (#22700) @GauravKesarwani
    The API that controls the scroll buttons has been split it into two props:

    • The scrollButtons prop controls when the scroll buttons are displayed depending on the space available.
    • The allowScrollButtonsMobile prop removes the CSS media query that systematically hides the scroll buttons on mobile. 
    -<Tabs scrollButtons="on" />
-<Tabs scrollButtons="desktop" />
-<Tabs scrollButtons="off" />
+<Tabs scrollButtons allowScrollButtonsMobile />
+<Tabs scrollButtons />
+<Tabs scrollButtons={false} />

  • [theme] Improve breakpoints definitions (#22695) @mnajdova
    Breakpoints are now treated as values instead of ranges.
    The behavior of down(key) was changed to define media query less than the value defined with the corresponding breakpoint (exclusive).
    The behavior of between(start, end) was also updated to define media query for the values between the actual values of start (inclusive) and end (exclusive).

    Find examples of the changes required defined below: 

-theme.breakpoints.down('sm') // '@media (max-width:959.95px)' - [0, sm + 1) => [0, md)
+theme.breakpoints.down('md') // '@media (max-width:959.95px)' - [0, md)
-theme.breakpoints.between('sm', 'md') // '@media (min-width:600px) and (max-width:1279.95px)' - [sm, md + 1) => [sm, lg)
+theme.breakpoints.between('sm', 'lg') // '@media (min-width:600px) and (max-width:1279.95px)' - [sm, lg)

  • [theme] Rename type to mode (#22687) @mnajdova
    Renames theme.palette.type to theme.palette.mode, to better follow the "dark mode" term that is usually used for describing this feature. 

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

-const theme = createMuitheme({palette: { type: 'dark' }}),
+const theme = createMuitheme({palette: { mode: 'dark' }}),

    The changes are supported by the adaptV4Theme() for easing the migration

Changes

@material-ui/lab@v5.0.0-alpha.11

Breaking changes

  • [Alert] Move from lab to core (#22651) @mbrookes
    Move the component from the lab to the core. This component will become stable. 

    -import Alert from '@material-ui/lab/Alert';
-import AlertTitle from '@material-ui/lab/AlertTitle';
+import Alert from '@material-ui/core/Alert';
+import AlertTitle from '@material-ui/core/AlertTitle';

  • [Rating] Move from lab to core (#22725) @mbrookes
    Move the component from the lab to the core. This component will become stable. 

    -import Rating from '@material-ui/lab/Rating';
+import Rating from '@material-ui/core/Rating';

  • [Skeleton] Move from lab to core (#22740) @mbrookes
    Move the component from the lab to the core. This component will become stable. 

    -import Skeleton from '@material-ui/lab/Skeleton';
+import Skeleton from '@material-ui/core/Skeleton';

  • [Autocomplete] Get root elements of options via renderOption (#22591) @ImanMahmoudinasab
    After this change, the full DOM structure of the option is exposed.
    It makes customizations easier.
    You can recover from the change with: 

    <Autocomplete
- renderOption={(option, { selected }) => (
-   <React.Fragment>
+ renderOption={(props, option, { selected }) => (
+   <li {...props}>
      <Checkbox
        icon={icon}
        checkedIcon={checkedIcon}
        style={{ marginRight: 8 }}
        checked={selected}
      />
      {option.title}
-   </React.Fragment>
+   </li>
  )}
/>

Changes

  • [lab] Fix transitive dependencies in @material-ui/lab (#22671) @koistya
  • [Autocomplete] Add "remove-option" to AutocompleteCloseReason type (#22672) @iansjk
  • [Autocomplete] Don't close popup when Ctrl/Meta is pressed (#22696) @montelius
  • [Autocomplete] Fix accessibility issue with empty option set (#22712) @tylerjlawson
  • [Autocomplete] Update GitHub customization example (#22735) @hmaddisb

@material-ui/styled-engine@v5.0.0-alpha.11

The new default style engine leveraging emotion.

@material-ui/styled-engine-sc@v5.0.0-alpha.11

Allows developer to swap emotion with styled-components.
More documentation are coming.

@material-ui/icons@v5.0.0-alpha.11

@material-ui/styles@v5.0.0-alpha.11

  • [Slider] Create unstyled version and migrate to emotion & styled-components (#22435) @mnajdova

@material-ui/system@v5.0.0-alpha.11

Docs

Core

Check out latest releases or
releases around @material-ui/core 5.0.0-alpha.11

Don't miss a new core release

NewReleases is sending notifications on new releases.

Get notifications