feat(CheckboxGroup): add icon-size prop (#4530)

src/checkbox-group/index.js

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

src/checkbox/README.md

@@ -162,6 +162,7 @@ export default {
 |------|------|------|------|------|
 | v-model | Names of all checked checkboxes | *any[]* | - | - |
 | 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) | - |
 
 ### Checkbox Events

src/checkbox/README.zh-CN.md

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

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

@@ -1,5 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+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>
+  </div>
+  <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
+    <div class="van-checkbox__icon van-checkbox__icon--round" style="font-size: 5rem;"><i class="van-icon van-icon-success">
+        <!----></i></div><span class="van-checkbox__label">label</span>
+  </div>
+</div>
+`;
+
 exports[`label disabled 1`] = `
 <div role="checkbox" tabindex="0" aria-checked="undefined" class="van-checkbox">
   <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">

src/checkbox/test/index.spec.js

@@ -1,7 +1,11 @@
+import Vue from 'vue';
 import Checkbox from '..';
 import CheckboxGroup from '../../checkbox-group';
 import { mount, later } from '../../../test/utils';
 
+Vue.use(Checkbox);
+Vue.use(CheckboxGroup);
+
 test('switch checkbox', async () => {
   const wrapper = mount(Checkbox);
 
@@ -47,14 +51,10 @@ test('label disabled', () => {
 test('checkbox group', async () => {
   const wrapper = mount({
     template: `
-      <checkbox-group v-model="result" :max="2">
+      <van-checkbox-group v-model="result" :max="2">
-        <checkbox v-for="item in list" :key="item" :name="item"></checkbox>
+        <van-checkbox v-for="item in list" :key="item" :name="item"></van-checkbox>
-      </checkbox-group>
+      </van-checkbox-group>
     `,
-    components: {
-      Checkbox,
-      CheckboxGroup
-    },
     data() {
       return {
         result: [],
@@ -105,3 +105,17 @@ test('label-position prop', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+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>
+    `
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});