feat(CheckboxGroup): add checked-color prop (#4531)

src/checkbox-group/index.js

@@ -10,6 +10,7 @@ export default createComponent({
     max: Number,
     disabled: Boolean,
     iconSize: [Number, String],
+    checkedColor: String,
     value: {
       type: Array,
       default: () => []

src/checkbox/README.md

@@ -151,9 +151,9 @@ export default {
 | shape | Can be set to `square` | *string* | `round` | - |
 | v-model | Check status | *boolean* | `false` | - |
 | disabled | Disable checkbox | *boolean* | `false` | - |
-| icon-size | Icon size | *string \| number* | `20px` | - |
 | label-disabled | Whether to disable label click | *boolean* | `false` | - |
 | label-position | Can be set to `left` | *string* | `right` | - |
+| icon-size | Icon size | *string \| number* | `20px` | - |
 | checked-color | Checked color | *string* | `#1989fa` | - | - |
 
 ### CheckboxGroup Props
@@ -161,9 +161,10 @@ export default {
 | Attribute | Description | Type | Default | Version |
 |------|------|------|------|------|
 | v-model | Names of all checked checkboxes | *any[]* | - | - |
+| max | Maximum amount of checked options | *number* | `0`(Unlimited) | - |
 | disabled | Disable all checkboxes | *boolean* | `false` | - |
 | icon-size | Icon size of all checkboxes | *string \| number* | `20px` | 2.2.3 |
-| max | Maximum amount of checked options | *number* | `0`(Unlimited) | - |
+| checked-color | Checked color of all checkboxes | *string* | `#1989fa` | - | 2.2.3 |
 
 ### Checkbox Events
 

src/checkbox/README.zh-CN.md

@@ -153,9 +153,9 @@ export default {
 | shape | 形状，可选值为 `square` | *string* | `round` | - |
 | v-model | 是否为选中状态 | *boolean* | `false` | - |
 | disabled | 是否禁用复选框 | *boolean* | `false` | - |
-| icon-size | 当前复选框的图标大小，默认单位为`px` | *string \| number* | `20px` | - |
 | label-disabled | 是否禁用复选框文本点击 | *boolean* | `false` | - |
 | label-position | 文本位置，可选值为 `left` | *string* | `right` | - |
+| icon-size | 图标大小，默认单位为`px` | *string \| number* | `20px` | - |
 | checked-color | 选中状态颜色 | *string* | `#1989fa` | - |
 
 ### CheckboxGroup Props
@@ -164,8 +164,9 @@ export default {
 |------|------|------|------|------|
 | v-model | 所有选中项的标识符 | *any[]* | - | - |
 | disabled | 是否禁用所有复选框 | *boolean* | `false` | - |
+| max | 最大可选数，0 为无限制 | *number* | `0` | - |
 | icon-size | 所有复选框的图标大小，默认单位为`px` | *string \| number* | `20px` | 2.2.3 |
-| max | 设置最大可选数，0 为无限制 | *number* | `0` | - |
+| checked-color | 所有复选框的选中状态颜色 | *string* | `#1989fa` | 2.2.3 |
 
 ### Checkbox Events
 

src/checkbox/test/__snapshots__/index.spec.js.snap

@@ -1,11 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`checked-color prop 1`] = `
+<div class="van-checkbox-group">
+  <div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
+    <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="border-color: black; background-color: black;">
+        <!----></i></div><span class="van-checkbox__label">label</span>
+  </div>
+  <div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
+    <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="border-color: white; background-color: white;">
+        <!----></i></div><span class="van-checkbox__label">label</span>
+  </div>
+</div>
+`;
+
 exports[`icon-size prop 1`] = `
 <div class="van-checkbox-group">
-  <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
-    <div class="van-checkbox__icon van-checkbox__icon--round" style="font-size: 10rem;"><i class="van-icon van-icon-success">
-        <!----></i></div><span class="van-checkbox__label">label</span>
-  </div>
   <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
     <div class="van-checkbox__icon van-checkbox__icon--round" style="font-size: 10rem;"><i class="van-icon van-icon-success">
         <!----></i></div><span class="van-checkbox__label">label</span>

src/checkbox/test/index.spec.js

@@ -110,7 +110,6 @@ test('icon-size prop', () => {
   const wrapper = mount({
     template: `
       <van-checkbox-group icon-size="10rem">
-        <van-checkbox>label</van-checkbox>
         <van-checkbox>label</van-checkbox>
         <van-checkbox icon-size="5rem">label</van-checkbox>
       </van-checkbox-group>
@@ -119,3 +118,16 @@ test('icon-size prop', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('checked-color prop', () => {
+  const wrapper = mount({
+    template: `
+      <van-checkbox-group :value="['a', 'b']" checked-color="black">
+        <van-checkbox name="a" :value="true">label</van-checkbox>
+        <van-checkbox name="b" :value="true" checked-color="white">label</van-checkbox>
+      </van-checkbox-group>
+    `
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});

src/mixins/checkbox.js

@@ -28,7 +28,7 @@ export const CheckboxMixin = ({ parent, bem, role }) => ({
     },
 
     iconStyle() {
-      const { checkedColor } = this;
+      const checkedColor = this.checkedColor || (this.parent && this.parent.checkedColor);
       if (checkedColor && this.checked && !this.isDisabled) {
         return {
           borderColor: checkedColor,