Skip to content

v1.0.0
Compare
Choose a tag to compare
@mlaursen mlaursen released this 15 Dec 05:04
· 4055 commits to main since this release
v1.0.0
d6a4b8e

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.

Assets 2
Loading