From 94735bc53dbfb8164ed4569d276c5af98a528f72 Mon Sep 17 00:00:00 2001
From: yuxian <1606656170@qq.com>
Date: Tue, 12 Nov 2024 12:24:06 +0800
Subject: [PATCH] feat: add `statusTitle` prop to Badge component

---
 components/badge/__tests__/index.test.tsx | 16 ++++++++++++++++
 components/badge/index.en-US.md           |  1 +
 components/badge/index.tsx                |  4 +++-
 components/badge/index.zh-CN.md           |  1 +
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/components/badge/__tests__/index.test.tsx b/components/badge/__tests__/index.test.tsx
index cffee5fcec..08ca6ad605 100644
--- a/components/badge/__tests__/index.test.tsx
+++ b/components/badge/__tests__/index.test.tsx
@@ -262,4 +262,20 @@ describe('Badge', () => {
     expect(element).toHaveStyle({ backgroundColor: 'yellow' });
     expect(element?.querySelector<HTMLElement>('sup')).toHaveStyle({ backgroundColor: 'blue' });
   });
+
+  it('should display custom status title when statusTitle is set', () => {
+    const { container } = render(<Badge status="success" statusTitle="Custom Status Title" />);
+    const badgeStatusElement = container.querySelector('.ant-badge-status-text');
+
+    expect(badgeStatusElement).toBeTruthy();
+    expect(badgeStatusElement?.getAttribute('title')).toBe('Custom Status Title');
+  });
+
+  it('should fallback to default title when statusTitle is not set', () => {
+    const { container } = render(<Badge status="success" />);
+    const badgeStatusElement = container.querySelector('.ant-badge-status-text');
+
+    expect(badgeStatusElement).toBeTruthy();
+    expect(badgeStatusElement?.getAttribute('title')).toBe(null); // 默认无title，若有则根据情况修改
+  });
 });
diff --git a/components/badge/index.en-US.md b/components/badge/index.en-US.md
index 325d290187..f88745ad20 100644
--- a/components/badge/index.en-US.md
+++ b/components/badge/index.en-US.md
@@ -50,6 +50,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | showZero | Whether to show badge when `count` is zero | boolean | false |  |
 | size | If `count` is set, `size` sets the size of badge | `default` \| `small` | - | - |
 | status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | - |  |
+| statusTitle | Sets the text displayed when hovering over the status dot. Effective only when status is set. | string | - |
 | styles | Semantic DOM style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.7.0 |
 | text | If `status` is set, `text` sets the display text of the status `dot` | ReactNode | - |  |
 | title | Text to show when hovering over the badge | string | - |  |
diff --git a/components/badge/index.tsx b/components/badge/index.tsx
index cb8673f54a..1c54956dfa 100644
--- a/components/badge/index.tsx
+++ b/components/badge/index.tsx
@@ -29,6 +29,7 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
   className?: string;
   rootClassName?: string;
   status?: PresetStatusColorType;
+  statusTitle?: string;
   color?: LiteralUnion<PresetColorKey>;
   text?: React.ReactNode;
   size?: 'default' | 'small';
@@ -56,6 +57,7 @@ const InternalBadge = React.forwardRef<HTMLSpanElement, BadgeProps>((props, ref)
     count = null,
     overflowCount = 99,
     dot = false,
+    statusTitle,
     size = 'default',
     title,
     offset,
@@ -135,7 +137,6 @@ const InternalBadge = React.forwardRef<HTMLSpanElement, BadgeProps>((props, ref)
   const titleNode =
     title ??
     (typeof livingCount === 'string' || typeof livingCount === 'number' ? livingCount : undefined);
-
   // >>> Status Text
   const statusTextNode =
     isHidden || !text ? null : <span className={`${prefixCls}-status-text`}>{text}</span>;
@@ -190,6 +191,7 @@ const InternalBadge = React.forwardRef<HTMLSpanElement, BadgeProps>((props, ref)
         style={{ ...styles?.root, ...badge?.styles?.root, ...mergedStyle }}
       >
         <span
+          title={statusTitle}
           className={statusCls}
           style={{ ...styles?.indicator, ...badge?.styles?.indicator, ...statusStyle }}
         />
diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md
index b53b26acc2..57891eb042 100644
--- a/components/badge/index.zh-CN.md
+++ b/components/badge/index.zh-CN.md
@@ -51,6 +51,7 @@ group: 数据展示
 | showZero | 当数值为 0 时，是否展示 Badge | boolean | false |  |
 | size | 在设置了 `count` 的前提下有效，设置小圆点的大小 | `default` \| `small` | - | - |
 | status | 设置 Badge 为状态点 | `success` \| `processing` \| `default` \| `error` \| `warning` | - |  |
+| statusTitle | 设置鼠标放在status状态点的文本，在设置了 `status`的前提下有效。 | string | - |  |
 | styles | 语义化结构 style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.7.0 |
 | text | 在设置了 `status` 的前提下有效，设置状态点的文本 | ReactNode | - |  |
 | title | 设置鼠标放在状态点上时显示的文字 | string | - |  |