Merge branch 'master' into dev

* master:
  Remove opacity prop from Overlay and add invisible. Fixes #183, #178
  0.13.4 release

components/_globals.scss

@@ -3,8 +3,6 @@ $color-divider: $palette-grey-200 !default;
 $color-background: $color-white !default;
 $color-text: $palette-grey-900 !default;
 $color-text-secondary: $palette-grey-600 !default;
-$color-overlay: $color-black !default;
-$color-overlay-opacity: 0.5 !default;
 
 $color-primary: $palette-indigo-500 !default;
 $color-primary-dark: $palette-indigo-700 !default;

components/drawer/_config.scss

@@ -1,5 +1,4 @@
 $drawer-background-color: $palette-grey-50 !default;
 $drawer-border-color: $palette-grey-300 !default;
-$drawer-overlay-color: $color-overlay;
 $drawer-text-color: $palette-grey-800 !default;
 $drawer-width: 24 * $unit;

components/overlay/Overlay.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import ClassNames from 'classnames';
 import style from './style';
 
 class Overlay extends React.Component {
@@ -7,12 +8,12 @@ class Overlay extends React.Component {
     active: React.PropTypes.bool,
     children: React.PropTypes.node,
     className: React.PropTypes.string,
-    onClick: React.PropTypes.func,
-    opacity: React.PropTypes.number
+    invisible: React.PropTypes.bool,
+    onClick: React.PropTypes.func
   };
 
   static defaultProps = {
-    opacity: 0.5
+    invisible: false
   };
 
   componentDidMount () {
@@ -33,22 +34,14 @@ class Overlay extends React.Component {
   }
 
   handleRender () {
-    let className = style.root;
-    const overlayStyle = {};
-
-    if (this.props.active) {
-      className += ` ${style.active}`;
-      overlayStyle.opacity = this.props.opacity;
-    }
-    if (this.props.className) className += ` ${className}`;
+    const className = ClassNames(style.root, {
+      [style.active]: this.props.active,
+      [style.invisible]: this.props.invisible
+    }, this.props.className);
 
     ReactDOM.render(
       <div className={className}>
-        <div
-          className={style.overlay}
-          onClick={this.props.onClick}
-          style={overlayStyle}
-        />
+        <div className={style.overlay} onClick={this.props.onClick} />
         {this.props.children}
       </div>
     , this.node);

components/overlay/_config.scss

@@ -1 +1,2 @@
 $overlay-color: $color-black !default;
+$overlay-opacity: .6 !default;

components/overlay/style.scss

@@ -14,6 +14,9 @@
   align-items: center;
   justify-content: center;
   pointer-events: none;
+  &.invisible > *:not(.overlay) {
+    pointer-events: all;
+  }
 }
 
 .overlay {
@@ -31,4 +34,7 @@
 
 .active {
   pointer-events: all;
+  > .overlay {
+    opacity: $overlay-opacity;
+  }
 }

components/snackbar/Snackbar.jsx

@@ -33,7 +33,7 @@ class Snackbar extends React.Component {
     }, this.props.className);
 
     return (
-      <Overlay active={active} opacity={0}>
+      <Overlay invisible>
         <div data-react-toolbox='snackbar' className={className}>
           {icon ? <FontIcon value={icon} className={style.icon} /> : null}
           <span className={style.label}>{label}</span>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-toolbox",
-  "version": "0.13.3",
+  "version": "0.13.4",
   "homepage": "http://www.react-toolbox.com",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",