Better variables and props for button

components/button/_config.scss

@@ -1,15 +1,20 @@
+$button-accent-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
+$button-accent-color-hover: unquote("rgba(#{$color-accent}, 0.20)") !default;
+$button-accent-color: unquote("rgb(#{$color-accent})") !default;
+$button-border-radius: 0.2 * $unit;
 $button-default-text-color: unquote("rgb(#{$color-black})") !default;
-$button-flat-color-hover: unquote("rgba(#{$color-black}, 0.26)") !default;
 $button-disabled-text-color: unquote("rgba(#{$color-black}, 0.26)") !default;
-$button-solid-background-color: unquote("rgba(#{$palette-grey-500}, 0.20)") !default;
-$button-solid-disabled-background-color: unquote("rgba(#{$color-black}, 0.12)") !default;
-$button-primary-color: unquote("rgb(#{$color-primary})") !default;
+$button-flat-color-hover: unquote("rgba(#{$color-black}, 0.26)") !default;
+$button-floating-font-size: $unit * 2.4;
+$button-floating-height-mini: $unit * 4;
+$button-floating-mini-font-size: $button-floating-height-mini / 2.25;
+$button-floating-height: $unit * 5.6;
+$button-height: $unit * 3.6;
 $button-primary-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
 $button-primary-color-hover: unquote("rgba(#{$color-primary}, 0.20)") !default;
-$button-accent-color: unquote("rgb(#{$color-accent})") !default;
-$button-accent-color-hover: unquote("rgba(#{$color-accent}, 0.20)") !default;
-$button-accent-color-active: unquote("rgba(#{$color-accent}, 0.40)") !default;
-$button-accent-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
-$button-height: $unit * 3.6;
-$button-floating-height: $unit * 5.6;
-$button-floating-height-mini: $unit * 4;
+$button-primary-color: unquote("rgb(#{$color-primary})") !default;
+$button-solid-background-color: unquote("rgba(#{$palette-grey-500}, 0.20)") !default;
+$button-solid-disabled-background-color: unquote("rgba(#{$color-black}, 0.12)") !default;
+$button-squared-icon-margin: $unit * .6;
+$button-squared-min-width: 9 * $unit;
+$button-squared-padding: 0 $unit * 1.2;

components/button/index.jsx

@@ -5,63 +5,63 @@ import Ripple from '../ripple';
 import style from './style.scss';
 import events from '../utils/events';
 
