From df275a016852472d30be97f701416dfd94dd8e31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Fri, 31 May 2019 21:36:04 +0800
Subject: [PATCH] [bugfix] Checkbox: label-position prop not work

---
 docs/markdown/changelog.zh-CN.md              |  8 ++++++
 packages/checkbox/index.less                  |  1 -
 .../test/__snapshots__/index.spec.js.snap     | 15 +++++++++++
 packages/checkbox/test/index.spec.js          | 18 +++++++++++--
 packages/mixins/checkbox.js                   | 25 +++++++++++++------
 packages/radio/index.less                     |  1 -
 6 files changed, 56 insertions(+), 12 deletions(-)
 create mode 100644 packages/checkbox/test/__snapshots__/index.spec.js.snap

diff --git a/docs/markdown/changelog.zh-CN.md b/docs/markdown/changelog.zh-CN.md
index 9943f3f0c..168d1dc7a 100644
--- a/docs/markdown/changelog.zh-CN.md
+++ b/docs/markdown/changelog.zh-CN.md
@@ -2,11 +2,19 @@
 
 ### [v2.0.0-beta.4](https://github.com/youzan/vant/tree/v2.0.0-beta.4)
 
+##### Checkbox
+
+- 修复`label-position`不生效的问题
+
 ##### Field
 
 - 新增`click`事件
 - 新增`clickable`属性
 
+##### Radio
+
+- 修复`label-position`不生效的问题
+
 ##### Stepper
 
 - 支持`Number`类型的`input-width`属性
diff --git a/packages/checkbox/index.less b/packages/checkbox/index.less
index d31a2beaa..f48b16464 100644
--- a/packages/checkbox/index.less
+++ b/packages/checkbox/index.less
@@ -59,7 +59,6 @@
     line-height: @checkbox-size;
 
     &--left {
-      float: left;
       margin: 0 @checkbox-label-margin 0 0;
     }
 
diff --git a/packages/checkbox/test/__snapshots__/index.spec.js.snap b/packages/checkbox/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..10f69f18b
--- /dev/null
+++ b/packages/checkbox/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`label disabled 1`] = `
+<div role="checkbox" tabindex="0" aria-checked="undefined" class="van-checkbox">
+  <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
+      <!----></i></div><span class="van-checkbox__label">Label</span>
+</div>
+`;
+
+exports[`label-position prop 1`] = `
+<div role="checkbox" tabindex="0" aria-checked="undefined" class="van-checkbox"><span class="van-checkbox__label van-checkbox__label--left">Label</span>
+  <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
+      <!----></i></div>
+</div>
+`;
diff --git a/packages/checkbox/test/index.spec.js b/packages/checkbox/test/index.spec.js
index 5920d5899..d42933bd1 100644
--- a/packages/checkbox/test/index.spec.js
+++ b/packages/checkbox/test/index.spec.js
@@ -31,8 +31,8 @@ test('disabled', () => {
 
 test('label disabled', () => {
   const wrapper = mount(Checkbox, {
-    slots: {
-      default: '<div />'
+    scopedSlots: {
+      default: () => 'Label'
     },
     propsData: {
       labelDisabled: true
@@ -41,6 +41,7 @@ test('label disabled', () => {
 
   wrapper.find('.van-checkbox__label').trigger('click');
   expect(wrapper.emitted('input')).toBeFalsy();
+  expect(wrapper).toMatchSnapshot();
 });
 
 test('checkbox group', async () => {
@@ -91,3 +92,16 @@ test('click event', () => {
   icon.trigger('click');
   expect(onClick).toHaveBeenCalledTimes(2);
 });
+
+test('label-position prop', () => {
+  const wrapper = mount(Checkbox, {
+    scopedSlots: {
+      default: () => 'Label'
+    },
+    propsData: {
+      labelPosition: 'left'
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/packages/mixins/checkbox.js b/packages/mixins/checkbox.js
index 5cf729395..6977ac441 100644
--- a/packages/mixins/checkbox.js
+++ b/packages/mixins/checkbox.js
@@ -62,6 +62,22 @@ export const CheckboxMixin = ({ parent, bem, role }) => ({
       </span>
     );
 
+    const Children = [
+      <div
+        class={bem('icon', [this.shape, { disabled: this.isDisabled, checked }])}
+        style={{ fontSize: suffixPx(this.iconSize) }}
+        onClick={this.onClickIcon}
+      >
+        {CheckIcon}
+      </div>
+    ];
+
+    if (this.labelPosition === 'left') {
+      Children.unshift(Label);
+    } else {
+      Children.push(Label);
+    }
+
     return (
       <div
         role={role}
@@ -72,14 +88,7 @@ export const CheckboxMixin = ({ parent, bem, role }) => ({
           this.$emit('click', event);
         }}
       >
-        <div
-          class={bem('icon', [this.shape, { disabled: this.isDisabled, checked }])}
-          style={{ fontSize: suffixPx(this.iconSize) }}
-          onClick={this.onClickIcon}
-        >
-          {CheckIcon}
-        </div>
-        {Label}
+        {Children}
       </div>
     );
   }
diff --git a/packages/radio/index.less b/packages/radio/index.less
index 138623f21..010c9d3dd 100644
--- a/packages/radio/index.less
+++ b/packages/radio/index.less
@@ -59,7 +59,6 @@
     line-height: @radio-size;
 
     &--left {
-      float: left;
       margin: 0 @radio-label-margin 0 0;
     }