From 5cb0edbf39159466a0a69dbe960ccaad7a168299 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Tue, 26 Feb 2019 19:35:59 +0800
Subject: [PATCH] [new feature] Button: add loading-size prop (#2854)

---
 packages/button/en-US.md                             |  1 +
 packages/button/index.tsx                            |  7 ++++++-
 .../button/test/__snapshots__/index.spec.js.snap     |  7 +++++++
 packages/button/test/index.spec.js                   | 12 ++++++++++++
 packages/button/zh-CN.md                             |  1 +
 5 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 packages/button/test/__snapshots__/index.spec.js.snap
 create mode 100644 packages/button/test/index.spec.js

diff --git a/packages/button/en-US.md b/packages/button/en-US.md
index c821924e7..3d0950201 100644
--- a/packages/button/en-US.md
+++ b/packages/button/en-US.md
@@ -72,6 +72,7 @@ Vue.use(Button);
 | disabled | Whether to disable button | `Boolean` | `false` |
 | loading | Whether show loading status | `Boolean` | `false` |
 | loading-text | Loading text | `String` | - |
+| loading-size | Loading icon size | `String` | `20px` |
 | url | Link URL | `String` | - |
 | to | Target route of the link, same as to of `vue-router` | `String | Object` | - |
 | replace | If true, the navigation will not leave a history record | `String` | `false` |
diff --git a/packages/button/index.tsx b/packages/button/index.tsx
index 6b9ef330b..c1b8e0a4e 100644
--- a/packages/button/index.tsx
+++ b/packages/button/index.tsx
@@ -19,6 +19,7 @@ export type ButtonProps = RouteProps & {
   loading?: boolean;
   disabled?: boolean;
   nativeType?: string;
+  loadingSize: string;
   loadingText?: string;
   bottomAction?: boolean;
 };
@@ -66,7 +67,7 @@ function Button(
     >
       {loading ? (
         [
-          <Loading size="20px" color={type === 'default' ? undefined : ''} />,
+          <Loading size={props.loadingSize} color={type === 'default' ? undefined : ''} />,
           loadingText && <span class={bem('loading-text')}>{loadingText}</span>
         ]
       ) : (
@@ -101,6 +102,10 @@ Button.props = {
   size: {
     type: String,
     default: 'normal'
+  },
+  loadingSize: {
+    type: String,
+    default: '20px'
   }
 };
 
diff --git a/packages/button/test/__snapshots__/index.spec.js.snap b/packages/button/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..9b2ea2019
--- /dev/null
+++ b/packages/button/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`loading size 1`] = `
+<button class="van-button van-button--default van-button--normal van-button--loading">
+  <div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201); width: 10px; height: 10px;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+</button>
+`;
diff --git a/packages/button/test/index.spec.js b/packages/button/test/index.spec.js
new file mode 100644
index 000000000..44a94b879
--- /dev/null
+++ b/packages/button/test/index.spec.js
@@ -0,0 +1,12 @@
+import { mount } from '../../../test/utils';
+import Button from '..';
+
+test('loading size', () => {
+  const wrapper = mount(Button, {
+    propsData: {
+      loading: true,
+      loadingSize: '10px'
+    }
+  });
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/packages/button/zh-CN.md b/packages/button/zh-CN.md
index 40f4bde47..5e19a4efd 100644
--- a/packages/button/zh-CN.md
+++ b/packages/button/zh-CN.md
@@ -78,6 +78,7 @@ Vue.use(Button);
 | disabled | 是否禁用按钮 | `Boolean` | `false` | - |
 | loading | 是否显示为加载状态 | `Boolean` | `false` | - |
 | loading-text | 加载状态提示文字 | `String` | - | 1.6.3 |
+| loading-size | 加载图标大小 | `String` | `20px` | 1.6.7 |
 | url | 跳转链接 | `String` | - | 1.6.5 |
 | to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | 1.6.5 |
 | replace | 跳转时是否替换当前页面历史 | `String` | `false` | 1.6.5 |