feat: badge text support vnode (#2750)

* feat: badge text support vnode

* test: update badge test

components/badge/Badge.jsx

@@ -21,7 +21,7 @@ const BadgeProps = {
   scrollNumberPrefixCls: PropTypes.string,
   status: PropTypes.oneOf(['success', 'processing', 'default', 'error', 'warning']),
   color: PropTypes.string,
-  text: PropTypes.string,
+  text: PropTypes.any,
   offset: PropTypes.array,
   numberStyle: PropTypes.object.def(() => ({})),
   title: PropTypes.string,
@@ -110,7 +110,7 @@ export default {
     },
 
     renderStatusText(prefixCls) {
-      const { text } = this.$props;
+      const text = getComponent(this, 'text');
       const hidden = this.isHidden();
       return hidden || !text ? null : <span class={`${prefixCls}-status-text`}>{text}</span>;
     },
@@ -173,10 +173,10 @@ export default {
       prefixCls: customizePrefixCls,
       scrollNumberPrefixCls: customizeScrollNumberPrefixCls,
       status,
-      text,
       color,
     } = this;
 
+    const text = getComponent(this, 'text');
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('badge', customizePrefixCls);
     const scrollNumberPrefixCls = getPrefixCls('scroll-number', customizeScrollNumberPrefixCls);

components/badge/__tests__/__snapshots__/index.test.js.snap

@@ -44,3 +44,5 @@ exports[`Badge should support offset when count is a VueNode 1`] = `
 <span class="ant-badge"><a href="#" class="head-example">head</a><span class="ant-scroll-number-custom-component custom ant-badge-zoom-enter" style="color: rgb(245, 34, 45); right: -10px; margin-top: 20px;"></span>
 <!----></span>
 `;
+
+exports[`Badge text works with vnode 1`] = `<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-success"></span><span class="ant-badge-status-text"><span>hello</span></span></span>`;

components/badge/__tests__/index.test.js

@@ -136,4 +136,14 @@ describe('Badge', () => {
     });
     expect(wrapper.html()).toMatchSnapshot();
   });
+
+  it('text works with vnode', () => {
+    const wrapper = mount({
+      render() {
+        return <Badge status="success" text={<span>hello</span>} />;
+      },
+    });
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
 });

types/badge.d.ts

@@ -52,7 +52,7 @@ export declare class Badge extends AntdComponent {
      * If status is set, text sets the display text of the status dot
      * @type string
      */
-    text?: string;
+    text?: VNodeChild | JSX.Element;
 
     /**
      * sets the display style of the status dot