From 5cd05e2447129d23c194b2ebc0b3ebbd1c0bd3c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Mon, 29 Apr 2019 17:08:21 +0800
Subject: [PATCH] =?UTF-8?q?[breaking=20change]=20Loading:=20remove=20circl?=
 =?UTF-8?q?e=E3=80=81gradient-circle=20type?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/markdown/v2-progress-tracking.md         |  6 ++--
 .../test/__snapshots__/index.spec.js.snap     |  2 +-
 .../test/__snapshots__/index.spec.js.snap     |  2 +-
 packages/loading/index.less                   | 28 -------------------
 packages/loading/index.tsx                    |  6 ++--
 .../test/__snapshots__/index.spec.js.snap     |  4 +--
 6 files changed, 10 insertions(+), 38 deletions(-)

diff --git a/docs/markdown/v2-progress-tracking.md b/docs/markdown/v2-progress-tracking.md
index 931489198..518c9f766 100644
--- a/docs/markdown/v2-progress-tracking.md
+++ b/docs/markdown/v2-progress-tracking.md
@@ -45,8 +45,10 @@
 
 ### Loading
 
-- [ ] 移除 circle 类型
-- [ ] 移除 gradient-circle 类型
+- [x] 移除 circle 类型
+- [x] 移除 gradient-circle 类型
+
+改动原因：视觉规范变更
 
 ### Area
 
diff --git a/packages/address-edit/test/__snapshots__/index.spec.js.snap b/packages/address-edit/test/__snapshots__/index.spec.js.snap
index a0198a25e..b7ec713da 100644
--- a/packages/address-edit/test/__snapshots__/index.spec.js.snap
+++ b/packages/address-edit/test/__snapshots__/index.spec.js.snap
@@ -38,7 +38,7 @@ exports[`create a AddressEdit 1`] = `
         <div class="van-picker__confirm">确认</div>
       </div>
       <div class="van-picker__loading">
-        <div class="van-loading van-loading--circular van-loading" style="color:#c9c9c9;"><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>
+        <div class="van-loading van-loading--circular" style="color:#c9c9c9;"><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>
       </div>
       <div class="van-picker__columns" style="height:220px;">
         <div class="van-picker-column" style="height:220px;">
diff --git a/packages/button/test/__snapshots__/index.spec.js.snap b/packages/button/test/__snapshots__/index.spec.js.snap
index 9b2ea2019..851ece2e0 100644
--- a/packages/button/test/__snapshots__/index.spec.js.snap
+++ b/packages/button/test/__snapshots__/index.spec.js.snap
@@ -2,6 +2,6 @@
 
 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>
+  <div class="van-loading van-loading--circular" 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/loading/index.less b/packages/loading/index.less
index 305518254..1167e520c 100644
--- a/packages/loading/index.less
+++ b/packages/loading/index.less
@@ -9,11 +9,6 @@
   position: relative;
   vertical-align: middle;
 
-  &--circle {
-    width: 16px;
-    height: 16px;
-  }
-
   &__spinner {
     z-index: -1;
     width: 100%;
@@ -23,18 +18,6 @@
     box-sizing: border-box;
     animation: van-rotate 0.8s linear infinite;
 
-    &--circle {
-      border-radius: 100%;
-      border: 3px solid transparent;
-      border-color: @gray;
-      border-top-color: @gray-darker;
-    }
-
-    &--gradient-circle {
-      background-size: contain;
-      background-image: url('https://img.yzcdn.cn/vant/gradient-circle-black.png');
-    }
-
     &--spinner {
       animation-timing-function: steps(12);
 
@@ -73,17 +56,6 @@
       animation: van-circular 1.5s ease-in-out infinite;
     }
   }
-
-  &--white {
-    .van-loading__spinner--circle {
-      border-color: rgba(0, 0, 0, .1);
-      border-top-color: rgba(255, 255, 255, .7);
-    }
-
-    .van-loading__spinner--gradient-circle {
-      background-image: url('https://img.yzcdn.cn/vant/gradient-circle-white.png');
-    }
-  }
 }
 
 @keyframes van-circular {
diff --git a/packages/loading/index.tsx b/packages/loading/index.tsx
index 2994a2643..789424eea 100644
--- a/packages/loading/index.tsx
+++ b/packages/loading/index.tsx
@@ -22,10 +22,8 @@ function Loading(
 ) {
   const { color, size, type } = props;
 
-  const colorType = color === 'white' || color === 'black' ? color : '';
-
   const style = {
-    color: color === 'black' ? DEFAULT_COLOR : color,
+    color,
     width: size,
     height: size
   };
@@ -44,7 +42,7 @@ function Loading(
   );
 
   return (
-    <div class={bem([type, colorType])} style={style} {...inherit(ctx, true)}>
+    <div class={bem([type])} style={style} {...inherit(ctx, true)}>
       <span class={bem('spinner', type)}>
         {Spin}
         {Circular}
diff --git a/packages/pull-refresh/test/__snapshots__/index.spec.js.snap b/packages/pull-refresh/test/__snapshots__/index.spec.js.snap
index c48b8026c..cacbf4661 100644
--- a/packages/pull-refresh/test/__snapshots__/index.spec.js.snap
+++ b/packages/pull-refresh/test/__snapshots__/index.spec.js.snap
@@ -25,7 +25,7 @@ exports[`change head content when pulling down 3`] = `
   <div class="van-pull-refresh__track" style="transition: 300ms; transform: translate3d(0,50px, 0);">
     <div class="van-pull-refresh__head">
       <div class="van-pull-refresh__loading">
-        <div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201);"><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><span>加载中...</span>
+        <div class="van-loading van-loading--circular" style="color: rgb(201, 201, 201);"><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><span>加载中...</span>
       </div>
     </div>
   </div>
@@ -37,7 +37,7 @@ exports[`change head content when pulling down 4`] = `
   <div class="van-pull-refresh__track" style="transition: 300ms; transform: translate3d(0,50px, 0);">
     <div class="van-pull-refresh__head">
       <div class="van-pull-refresh__loading">
-        <div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201);"><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><span>加载中...</span>
+        <div class="van-loading van-loading--circular" style="color: rgb(201, 201, 201);"><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><span>加载中...</span>
       </div>
     </div>
   </div>