From 1616f60a3158d4ec221e6a57b38e3ac1610947b5 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, 3 May 2019 08:42:52 +0800
Subject: [PATCH] [new feature] Button: add loading-type prop

---
 docs/markdown/v2-progress-tracking.md                | 4 ++++
 packages/button/demo/index.vue                       | 1 +
 packages/button/en-US.md                             | 8 +++++++-
 packages/button/index.tsx                            | 5 ++++-
 packages/button/test/__snapshots__/demo.spec.js.snap | 2 +-
 packages/button/zh-CN.md                             | 8 +++++++-
 packages/loading/index.tsx                           | 4 +++-
 7 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/docs/markdown/v2-progress-tracking.md b/docs/markdown/v2-progress-tracking.md
index 6ca5ac39f..4c92413c4 100644
--- a/docs/markdown/v2-progress-tracking.md
+++ b/docs/markdown/v2-progress-tracking.md
@@ -53,6 +53,10 @@
 
 - 新增`Skeleton`骨架屏组件
 
+### Button
+
+- 新增`loading-type`属性
+
 ### Field
 
 - 新增`label-class`属性
diff --git a/packages/button/demo/index.vue b/packages/button/demo/index.vue
index 1d5f9c1d1..0d08ce7c0 100644
--- a/packages/button/demo/index.vue
+++ b/packages/button/demo/index.vue
@@ -58,6 +58,7 @@
       />
       <van-button
         loading
+        loading-type="spinner"
         :loading-text="$t('loadingText')"
         type="danger"
       />
diff --git a/packages/button/en-US.md b/packages/button/en-US.md
index 30611ec06..739e19f54 100644
--- a/packages/button/en-US.md
+++ b/packages/button/en-US.md
@@ -44,7 +44,12 @@ Vue.use(Button);
 
 ```html 
 <van-button loading type="primary" />
-<van-button loading type="primary" loading-text="Loading..." />
+<van-button
+  loading
+  type="danger"
+  loading-type="spinner"
+  loading-text="Loading..."
+/>
 ```
 
 #### Shape
@@ -79,6 +84,7 @@ Vue.use(Button);
 | disabled | Whether to disable button | `Boolean` | `false` |
 | loading | Whether show loading status | `Boolean` | `false` |
 | loading-text | Loading text | `String` | - |
+| loading-type | Loading type, can be set to `spinner` | `String` | `circular` |
 | 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` | - |
diff --git a/packages/button/index.tsx b/packages/button/index.tsx
index 63071fe43..a9d9b2d7d 100644
--- a/packages/button/index.tsx
+++ b/packages/button/index.tsx
@@ -1,7 +1,7 @@
 import { use } from '../utils';
 import { emit, inherit } from '../utils/functional';
 import { routeProps, RouteProps, functionalRoute } from '../utils/router';
-import Loading from '../loading';
+import Loading, { LoadingType } from '../loading';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
@@ -25,6 +25,7 @@ export type ButtonProps = RouteProps & {
   disabled?: boolean;
   nativeType?: string;
   loadingSize: string;
+  loadingType?: LoadingType;
   loadingText?: string;
 };
 
@@ -83,6 +84,7 @@ function Button(
         [
           <Loading
             size={props.loadingSize}
+            type={props.loadingType}
             color={type === 'default' ? undefined : ''}
           />,
           loadingText && <span class={bem('loading-text')}>{loadingText}</span>
@@ -106,6 +108,7 @@ Button.props = {
   disabled: Boolean,
   nativeType: String,
   loadingText: String,
+  loadingType: String,
   tag: {
     type: String,
     default: 'button'
diff --git a/packages/button/test/__snapshots__/demo.spec.js.snap b/packages/button/test/__snapshots__/demo.spec.js.snap
index 45e452e3e..7108913d7 100644
--- a/packages/button/test/__snapshots__/demo.spec.js.snap
+++ b/packages/button/test/__snapshots__/demo.spec.js.snap
@@ -11,7 +11,7 @@ exports[`renders demo correctly 1`] = `
   <div><button class="van-button van-button--primary van-button--normal van-button--loading">
       <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color:;width:20px;height:20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
     </button> <button class="van-button van-button--danger van-button--normal van-button--loading">
-      <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color:;width:20px;height:20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span class="van-button__loading-text">加载中...</span>
+      <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="color:;width:20px;height:20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div><span class="van-button__loading-text">加载中...</span>
     </button></div>
   <div><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">方形按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--round"><span class="van-button__text">圆形按钮</span></button></div>
   <div><button class="van-button van-button--default van-button--large"><span class="van-button__text">大号按钮</span></button> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">普通按钮</span></button> <button class="van-button van-button--default van-button--small"><span class="van-button__text">小型按钮</span></button> <button class="van-button van-button--default van-button--mini"><span class="van-button__text">迷你按钮</span></button></div>
diff --git a/packages/button/zh-CN.md b/packages/button/zh-CN.md
index a0bce8827..7a8327f21 100644
--- a/packages/button/zh-CN.md
+++ b/packages/button/zh-CN.md
@@ -52,7 +52,12 @@ Vue.use(Button);
 
 ```html 
 <van-button loading type="primary" />
-<van-button loading type="danger" loading-text="加载中..." />
+<van-button
+  loading
+  type="danger"
+  loading-type="spinner"
+  loading-text="加载中..."
+/>
 ```
 
 #### 按钮形状
@@ -90,6 +95,7 @@ Vue.use(Button);
 | hairline | 是否使用 0.5px 边框 | `Boolean` | `false` | 1.6.11 |
 | loading | 是否显示为加载状态 | `Boolean` | `false` | - |
 | loading-text | 加载状态提示文字 | `String` | - | 1.6.3 |
+| loading-type | 加载图标类型，可选值为`spinner` | `String` | `circular` | 2.0.0 |
 | loading-size | 加载图标大小 | `String` | `20px` | 1.6.7 |
 | url | 跳转链接 | `String` | - | 1.6.5 |
 | to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | 1.6.5 |
diff --git a/packages/loading/index.tsx b/packages/loading/index.tsx
index b336388c8..155ef19cf 100644
--- a/packages/loading/index.tsx
+++ b/packages/loading/index.tsx
@@ -5,8 +5,10 @@ import { inherit } from '../utils/functional';
 import { CreateElement, RenderContext } from 'vue/types';
 import { DefaultSlots } from '../utils/use/sfc';
 
+export type LoadingType = 'circular' | 'spinner';
+
 export type LoadingProps = {
-  type: 'circular' | 'spinner';
+  type: LoadingType;
   size?: string | number;
   color: string;
   textSize?: string | number;