[new feature] Button: add loading-size prop (#2854)

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` |

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'
   }
 };
 

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>
+`;

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();
+});

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 |