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 4 contributors who made this release possible.
Here are some highlights ✨:
We take advantage of the latest features of React 16.x.
React is allowing us to return an array of elements in the render method.
We have removed the useless root div
element.
Nothing has changed for people using React 15.x.
Big thanks to the 25 contributors who made this release possible.
Here are some highlights ✨:
The negative margin implementation solution currently used comes with serious limitations.
Material-UI is the only library with a non-zero default spacing between the items.
Having zero spacing by default will ease the usage of the component.
-<Grid />
+<Grid spacing={16} />
For consistency with the removeEventListener Web API and the Snackbar disableWindowBlurListener
property.
<Tooltip
- disableTriggerFocus
- disableTriggerHover
- disableTriggerTouch
+ disableFocusListener
+ disableHoverListener
+ disableTouchListener
/>
I have made a mistake in #8108. The property isn't applied on a FormControl
but on a FormLabel
component.
-<InputLabel FormControlClasses={classes} />
+<InputLabel FormLabelClasses={classes} />
mixins.gutter
signature (argument is optional) (#10814) @sebaldBig thanks to the 19 contributors who made this release possible.
This release comes with important theme upgrades. Here are some highlights ✨:
props
theme key to globally inject properties on components (#10671).N/A
Big thanks to the 13 contributors who made this release possible.
Here are some highlights ✨:
These properties were introduced before classes
.
Exposing a single pattern makes things more predictable and easier to work with.
-<Tabs buttonClassName="foo" indicatorClassName="bar" />
+<Tabs classes={{ scrollButtons: 'foo', indicator: 'bar' }} />
-<TextField labelClassName="foo" helperTextClassName="bar" />
+<TextField InputLabelProps={{ className: 'foo' }} FormHelperTextProps={{ className: 'bar' }} />
The new wording should clarify the purpose of the component.
For instance, it's not about adding JavaScript polyfills.
-<Reboot />
+<CssBaseline />
Big thanks to the 14 contributors who made this release possible.
Here are some highlights ✨:
Remove the fontSize
property. The SvgIcon
behavior is closer to the Icon
behavior.
-<Icon fontSize />
-<SvgIcon fontSize />
+<Icon />
+<SvgIcon />
Now, you can use the font-size
style property to change the size of the icon.
This is an effort in order to harmonize the classes API.
The best way to recover from this breaking change is to check the warnings in the console and to check the added documentation around the design rules around this API.
Big thanks to the 20 contributors who made this release possible.
Here are some highlights ✨:
N/A
SelectDisplayProps
prop (#10408) @noah-potterBig thanks to the 21 contributors who made this release possible.
Here are some highlights ✨:
For consistency between the Input
and the Checkbox
, Switch
, Radio
the following small breaking changes have been done:
The usage of the inputProps
property is no longer needed to apply an id to the input. The id
is applied to the input instead of the root.
-<Checkbox inputProps={{ id: 'id' }} />
+<Checkbox id="id" />
The inputType
property was renamed type
.
-<Checkbox inputType="text" />
+<Checkbox type="text" />
The Material Design specification says that selection controls elements should use the application's secondary color.
-<Checkbox />
-<Switch />
-<Radio />
+<Checkbox color="primary" />
+<Switch color="primary" />
+<Radio color="primary" />
Big thanks to the 16 contributors who made this release possible.
Here are some highlights ✨:
component
property (#10128) @sebald.N/A
Selet
to Select
(#10207) @JustkantBig thanks to the 12 contributors who made this release possible.
Here are some highlights ✨:
type
property to variant
(#10088, #10086, #10084, #10101) @mbrookes.position="sticky"
with the AppBar (#10090) @scottastrophic.These breaking changes aim at providing a systematic solution to the boolean vs enum naming problem.
We have documented our approach to solving the problem in #10023. Basically, we enforce the following rule:
This is what motivated the button breaking change. Unfortunately type
has its own meaning in the HTML specification. You can use it on the following elements: <button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu>
.
We are using a more generic name to avoid the confusion: variant
.
Umbrella pull-request for: #10084, #10086, #10088.
<Button
- raised
+ variant="raised"
<Button
- fab
+ variant="fab"
<Typography
- type="title"
+ variant="title"
<MobileStepper
- type="dots"
+ variant="dots"
<Drawer
- type="persistent"
+ variant="persistent"
<LinearProgress
- mode="determinate"
+ variant="determinate"
<CircularProgress
- mode="determinate"
+ variant="determinate"
<Zoom
in={in}
- enterDelay={transitionDuration.exit}
+ style={{
+ transitionDelay: in ? transitionDuration.exit : 0,
+ }}
position="sticky"
(#10090) @scottastrophicBig thanks to the 14 contributors who made this release possible.
Here are some highlights ✨:
Fun facts:
We have removed the "magic" <Icon>
wrapping logic. It should be done explicitly now.
It's making our components less biased around the svg icon vs font icon choice.
+import Icon from 'material-ui/Icon';
- <IconButton>comment</IconButton>
+ <IconButton>
+ <Icon>comment</Icon>
+ </IconButton>
[theme] Further simplification & standardization (#10015) @mbrookes
theme.palette.background
colors have been removed. The affected components use theme.palette.grey
instead. Shift the values of theme.palette.grey
if you wish to lighten or darken these as a whole; this will maintain the contrast relationship between them. (Paper remains in the theme, as it is used across multiple components.)theme.palette.common.fullBlack
and fullWhite
have been removed. Components that used these values now use theme.palette.common.black
and white
instead.theme.palette.common.transparent
has been removed. Components that used this value now use 'transparent'
directly.theme.palette.grey
. If you have customized the values of grey
, the appearance of Chip in your app may change.[core] Remove the rootRef properties as unneeded (#10025)
-import ReactDOM from 'react-dom';
<IconButton
- rootRef={node => {
- this.button = ReactDOM.findDOMNode(node);
+ buttonRef={node => {
+ this.button = node;
}}
>
-<Button dense>
+<Button size="small">
In order to keep the palette simple to understand, we have removed the types
from the palette object.
The motivation is the following. The theme & palette should only store
the information needed to display one UI context.
Having the types
object in the palette encourage people to rely on it.
No, we want people to do it the other way around.
For instance, instead of doing:
const theme = createMuiTheme({
palette: {
type: 'dark',
types: {
dark: {
background: {
default: '#000',
},
},
light: {
background: {
default: '#fff',
},
},
},
},
});
We would rather see people doing:
const types = {
dark: {
background: {
default: '#000',
},
},
light: {
background: {
default: '#fff',
},
},
};
const theme = createMuiTheme({
palette: {
type: 'dark',
...types.dark,
},
});
Big thanks to the 12 contributors who made this release possible.
Here are some highlights ✨:
-<Button color="contrast" />
+<Button />
Instead, you can use the color="inherit"
property or use the theme.palette.XXX.contrastText
value.
accent
to secondary
. We have removed the accent indirection to be closer to the object people are providing to customize the palette.-<Button color="accent" />
+<Button color="secondary" />
<Tabs
- indicatorColor="accent"
- textColor="accent"
+ indicatorColor="secondary"
+ textColor="secondary"
>
secondary
to textSecondary
. secondary
and textSecondary
are two valid color value.-<Typography color="secondary" />
+<Typography color="textSecondary" />
The secondary color now behaves the same way than the other colors (primary, error). We always use the main
tone by default instead of the light
tone.
It's unclear if this change is making the implementation follow the specification more closely. The direct win is simplicity and predictability.
theme.palette.input
object.theme.palette.text.icon
color.theme.palette.background.contentFrame
, it was only used in the documentation.theme.palette.text.divider
to theme.palette.divider
, it's not a text color.theme.palette.text.lightDivider
, there is no reference to is in the specification, better keep things simple.N/A
Big thanks to the 9 contributors who made this release possible.
We are making a release earlier than expected. The release schedule norm has been so far: one every weekend. 1.0.0-beta.28
has introduced important pain points we want to address quickly:
N/A
Big thanks to the 22 contributors who made this release possible.
Here are some highlights ✨:
It's an important simplification of the palette system. You can now directly use the “official” Color Tool.
light
, main
, dark
and contrastText
.main
value.import { createMuiTheme } from 'material-ui/styles';
import blue from 'material-ui/colors/blue';
import pink from 'material-ui/colors/pink';
const theme = createMuiTheme({
palette: {
- primary: blue,
- secondary: pink,
+ primary: {
+ light: blue[300],
+ main: blue[500],
+ dark: blue[700],
+ },
+ secondary: {
+ light: pink[300],
+ main: pink[500],
+ dark: pink[700],
+ }
type: theme.paletteType,
},
});
<ListItem
classes={{
- text: 'my-class',
+ textPrimary: 'my-class',
}}
/>
Rename ListItemText classes for consistency with the CardHeader component:
-- `textPrimary`
-- `textSecondary`
+- `primary`
+- `secondary`
TableHead
, TableBody
and TableFooter
no longer offer a CSS API, which means their root
classes are no longer available.
To style the root element in these components, a className
prop can be passed, as all non-API props will be spread to the root element.
Big thanks to the 19 contributors who made this release possible.
Here are some highlights ✨:
Remove the rootRef property from the Grow and List component.
Instead, you can use the ref
property in combination with findDOMNode()
or a RootRef helper.
transition
property (#9682) @oliviertassinariRemove the transitionClasses
property of the Popover component. Instead, you can provide a transition component.
-import BottomNavigation, { BottomNavigationButton } from 'material-ui/BottomNavigation';
+import BottomNavigation, { BottomNavigationAction } from 'material-ui/BottomNavigation';
You might be relying on the transitive dependency of Material-UI: jss-preset-default
.
If you do, you need to declare the dependency in your package.json. Material-UI will no longer install it for you.
Alternatively, you can use our preset to save bundle size.
-import preset from 'jss-preset-default';
+import { jssPreset } from 'material-ui/styles';
Big thanks to the 12 contributors who made this release possible.
Here are some highlights ✨:
Reboot
(#9661).Portal
and Modal
components have been revamped to solve the core issues raised by the community (#9613). Those components are now documented.Some properties have been renamed:
<Dialog
- ignoreBackdropClick
- ignoreEscapeKeyUp
+ disableBackdropClick
+ disableEscapeKeyDown
<Modal
- show
- disableBackdrop
- ignoreBackdropClick
- ignoreEscapeKeyUp
- modalManager
+ open
+ hideBackdrop
+ disableBackdropClick
+ disableEscapeKeyDown
+ manager
The zIndex object has been updated to match the usage.
const zIndex = {
- mobileStepper: 900,
- menu: 1000,
+ mobileStepper: 1000,
appBar: 1100,
- drawerOverlay: 1200,
- navDrawer: 1300,
- dialogOverlay: 1400,
- dialog: 1500,
- layer: 2000,
- popover: 2100,
- snackbar: 2900,
- tooltip: 3000,
+ drawer: 1200,
+ modal: 1300,
+ snackbar: 1400,
+ tooltip: 1500,
};
createBreakpoints.down()
is now inclusive of the specified breakpointisWidthDown()
is now inclusive of the specified breakpoint by default<Hidden />
will include the breakpoints associated with its Down properties regardless of whether CSS or JS is used.isMuiElement
and isMuiComponent
as typeguard (#9630) @SSW-SCIENTIFICBig thanks to the 16 contributors who made this release possible.
Here are some highlights ✨:
dangerouslyUseGlobalCSS
option to the class name generator #9558.-c291
+MuiButton-raised
None, merry christmas 🎄.
masterial-ui
to material-ui
(#9544) @GinkoidBig thanks to the 16 contributors who made this release possible.
Here are some highlights ✨:
This change is making the js and css breakpoint utils behaving the same way.
The default parameter of withWidth.isWidthDown(breakpoint, width, inclusive)
changed:
-inclusive = true
+inclusive = false
You might want to update the usage of the API by increasing the breakpoing used on the Hidden component:
-<Hidden implementation="js" mdDown>
+<Hidden implementation="js" lgDown>
Or by going back to the previous behavior:
-isWidthDown(breakpoint, width)
+isWidthDown(breakpoint, width, true)
Most of our components are stateless by default. It wasn't the case with v0.x. Let's translate this default behavior in the property names of v1.
-onRequestClose
-onRequestOpen
-onRequestDelete
+onClose
+onOpen
+onDelete
The existing InputProps
property can be used to set the className on the input element, making inputClassName
redundant. Issue #9508 exposed some conflicting behavior between the two properties and it was decided that removing inputClassName
would result in a cleaner API.
- /**
- * The CSS class name of the `input` element.
- */
- inputClassName: PropTypes.string,
The configuration of the wrapped Input component and its input element should be done through InputProps
. To specify a className on the input element:
<TextField InputProps={{ inputProps: { className: 'foo' } }} />
There is no logic attached to the optional
boolean property. So, we can reduce the abstraction cost. The property is provided closer to where it's needed, and people have full control over how it should be displayed. By chance, it matches the specification.
-<Step optional>
- <StepLabel>
+<Step>
+ <StepLabel optional={<Typography type="caption">Optional Text</Typography>}>
Label
</StepLabel>
</Step>
only
array support in the CSS implementation (#9457) @ChopinskyBig thanks to the 26 contributors who made this release possible.
Here are some highlights ✨:
inputProps | InputClassName
). For advanced configuration any Input
through TextField
, use TextField.InputProps
to pass any property accepted by the Input
.tslint.json
"member-ordering" definition (#9359) @seivanPublished by hai-cea almost 7 years ago
As usual, we are focusing on bug fixes but this time, we introduce an exceptional breaking change,
consistent with the removal of onTouchTap
for onClick
in v0.19.0 (#7624).
Big thanks to the 10 contributors who made this release possible.
TouchTap
in favor of Click
throughout library and docs (#9058) @m2mathewYou need to globally replace any references to TouchTap
property callbacks with Click
.
null
child (#8925) @MrSaintsBig thanks to the 26 contributors who made this release possible.
Here are some highlights ✨:
ExpansionPanel
component with the help of the community. Big thanks to him!mui-org
@hai-cea