From 5c804cf920b75c5bdf962fa49eae31363783f32f 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:13:48 +0800
Subject: [PATCH] feat(Rate): add @rate-icon-full-color less var

---
 src/rate/index.js                             |  9 ++--
 src/rate/index.less                           |  4 ++
 src/rate/test/__snapshots__/demo.spec.js.snap | 52 +++++++++----------
 src/style/var.less                            |  1 +
 4 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/src/rate/index.js b/src/rate/index.js
index ee920f999..9601f3f4d 100644
--- a/src/rate/index.js
+++ b/src/rate/index.js
@@ -22,6 +22,7 @@ export default createComponent({
 
   props: {
     size: [Number, String],
+    color: String,
     gutter: [Number, String],
     readonly: Boolean,
     disabled: Boolean,
@@ -39,10 +40,6 @@ export default createComponent({
       type: String,
       default: 'star-o',
     },
-    color: {
-      type: String,
-      default: '#ffd21e',
-    },
     voidColor: {
       type: String,
       default: '#c7c7c7',
@@ -172,7 +169,7 @@ export default createComponent({
           <Icon
             size={this.sizeWithUnit}
             name={isFull ? icon : voidIcon}
-            class={bem('icon', { disabled })}
+            class={bem('icon', { disabled, full: isFull })}
             data-score={score}
             color={disabled ? disabledColor : isFull ? color : voidColor}
             onClick={() => {
@@ -183,7 +180,7 @@ export default createComponent({
             <Icon
               size={this.sizeWithUnit}
               name={isVoid ? voidIcon : icon}
-              class={bem('icon', ['half', { disabled }])}
+              class={bem('icon', ['half', { disabled, full: !isVoid }])}
               data-score={score - 0.5}
               color={disabled ? disabledColor : isVoid ? voidColor : color}
               onClick={() => {
diff --git a/src/rate/index.less b/src/rate/index.less
index 12f5f25bf..411f6165f 100644
--- a/src/rate/index.less
+++ b/src/rate/index.less
@@ -26,6 +26,10 @@
       overflow: hidden;
     }
 
+    &--full {
+      color: @rate-icon-full-color;
+    }
+
     &--disabled {
       color: @rate-icon-disabled-color;
     }
diff --git a/src/rate/test/__snapshots__/demo.spec.js.snap b/src/rate/test/__snapshots__/demo.spec.js.snap
index 55f7f88d9..70d0f52b5 100644
--- a/src/rate/test/__snapshots__/demo.spec.js.snap
+++ b/src/rate/test/__snapshots__/demo.spec.js.snap
@@ -4,11 +4,11 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div tabindex="0" role="radiogroup" class="van-rate">
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30);">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" 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="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30);">
+      <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="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30);">
+      <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);">
           <!----></i></div>
@@ -18,11 +18,11 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div tabindex="0" role="radiogroup" class="van-rate">
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-like van-rate__icon" style="color: rgb(255, 210, 30);">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" 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="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-like van-rate__icon" style="color: rgb(255, 210, 30);">
+      <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-like van-rate__icon van-rate__icon--full">
           <!----></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" style="color: rgb(255, 210, 30);">
+      <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);">
           <!----></i></div>
@@ -32,11 +32,11 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div tabindex="0" role="radiogroup" class="van-rate">
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 10, 36); font-size: 25px;">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="color: rgb(238, 10, 36); font-size: 25px;">
           <!----></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" style="color: rgb(238, 10, 36); font-size: 25px;">
+      <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" style="color: rgb(238, 10, 36); font-size: 25px;">
           <!----></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" style="color: rgb(238, 10, 36); font-size: 25px;">
+      <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" style="color: rgb(238, 10, 36); font-size: 25px;">
           <!----></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 van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
           <!----></i></div>
@@ -46,14 +46,14 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div tabindex="0" role="radiogroup" class="van-rate">
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30); font-size: 25px;">
-          <!----></i><i data-score="0.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(255, 210, 30); font-size: 25px;">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="font-size: 25px;">
+          <!----></i><i data-score="0.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full" style="font-size: 25px;">
           <!----></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" style="color: rgb(255, 210, 30); font-size: 25px;">
-          <!----></i><i data-score="1.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(255, 210, 30); font-size: 25px;">
+      <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" style="font-size: 25px;">
+          <!----></i><i data-score="1.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full" style="font-size: 25px;">
           <!----></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" style="color: rgb(238, 238, 238); font-size: 25px;">
-          <!----></i><i data-score="2.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(255, 210, 30); font-size: 25px;">
+          <!----></i><i data-score="2.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full" style="font-size: 25px;">
           <!----></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 van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
           <!----></i><i data-score="3.5" class="van-icon van-icon-star van-rate__icon van-rate__icon--half" style="color: rgb(238, 238, 238); font-size: 25px;">
@@ -65,13 +65,13 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div tabindex="0" role="radiogroup" class="van-rate">
-      <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30);">
+      <div role="radio" tabindex="0" aria-setsize="6" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" 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="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30);">
+      <div role="radio" tabindex="0" aria-setsize="6" 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="6" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30);">
+      <div role="radio" tabindex="0" aria-setsize="6" 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="6" aria-posinset="4" aria-checked="true" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30);">
+      <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);">
           <!----></i></div>
@@ -81,11 +81,11 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div tabindex="0" role="radiogroup" class="van-rate van-rate--disabled">
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--disabled">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full">
           <!----></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--disabled">
+      <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--disabled van-rate__icon--full">
           <!----></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--disabled">
+      <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--disabled 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 van-rate__icon--disabled">
           <!----></i></div>
@@ -95,11 +95,11 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div tabindex="0" role="radiogroup" class="van-rate van-rate--readonly">
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30);">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" 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="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30);">
+      <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="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30);">
+      <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);">
           <!----></i></div>
@@ -109,9 +109,9 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div tabindex="0" role="radiogroup" class="van-rate">
-      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30);">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" 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="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30);">
+      <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);">
           <!----></i></div>
diff --git a/src/style/var.less b/src/style/var.less
index 97227c8c8..bc8856d21 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-full-color: #ffd21e;
 @rate-icon-disabled-color: #bdbdbd;
 
 // Search