Now <Snackbar> uses internal component <overlay> (using its new property opacity)

components/snackbar/index.jsx

@@ -1,16 +1,19 @@
 import React from 'react';
-import style from './style';
 import Button from '../button';
 import FontIcon from '../font_icon';
+import Overlay from '../overlay';
+import style from './style';
 
 class Snackbar extends React.Component {
   static propTypes = {
     action: React.PropTypes.string,
+    active: React.PropTypes.bool,
     className: React.PropTypes.string,
     icon: React.PropTypes.string,
     label: React.PropTypes.string.isRequired,
     onClick: React.PropTypes.func,
     onTimeout: React.PropTypes.func,
+    onOverlayClick: React.PropTypes.func,
     timeout: React.PropTypes.number,
     type: React.PropTypes.string
   };
@@ -42,11 +45,13 @@ class Snackbar extends React.Component {
     if (this.props.className) className += ` ${this.props.className}`;
 
     return (
-      <div data-react-toolbox='snackbar' className={className}>
-        { this.props.icon ? <FontIcon value={this.props.icon} className={style.icon} /> : null }
-        <span className={style.label}>{this.props.label}</span>
-        { this.renderButton() }
-      </div>
+      <Overlay active={this.props.active} onClick={this.props.onOverlayClick} opacity={0}>
+        <div data-react-toolbox='snackbar' className={className}>
+          { this.props.icon ? <FontIcon value={this.props.icon} className={style.icon} /> : null }
+          <span className={style.label}>{this.props.label}</span>
+          { this.renderButton() }
+        </div>
+      </Overlay>
     );
   }
 }

components/snackbar/readme.md

@@ -38,10 +38,12 @@ class SnackbarTest extends React.Component {
 | Name          | Type    | Default   | Description|
 |:-----|:-----|:-----|:-----|
 | `action`  | `String` |   | Label for the action component inside the Snackbar.|
+| `active`        | `Boolean`       |  `false`        | If true, the snackbar will be active.|
 | `className` | `String`  | `''`      | Additional class name to provide custom styling.|
 | `icon` | `String`  |       | String key for an icon displayed in left side of the snackbar.|
 | `label` | `String`  |       | Text to display in the content.|
 | `onClick` | `Function`  |       | Callback function that will be called when the button action is clicked.|
+| `onOverlayClick`   | `Function`   |             | Callback to be invoked when the dialog overlay is clicked.|
 | `onTimeout` | `Function`  |       | Callback function when finish the set timeout.|
 | `timeout` | `Number`  |       | Amount of time after the Snackbar will be automatically hidden.|
 | `type` | `String`  |       | Indicates the action type. Can be `accept`, `warning` or `cancel`|