Material UI: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
MIT License
Big thanks to the 11 contributors who made this release possible.
@material-ui/[email protected]
component
prop or as an immediate children
has been dropped. If you were using unstable_createStrictModeTheme
or didn't see any warnings related to findDOMNode
in React.StrictMode
then you don't need to do anything.component
prop or passing children
to components that require children
to be elements (e.g. <MenuList><CustomMenuItem /></MenuList>
)React.cloneElement()
API.@material-ui/[email protected]
Big thanks to the 14 contributors who made this release possible.
@material-ui/[email protected]
@material-ui/[email protected]
multiple
(#21692, #21670) @weslenng, @eps1lon@document
directive from IntelliSense (#21688) @eps1lonBig thanks to the 16 contributors who made this release possible.
@material-ui/[email protected]
[Button] Make primary the default color (#21594) @mbrookes
The button color
prop is now "primary" by default, and "default" has been removed. This makes the button closer to the Material Design specification and simplifies the API.
-<Button color="default" />
-<Button color="primary" />
+<Button />
+<Button />
[ExpansionPanel] Remove component (#21630) @mnajdova
This completes our effort on renaming the ExpansionPanel component Accordion
[Collapse] Add orientation and horizontal support (#20619) @darkowic
The collapsedHeight
prop was renamed collapsedSize
to support the horizontal direction.
-<Collapse collapsedHeight={40}>
+<Collapse collapsedSize={40}>
@material-ui/[email protected]
Big thanks to the 8 contributors who made this release possible.
@material-ui/[email protected]
[ExpansionPanel] Prepare renaming to Accordion in v5 (#21560) @mnajdova
It uses a more common 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">Save</Button>
- </ExpansionPanelActions>
+ </AccordionActions>
-</ExpansionPanel>
+</Accordion>
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 ✨:
LoadingButton
component in the lab (#21389) @mnajdova.@material-ui/[email protected]
[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) => {}} />
@material-ui/[email protected]
@material-ui/[email protected]
@material-ui/[email protected]
onChange
implementations with a generic react event (#21552) @eps1lon⚠️ This release marks the end of the active development on the v4.x versions, after 18 months of development.
We are moving all ongoing efforts to v5 (next
branch) ✨.
This means a feature freeze on v4. The development of this version will be limited to important bug fixes, security patches, and easing the upgrade path to v5.
You can follow our progress on the v5 milestone. We will make the documentation of the v5 alpha releases available under https://next.material-ui.com/, starting next week (weekly releases, as usual).
Big thanks to the 19 contributors who made this release possible. Here are some highlights ✨:
Introduce a new Timeline component (#21331) @mnajdova.
You can find the component in the lab.
Simplify the theme overrides with TypeScript for the components in the lab (#21279) @CarsonF.
In order to benefit from the CSS overrides with the theme and the lab components, TypeScript users need to import the following types. Internally, it uses module augmentation to extend the default theme structure with the extension components available in the lab.
// 1. augment the theme
import type '@material-ui/lab/themeAugmentation';
// 2. override
const theme = createMuiTheme({
overrides: {
MuiTimeline: {
root: {
backgroundColor: 'red',
},
},
},
});
Minify error messages in production (#21214) @eps1lon.
Using the React error decoder as inspiration, the exceptions thrown by Material-UI in production are now minified.
You will be redirected to the documentation to decode the error.
@material-ui/[email protected]
@material-ui/[email protected]
@material-ui/[email protected]
$ExpectError
to @ts-expect-error
(#21308) @eps1lonBig thanks to the 21 contributors who made this release possible.
@material-ui/[email protected]
@material-ui/[email protected]
@material-ui/utils
(#21240) @eps1lonBig thanks to the 30 contributors who made this release possible.
Here are some highlights ✨:
<Skeleton><Avatar /></Skeleton>
Follow the docs to learn more.selectionFollowsFocus
prop.@material-ui/[email protected]
@material-ui/[email protected]
@material-ui/[email protected]
Big thanks to the 19 contributors who made this release possible.
Here are some highlights ✨:
@material-ui/[email protected]
selectionFollowsFocus
(#20936) @eps1lon@material-ui/[email protected]
@material-ui/[email protected]
@material-ui/[email protected]
@material-ui/[email protected]
react@next
(#20966) @eps1lonBig thanks to the 27 contributors who made this release possible.
Here are some highlights ✨:
@material-ui/[email protected]
@material-ui/[email protected]
@material-ui/[email protected]
@material-ui/[email protected]
Big thanks to the 32 contributors who made this release possible.
Here are some highlights ✨:
@material-ui/[email protected]
@material-ui/[email protected]
@material-ui/[email protected]
@material-ui/react-transition-group
(#20699) @eps1lonBig thanks to the 25 contributors who made this release possible.
@material-ui/[email protected]
children
type from element to Node (#20577) @alielkhateeb@material-ui/[email protected]
Big thanks to the 20 contributors who made this release possible.
Here are some highlights ✨:
Over the last 3 months, we have focused exclusively on making patch releases. We have done 11 so far. We have optimized for stability. In the coming weeks, we will initiate our work on the next major: v5. You can expect the following:
@material-ui/[email protected]
@global
override (#20454) @eps1lonchildren
(#20450) @NMinhNguyenchildren
(#20458) @NMinhNguyen@material-ui/[email protected]
@material-ui/[email protected]
@material-ui/[email protected]
@material-ui/[email protected]
react@next
(#20472) @eps1lonBig thanks to the 20 contributors who made this release possible.
@material-ui/[email protected]
direction
as optional in TypeScript (#20338) @maksimgm@material-ui/[email protected]
focused
prop (#20276) @dmtrKovalenkoBig thanks to the 24 contributors who made this release possible.
Here are some highlights ✨:
⚛️ Improve the DX, migrate a couple of props' descriptions to TypeScript (#20298, #20171, #20264) @eps1lon.
The coverage has increased from 17 to 50 components. We are working on migrating the 94 missing components.
⚛️ Improve the DX, add debug information when using hooks (#19515) @eps1lon.
For instance, with the useMediaQuery
hook:
And many more 🐛 bug fixes and 📚 improvements.
@material-ui/[email protected]
@material-ui/[email protected]
Published by oliviertassinari over 4 years ago
@material-ui/[email protected]
Big thanks to the 39 contributors who made this release possible.
Here are some highlights ✨:
⚛️ Improve the DX in Visual Studio Code (#20079, #19962, #19280) @eps1lon @jedwards1211.
Preview the purpose of each theme.spacing
arguments right in the editor:
Leverage code snippets to save time with this extension.
Preview the colors right in the editor:
🔍 12 patches on the Autocomplete component.
💄 Polish on the Pagination component (#19933, #19964, #19966, #19987) @pvdstel @eps1lon @mbrookes.
@material-ui/[email protected]
@material-ui/[email protected]
@material-ui/[email protected]
@material-ui/[email protected]
@material-ui/[email protected]
onChange
and page
(#19964) @eps1lon@default
over default values (#19966) @eps1lonBig thanks to the 15 contributors who made this release possible.
Here are some highlights ✨:
@material-ui/[email protected]
@material-ui/[email protected]
Big thanks to the 18 contributors who made this release possible.
Here are some highlights ✨:
@material-ui/[email protected]
component
prop (#19790) @stevenmusumeche@material-ui/[email protected]
Big thanks to the 18 contributors who made this release possible.
@material-ui/[email protected]
@material-ui/[email protected]
@material-ui/[email protected]