From b57f7e9d9810ce95047334f0897899ebddaac6f3 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Mon, 30 Nov 2020 22:53:23 +0800
Subject: [PATCH] style(Circle): add @circle-size less var

---
 src/circle/README.md                             |  1 +
 src/circle/README.zh-CN.md                       |  1 +
 src/circle/index.js                              |  5 +----
 src/circle/index.less                            |  2 ++
 src/circle/test/__snapshots__/demo.spec.js.snap  | 10 +++++-----
 src/circle/test/__snapshots__/index.spec.js.snap |  4 ++--
 src/style/var.less                               |  1 +
 7 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/circle/README.md b/src/circle/README.md
index 6ea277773..291b624e7 100644
--- a/src/circle/README.md
+++ b/src/circle/README.md
@@ -131,6 +131,7 @@ How to use: [Custom Theme](#/en-US/theme).
 
 | Name                     | Default Value       | Description |
 | ------------------------ | ------------------- | ----------- |
+| @circle-size             | `100px`             | -           |
 | @circle-color            | `@blue`             | -           |
 | @circle-layer-color      | `@white`            | -           |
 | @circle-text-color       | `@text-color`       | -           |
diff --git a/src/circle/README.zh-CN.md b/src/circle/README.zh-CN.md
index a56b88eb7..09c505eb4 100644
--- a/src/circle/README.zh-CN.md
+++ b/src/circle/README.zh-CN.md
@@ -142,6 +142,7 @@ export default {
 
 | 名称                     | 默认值              | 描述 |
 | ------------------------ | ------------------- | ---- |
+| @circle-size             | `100px`             | -    |
 | @circle-color            | `@blue`             | -    |
 | @circle-layer-color      | `@white`            | -    |
 | @circle-text-color       | `@text-color`       | -    |
diff --git a/src/circle/index.js b/src/circle/index.js
index d77c7af95..2f1764fa6 100644
--- a/src/circle/index.js
+++ b/src/circle/index.js
@@ -21,6 +21,7 @@ function getPath(clockwise, viewBoxSize) {
 export default createComponent({
   props: {
     text: String,
+    size: [Number, String],
     color: [String, Object],
     layerColor: String,
     strokeLinecap: String,
@@ -32,10 +33,6 @@ export default createComponent({
       type: [Number, String],
       default: 0,
     },
-    size: {
-      type: [Number, String],
-      default: 100,
-    },
     fill: {
       type: String,
       default: 'none',
diff --git a/src/circle/index.less b/src/circle/index.less
index 40f51e015..0613d8159 100644
--- a/src/circle/index.less
+++ b/src/circle/index.less
@@ -3,6 +3,8 @@
 .van-circle {
   position: relative;
   display: inline-block;
+  width: @circle-size;
+  height: @circle-size;
   text-align: center;
 
   svg {
diff --git a/src/circle/test/__snapshots__/demo.spec.js.snap b/src/circle/test/__snapshots__/demo.spec.js.snap
index 2512dab4e..58fc6e132 100644
--- a/src/circle/test/__snapshots__/demo.spec.js.snap
+++ b/src/circle/test/__snapshots__/demo.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
+    <div class="van-circle"><svg viewBox="0 0 1040 1040">
         <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path>
         <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="stroke: undefined; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
       </svg>
@@ -11,19 +11,19 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1060 1060">
+    <div class="van-circle"><svg viewBox="0 0 1060 1060">
         <path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 60px;"></path>
         <path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="stroke: undefined; stroke-width: 61px; stroke-dasharray: 2198px 3140px;"></path>
       </svg>
       <div class="van-circle__text">宽度定制</div>
     </div>
-    <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
+    <div class="van-circle"><svg viewBox="0 0 1040 1040">
         <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: #ebedf0; stroke-width: 40px;"></path>
         <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#ee0a24" class="van-circle__hover" style="stroke: #ee0a24; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
       </svg>
       <div class="van-circle__text">颜色定制</div>
     </div>
-    <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
+    <div class="van-circle"><svg viewBox="0 0 1040 1040">
         <defs>
           <linearGradient id="van-circle-gradient-3" x1="100%" y1="0%" x2="0%" y2="0%">
             <stop offset="0%" stop-color="#3fecff"></stop>
@@ -35,7 +35,7 @@ exports[`renders demo correctly 1`] = `
       </svg>
       <div class="van-circle__text">渐变色</div>
     </div>
-    <div class="van-circle" style="width: 100px; height: 100px; margin-top: 15px;"><svg viewBox="0 0 1040 1040">
+    <div class="van-circle" style="margin-top: 15px;"><svg viewBox="0 0 1040 1040">
         <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path>
         <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" stroke="#07c160" class="van-circle__hover" style="stroke: #07c160; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
       </svg>
diff --git a/src/circle/test/__snapshots__/index.spec.js.snap b/src/circle/test/__snapshots__/index.spec.js.snap
index 3680a6ce3..9fde985c1 100644
--- a/src/circle/test/__snapshots__/index.spec.js.snap
+++ b/src/circle/test/__snapshots__/index.spec.js.snap
@@ -8,14 +8,14 @@ exports[`size prop 1`] = `
 `;
 
 exports[`speed is 0 1`] = `
-<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
+<div class="van-circle"><svg viewBox="0 0 1040 1040">
     <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path>
     <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="stroke: undefined; stroke-width: 41px; stroke-dasharray: 1570px 3140px;"></path>
   </svg></div>
 `;
 
 exports[`stroke-linecap prop 1`] = `
-<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
+<div class="van-circle"><svg viewBox="0 0 1040 1040">
     <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path>
     <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="stroke: undefined; stroke-width: 41px; stroke-linecap: square; stroke-dasharray: 0px 3140px;"></path>
   </svg></div>
diff --git a/src/style/var.less b/src/style/var.less
index d9ba3ed8d..ad781be3a 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -241,6 +241,7 @@
 @checkbox-disabled-background-color: @border-color;
 
 // Circle
+@circle-size: 100px;
 @circle-color: @blue;
 @circle-layer-color: @white;
 @circle-text-color: @text-color;