Use ClassNames in Snackbar

components/button/style.scss

@@ -130,21 +130,19 @@
 }
 
 .neutral:not([disabled]) {
-  &:not(.inverse) {
-    &.raised, &.floating {
-      color: $button-neutral-color-contrast;
-      background-color: $button-neutral-color;
-    }
-    &.flat, &.toggle {
-      color: $button-neutral-color-contrast;
-      &:focus:not(:active) {
-        background: $button-neutral-color-hover;
-      }
-    }
-    &.flat:hover {
+  &.raised, &.floating {
+    color: $button-neutral-color-contrast;
+    background-color: $button-neutral-color;
+  }
+  &.flat, &.toggle {
+    color: $button-neutral-color-contrast;
+    &:focus:not(:active) {
       background: $button-neutral-color-hover;
     }
   }
+  &.flat:hover {
+    background: $button-neutral-color-hover;
+  }
 
   &.inverse {
     &.raised, &.floating {

components/snackbar/Snackbar.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import ClassNames from 'classnames';
 import Button from '../button';
 import FontIcon from '../font_icon';
 import Overlay from '../overlay';
@@ -25,29 +26,18 @@ class Snackbar extends React.Component {
     }
   }
 
-  renderButton () {
-    if (this.props.action) {
-      return (
-        <Button
-          className={style.button}
-          label={this.props.action}
-          onClick={this.props.onClick}
-        />
-      );
-    }
-  }
-
   render () {
-    let className = `${style.root} ${style[this.props.type]}`;
-    if (this.props.active) className += ` ${style.active}`;
-    if (this.props.className) className += ` ${this.props.className}`;
+    const {action, active, icon, label, onClick, type } = this.props;
+    const className = ClassNames([style.root, style[type]], {
+      [style.active]: active
+    }, this.props.className);
 
     return (
-      <Overlay active={this.props.active} opacity={0}>
+      <Overlay active={active} 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()}
+          {icon ? <FontIcon value={icon} className={style.icon} /> : null}
+          <span className={style.label}>{label}</span>
+          {action ? <Button className={style.button} label={action} onClick={onClick}/> : null}
         </div>
       </Overlay>
     );

components/snackbar/readme.md

@@ -21,7 +21,7 @@ class SnackbarTest extends React.Component {
         <Button label='Show Snackbar' raised onClick={this.handleClick} />
         <Snackbar
           action='Nice'
-          icon='question-answer'
+          icon='question_answer'
           label='A new developer started using React Toolbox'
           onClick={this.handleSnackbarClick}
           ref='snackbar'

docs/app/components/layout/main/modules/examples/snackbar_example_1.txt

@@ -24,7 +24,7 @@ class SnackbarTest extends React.Component {
         <Snackbar
           action='Dismiss'
           active={this.state.active}
-          icon='question-answer'
+          icon='question_answer'
           label='Snackbar action cancel'
           timeout={2000}
           onClick={this.handleSnackbarClick}

spec/components/snackbar.jsx

@@ -28,7 +28,7 @@ class SnackbarTest extends React.Component {
         <Snackbar
           action='Hide'
           active={this.state.active}
-          icon='question-answer'
+          icon='question_answer'
           label='Snackbar action cancel'
           timeout={2000}
           onClick={this.handleSnackbarClick}