From 9fe50adb64b9cf8254728d0ed888772f7ba6e516 Mon Sep 17 00:00:00 2001
From: "Woodson, Marques" <marques.woodson@gmail.com>
Date: Thu, 8 Jan 2015 13:32:40 -0600
Subject: [PATCH 1/4] Updated the Toggle component.

---
 src/js/toggle.jsx               |  9 +++--
 src/less/components/toggle.less | 71 +++++++++++++++++++--------------
 2 files changed, 46 insertions(+), 34 deletions(-)

diff --git a/src/js/toggle.jsx b/src/js/toggle.jsx
index ffc1f56980047d..ac6020b18594a8 100644
--- a/src/js/toggle.jsx
+++ b/src/js/toggle.jsx
@@ -23,9 +23,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">
+        <div className="mui-toggle-label">{this.props.label}</div>
+        <div className={classes} onTouchTap={this._handleTouchTap}>
+          <div className="mui-toggle-track" />
+          <Paper className="mui-toggle-thumb" zDepth={1} />
+        </div>
       </div>
     );
   },
diff --git a/src/less/components/toggle.less b/src/less/components/toggle.less
index e9c97f8a4a4622..e4f08b90b81a14 100644
--- a/src/less/components/toggle.less
+++ b/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;
+    font-style: italic;
+    padding-right: 10px;
   }
-
-  .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;
+      }
     }
   }
 }
\ No newline at end of file

From 5af9996416dec7824f59486f019f6c654ca07a2f Mon Sep 17 00:00:00 2001
From: "Woodson, Marques" <marques.woodson@gmail.com>
Date: Thu, 8 Jan 2015 13:41:17 -0600
Subject: [PATCH 2/4] Adding conditional for label on toggle.

---
 src/js/toggle.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/js/toggle.jsx b/src/js/toggle.jsx
index ac6020b18594a8..06e91fa9f7c5e3 100644
--- a/src/js/toggle.jsx
+++ b/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],
@@ -24,7 +25,7 @@ var Toggle = React.createClass({
 
     return (
       <div className="mui-toggle-wrap">
-        <div className="mui-toggle-label">{this.props.label}</div>
+        {this.props.label ? <div className="mui-toggle-label">{this.props.label}</div> : ''}
         <div className={classes} onTouchTap={this._handleTouchTap}>
           <div className="mui-toggle-track" />
           <Paper className="mui-toggle-thumb" zDepth={1} />

From 5d2dd887440e9b56bdbd422f1ece41e6a0e503da Mon Sep 17 00:00:00 2001
From: "Woodson, Marques" <marques.woodson@gmail.com>
Date: Fri, 9 Jan 2015 16:34:22 -0600
Subject: [PATCH 3/4] Adding click/tap event to the label to make it act more
 like a native <label>.

---
 src/js/toggle.jsx               | 2 +-
 src/less/components/toggle.less | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/js/toggle.jsx b/src/js/toggle.jsx
index 06e91fa9f7c5e3..fa0d143bddf207 100644
--- a/src/js/toggle.jsx
+++ b/src/js/toggle.jsx
@@ -25,7 +25,7 @@ var Toggle = React.createClass({
 
     return (
       <div className="mui-toggle-wrap">
-        {this.props.label ? <div className="mui-toggle-label">{this.props.label}</div> : ''}
+        {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} />
diff --git a/src/less/components/toggle.less b/src/less/components/toggle.less
index e4f08b90b81a14..a29b90a1a87ee3 100644
--- a/src/less/components/toggle.less
+++ b/src/less/components/toggle.less
@@ -4,6 +4,7 @@
     display: inline-block;
     font-style: italic;
     padding-right: 10px;
+    cursor: pointer;
   }
   .mui-toggle { 
     position: relative;

From 2402e401098f20ba929598da534cf28ca8fef69c Mon Sep 17 00:00:00 2001
From: "Woodson, Marques" <marques.woodson@gmail.com>
Date: Sun, 11 Jan 2015 15:46:09 -0600
Subject: [PATCH 4/4] Removing the italic font style on the label.

---
 src/less/components/toggle.less | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/less/components/toggle.less b/src/less/components/toggle.less
index a29b90a1a87ee3..0b7fe7487c76f9 100644
--- a/src/less/components/toggle.less
+++ b/src/less/components/toggle.less
@@ -2,7 +2,6 @@
 
   .mui-toggle-label {
     display: inline-block;
-    font-style: italic;
     padding-right: 10px;
     cursor: pointer;
   }