Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add label prop checkbox #216

Merged
merged 11 commits into from
Jan 8, 2015
Merged

Add label prop checkbox #216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
7519865
Added interal documentation to major files in docs and example as wel…
mmrtnz Jan 6, 2015
ebfee44
Formatted code in pages/inputs. Expanded documentation for and group …
mmrtnz Jan 7, 2015
cc35f21
Merge branch 'inputs'
mmrtnz Jan 7, 2015
a64d6d3
Merge branch 'master' of https://github.com/M03M/material-ui
mmrtnz Jan 8, 2015
053e285
Merge branch 'snackbar2'
mmrtnz Jan 8, 2015
4e27f98
Merge branch 'mo-tutorial'
mmrtnz Jan 8, 2015
2a8c9fd
Merged and deleted all local branches.
mmrtnz Jan 8, 2015
7ac7e00
Merge branch 'master' of https://github.com/callemall/material-ui
mmrtnz Jan 8, 2015
efb4001
Added label prop to checkbox component. Made note of this in the docs…
mmrtnz Jan 8, 2015
7324af9
Added a label prop to the checkbox component, required some changes t…
mmrtnz Jan 8, 2015
f806937
Fixed duplicate getClasses() call.
mmrtnz Jan 8, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 14 additions & 4 deletions docs/src/app/components/pages/components/switches.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' +
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions docs/src/less/pages/components/switches.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
.switches-example-group {
float: left;
width: 100%;
padding: 0 50px;
}

@media @device-medium {
Expand Down
30 changes: 21 additions & 9 deletions src/js/checkbox.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand All @@ -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();
Expand Down
80 changes: 43 additions & 37 deletions src/less/components/checkbox.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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;
}
}
}
}