-export default React.createClass({
+const Button = React.createClass({
   mixins: [PureRenderMixin],
 
-  displayName: 'Button',
-
   propTypes: {
+    accent: React.PropTypes.bool,
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     icon: React.PropTypes.string,
-    primary: React.PropTypes.bool,
-    accent: React.PropTypes.bool,
+    kind: React.PropTypes.string,
     label: React.PropTypes.string,
     loading: React.PropTypes.bool,
+    mini: React.PropTypes.bool,
+    primary: React.PropTypes.bool,
     ripple: React.PropTypes.bool,
     type: React.PropTypes.string
   },
 
   getDefaultProps () {
     return {
+      accent: false,
       className: '',
-      ripple: true,
-      type: 'flat'
+      kind: 'flat',
+      loading: false,
+      mini: false,
+      primary: false,
+      ripple: true
     };
   },
 
-  getInitialState () {
-    return { loading: this.props.loading };
-  },
-
   handleMouseDown (event) {
     events.pauseEvent(event);
     this.refs.ripple.start(event);
   },
 
   render () {
-    let className = style[this.props.type];
+    let className = style[this.props.kind];
+    if (!this.props.primary && !this.props.accent) className += ` ${style.primary}`;
     if (this.props.className) className += ` ${this.props.className}`;
+    if (this.props.primary) className += ` ${style.primary}`;
+    if (this.props.accent) className += ` ${style.accent}`;
+    if (this.props.mini) className += ` ${style.mini}`;
 
     return (
       <button
-        data-react-toolbox='button'
         {...this.props}
-        type=''
         label=''
-        data-toolbox='button'
         className={className}
-        disabled={this.props.disabled || this.state.loading}
+        data-react-toolbox='button'
         onMouseDown={this.handleMouseDown}
+        disabled={this.props.disabled || this.props.loading}
       >
         { this.props.ripple ? <Ripple ref='ripple' loading={this.props.loading}/> : null }
         { this.props.icon ? <FontIcon className={style.icon} value={this.props.icon}/> : null }
         { this.props.label ? <abbr className={style.label}>{this.props.label}</abbr> : null }
       </button>
     );
-  },
-
-  loading (value) {
-    this.setState({loading: value});
   }
 });
+
+export default Button;

components/button/style.scss

@@ -3,10 +3,10 @@
 
 %button {
   position: relative;
-  z-index: 1;
   display: inline-block;
   height: $button-height;
   flex-direction: row;
+  align-items: center;
   overflow: hidden;
   color: $button-default-text-color;
   text-align: center;
@@ -16,24 +16,21 @@
   border: 0;
   outline: none;
   transition: box-shadow .2s $animation-curve-fast-out-linear-in,
-                background-color .2s $animation-curve-default,
-                color .2s $animation-curve-default;
+              background-color .2s $animation-curve-default,
+              color .2s $animation-curve-default;
   align-content: center;
-  align-items: center;
   justify-content: center;
-
   &::-moz-focus-inner {
     border: 0;
   }
 }
 
 %squared {
-  min-width: 9 * $unit;
-  padding: 0 $unit * 1.2;
-  border-radius: $border-radius;
-
+  min-width: $button-squared-min-width;
+  padding: $button-squared-padding;
+  border-radius: $button-border-radius;
   .icon {
-    margin-right: $unit * .6;
+    margin-right: $button-squared-icon-margin;
     font-size: 120%;
     vertical-align: middle;
   }
@@ -45,7 +42,6 @@
   cursor: auto;
 }
 
-//-- Local styles
 .label {
   @include typo-button();
   line-height: $button-height;
@@ -55,15 +51,12 @@
   @extend %button;
   @extend %squared;
   background: transparent;
-
   &:hover {
     background: $button-flat-color-hover;
   }
-
   &:focus:not(:active) {
     background: $button-flat-color-hover;
   }
-
   &[disabled] {
     @extend %disabled;
   }
@@ -74,15 +67,12 @@
   @extend %squared;
   @include shadow-2dp();
   background: $button-solid-background-color;
-
   &:active {
     @include shadow-4dp();
   }
-
   &:focus:not(:active) {
     @include focus-shadow();
   }
-
   &[disabled] {
     @extend %disabled;
     @include shadow-2dp();
@@ -94,76 +84,64 @@
   @extend %button;
   width: $button-floating-height;
   height: $button-floating-height;
-  font-size: $unit * 2.4;
+  font-size: $button-floating-font-size;
   background: $button-solid-background-color;
   border-radius: 50%;
-  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
-
+  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12),
+              0 1px 1px 0 rgba(0, 0, 0, .24);
   &:active {
     @include shadow-4dp();
   }
-
   &:focus:not(:active) {
     @include focus-shadow();
   }
-
   &[disabled] {
     @extend %disabled;
     @include shadow-2dp();
     background-color: $button-solid-disabled-background-color;
   }
-
   .icon {
     line-height: $button-floating-height;
   }
 }
 
-:global(.primary):not([disabled]) {
+.primary:not([disabled]) {
   &.raised, &.floating {
     color: $button-primary-color-contrast;
     background: $button-primary-color;
   }
-
   &.flat {
     color: $button-primary-color;
-
     &:hover {
       background: $button-primary-color-hover;
     }
-
     &:focus:not(:active) {
       background: $button-primary-color-hover;
     }
   }
 }
 
-:global(.accent):not([disabled]) {
+.accent:not([disabled]) {
   &.raised, &.floating {
     color: $button-accent-color-contrast;
     background-color: $button-accent-color;
   }
-
   &.flat {
     color: $button-accent-color;
-
     &:hover {
       background: $button-accent-color-hover;
     }
-
     &:focus:not(:active) {
       background: $button-accent-color-hover;
     }
   }
 }
 
-:global(.mini) {
-  &.floating {
-    width: $button-floating-height-mini;
-    height: $button-floating-height-mini;
-    font-size: ($button-floating-height-mini / 2.25);
-
-    .icon {
-      line-height: $button-floating-height-mini;
-    }
+.mini.floating {
+  width: $button-floating-height-mini;
+  height: $button-floating-height-mini;
+  font-size: $button-floating-mini-font-size;
+  .icon {
+    line-height: $button-floating-height-mini;
   }
 }

components/snackbar/index.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import style from './style';
-
 import Button from '../button';
 import FontIcon from '../font_icon';
 
@@ -33,9 +32,9 @@ export default React.createClass({
     if (this.props.action) {
       return (
         <Button
-          label={this.props.action}
-          type='flat'
+          kind='flat'
           className={style.button}
+          label={this.props.action}
           onClick={this.handleClick}
         />
       );
@@ -69,5 +68,4 @@ export default React.createClass({
       }, this.props.timeout * 1000);
     }
   }
-
 });

spec/components/button.jsx

@@ -9,14 +9,14 @@ export default React.createClass({
       <section>
         <h5>Buttons</h5>
         <p>lorem ipsum...</p>
-        <Button type="raised" className="primary" label="Bookmark" icon="bookmark" />
-        <Button type="flat" className="accent" label="Inbox" icon="inbox" />
-        <Button type="floating" className="primary" icon="add" />
-        <Button type="floating" className="primary" disabled icon="add" />
-        <Button type="floating" className="accent mini" icon="add" />
-        <Button type="flat" className="primary" icon="add" label="Add this" />
-        <Button type="raised" className="primary" label="Bookmark" icon="bookmark" loading />
-        <Button type="flat" disabled className="" icon="add" label="Add this" />
+        <Button kind="raised" primary label="Bookmark" icon="bookmark" />
+        <Button kind="flat" accent label="Inbox" icon="inbox" />
+        <Button kind="floating" primary icon="add" />
+        <Button kind="floating" primary disabled icon="add" />
+        <Button kind="floating" accent mini icon="add" />
+        <Button kind="flat" primary icon="add" label="Add this" />
+        <Button kind="raised" primary label="Bookmark" icon="bookmark" loading />
+        <Button kind="flat" disabled icon="add" label="Add this" />
       </section>
     );
   }

spec/components/dialog.jsx

@@ -27,7 +27,7 @@ export default React.createClass({
       <section>
         <h5>Dialog</h5>
         <p>lorem ipsum...</p>
-        <Button type='raised' label='Show Dialog' onClick={this.onShow} />
+        <Button kind='raised' label='Show Dialog' onClick={this.onShow} />
         <Dialog ref='dialog' type='small' title={this.state.title} actions={this.state.actions}>
           <p>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</p>
         </Dialog>

spec/components/drawer.jsx

@@ -26,8 +26,8 @@ export default React.createClass({
         </Drawer>
 
         <nav>
-          <Button className='accent' label='Drawer left hideable' type='raised' onClick={this.onClick.bind(null, 'left', 'show')} />
-          <Button className='primary' label='Drawer right' type='raised' onClick={this.onClick.bind(null, 'right', 'show')} />
+          <Button accent label='Drawer left hideable' kind='raised' onClick={this.onClick.bind(null, 'left', 'show')} />
+          <Button primary label='Drawer right' kind='raised' onClick={this.onClick.bind(null, 'right', 'show')} />
         </nav>
       </section>
     );

spec/components/snackbar.jsx

@@ -19,7 +19,7 @@ export default React.createClass({
       <section>
         <h5>Snackbars & Toasts</h5>
         <p>lorem ipsum...</p>
-        <Button label='Show snackbar' onClick={this.handleSnackbar} type='raised' />
+        <Button label='Show snackbar' kind='raised' onClick={this.handleSnackbar} />
         <Snackbar
           ref='snackbar'
           action='Dismiss'