feat(RadioGroup): support shape prop on RadioGroup and CheckboxGroup (#12092)

* feat(RadioGroup): support shape prop on  radio-group

* chore: adjust priority

* chore: update

* docs: update docs

* chore: update demos and docs

* test: update

packages/vant/src/checkbox-group/CheckboxGroup.tsx

@@ -7,14 +7,19 @@ import {
 } from 'vue';
 
 // Utils
-import { numericProp, createNamespace, makeArrayProp } from '../utils';
+import {
+  numericProp,
+  makeArrayProp,
+  makeStringProp,
+  createNamespace,
+} from '../utils';
 
 // Composables
 import { useChildren, useCustomFieldValue } from '@vant/use';
 import { useExpose } from '../composables/use-expose';
 
 // Types
-import type { CheckerDirection } from '../checkbox/Checker';
+import type { CheckerShape, CheckerDirection } from '../checkbox/Checker';
 import type {
   CheckboxGroupExpose,
   CheckboxGroupProvide,
@@ -25,6 +30,7 @@ const [name, bem] = createNamespace('checkbox-group');
 
 export const checkboxGroupProps = {
   max: numericProp,
+  shape: makeStringProp<CheckerShape>('round'),
   disabled: Boolean,
   iconSize: numericProp,
   direction: String as PropType<CheckerDirection>,

packages/vant/src/checkbox-group/test/index.spec.tsx

@@ -180,3 +180,29 @@ test('should toggle all checkboxes when toggleAll method is called', async () =>
   wrapper.vm.toggleAll({ checked: true, skipDisabled: true });
   expect(wrapper.vm.value).toEqual(['a', 'b', 'c']);
 });
+
+test('should render shape correctly when using shape prop', () => {
+  const wrapper = mount({
+    setup() {
+      const groupValue = ref([]);
+
+      return {
+        groupValue,
+      };
+    },
+    render() {
+      return (
+        <CheckboxGroup modelValue={this.groupValue} shape="square">
+          <Checkbox name="a" />
+          <Checkbox name="b" shape="round" />
+        </CheckboxGroup>
+      );
+    },
+  });
+
+  const shapeClass = 'van-checkbox__icon--square';
+  const shapeClass1 = 'van-checkbox__icon--round';
+  const iconBoxs = wrapper.findAll('.van-checkbox__icon');
+  expect(iconBoxs[0].classes()).toContain(shapeClass);
+  expect(iconBoxs[1].classes()).toContain(shapeClass1);
+});

packages/vant/src/checkbox/Checkbox.tsx

@@ -1,13 +1,13 @@
-import { watch, computed, defineComponent, type ExtractPropTypes } from 'vue';
+import {
+  watch,
+  computed,
+  defineComponent,
+  type PropType,
+  type ExtractPropTypes,
+} from 'vue';
 
 // Utils
-import {
-  pick,
-  extend,
-  truthProp,
-  makeStringProp,
-  createNamespace,
-} from '../utils';
+import { pick, extend, truthProp, createNamespace } from '../utils';
 import { CHECKBOX_GROUP_KEY } from '../checkbox-group/CheckboxGroup';
 
 // Composables
@@ -23,7 +23,7 @@ import type { CheckboxExpose } from './types';
 const [name, bem] = createNamespace('checkbox');
 
 export const checkboxProps = extend({}, checkerProps, {
-  shape: makeStringProp<CheckerShape>('round'),
+  shape: String as PropType<CheckerShape>,
   bindGroup: truthProp,
 });
 

packages/vant/src/checkbox/Checker.tsx

@@ -5,7 +5,6 @@ import {
   truthProp,
   numericProp,
   unknownProp,
-  makeStringProp,
   makeRequiredProp,
   type Numeric,
 } from '../utils';
@@ -18,12 +17,13 @@ export type CheckerDirection = 'horizontal' | 'vertical';
 export type CheckerLabelPosition = 'left' | 'right';
 export type CheckerParent = {
   props: {
+    max?: Numeric;
+    shape?: CheckerShape | RadioShape;
     disabled?: boolean;
     iconSize?: Numeric;
     direction?: CheckerDirection;
-    checkedColor?: string;
     modelValue?: unknown | unknown[];
-    max?: Numeric;
+    checkedColor?: string;
   };
 };
 
@@ -41,7 +41,7 @@ export default defineComponent({
   props: extend({}, checkerProps, {
     bem: makeRequiredProp(Function),
     role: String,
-    shape: makeStringProp<CheckerShape | RadioShape>('round'),
+    shape: String as PropType<CheckerShape | RadioShape>,
     parent: Object as PropType<CheckerParent | null>,
     checked: Boolean,
     bindGroup: truthProp,
@@ -90,6 +90,10 @@ export default defineComponent({
       }
     });
 
+    const shape = computed(() => {
+      return props.shape || getParentProp('shape') || 'round';
+    });
+
     const onClick = (event: MouseEvent) => {
       const { target } = event;
       const icon = iconRef.value;
@@ -102,15 +106,18 @@ export default defineComponent({
     };
 
     const renderIcon = () => {
-      const { bem, shape, checked } = props;
+      const { bem, checked } = props;
       const iconSize = props.iconSize || getParentProp('iconSize');
 
       return (
         <div
           ref={iconRef}
-          class={bem('icon', [shape, { disabled: disabled.value, checked }])}
+          class={bem('icon', [
+            shape.value,
+            { disabled: disabled.value, checked },
+          ])}
           style={
-            shape !== 'dot'
+            shape.value !== 'dot'
               ? { fontSize: addUnit(iconSize) }
               : {
                   width: addUnit(iconSize),
@@ -121,7 +128,7 @@ export default defineComponent({
         >
           {slots.icon ? (
             slots.icon({ checked, disabled: disabled.value })
-          ) : shape !== 'dot' ? (
+          ) : shape.value !== 'dot' ? (
             <Icon name="success" style={iconStyle.value} />
           ) : (
             <div

packages/vant/src/checkbox/README.md

@@ -47,7 +47,21 @@ export default {
 ### Custom Shape
 
 ```html
-<van-checkbox v-model="checked" shape="square">Checkbox</van-checkbox>
+<van-checkbox-group v-model="checked" shape="square">
+  <van-checkbox name="a">复选框 a</van-checkbox>
+  <van-checkbox name="b">复选框 b</van-checkbox>
+</van-checkbox-group>
+```
+
+```js
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const checked = ref(['a', 'b']);
+    return { checked };
+  },
+};
 ```
 
 ### Custom Color
@@ -277,6 +291,7 @@ export default {
 | direction | Direction, can be set to `horizontal` | _string_ | `vertical` |
 | icon-size | Icon size of all checkboxes | _number \| string_ | `20px` |
 | checked-color | Checked color of all checkboxes | _string_ | `#1989fa` |
+| shape `v4.6.3` | Can be set to `square` | _string_ | `round` |
 
 ### Checkbox Events
 

packages/vant/src/checkbox/README.zh-CN.md

@@ -51,7 +51,21 @@ export default {
 将 `shape` 属性设置为 `square`，复选框的形状会变成方形。
 
 ```html
-<van-checkbox v-model="checked" shape="square">复选框</van-checkbox>
+<van-checkbox-group v-model="checked" shape="square">
+  <van-checkbox name="a">复选框 a</van-checkbox>
+  <van-checkbox name="b">复选框 b</van-checkbox>
+</van-checkbox-group>
+```
+
+```js
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const checked = ref(['a', 'b']);
+    return { checked };
+  },
+};
 ```
 
 ### 自定义颜色
@@ -294,6 +308,7 @@ export default {
 | direction | 排列方向，可选值为 `horizontal` | _string_ | `vertical` |
 | icon-size | 所有复选框的图标大小，默认单位为 `px` | _number \| string_ | `20px` |
 | checked-color | 所有复选框的选中状态颜色 | _string_ | `#1989fa` |
+| shape `v4.6.3` | 形状，可选值为 `square` | _string_ | `round` |
 
 ### Checkbox Events
 

packages/vant/src/checkbox/demo/index.vue

@@ -49,12 +49,12 @@ const state = reactive({
   checkbox1: true,
   checkbox2: true,
   checkbox3: true,
-  checkboxShape: true,
   checkboxLabel: true,
   checkboxIcon: true,
   leftLabel: false,
   list: ['a', 'b'],
   result: ['a', 'b'],
+  checkboxShape: ['a', 'b'],
   result2: [],
   result3: [],
   checkAllResult: [],
@@ -95,9 +95,10 @@ const toggleAll = () => {
   </demo-block>
 
   <demo-block :title="t('customShape')">
-    <van-checkbox v-model="state.checkboxShape" shape="square">
-      {{ t('customShape') }}
-    </van-checkbox>
+    <van-checkbox-group v-model="state.checkboxShape" shape="square">
+      <van-checkbox name="a">{{ t('customShape') }} a</van-checkbox>
+      <van-checkbox name="b">{{ t('customShape') }} b</van-checkbox>
+    </van-checkbox-group>
   </demo-block>
 
   <demo-block :title="t('customColor')">

packages/vant/src/checkbox/test/__snapshots__/demo-ssr.spec.ts.snap

@@ -68,25 +68,48 @@ exports[`should render demo and match snapshot 1`] = `
 </div>
 <div>
   <!--[-->
-  <div role="checkbox"
-       class="van-checkbox"
-       tabindex="0"
-       aria-checked="true"
-  >
+  <div class="van-checkbox-group">
     <!--[-->
-    <div class="van-checkbox__icon van-checkbox__icon--square van-checkbox__icon--checked"
-         style
+    <div role="checkbox"
+         class="van-checkbox"
+         tabindex="0"
+         aria-checked="true"
     >
-      <i class="van-badge__wrapper van-icon van-icon-success"
-         style
-      >
-        <!--[-->
-      </i>
-    </div>
-    <span class="van-checkbox__label">
       <!--[-->
-      Custom Shape
-    </span>
+      <div class="van-checkbox__icon van-checkbox__icon--square van-checkbox__icon--checked"
+           style
+      >
+        <i class="van-badge__wrapper van-icon van-icon-success"
+           style
+        >
+          <!--[-->
+        </i>
+      </div>
+      <span class="van-checkbox__label">
+        <!--[-->
+        Custom Shape a
+      </span>
+    </div>
+    <div role="checkbox"
+         class="van-checkbox"
+         tabindex="0"
+         aria-checked="true"
+    >
+      <!--[-->
+      <div class="van-checkbox__icon van-checkbox__icon--square van-checkbox__icon--checked"
+           style
+      >
+        <i class="van-badge__wrapper van-icon van-icon-success"
+           style
+        >
+          <!--[-->
+        </i>
+      </div>
+      <span class="van-checkbox__label">
+        <!--[-->
+        Custom Shape b
+      </span>
+    </div>
   </div>
 </div>
 <div>

packages/vant/src/checkbox/test/__snapshots__/demo.spec.ts.snap

@@ -43,18 +43,33 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div role="checkbox"
-       class="van-checkbox"
-       tabindex="0"
-       aria-checked="true"
-  >
-    <div class="van-checkbox__icon van-checkbox__icon--square van-checkbox__icon--checked">
-      <i class="van-badge__wrapper van-icon van-icon-success">
-      </i>
+  <div class="van-checkbox-group">
+    <div role="checkbox"
+         class="van-checkbox"
+         tabindex="0"
+         aria-checked="true"
+    >
+      <div class="van-checkbox__icon van-checkbox__icon--square van-checkbox__icon--checked">
+        <i class="van-badge__wrapper van-icon van-icon-success">
+        </i>
+      </div>
+      <span class="van-checkbox__label">
+        Custom Shape a
+      </span>
+    </div>
+    <div role="checkbox"
+         class="van-checkbox"
+         tabindex="0"
+         aria-checked="true"
+    >
+      <div class="van-checkbox__icon van-checkbox__icon--square van-checkbox__icon--checked">
+        <i class="van-badge__wrapper van-icon van-icon-success">
+        </i>
+      </div>
+      <span class="van-checkbox__label">
+        Custom Shape b
+      </span>
     </div>
-    <span class="van-checkbox__label">
-      Custom Shape
-    </span>
   </div>
 </div>
 <div>

packages/vant/src/radio-group/RadioGroup.tsx

@@ -7,6 +7,8 @@ import {
 } from 'vue';
 import { unknownProp, numericProp, createNamespace } from '../utils';
 import { useChildren, useCustomFieldValue } from '@vant/use';
+
+import type { RadioShape } from '../radio';
 import type { CheckerDirection } from '../checkbox/Checker';
 
 const [name, bem] = createNamespace('radio-group');
@@ -14,6 +16,7 @@ const [name, bem] = createNamespace('radio-group');
 export type RadioGroupDirection = CheckerDirection;
 
 export const radioGroupProps = {
+  shape: String as PropType<RadioShape>,
   disabled: Boolean,
   iconSize: numericProp,
   direction: String as PropType<RadioGroupDirection>,

packages/vant/src/radio-group/test/index.spec.tsx

@@ -113,3 +113,23 @@ test('should change checked color when using checked-color prop', () => {
   expect(icons[0].style.backgroundColor).toEqual('black');
   expect(icons[1].style.backgroundColor).toEqual('white');
 });
+
+test('should render shape correctly when using shape prop', () => {
+  const wrapper = mount({
+    render() {
+      return (
+        <RadioGroup shape="dot">
+          <Radio modelValue={true} />
+          <Radio modelValue={true} shape="round" />
+        </RadioGroup>
+      );
+    },
+  });
+
+  const shapeClass = 'van-radio__icon--dot';
+  // The priority of the sub component shape prop is higher than parent component
+  const shapeClass1 = 'van-radio__icon--round';
+  const iconBoxs = wrapper.findAll('.van-radio__icon');
+  expect(iconBoxs[0].classes()).toContain(shapeClass);
+  expect(iconBoxs[1].classes()).toContain(shapeClass1);
+});

packages/vant/src/radio/README.md

@@ -62,14 +62,14 @@ export default {
 ### Custom Shape
 
 ```html
-<van-radio-group v-model="checked">
-  <van-radio name="1" shape="square">Radio 1</van-radio>
-  <van-radio name="2" shape="square">Radio 2</van-radio>
+<van-radio-group v-model="checked" shape="square">
+  <van-radio name="1">Radio 1</van-radio>
+  <van-radio name="2">Radio 2</van-radio>
 </van-radio-group>
 
-<van-radio-group v-model="checked">
-  <van-radio name="1" shape="dot">Radio 1</van-radio>
-  <van-radio name="2" shape="dot">Radio 2</van-radio>
+<van-radio-group v-model="checked" shape="dot">
+  <van-radio name="1">Radio 1</van-radio>
+  <van-radio name="2">Radio 2</van-radio>
 </van-radio-group>
 ```
 
@@ -211,6 +211,7 @@ import type {
 | direction | Direction, can be set to `horizontal` | _string_ | `vertical` |
 | icon-size | Icon size of all radios | _number \| string_ | `20px` |
 | checked-color | Checked color of all radios | _string_ | `#1989fa` |
+| shape `v4.6.3` | Can be set to `square` `dot` | _string_ | `round` |
 
 ### Radio Events
 

packages/vant/src/radio/README.zh-CN.md

@@ -65,17 +65,17 @@ export default {
 
 ### 自定义形状
 
-`shape` 属性可选值为 `square` 和 `dot`，单选框形状分别对应方形和圆形。
+`shape` 属性可选值为 `square` 和 `dot`，单选框形状分别对应方形和圆点形。
 
 ```html
-<van-radio-group v-model="checked">
-  <van-radio name="1" shape="square">单选框 1</van-radio>
-  <van-radio name="2" shape="square">单选框 2</van-radio>
+<van-radio-group v-model="checked" shape="square">
+  <van-radio name="1">单选框 1</van-radio>
+  <van-radio name="2">单选框 2</van-radio>
 </van-radio-group>
 
-<van-radio-group v-model="checked">
-  <van-radio name="1" shape="dot">Radio 1</van-radio>
-  <van-radio name="2" shape="dot">Radio 2</van-radio>
+<van-radio-group v-model="checked" shape="dot">
+  <van-radio name="1">Radio 1</van-radio>
+  <van-radio name="2">Radio 2</van-radio>
 </van-radio-group>
 ```
 
@@ -211,6 +211,7 @@ export default {
 | direction | 排列方向，可选值为 `horizontal` | _string_ | `vertical` |
 | icon-size | 所有单选框的图标大小，默认单位为 `px` | _number \| string_ | `20px` |
 | checked-color | 所有单选框的选中状态颜色 | _string_ | `#1989fa` |
+| shape `v4.6.3` | 形状，可选值为 `square` `dot` | _string_ | `round` |
 
 ### Radio Events
 

packages/vant/src/radio/Radio.tsx

@@ -1,7 +1,7 @@
-import { defineComponent, type ExtractPropTypes } from 'vue';
+import { defineComponent, type PropType, type ExtractPropTypes } from 'vue';
 
 // Utils
-import { pick, extend, createNamespace, makeStringProp } from '../utils';
+import { pick, extend, createNamespace } from '../utils';
 import { RADIO_KEY } from '../radio-group/RadioGroup';
 
 // Composables
@@ -17,7 +17,7 @@ import Checker, {
 export type RadioShape = CheckerShape | 'dot';
 
 export const radioProps = extend({}, checkerProps, {
-  shape: makeStringProp<RadioShape>('round'),
+  shape: String as PropType<RadioShape>,
 });
 
 export type RadioLabelPosition = CheckerLabelPosition;

packages/vant/src/radio/demo/index.vue

@@ -77,17 +77,22 @@ const inactiveIcon = cdnURL('user-inactive.png');
   </demo-block>
 
   <demo-block :title="t('customShape')">
-    <van-radio-group v-model="radioSquare" class="demo-radio-group">
-      <van-radio name="1" shape="square">{{ t('radio') }} 1</van-radio>
-      <van-radio name="2" shape="square">{{ t('radio') }} 2</van-radio>
+    <van-radio-group
+      v-model="radioSquare"
+      class="demo-radio-group"
+      shape="square"
+    >
+      <van-radio name="1">{{ t('radio') }} 1</van-radio>
+      <van-radio name="2">{{ t('radio') }} 2</van-radio>
     </van-radio-group>
     <van-radio-group
       v-model="radioDot"
       class="demo-radio-group"
+      shape="dot"
       style="margin-top: 20px"
     >
-      <van-radio name="1" shape="dot">{{ t('radio') }} 1</van-radio>
-      <van-radio name="2" shape="dot">{{ t('radio') }} 2</van-radio>
+      <van-radio name="1">{{ t('radio') }} 1</van-radio>
+      <van-radio name="2">{{ t('radio') }} 2</van-radio>
     </van-radio-group>
   </demo-block>
 

packages/vant/src/radio/index.less

@@ -76,7 +76,7 @@
         height: calc(100% - var(--van-radio-dot-size));
         width: calc(100% - var(--van-radio-dot-size));
         transition-duration: var(--van-radio-duration);
-        transition-property: border-color, background-color;
+        transition-property: background-color;
       }
     }