yarn material-ui 1.0.0-beta.24
on Node.js Yarn

latest releases: 0.20.2, 0.20.1, 1.0.0-beta.47...
6 years ago
Dec 17, 2017

Big thanks to the 16 contributors who made this release possible.

Here are some highlights ✨:

  • We have removed Flow from the core components in (#9453).
    You can learn more about the motivations in the pull-request.
    This changes two important things:
    • We have reduced the size of the bundle by ~8 kB gzipped.
    • The propTypes runtime checks are back. You might experience new warnings.
  • We have introduced 4 breaking changes.
  • You can support me on Patreon and the community on OpenCollective (#9460).
    Blog posts are coming.
  • And many more bug fixes and documentation improvements.

Breaking change

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>

Component Fixes / Enhancements

Docs

Core

Check out latest releases or
releases around material-ui 1.0.0-beta.24

Don't miss a new material-ui release

NewReleases is sending notifications on new releases.

Get notifications