npm @material-ui/styles 5.0.0-alpha.1
on Node.js NPM

latest releases: 4.11.5, 5.0.0-beta.5, 5.0.0-beta.4...
3 years ago
June 27, 2020

This is the first release on the v5 version, where we have moved most of our efforts to. You can find the documentation for this version at http://next.material-ui.com/. We plan to spend the next 6-8 months on it, following our roadmap and milestone.

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

  • 🔄 Introduce a new LoadingButton component in the lab (#21389) @mnajdova.
  • 📍 Synchronize icons with Google, add 200 new icons (#21498) @alecananian
  • 💥 Start working on new features & breaking changes.

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

Breaking changes

  • [Divider] Use border instead of background color (#18965) @mikejav.
    It prevents inconsistent height on scaled screens. For people customizing the color of the border, the change requires changing the override CSS property: 

    .MuiDivider-root {
- background-color: #f00;
+ border-color: #f00;
}

  • [Rating] Rename visuallyhidden to visuallyHidden for consistency (#21413) @mnajdova. 

    <Rating
  classes={{
-    visuallyhidden: 'custom-visually-hidden-classname',
+    visuallyHidden: 'custom-visually-hidden-classname',
  }}
/>

  • [Typography] Replace the srOnly prop so as to not duplicate the capabilities of System (#21413) @mnajdova. 

    -import Typography from '@material-ui/core/Typography';
+import { visuallyHidden } from '@material-ui/system';
+import styled from 'styled-component';

+const Span = styled('span')(visuallyHidden);

-<Typography variant="srOnly">Create a user</Typography>
+<Span>Create a user</Span>

  • [TablePagination] Add showFirstButton and showLastButton support (#20750) @ShahAnuj2610.
    The customization of the table pagination's actions labels must be done with the getItemAriaLabel prop. This increases consistency with the Pagination component. 

    <TablePagination
- backIconButtonText="Avant"
- nextIconButtonText="Après
+ getItemAriaLabel={…}

  • [ExpansionPanel] Rename to Accordion (#21494) @mnajdova.
    Use a more common the naming convention: 

    -import ExpansionPanel from '@material-ui/core/ExpansionPanel';
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
-import ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions';
+import Accordion from '@material-ui/core/Accordion';
+import AccordionSummary from '@material-ui/core/AccordionSummary';
+import AccordionDetails from '@material-ui/core/AccordionDetails';
+import AccordionActions from '@material-ui/core/AccordionActions';

-<ExpansionPanel>
+<Accordion>
-  <ExpansionPanelSummary>
+  <AccordionSummary>
     <Typography>Location</Typography>
     <Typography>Select trip destination</Typography>
-  </ExpansionPanelSummary>
+  </AccordionSummary>
-  <ExpansionPanelDetails>
+  <AccordionDetails>
     <Chip label="Barbados" onDelete={() => {}} />
     <Typography variant="caption">Select your destination of choice</Typography>
-  </ExpansionPanelDetails>
+  </AccordionDetails>
   <Divider />
-  <ExpansionPanelActions>
+  <AccordionActions>
     <Button size="small">Cancel</Button>
     <Button size="small" color="primary">Save</Button>
-  </ExpansionPanelActions>
+  </AccordionActions>
-</ExpansionPanel>
+</Accordion>

  • [BottomNavigation] typescript: The event in onChange is no longer typed as a React.ChangeEvent but React.SyntheticEvent. 

    -<BottomNavigation onChange={(event: React.ChangEvent<{}>) => {}} />
+<BottomNavigation onChange={(event: React.SyntheticEvent) => {}} />

  • [Slider] typescript: The event in onChange is no longer typed as a React.ChangeEvent but React.SyntheticEvent. 

    -<Slider onChange={(event: React.ChangEvent<{}>, value: unknown) => {}} />
+<Slider onChange={(event: React.SyntheticEvent, value: unknown) => {}} />

  • [Tabs] typescript: The event in onChange is no longer typed as a React.ChangeEvent but React.SyntheticEvent. 

    -<Tabs onChange={(event: React.ChangEvent<{}>, value: unknown) => {}} />
+<Tabs onChange={(event: React.SyntheticEvent, value: unknown) => {}} />

  • [Accordion] typescript: The event in onChange is no longer typed as a React.ChangeEvent but React.SyntheticEvent. 

    -<Accordion onChange={(event: React.ChangEvent<{}>, expanded: boolean) => {}} />
+<Accordion onChange={(event: React.SyntheticEvent, expanded: boolean) => {}} />

Changes

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

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

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

Docs

Core

Check out latest releases or
releases around @material-ui/styles 5.0.0-alpha.1

Don't miss a new styles release

NewReleases is sending notifications on new releases.

Get notifications