v1.0.1

This release is just some minor bugfixes.

Changelog

• Fixed proptypes of avatar to allow PropTypes.node instead of string only (#198).
• Fixed the accidental form submission if selecting an item from an autocomplete by using the enter key press in a form (#194).
• Fixed Slider number validation for floats (#184).
• Fixed the issue where the Switch's onChange prop fires twice when clicking/touching the thumb (#182).
• Fixed the styling issue for password text fields that have a message with the field (#192).
• Fixed the SelectField to allow a 0 based option value (#214).
• Updated the grid so that md-grid--no-spacing no longer affects md-cell--right. Pull 190

v1.0.0

TL;DR

• Opt-in mixin based component styles (or just @include react-md-everything)
• BEM styles. Well, my first ever attempt using them :/
• Dark theme available.
• Grid system implemented.
• Removed PureRenderMixin dependency.
• Switched project's scope to be more accessibility based.
• Components somewhat backwards compatible with deprecation warnings and hints.

If you were one of the few people using my library beforehand, you can view the upgrade guide to help with the migration.

Styles

I ended up doing a major re-haul of the styles to be mixin based (like Foundation). I consider this approach a lot nicer because it allows a single entry point for all helpers, utilities, variables, etc for the react-md framework. Before this release, the following code:

@import '~react-md/src/scss/react-md';

// Or even
@import '~react-md/src/scss/components/buttons';

would actually generate all the styles. In this release, importing any SCSS files will not generate any styles without calling a related mixin.

@import '~react-md/src/scss/react-md';

@include react-md-everything;

// Or a single component
@include react-md-buttons;

This is really helpful if your application will not be using the entire React-MD framework.

BEM Naming

In this release, I changed up the styling of components to follow the BEM naming convention. It isn't exactly 100% since it is my first attempt using this convention. The main reason for this change is that the styles were becoming ridiculously hard to override. By switching to BEM, I was able to update most styles to be updatable just by order of declaration or a single level of prominence.

To show what I mean, here is a comparison of how Lists are defined in v0.3.x vs v1.0.0

/* v0.3.7 */
.md-list-item {
  &.primary-action,
  &.secondary-action {
    padding-left: $md-default-padding;
    padding-right: $md-default-padding;

    .md-control-container {
      height: inherit;
    }

    .md-switch-container {
      margin-left: auto;
    }
  }

  &.primary-action {
    padding-left: 0;
  }

  &.secondary-action {
    padding-right: 0;

    .md-control-container {
      margin-left: auto;
    }
  }
}

vs

.md-list-control {
  flex-grow: 1;

  .md-selection-control-label {
    width: 100%;
  }
}

.md-tile-content--left-button {
  padding-left: $md-list-left-padding - $md-font-icon-size * 2;
}

.md-list-control--right {
  justify-content: flex-end;
}

.md-list-tile--control-left {
  padding-left: 0;
}

.md-list-tile--control-right {
  padding-right: 0;
}

I also managed to reduce the production bundle size from 73012 to 72324 bytes! Look at that amazing difference! (To be fair, more components and a grid system were also implemented)

Grid System

A simple flex grid system was implemented in this release as well. The grid has 4 columns on mobile devices, 8 columns on tablets, and 12 columns on desktops by default. For more information and examples, see the documentation website about the grids.

Accessibility Changes

With this release, I decided to focus more on accessibility concerns for users that have screen readers or only use keyboards for navigation. Many components will now display errors when accessibility concerns are not met and require additional props. It will basically mean more and more unique ids for components.. kind of a hassle.

Avatars

The avatar random colors have now been selected to pass the WebAIM Color Contrast Checker by default.

Navigation Drawers

The navigation drawer component now has a JumpToContentLink that will appear as the first tab-able element on the page. If the keyboard user selects this link, the main content of the page will be focused to skip all the navigation items.

AccessibleFakeButton and AccessibleFakeInkedButton

There are some times where you really need a component that is not a button to interact as a button. To make sure that accessibility concerns are still met, an accessibility component has been created to handle the keyboard interactions and update aria- attributes.

Components

There are a bit too many changes to components to note, but here is a highlight:

• Sidebar deprecated and replaced with a better Drawer component.
• FlatButton, RaisedButton, FloatingButton, and IconButton were deprecated to be replaced with just a Button component.
• Updated EditDialogColumn's interaction to be a lot smoother. The dialog can also now extend past the Data Table's scroll zones.
• Added a SelectFieldColumn to allow smoother interactions with a SelectField in a Data Table.
• Lots of bugfixes for Sliders. They pretty neat now.
• Lots of changes to Toolbars.
• Lots of changes to Tabs. Removed my terrible implementation of swipeable views and used react-swipable-views instead.
• Added SelectionControl and SelectionControlGroup to render the Checkbox, Radio, or Switch components.

Otherwise, there were just a lot of bugfixes to existing components and updating them to work with BEM.

What's Next?

I plan on eventually implementing the Bottom sheets and Stepper components. I also plan on fixing and updating my current implementation of the SpeedDial. It really seemed like too much of a hassle for the time being so it was omitted.

Attempting to navigation through the Date and Time pickers with a keyboard is absolutely horrendous. I plan on figuring out how to implement a real in-line picker for date and time. I think they will be more like select fields.

I would also really like to be able to disable the ink's focus effect when the primary navigation is not a keyboard. It is really distracting when using a touch device or primarily using the mouse to navigate the page and ink keeps popping up on the current focused element.

Otherwise, my goal is to keep up to date with the material design guidelines and update more sass variables to be !default so that they are more configurable.

v1.0.0-beta

This release fixed up a couple more bugs (listed below) and now the main focus will be figuring out if there are any production-breaking bugs remaining.

• Fixed the Avatar colors changing #161
• Updated EditDialogColumn to interact correctly with keyboard focus and touch devices
• Fixed the Dialog to remove the prevent scroll className when unmounting
• Updated the Drawer.getCurrentMedia function to use the Drawer.defaultProps as the default value of the props parameter.
• Updated the Drawer to allow for a persistent temporary Drawer on desktop devices.
• Fixed the AccessibleFakeButton to no longer use the space key as an enter keypress.
• Fixed a weird warning on inks if the waitForInkTransition prop was enabled and the click event eventually
  unmounted the inked component.
• Updated the Menu to correctly remove the window click event on unmount.
• Added correct deprecation notices to the SelectField and fixed the keyboard accessibility when using a SelectField.Positions.BELOW position.
• Fixed the duplication of the md-background--primary-hover and md-background--secondary-hover.
• Fixed the duplication of md-background--primary-hover and renamed the second one to md-background--secondary-hover.
• Minor CSS Fixes

v1.0.0.alpha.4

The main focus of this release was adding a JumpToContent link for the NavigationDrawer for keyboard accessibility. When you use the NavigationDrawer (or specifically use the JumpToContentLink component), the first tab press on the page will show a link that will allow a user to focus the main content of the page instead of having to go through every navigation item.

Some bugfixes were:

• Fixed some color variables that I had mistyped/miscopied...
• Fixed the spelling of discreet -> discrete
• Fixed the Sliders when using touch devices. #144
• Fixed the YearPicker after the name change from initialYearsDisplayed to yearsDisplayed. #165
• Added onTabFocus and tabbedClassName to the AccessibleFakeButton. #160

v1.0.0.alpha.3

This release was focused on having a more consistent naming convention. Boolean props are now adjective instead of isAdjective and any prop that was initiallyProp was renamed defaultProp to match how React handles the base html tag defaults. So for example:

isVisible -> visible
initiallyVisible -> defaultVisible

The SelectField was also updated to no longer use the TextField component internally and behave more like the <select> html tag #144 .

This also included some small bugfixes as well as updating the Portal component to stop using the undocumented CSSPropertyOperations since it crashed in React 15.4.0.

v1.0.0.alpha.2

Fixed the UMD build so that the default was not needed from the browser for ReactMD.COMPONENT.

v1.0.0.alpha.1

I found out I messed up the naming with a . instead of - so the future releases are messed up. Whoops. But this change basically added the old v0.3.7 styles back into the dist folder for UMD.

v1.0.0-alpha

Whew. This was a big change. This was a complete rewrite from nested CSS priority to using my first attempt at BEM (so it definitely isn't perfect). The SASS also changed to an opt-in mixin framework.

Styles will no longer be included when importing the scss files. The styles can be created by using react-md-everything or react-md-COMPONENTs. This allows for access to variables by one import instead of having to specify multiple.

Some other under-the-hood changes are that as many components as possible use the PureComponent instead of the PureRenderMixin with a Component. This release also changed my goals from this project. This project's goal is now to be a completely accessible React/Sass UI framework for material design.

Finally, a material design Grid System was created so positioning is even easier than before.