From 0e9335246c894e7bfc6e4074a14ed8b349baa68c Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 17 Jul 2015 11:06:38 +0800
Subject: [PATCH] fix checkbox and radio

---
 components/checkbox/demo/basic.md      |  3 ++-
 components/checkbox/demo/controller.md |  3 ++-
 components/form/demo/mix.md            | 12 ++++++------
 components/radio/demo/basic.md         |  2 +-
 components/radio/demo/disable.md       |  4 ++--
 components/radio/demo/group.md         | 12 ++++++++----
 style/components/checkbox.less         | 16 ++++++++++------
 style/components/form.less             |  6 ++----
 style/components/radio.less            | 14 +++++++++-----
 9 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/components/checkbox/demo/basic.md b/components/checkbox/demo/basic.md
index 0a533e31b3..d6049ae521 100644
--- a/components/checkbox/demo/basic.md
+++ b/components/checkbox/demo/basic.md
@@ -14,6 +14,7 @@ function onChange(e) {
 }
 
 React.render(<label>
-  <Checkbox defaultChecked={false} onChange={onChange} /> Checkbox
+  <Checkbox defaultChecked={false} onChange={onChange} />
+  Checkbox
 </label>, container);
 ````
diff --git a/components/checkbox/demo/controller.md b/components/checkbox/demo/controller.md
index bc1e10b28c..e7de3ca435 100644
--- a/components/checkbox/demo/controller.md
+++ b/components/checkbox/demo/controller.md
@@ -25,7 +25,8 @@ var App = React.createClass({
         <label>
           <Checkbox checked={this.state.checked}
             disabled={this.state.disabled}
-            onChange={this.onChange} /> {label}
+            onChange={this.onChange} />
+            {label}
         </label>
       </p>
       <p>
diff --git a/components/form/demo/mix.md b/components/form/demo/mix.md
index 4a8bb571b7..912965c3ed 100644
--- a/components/form/demo/mix.md
+++ b/components/form/demo/mix.md
@@ -102,13 +102,13 @@ React.render(
       <label for="" className="col-6" required>ant-radio:</label>
       <div className="col-16">
         <label className="ant-radio-inline">
-          <Radio name="radio" /> 选项一
+          <Radio name="radio" />选项一
         </label>
         <label className="ant-radio-inline">
-          <Radio name="radio" /> 选项二
+          <Radio name="radio" />选项二
         </label>
         <label className="ant-radio-inline">
-          <Radio name="radio" /> 选项三
+          <Radio name="radio" />选项三
         </label>
       </div>
     </div>
@@ -116,13 +116,13 @@ React.render(
       <label for="" className="col-6" required>ant-checkbox:</label>
       <div className="col-16">
         <label className="ant-checkbox-inline">
-          <Checkbox /> 选项一
+          <Checkbox />选项一
         </label>
         <label className="ant-checkbox-inline">
-          <Checkbox /> 选项二
+          <Checkbox />选项二
         </label>
         <label className="ant-checkbox-inline">
-          <Checkbox /> 选项三
+          <Checkbox />选项三
         </label>
       </div>
     </div>
diff --git a/components/radio/demo/basic.md b/components/radio/demo/basic.md
index 0b139ebef0..8ccc3da94c 100644
--- a/components/radio/demo/basic.md
+++ b/components/radio/demo/basic.md
@@ -10,6 +10,6 @@
 var Radio = antd.Radio;
 
 React.render(<label>
-  <Radio /> Radio
+  <Radio />Radio
 </label>, document.getElementById('components-radio-demo-basic'));
 ````
diff --git a/components/radio/demo/disable.md b/components/radio/demo/disable.md
index 3714b56747..987d67f91e 100644
--- a/components/radio/demo/disable.md
+++ b/components/radio/demo/disable.md
@@ -26,9 +26,9 @@ var App = React.createClass({
   },
   render() {
     return <div>
-      <Radio defaultChecked={false} disabled={this.state.disabled} /> 不可用
+      <Radio defaultChecked={false} disabled={this.state.disabled} />不可用
       <br />
-      <Radio defaultChecked={true} disabled={this.state.disabled} /> 不可用
+      <Radio defaultChecked={true} disabled={this.state.disabled} />不可用
       <div style={{"margin-top": 20}}>
         <button className="ant-btn ant-btn-primary" onClick={this.toggleDisabled}>
           Toggle disabled
diff --git a/components/radio/demo/group.md b/components/radio/demo/group.md
index 496954bd34..8411d3c556 100644
--- a/components/radio/demo/group.md
+++ b/components/radio/demo/group.md
@@ -24,25 +24,29 @@ var RadioGroup = React.createClass({
         <label>
           <Radio value="a"
             checked={this.state.value === 'a'}
-            onChange={this.handleChange} /> A
+            onChange={this.handleChange} />
+            A
         </label>
         <br/>
         <label>
           <Radio value="b"
             checked={this.state.value === 'b'}
-            onChange={this.handleChange} /> B
+            onChange={this.handleChange} />
+            B
         </label>
         <br/>
         <label>
           <Radio value="c"
             checked={this.state.value === 'c'}
-            onChange={this.handleChange} /> C
+            onChange={this.handleChange} />
+            C
         </label>
         <br/>
         <label>
           <Radio value="d"
             checked={this.state.value === 'd'}
-            onChange={this.handleChange} /> D
+            onChange={this.handleChange} />
+            D
         </label>
       </p>
       <p style={{"margin-top": 20}}>
diff --git a/style/components/checkbox.less b/style/components/checkbox.less
index 145552cd57..3ffdf7a853 100644
--- a/style/components/checkbox.less
+++ b/style/components/checkbox.less
@@ -1,8 +1,8 @@
-@checkboxWarpPrefixCls: ant-checkbox;
-@checkboxInnerPrefixCls: ~"@{checkboxWarpPrefixCls}-inner";
+@checkboxWrapPrefixCls: ant-checkbox;
+@checkboxInnerPrefixCls: ~"@{checkboxWrapPrefixCls}-inner";
 
 /* 一般状态 */
-.@{checkboxWarpPrefixCls} {
+.@{checkboxWrapPrefixCls} {
   white-space: nowrap;
   cursor: pointer;
   outline: none;
@@ -62,7 +62,7 @@
 }
 
 /* 选中状态 */
-.@{checkboxWarpPrefixCls}-checked {
+.@{checkboxWrapPrefixCls}-checked {
 
   &:hover {
     .@{checkboxInnerPrefixCls} {
@@ -93,9 +93,9 @@
   }
 }
 
-.@{checkboxWarpPrefixCls}-disabled {
+.@{checkboxWrapPrefixCls}-disabled {
 
-  &.@{checkboxWarpPrefixCls}-checked {
+  &.@{checkboxWrapPrefixCls}-checked {
 
     &:hover {
       .@{checkboxInnerPrefixCls} {
@@ -133,3 +133,7 @@
     cursor: default;
   }
 }
+
+.@{checkboxWrapPrefixCls} + span {
+  margin-left: 8px;
+}
diff --git a/style/components/form.less b/style/components/form.less
index f21c1db0f6..0400b33451 100644
--- a/style/components/form.less
+++ b/style/components/form.less
@@ -163,10 +163,8 @@ input[type="checkbox"] {
     padding-top: 7px;
     padding-bottom: 7px;
     > input[type="radio"],
-    > input[type="checkbox"],
-    > .@{css-prefix}checkbox,
-    > .@{css-prefix}radio {
-      margin-right: 3px;
+    > input[type="checkbox"] {
+      margin-right: 5px;
     }
   }
 }
diff --git a/style/components/radio.less b/style/components/radio.less
index f0584d6757..5db8c04c36 100644
--- a/style/components/radio.less
+++ b/style/components/radio.less
@@ -1,9 +1,9 @@
-@radioWarpPrefixCls: ant-radio;
-@radioInnerPrefixCls: ~"@{radioWarpPrefixCls}-inner";
+@radioWrapPrefixCls: ant-radio;
+@radioInnerPrefixCls: ~"@{radioWrapPrefixCls}-inner";
 @radioDuration: .3s;
 
 /* 一般状态 */
-.@{radioWarpPrefixCls} {
+.@{radioWrapPrefixCls} {
   white-space: nowrap;
   outline: none;
   display: inline-block;
@@ -60,7 +60,7 @@
 }
 
 /* 选中状态 */
-.@{radioWarpPrefixCls}-checked {
+.@{radioWrapPrefixCls}-checked {
 
   .@{radioInnerPrefixCls} {
     border-color: #d9d9d9;
@@ -72,7 +72,7 @@
   }
 }
 
-.@{radioWarpPrefixCls}-disabled {
+.@{radioWrapPrefixCls}-disabled {
   &:hover {
     .@{radioInnerPrefixCls} {
       border-color: #d9d9d9;
@@ -90,3 +90,7 @@
     cursor: default;
   }
 }
+
+.@{radioWrapPrefixCls} + span {
+  margin-left: 8px;
+}