diff --git a/docs/src/app/components/pages/components/switches.jsx b/docs/src/app/components/pages/components/switches.jsx
index bfbf2299a02c0c..ce7325c1dad12d 100644
--- 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
index 42d8a27abc749b..5ef2bcda9365f2 100644
--- 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
index 47caadd7dce64e..94ab8fbbac5de6 100644
--- 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
index f23eb6a7062bdf..fc5b8aa8ce3762 100644
--- 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;
+ }
}
}
}
\ No newline at end of file