Merge pull request #214 from mwq27/master

Adding optional Label to the toggle component.

src/js/toggle.jsx

@@ -6,7 +6,8 @@ var Toggle = React.createClass({
 
  propTypes: {
  onToggle: React.PropTypes.func,
- toggled: React.PropTypes.bool
+ toggled: React.PropTypes.bool,
+ label: React.PropTypes.string
  },
 
  mixins: [Classable],
@@ -23,9 +24,12 @@ var Toggle = React.createClass({
  })
 
  return (
- <div className={classes} onTouchTap={this._handleTouchTap}>
- <div className="mui-toggle-track" />
- <Paper className="mui-toggle-thumb" zDepth={1} />
+ <div className="mui-toggle-wrap">
+ {this.props.label ? <div className="mui-toggle-label" onTouchTap={this._handleTouchTap}>{this.props.label}</div> : ''}
+ <div className={classes} onTouchTap={this._handleTouchTap}>
+ <div className="mui-toggle-track" />
+ <Paper className="mui-toggle-thumb" zDepth={1} />
+ </div>
  </div>
  );
  },

src/less/components/toggle.less

@@ -1,44 +1,53 @@
-.mui-toggle {
- position: relative;
- line-height: 24px;
- width: 36px;
- cursor: pointer;
+.mui-toggle-wrap {
 
- * {
- .ease-out();
+ .mui-toggle-label {
+ display: inline-block;
+ padding-right: 10px;
+ cursor: pointer;
  }
-
- .mui-toggle-track {
- width: 100%;
- height: 14px;
- border-radius: 30px;
- background-color: @toggle-track-off-color;
- }
-
- .mui-toggle-thumb {
- position: absolute;
- top: -3px;
- width: @toggle-size;
- height: @toggle-size;
+ .mui-toggle { 
+ position: relative;
+ display: inline-block;
  line-height: 24px;
- left: 0;
- border-radius: 50%;
- background-color: @toggle-thumb-off-color;
+ width: 36px;
+ cursor: pointer;
 
- .mui-paper-container {
- border-radius: 50%;
+ * {
+ .ease-out();
  }
- }
 
- &.mui-is-toggled {
-
  .mui-toggle-track {
- background-color: @toggle-track-on-color;
+ width: 100%;
+ height: 14px;
+ border-radius: 30px;
+ background-color: @toggle-track-off-color;
  }
 
  .mui-toggle-thumb {
- left: 16px;
- background-color: @toggle-thumb-on-color;
+ position: absolute;
+ top: -3px;
+ width: @toggle-size;
+ height: @toggle-size;
+ line-height: 24px;
+ left: 0;
+ border-radius: 50%;
+ background-color: @toggle-thumb-off-color;
+
+ .mui-paper-container {
+ border-radius: 50%;
+ }
+ }
+
+ &.mui-is-toggled {
+
+ .mui-toggle-track {
+ background-color: @toggle-track-on-color;
+ }
+
+ .mui-toggle-thumb {
+ left: 16px;
+ background-color: @toggle-thumb-on-color;
+ }
  }
  }
 }