From abee937da92e9b0c1e5ab10b6646b8aa6b3372c5 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Mon, 10 Dec 2018 20:25:13 +0800
Subject: [PATCH] [improvement] Checkbox: update disabled label color (#2260)

---
 packages/checkbox/index.less                  | 25 +++++++++++--------
 packages/checkbox/index.vue                   |  4 +--
 .../test/__snapshots__/demo.spec.js.snap      |  4 +--
 packages/mixins/bem.js                        |  2 +-
 packages/style/var.less                       |  8 ++++++
 5 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/packages/checkbox/index.less b/packages/checkbox/index.less
index 9969a4425..d63e392da 100644
--- a/packages/checkbox/index.less
+++ b/packages/checkbox/index.less
@@ -18,11 +18,11 @@
       color: transparent;
       text-align: center;
       line-height: inherit;
-      border: 1px solid @gray-light;
       width: @checkbox-size;
       height: @checkbox-size;
       box-sizing: border-box;
-      transition: .2s;
+      border: 1px solid @checkbox-border-color;
+      transition: @checkbox-transition-duration;
     }
 
     &--round {
@@ -34,33 +34,36 @@
     &--checked {
       .van-icon {
         color: @white;
-        border-color: @blue;
-        background-color: @blue;
+        border-color: @checkbox-checked-icon-color;
+        background-color: @checkbox-checked-icon-color;
       }
     }
 
     &--disabled {
       .van-icon {
-        color: @background-color;
-        border-color: @border-color;
-        background-color: currentColor;
+        border-color: @checkbox-disabled-icon-color;
+        background-color: @checkbox-disabled-background-color;
       }
     }
 
     &--disabled&--checked {
       .van-icon {
-        border-color: @border-color;
-        background-color: @border-color;
+        color: @checkbox-disabled-icon-color;
       }
     }
   }
 
   &__label {
-    margin-left: 10px;
+    color: @checkbox-label-color;
+    margin-left: @checkbox-label-margin;
 
     &--left {
       float: left;
-      margin: 0 10px 0 0;
+      margin: 0 @checkbox-label-margin 0 0;
+    }
+
+    &--disabled {
+      color: @checkbox-disabled-label-color;
     }
   }
 }
diff --git a/packages/checkbox/index.vue b/packages/checkbox/index.vue
index da64dce9b..92bd74b9e 100644
--- a/packages/checkbox/index.vue
+++ b/packages/checkbox/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="b()">
     <div
-      :class="[b('icon', [shape, { disabled: isDisabled, checked }])]"
+      :class="b('icon', [shape, { disabled: isDisabled, checked }])"
       @click="toggle"
     >
       <slot
@@ -16,7 +16,7 @@
     </div>
     <span
       v-if="$slots.default"
-      :class="b('label', labelPosition)"
+      :class="b('label', [labelPosition, { disabled: isDisabled }])"
       @click="toggle('label')"
     >
       <slot />
diff --git a/packages/checkbox/test/__snapshots__/demo.spec.js.snap b/packages/checkbox/test/__snapshots__/demo.spec.js.snap
index d174e3b8c..d345070f1 100644
--- a/packages/checkbox/test/__snapshots__/demo.spec.js.snap
+++ b/packages/checkbox/test/__snapshots__/demo.spec.js.snap
@@ -18,7 +18,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
           <!---->
         </i>
-      </div> <span class="van-checkbox__label">
+      </div> <span class="van-checkbox__label van-checkbox__label--disabled">
       复选框
     </span></div>
     <div class="van-checkbox">
@@ -27,7 +27,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
           <!---->
         </i>
-      </div> <span class="van-checkbox__label">
+      </div> <span class="van-checkbox__label van-checkbox__label--disabled">
       复选框
     </span></div>
   </div>
diff --git a/packages/mixins/bem.js b/packages/mixins/bem.js
index 4578901d5..b175f2812 100644
--- a/packages/mixins/bem.js
+++ b/packages/mixins/bem.js
@@ -22,7 +22,7 @@ const prefix = (name, mods) => {
   }
 
   const ret = {};
-  Object.keys(mods).forEach(key => {
+  mods && Object.keys(mods).forEach(key => {
     ret[name + MODS + key] = mods[key];
   });
   return ret;
diff --git a/packages/style/var.less b/packages/style/var.less
index fcc01e45a..3ab420d0d 100644
--- a/packages/style/var.less
+++ b/packages/style/var.less
@@ -39,6 +39,14 @@
 
 // Checkbox
 @checkbox-size: 20px;
+@checkbox-border-color: @gray-light;
+@checkbox-transition-duration: .2s;
+@checkbox-label-margin: 10px;
+@checkbox-label-color: @text-color;
+@checkbox-checked-icon-color: @blue;
+@checkbox-disabled-icon-color: @gray;
+@checkbox-disabled-label-color: @gray;
+@checkbox-disabled-background-color: @border-color;
 
 // Info
 @info-size: 16px;