Merge pull request #216 from M03M/checkbox-label

Add label prop checkbox - Fixes #149
mui · Jan 8, 2015 · 18558fd · 18558fd
2 parents d555e76 + f806937
commit 18558fd
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 50 deletions.
diff --git a/docs/src/app/components/pages/components/switches.jsx b/docs/src/app/components/pages/components/switches.jsx
@@ -17,10 +17,12 @@ var SwitchesPage = React.createClass({
       '  value="checkboxValue1" />\n' +
       '<Checkbox\n' +
       '  name="checkboxName2"\n' +
-      '  value="checkboxValue2" />\n' +
+      '  value="checkboxValue2"\n' +
+      '  label="went for a run today" />\n' +
       '<Checkbox\n' +
       '  name="checkboxName3"\n' +
       '  value="checkboxValue3"\n' + 
+      '  label="fed the dog"\n' +
       '  checked={true} />\n\n' +
       '//Radio Buttons\n' +
       '<RadioButton\n' +
@@ -58,6 +60,12 @@ var SwitchesPage = React.createClass({
             header: 'required',
             desc: 'The value of our checkbox component.'
           },
+          {
+            name: 'label',
+            type: 'string',
+            header: 'optional',
+            desc: 'The text that is displayed to the right of the checkbox.'
+          },
           {
             name: 'checked',
             type: 'boolean',
@@ -85,7 +93,7 @@ var SwitchesPage = React.createClass({
             name: 'label',
             type: 'string',
             header: 'optional',
-            desc: 'The text that is displayed next to the right of the radio button.'
+            desc: 'The text that is displayed to the right of the radio button.'
           },
           {
             name: 'defaultChecked',
@@ -152,13 +160,15 @@ var SwitchesPage = React.createClass({
         <div className="switches-example-container">
           <Checkbox
             name="checkboxName2"
-            value="checkboxValue2" 
+            value="checkboxValue2"
+            label="went for a run today"
             onClick={this._onCheck} />
         </div>
-       <div className="switches-example-container">
+        <div className="switches-example-container">
           <Checkbox
             name="checkboxName3"
             value="checkboxValue3"
+            label="fed the dog"
             checked={true}
             onClick={this._onCheck} />
         </div>

diff --git a/docs/src/less/pages/components/switches.less b/docs/src/less/pages/components/switches.less
@@ -9,6 +9,7 @@
   .switches-example-group {
     float: left;
     width: 100%;
+    padding: 0 50px;
   }
 
   @media @device-medium {

diff --git a/src/js/checkbox.jsx b/src/js/checkbox.jsx
@@ -4,11 +4,12 @@ var React = require('react'),
 var Checkbox = React.createClass({
 
   propTypes: {
-    checked: React.PropTypes.bool,
+    label: React.PropTypes.string,
     name: React.PropTypes.string.isRequired,
+    onClick: React.PropTypes.func,
     onCheck: React.PropTypes.func,
     value: React.PropTypes.string.isRequired,
-    onClick: React.PropTypes.func
+    checked: React.PropTypes.bool
   },
 
   mixins: [Classable],
@@ -30,20 +31,31 @@ var Checkbox = React.createClass({
   },
 
   render: function() {
-    var classes = this.getClasses('mui-checkbox', {
+
+    var classes = this.getClasses('mui-checkbox');
+
+    var componentclasses = React.addons.classSet({
+      'mui-checkbox-component': true,
       'mui-checked': this.state.checked === true
-    })
+    });
 
     return (
-      <div className={classes} onClick={this._onCheck}>
-        <input ref="checkbox" type="checkbox" name={this.props.name} value={this.props.value} />
-        <span className="mui-checkbox-box" />
-        <span className="mui-checkbox-check" />
+      <div className={classes}>
+        <div className={componentclasses} onClick={this._onClick}> 
+          <input 
+            ref="checkbox" 
+            type="checkbox"
+            name={this.props.name} 
+            value={this.props.value} />
+          <span className="mui-checkbox-box" />
+          <span className="mui-checkbox-check" />
+        </div>
+        <span className="mui-checkbox-label">{this.props.label}</span>
       </div>
     );
   },
 
-  _onCheck: function(e) {
+  _onClick: function(e) {
     var checkedState = this.state.checked;
 
     this.check();

diff --git a/src/less/components/checkbox.less b/src/less/components/checkbox.less
@@ -8,7 +8,7 @@
 @checkbox-box-box-sizing: border-box;
 @checkbox-box-position: absolute;
 @checkbox-box-size: 18px;
-@checkbox-label-spacing: @checkbox-box-size;
+@checkbox-label-spacing: calc(@checkbox-box-size + @desktop-gutter-mini);
 @checkbox-box-transform-origin: 40% 90%;
 @checkbox-box-transform: rotate(0deg) scale(1);
 
@@ -30,58 +30,64 @@
 .mui-checkbox {
   .ease-out;
   cursor: @checkbox-cursor;
-  height: @checkbox-size;
   position: @checkbox-position;
-  width: @checkbox-size;
 
-  input {
-    display: @checkbox-input-display;
-  }
 
+  // The first nested div which is for the label area
   .mui-checkbox-label {
     position: relative;
     left: @checkbox-label-spacing;
-    padding: 0 5px;
+    padding-right: 25px;
+    width: calc(100% - @checkbox-box-size);
+    height: 100%;
   }
 
-  .mui-checkbox-box {
-    .ease-out;
-    background-color: @checkbox-box-background-color;
-    border: 2px solid @checkbox-box-border-color;
-    border-radius: @checkbox-box-border-radius;
-    box-sizing: @checkbox-box-box-sizing;
-    height: @checkbox-box-size;
-    position: @checkbox-box-position;
-    transform: @checkbox-box-transform;
-    transform-origin: @checkbox-box-transform-origin;
-    width: @checkbox-box-size;
-  }
+  // The second nested div which is 
+  .mui-checkbox-component {
 
-  .mui-checkbox-check {
-    .ease-out;
-    border-bottom: 2px solid @checkbox-check-color;
-    border-left: 2px solid @checkbox-check-color;
-    bottom: @checkbox-check-fix-left;
-    height: @checkbox-check-height;
-    left: @checkbox-check-fix-left;
-    position: @checkbox-check-position;
-    transform: @checkbox-check-transform;
-    transform-origin: @checkbox-check-transform-origin;
-    width: @checkbox-check-height;
-  }
+    input {
+      display: @checkbox-input-display;
+    }
 
-  &.mui-checked {
     .mui-checkbox-box {
       .ease-out;
-      transform: rotate(45deg) scale(0);
+      background-color: @checkbox-box-background-color;
+      border: 2px solid @checkbox-box-border-color;
+      border-radius: @checkbox-box-border-radius;
+      box-sizing: @checkbox-box-box-sizing;
+      height: @checkbox-box-size;
+      position: @checkbox-box-position;
+      transform: @checkbox-box-transform;
+      transform-origin: @checkbox-box-transform-origin;
+      width: @checkbox-box-size;
     }
 
     .mui-checkbox-check {
       .ease-out;
-      height: @checkbox-checked-check-height;
-      transform: @checkbox-checked-check-transform;
-      transition-delay: @checkbox-checked-check-transition-delay;
-      width: @checkbox-checked-check-width;
+      border-bottom: 2px solid @checkbox-check-color;
+      border-left: 2px solid @checkbox-check-color;
+      bottom: calc(100% - @checkbox-box-size);
+      height: @checkbox-check-height;
+      left: @checkbox-check-fix-left;
+      position: @checkbox-check-position;
+      transform: @checkbox-check-transform;
+      transform-origin: @checkbox-check-transform-origin;
+      width: @checkbox-check-height;
+    }
+
+    &.mui-checked {
+      .mui-checkbox-box {
+        .ease-out;
+        transform: rotate(45deg) scale(0);
+      }
+
+      .mui-checkbox-check {
+        .ease-out;
+        height: @checkbox-checked-check-height;
+        transform: @checkbox-checked-check-transform;
+        transition-delay: @checkbox-checked-check-transition-delay;
+        width: @checkbox-checked-check-width;
+      }
     }
   }
 }