fix(ContactList): increase right icon size and optimize styles (#11873)

* 优化 ContactList 边距和圆角边框样式

* 优化 ContactList 的 Demo 标题样式

* 优化 ContactList 的单选框尺寸

* Update README.zh-CN.md

* Update README.md

* Update index.spec.ts.snap

* Update demo.spec.ts.snap

* Update demo-ssr.spec.ts.snap

packages/vant/src/contact-list/ContactList.tsx

@@ -44,7 +44,7 @@ export default defineComponent({
       };
 
       const renderRightIcon = () => (
-        <Radio class={bem('radio')} name={item.id} iconSize={16} />
+        <Radio class={bem('radio')} name={item.id} iconSize={18} />
       );
 
       const renderEditIcon = () => (

packages/vant/src/contact-list/README.md

@@ -111,6 +111,7 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Default Value | Description |
 | --- | --- | --- |
+| --van-contact-list-padding | _var(--van-padding-sm) var(--van-padding-sm) 80px_ | - |
 | --van-contact-list-edit-icon-size | _16px_ | - |
 | --van-contact-list-add-button-z-index | _999_ | - |
 | --van-contact-list-radio-color | _var(--van-primary-color)_ | - |

packages/vant/src/contact-list/README.zh-CN.md

@@ -111,6 +111,7 @@ import type { ContactListItem, ContactListProps } from 'vant';
 
 | 名称                                  | 默认值                     | 描述 |
 | ------------------------------------- | -------------------------- | ---- |
+| --van-contact-list-padding | _var(--van-padding-sm) var(--van-padding-sm) 80px_ | - |
 | --van-contact-list-edit-icon-size     | _16px_                     | -    |
 | --van-contact-list-add-button-z-index | _999_                      | -    |
 | --van-contact-list-radio-color        | _var(--van-primary-color)_ | -    |

packages/vant/src/contact-list/demo/index.vue

@@ -72,10 +72,9 @@ const onSelect = (contact: { id: string }) => {
 </template>
 
 <style lang="less">
-.demo-contact-card {
+.demo-contact-list {
-  .van-popup {
+  .van-doc-demo-block__title {
-    height: 100%;
+    padding-bottom: 0;
-    background-color: var(--van-background);
   }
 }
 </style>

packages/vant/src/contact-list/index.less

@@ -1,4 +1,5 @@
 :root {
+  --van-contact-list-padding: var(--van-padding-sm) var(--van-padding-sm) 80px;
   --van-contact-list-edit-icon-size: 16px;
   --van-contact-list-add-button-z-index: 999;
   --van-contact-list-radio-color: var(--van-primary-color);
@@ -8,7 +9,7 @@
 .van-contact-list {
   box-sizing: border-box;
   height: 100%;
-  padding-bottom: 80px;
+  padding: var(--van-contact-list-padding);
 
   &__item {
     padding: var(--van-contact-list-item-padding);
@@ -34,6 +35,7 @@
     height: 100%;
     overflow-y: scroll;
     -webkit-overflow-scrolling: touch;
+    border-radius: var(--van-radius-lg);
   }
 
   &__edit {

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

@@ -39,7 +39,7 @@ exports[`should render demo and match snapshot 1`] = `
         >
           <!--[-->
           <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"
-               style="font-size:16px;"
+               style="font-size:18px;"
           >
             <i class="van-badge__wrapper van-icon van-icon-success"
                style
@@ -73,7 +73,7 @@ exports[`should render demo and match snapshot 1`] = `
         >
           <!--[-->
           <div class="van-radio__icon van-radio__icon--round"
-               style="font-size:16px;"
+               style="font-size:18px;"
           >
             <i class="van-badge__wrapper van-icon van-icon-success"
                style

packages/vant/src/contact-list/test/__snapshots__/demo.spec.ts.snap

@@ -30,7 +30,7 @@ exports[`should render demo and match snapshot 1`] = `
              aria-checked="true"
         >
           <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"
-               style="font-size: 16px;"
+               style="font-size: 18px;"
           >
             <i class="van-badge__wrapper van-icon van-icon-success">
             </i>
@@ -52,7 +52,7 @@ exports[`should render demo and match snapshot 1`] = `
              aria-checked="false"
         >
           <div class="van-radio__icon van-radio__icon--round"
-               style="font-size: 16px;"
+               style="font-size: 18px;"
           >
             <i class="van-badge__wrapper van-icon van-icon-success">
             </i>

packages/vant/src/contact-list/test/__snapshots__/index.spec.ts.snap

@@ -29,7 +29,7 @@ exports[`should render ContactList correctly 1`] = `
            aria-checked="true"
       >
         <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"
-             style="font-size: 16px;"
+             style="font-size: 18px;"
         >
           <i class="van-badge__wrapper van-icon van-icon-success">
           </i>