feat(RadioGroup): add icon-size prop (#4529)

src/mixins/checkbox.js

@@ -76,10 +76,12 @@ export const CheckboxMixin = ({ parent, bem, role }) => ({
       </span>
     );
 
+    const iconSize = this.iconSize || (this.parent && this.parent.iconSize);
+
     const Children = [
       <div
         class={bem('icon', [this.shape, { disabled: this.isDisabled, checked }])}
-        style={{ fontSize: addUnit(this.iconSize) }}
+        style={{ fontSize: addUnit(iconSize) }}
       >
         {CheckIcon}
       </div>

src/radio-group/index.js

@@ -8,7 +8,8 @@ export default createComponent({
 
   props: {
     value: null,
-    disabled: Boolean
+    disabled: Boolean,
+    iconSize: [Number, String]
   },
 
   watch: {

src/radio/README.md

@@ -125,6 +125,7 @@ export default {
 |------|------|------|------|------|
 | v-model | Name of checked radio | *any* | - | - |
 | disabled | Disable all radios | *boolean* | `false` | - |
+| icon-size | Icon size of all radios | *string \| number* | `20px` | 2.2.3 |
 
 ### Radio Events
 

src/radio/README.zh-CN.md

@@ -118,7 +118,7 @@ export default {
 | name | 标识符 | *any* | - | - |
 | shape | 形状，可选值为 `square` | *string* | `round` | - |
 | 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` | - |
@@ -129,6 +129,7 @@ export default {
 |------|------|------|------|------|
 | v-model | 当前选中项的标识符 | *any* | - | - |
 | disabled | 是否禁用所有单选框 | *boolean* | `false` | - |
+| icon-size | 所有单选框的图标大小，默认单位为`px` | *string \| number* | `20px` | 2.2.3 |
 
 ### Radio Events
 

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

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`icon-size prop 1`] = `
+<div role="radiogroup" class="van-radio-group">
+  <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
+    <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 10rem;"><i class="van-icon van-icon-success">
+        <!----></i></div><span class="van-radio__label">label</span>
+  </div>
+  <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
+    <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 10rem;"><i class="van-icon van-icon-success">
+        <!----></i></div><span class="van-radio__label">label</span>
+  </div>
+  <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
+    <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 5rem;"><i class="van-icon van-icon-success">
+        <!----></i></div><span class="van-radio__label">label</span>
+  </div>
+</div>
+`;

src/radio/test/index.spec.js

@@ -1,25 +1,25 @@
+import Vue from 'vue';
 import Radio from '..';
 import RadioGroup from '../../radio-group';
 import { mount } from '../../../test/utils';
 
+Vue.use(Radio);
+Vue.use(RadioGroup);
+
 test('radio-group change', () => {
   const wrapper = mount({
     template: `
-      <radio-group v-model="result" @change="$emit('change', $event)">
+      <van-radio-group v-model="result" @change="$emit('change', $event)">
-        <radio
+        <van-radio
           v-for="item in list"
           :key="item"
           :name="item"
           :disabled="item === 'd'"
         >
           label
-        </radio>
+        </van-radio>
-      </radio-group>
+      </van-radio-group>
     `,
-    components: {
-      Radio,
-      RadioGroup
-    },
     data() {
       return {
         result: 'a',
@@ -47,20 +47,16 @@ test('radio-group change', () => {
 test('radio group disabled', () => {
   const wrapper = mount({
     template: `
-      <radio-group v-model="result" disabled @change="$emit('change', $event)">
+      <van-radio-group v-model="result" disabled @change="$emit('change', $event)">
-        <radio
+        <van-radio
           v-for="item in list"
           :key="item"
           :name="item"
         >
           label
-        </radio>
+        </van-radio>
-      </radio-group>
+      </van-radio-group>
     `,
-    components: {
-      Radio,
-      RadioGroup
-    },
     data() {
       return {
         result: 'a',
@@ -74,3 +70,17 @@ test('radio group disabled', () => {
 
   expect(wrapper.emitted('change')).toBeFalsy();
 });
+
+test('icon-size prop', () => {
+  const wrapper = mount({
+    template: `
+      <van-radio-group icon-size="10rem">
+        <van-radio>label</van-radio>
+        <van-radio>label</van-radio>
+        <van-radio icon-size="5rem">label</van-radio>
+      </van-radio-group>
+    `
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});