From f90015efe7619af055b9ebd4c8be7da1f17b8da0 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, 27 Jan 2020 15:17:47 +0800
Subject: [PATCH] feat(Rate): add @rate-icon-void-color less var

---
 src/rate/README.md                            |  2 +-
 src/rate/README.zh-CN.md                      |  2 +-
 src/rate/index.js                             |  5 +----
 src/rate/index.less                           |  1 +
 src/rate/test/__snapshots__/demo.spec.js.snap | 22 +++++++++----------
 .../test/__snapshots__/index.spec.js.snap     | 20 ++++++++---------
 src/style/var.less                            |  1 +
 7 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/src/rate/README.md b/src/rate/README.md
index 6d500d10b..001c7f3ce 100644
--- a/src/rate/README.md
+++ b/src/rate/README.md
@@ -115,7 +115,7 @@ export default {
 | size | Icon size| *string \| number* | `20px` |
 | gutter | Icon gutter | *string \| number* | `4px` |
 | color | Selected color | *string* | `#ffd21e` |
-| void-color | Void color | *string* | `#c7c7c7` |
+| void-color | Void color | *string* | `#c8c9cc` |
 | disabled-color | Disabled color | *string* | `#bdbdbd` |
 | icon | Selected icon | *string* | `star` |
 | void-icon | Void icon | *string* | `star-o` |
diff --git a/src/rate/README.zh-CN.md b/src/rate/README.zh-CN.md
index aeacc6e95..ee3874561 100644
--- a/src/rate/README.zh-CN.md
+++ b/src/rate/README.zh-CN.md
@@ -115,7 +115,7 @@ export default {
 | size | 图标大小，默认单位为`px` | *string \| number* | `20px` |
 | gutter | 图标间距，默认单位为`px` | *string \| number* | `4px` |
 | color | 选中时的颜色 | *string* | `#ffd21e` |
-| void-color | 未选中时的颜色 | *string* | `#c7c7c7` |
+| void-color | 未选中时的颜色 | *string* | `#c8c9cc` |
 | disabled-color | 禁用时的颜色 | *string* | `#bdbdbd` |
 | icon | 选中时的 [图标名称](#/zh-CN/icon) 或图片链接 | *string* | `star` |
 | void-icon | 未选中时的 [图标名称](#/zh-CN/icon) 或图片链接 | *string* | `star-o`  |
diff --git a/src/rate/index.js b/src/rate/index.js
index 9601f3f4d..7338d473f 100644
--- a/src/rate/index.js
+++ b/src/rate/index.js
@@ -27,6 +27,7 @@ export default createComponent({
     readonly: Boolean,
     disabled: Boolean,
     allowHalf: Boolean,
+    voidColor: String,
     disabledColor: String,
     value: {
       type: Number,
@@ -40,10 +41,6 @@ export default createComponent({
       type: String,
       default: 'star-o',
     },
-    voidColor: {
-      type: String,
-      default: '#c7c7c7',
-    },
     count: {
       type: Number,
       default: 5,
diff --git a/src/rate/index.less b/src/rate/index.less
index 411f6165f..27012144f 100644
--- a/src/rate/index.less
+++ b/src/rate/index.less
@@ -16,6 +16,7 @@
   &__icon {
     display: block;
     width: 1em;
+    color: @rate-icon-void-color;
     font-size: @rate-icon-size;
 
     &--half {
diff --git a/src/rate/test/__snapshots__/demo.spec.js.snap b/src/rate/test/__snapshots__/demo.spec.js.snap
index 70d0f52b5..e13676ca0 100644
--- a/src/rate/test/__snapshots__/demo.spec.js.snap
+++ b/src/rate/test/__snapshots__/demo.spec.js.snap
@@ -10,9 +10,9 @@ exports[`renders demo correctly 1`] = `
           <!----></i></div>
       <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
           <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199);">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon">
           <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199);">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon">
           <!----></i></div>
     </div>
   </div>
@@ -24,9 +24,9 @@ exports[`renders demo correctly 1`] = `
           <!----></i></div>
       <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-like van-rate__icon van-rate__icon--full">
           <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-like-o van-rate__icon" style="color: rgb(199, 199, 199);">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-like-o van-rate__icon">
           <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-like-o van-rate__icon" style="color: rgb(199, 199, 199);">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-like-o van-rate__icon">
           <!----></i></div>
     </div>
   </div>
@@ -73,9 +73,9 @@ exports[`renders demo correctly 1`] = `
           <!----></i></div>
       <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="4" aria-checked="true" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
           <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199);">
+      <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon">
           <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="6" aria-checked="false" class="van-rate__item"><i data-score="6" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199);">
+      <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="6" aria-checked="false" class="van-rate__item"><i data-score="6" class="van-icon van-icon-star-o van-rate__icon">
           <!----></i></div>
     </div>
   </div>
@@ -101,9 +101,9 @@ exports[`renders demo correctly 1`] = `
           <!----></i></div>
       <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
           <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199);">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon">
           <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199);">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon">
           <!----></i></div>
     </div>
   </div>
@@ -113,11 +113,11 @@ exports[`renders demo correctly 1`] = `
           <!----></i></div>
       <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
           <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="false" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199);">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="false" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star-o van-rate__icon">
           <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199);">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon">
           <!----></i></div>
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199);">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon">
           <!----></i></div>
     </div>
   </div>
diff --git a/src/rate/test/__snapshots__/index.spec.js.snap b/src/rate/test/__snapshots__/index.spec.js.snap
index 827c726f0..921034480 100644
--- a/src/rate/test/__snapshots__/index.spec.js.snap
+++ b/src/rate/test/__snapshots__/index.spec.js.snap
@@ -2,30 +2,30 @@
 
 exports[`gutter prop 1`] = `
 <div tabindex="0" role="radiogroup" class="van-rate">
-  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="false" class="van-rate__item" style="padding-right: 10px;"><i data-score="1" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199);">
+  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="false" class="van-rate__item" style="padding-right: 10px;"><i data-score="1" class="van-icon van-icon-star-o van-rate__icon">
       <!----></i></div>
-  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="false" class="van-rate__item" style="padding-right: 10px;"><i data-score="2" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199);">
+  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="false" class="van-rate__item" style="padding-right: 10px;"><i data-score="2" class="van-icon van-icon-star-o van-rate__icon">
       <!----></i></div>
-  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="false" class="van-rate__item" style="padding-right: 10px;"><i data-score="3" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199);">
+  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="false" class="van-rate__item" style="padding-right: 10px;"><i data-score="3" class="van-icon van-icon-star-o van-rate__icon">
       <!----></i></div>
-  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item" style="padding-right: 10px;"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199);">
+  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item" style="padding-right: 10px;"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon">
       <!----></i></div>
-  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199);">
+  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon">
       <!----></i></div>
 </div>
 `;
 
 exports[`size prop 1`] = `
 <div tabindex="0" role="radiogroup" class="van-rate">
-  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="false" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 2rem;">
+  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="false" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star-o van-rate__icon" style="font-size: 2rem;">
       <!----></i></div>
-  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="false" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 2rem;">
+  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="false" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star-o van-rate__icon" style="font-size: 2rem;">
       <!----></i></div>
-  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="false" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 2rem;">
+  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="false" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star-o van-rate__icon" style="font-size: 2rem;">
       <!----></i></div>
-  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 2rem;">
+  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="font-size: 2rem;">
       <!----></i></div>
-  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199); font-size: 2rem;">
+  <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="font-size: 2rem;">
       <!----></i></div>
 </div>
 `;
diff --git a/src/style/var.less b/src/style/var.less
index bc8856d21..77ce3b8ac 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -550,6 +550,7 @@
 // Rate
 @rate-icon-size: 20px;
 @rate-icon-gutter: 4px;
+@rate-icon-void-color: @gray-5;
 @rate-icon-full-color: #ffd21e;
 @rate-icon-disabled-color: #bdbdbd;