Merge pull request #1029 from ant-design/checkbox-new-usage

Make Checkbox usage same as Radio

components/checkbox/Group.jsx

@@ -51,12 +51,12 @@ export default React.createClass({
       <div className="ant-checkbox-group">
         {
           options.map(option =>
-            <label className="ant-checkbox-group-item" key={option}>
-              <Checkbox disabled={this.props.disabled}
-                checked={this.state.value.indexOf(option) !== -1}
-                onChange={this.toggleOption.bind(this, option)} />
+            <Checkbox disabled={this.props.disabled}
+              checked={this.state.value.indexOf(option) !== -1}
+              onChange={this.toggleOption.bind(this, option)}
+              className="ant-checkbox-group-item" key={option}>
               {option}
-            </label>
+            </Checkbox>
           )
         }
       </div>

components/checkbox/demo/basic.md

@@ -13,8 +13,7 @@ function onChange(e) {
   console.log(`checked = ${e.target.checked}`);
 }
 
-ReactDOM.render(<label>
-  <Checkbox defaultChecked={false} onChange={onChange} />
-  Checkbox
-</label>, mountNode);
+ReactDOM.render(
+  <Checkbox defaultChecked={false} onChange={onChange}>Checkbox</Checkbox>
+, mountNode);
 ````

components/checkbox/demo/controller.md

@@ -21,25 +21,24 @@ const App = React.createClass({
     return (
       <div>
         <p style={{ marginBottom: '20px' }}>
-          <label>
-            <Checkbox checked={this.state.checked}
-              disabled={this.state.disabled}
-              onChange={this.onChange} />
-              {label}
-            </label>
-          </p>
-          <p>
-            <Button type="primary" size="small"
-              onClick={this.toggleChecked}>
-              {!this.state.checked ? '选中' : '取消'}
-            </Button>
-            <Button style={{ marginLeft: '10px' }}
-              type="primary" size="small"
-              onClick={this.toggleDisable}>
-              {!this.state.disabled ? '不可用' : '可用'}
-            </Button>
-          </p>
-        </div>
+          <Checkbox checked={this.state.checked}
+            disabled={this.state.disabled}
+            onChange={this.onChange}>
+            {label}
+          </Checkbox>
+        </p>
+        <p>
+          <Button type="primary" size="small"
+            onClick={this.toggleChecked}>
+            {!this.state.checked ? '选中' : '取消'}
+          </Button>
+          <Button style={{ marginLeft: '10px' }}
+            type="primary" size="small"
+            onClick={this.toggleDisable}>
+            {!this.state.disabled ? '不可用' : '可用'}
+          </Button>
+        </p>
+      </div>
     );
   },
   toggleChecked() {

components/checkbox/index.jsx

@@ -1,6 +1,7 @@
 import RcCheckbox from 'rc-checkbox';
 import React from 'react';
 import Group from './Group';
+import classNames from 'classnames';
 
 const Checkbox = React.createClass({
   getDefaultProps() {
@@ -9,7 +10,17 @@ const Checkbox = React.createClass({
     };
   },
   render() {
-    return <RcCheckbox {...this.props} />;
+    const { prefixCls, style, children, className, ...restProps } = this.props;
+    const classString = classNames({
+      [className]: !!className,
+      [`${prefixCls}-wrapper`]: true,
+    });
+    return (
+      <label className={classString} style={style}>
+        <RcCheckbox {...restProps} prefixCls={prefixCls} children={null} />
+        {children}
+      </label>
+    );
   }
 });
 

components/form/demo/form-controls.md

@@ -53,42 +53,30 @@ ReactDOM.render(
       label="Checkbox 多选框："
       labelCol={{ span: 6 }}
       wrapperCol={{ span: 18 }} >
-        <label className="ant-checkbox-vertical">
-          <Checkbox />选项一
-        </label>
-        <label className="ant-checkbox-vertical">
-          <Checkbox />选项二
-        </label>
-        <label className="ant-checkbox-vertical">
-          <Checkbox disabled />选项三（不可选）
-        </label>
+      <Checkbox className="ant-checkbox-vertical">选项一</Checkbox>
+      <Checkbox className="ant-checkbox-vertical">选项二</Checkbox>
+      <Checkbox className="ant-checkbox-vertical" disabled>选项三（不可选）</Checkbox>
     </FormItem>
 
     <FormItem
       label="Checkbox 多选框："
       labelCol={{ span: 6 }}
       wrapperCol={{ span: 18 }} >
-        <label className="ant-checkbox-inline">
-          <Checkbox />选项一
-        </label>
-        <label className="ant-checkbox-inline">
-          <Checkbox />选项二
-        </label>
-        <label className="ant-checkbox-inline">
-          <Checkbox />选项三
-        </label>
+      <Checkbox className="ant-checkbox-inline">选项一</Checkbox>
+      <Checkbox className="ant-checkbox-inline">选项二</Checkbox>
+      <Checkbox className="ant-checkbox-inline">选项三</Checkbox>
     </FormItem>
 
     <FormItem
       label="Radio 单选框："
       labelCol={{ span: 6 }}
       wrapperCol={{ span: 18 }} >
-        <RadioGroup value="b">
-          <Radio value="a">A</Radio>
-          <Radio value="b">B</Radio>
-          <Radio value="c">C</Radio>
-          <Radio value="d">D</Radio>
-        </RadioGroup>
+      <RadioGroup value="b">
+        <Radio value="a">A</Radio>
+        <Radio value="b">B</Radio>
+        <Radio value="c">C</Radio>
+        <Radio value="d">D</Radio>
+      </RadioGroup>
     </FormItem>
   </Form>
 , mountNode);

style/components/checkbox.less

@@ -2,11 +2,10 @@
 
 .antCheckboxFn(@checkbox-prefix-cls: ant-checkbox) {
 
-@checkbox-wrap-prefix-cls: @checkbox-prefix-cls;
-@checkbox-inner-prefix-cls: ~"@{checkbox-wrap-prefix-cls}-inner";
+@checkbox-inner-prefix-cls: ~"@{checkbox-prefix-cls}-inner";
 
 // 一般状态
-.@{checkbox-wrap-prefix-cls} {
+.@{checkbox-prefix-cls} {
   white-space: nowrap;
   cursor: pointer;
   outline: none;
@@ -66,7 +65,7 @@
 }
 
 // 半选状态
-.@{checkbox-wrap-prefix-cls}-indeterminate {
+.@{checkbox-prefix-cls}-indeterminate {
   .@{checkbox-inner-prefix-cls} {
     border-color: @primary-color;
     background-color: @primary-color;
@@ -87,7 +86,7 @@
   }
 }
 // 选中状态
-.@{checkbox-wrap-prefix-cls}-checked {
+.@{checkbox-prefix-cls}-checked {
 
   &:hover {
     .@{checkbox-inner-prefix-cls} {
@@ -116,9 +115,9 @@
   }
 }
 
-.@{checkbox-wrap-prefix-cls}-disabled {
+.@{checkbox-prefix-cls}-disabled {
 
-  &.@{checkbox-wrap-prefix-cls}-checked {
+  &.@{checkbox-prefix-cls}-checked {
 
     &:hover {
       .@{checkbox-inner-prefix-cls} {
@@ -157,11 +156,16 @@
   }
 }
 
-.@{checkbox-wrap-prefix-cls} + span {
+.@{checkbox-prefix-cls}-wrapper {
+  cursor: pointer;
+}
+
+.@{checkbox-prefix-cls}-wrapper + span,
+.@{checkbox-prefix-cls} + span {
   margin-left: 8px;
 }
 
-.@{checkbox-wrap-prefix-cls}-group {
+.@{checkbox-prefix-cls}-group {
   font-size: @font-size-base;
   &-item {
     display: inline-block;