From 7596024ddf252110156dcdf35e3aa3a7df897b6a Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Thu, 23 Dec 2021 21:16:59 +0800
Subject: [PATCH] feat(ActionBarIcon): add badge-props prop (#10096)

---
 .../vant/src/action-bar-icon/ActionBarIcon.tsx     | 12 ++++++++----
 .../vant/src/action-bar-icon/test/index.spec.ts    | 14 ++++++++++++++
 packages/vant/src/action-bar/README.md             |  3 ++-
 packages/vant/src/action-bar/README.zh-CN.md       |  1 +
 4 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/packages/vant/src/action-bar-icon/ActionBarIcon.tsx b/packages/vant/src/action-bar-icon/ActionBarIcon.tsx
index 2aa16fc3b..753455d04 100644
--- a/packages/vant/src/action-bar-icon/ActionBarIcon.tsx
+++ b/packages/vant/src/action-bar-icon/ActionBarIcon.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, type ExtractPropTypes } from 'vue';
+import { defineComponent, type PropType, type ExtractPropTypes } from 'vue';
 import { extend, createNamespace, unknownProp, numericProp } from '../utils';
 import { ACTION_BAR_KEY } from '../action-bar/ActionBar';
 
@@ -8,7 +8,7 @@ import { useRoute, routeProps } from '../composables/use-route';
 
 // Components
 import { Icon } from '../icon';
-import { Badge } from '../badge';
+import { Badge, type BadgeProps } from '../badge';
 
 const [name, bem] = createNamespace('action-bar-icon');
 
@@ -19,6 +19,7 @@ const actionBarIconProps = extend({}, routeProps, {
   color: String,
   badge: numericProp,
   iconClass: unknownProp,
+  badgeProps: Object as PropType<Partial<BadgeProps>>,
   iconPrefix: String,
 });
 
@@ -35,15 +36,17 @@ export default defineComponent({
     useParent(ACTION_BAR_KEY);
 
     const renderIcon = () => {
-      const { dot, badge, icon, color, iconClass, iconPrefix } = props;
+      const { dot, badge, icon, color, iconClass, badgeProps, iconPrefix } =
+        props;
 
       if (slots.icon) {
         return (
           <Badge
             v-slots={{ default: slots.icon }}
             dot={dot}
-            content={badge}
             class={bem('icon')}
+            content={badge}
+            {...badgeProps}
           />
         );
       }
@@ -56,6 +59,7 @@ export default defineComponent({
           badge={badge}
           color={color}
           class={[bem('icon'), iconClass]}
+          badgeProps={badgeProps}
           classPrefix={iconPrefix}
         />
       );
diff --git a/packages/vant/src/action-bar-icon/test/index.spec.ts b/packages/vant/src/action-bar-icon/test/index.spec.ts
index 41fa0efa9..6c23fa201 100644
--- a/packages/vant/src/action-bar-icon/test/index.spec.ts
+++ b/packages/vant/src/action-bar-icon/test/index.spec.ts
@@ -59,3 +59,17 @@ test('should render icon slot with dot correctly', () => {
 
   expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('should render badge-props prop correctly', async () => {
+  const wrapper = mount(ActionBarIcon, {
+    props: {
+      badge: 1,
+      badgeProps: {
+        color: 'blue',
+      },
+    },
+  });
+
+  const badge = wrapper.find('.van-badge');
+  expect(badge.style.backgroundColor).toEqual('blue');
+});
diff --git a/packages/vant/src/action-bar/README.md b/packages/vant/src/action-bar/README.md
index 04925f120..e49909626 100644
--- a/packages/vant/src/action-bar/README.md
+++ b/packages/vant/src/action-bar/README.md
@@ -102,7 +102,8 @@ Use `badge` prop to show badge in icon.
 | icon-prefix `v3.0.17` | Icon className prefix | _string_ | `van-icon` |
 | dot | Whether to show red dot | _boolean_ | - |
 | badge | Content of the badge | _number \| string_ | - |
-| url | Link | _string_ | - |
+| badge-props `v3.2.8` | Props of Badge，see [Badge - props](#/en-US/badge#props) | _BadgeProps_ | - |
+| url | Link URL | _string_ | - |
 | to | Target route of the link, same as to of vue-router | _string \| object_ | - |
 | replace | If true, the navigation will not leave a history record | _boolean_ | `false` |
 
diff --git a/packages/vant/src/action-bar/README.zh-CN.md b/packages/vant/src/action-bar/README.zh-CN.md
index 6e905706e..d9e0b40e7 100644
--- a/packages/vant/src/action-bar/README.zh-CN.md
+++ b/packages/vant/src/action-bar/README.zh-CN.md
@@ -106,6 +106,7 @@ export default {
 | icon-prefix `v3.0.17` | 图标类名前缀，等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 | dot | 是否显示图标右上角小红点 | _boolean_ | `false` |
 | badge | 图标右上角徽标的内容 | _number \| string_ | - |
+| badge-props `v3.2.8` | 自定义徽标的属性，传入的对象会被透传给 [Badge 组件的 props](#/zh-CN/badge#props) | _BadgeProps_ | - |
 | url | 点击后跳转的链接地址 | _string_ | - |
 | to | 点击后跳转的目标路由对象，等同于 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
 | replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |