refact(design): Better implementation and style for Badge

packages/design/src/badge/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,69 +1,88 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Badge custom icon mode should render correctly 1`] = `
-<div
-  class="ant-space ant-space-horizontal ant-space-align-center ant-badge"
+exports[`Badge status custom icon 1`] = `
+<span
+  class="ant-badge ant-badge-status css-dev-only-do-not-override-18iikkb"
+  style="display: inline-block;"
 >
-  <div
-    class="ant-space-item"
+  <span
+    class="ant-badge-status-icon ant-badge-status-success"
   >
     <span
-      class="ant-badge-status-icon ant-badge-status-success"
+      aria-label="taobao"
+      class="anticon anticon-taobao"
+      role="img"
     >
-      <span
-        aria-label="taobao"
-        class="anticon anticon-taobao"
-        role="img"
+      <svg
+        aria-hidden="true"
+        data-icon="taobao"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
       >
-        <svg
-          aria-hidden="true"
-          data-icon="taobao"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M168.5 273.7a68.7 68.7 0 10137.4 0 68.7 68.7 0 10-137.4 0zm730 79.2s-23.7-184.4-426.9-70.1c17.3-30 25.6-49.5 25.6-49.5L396.4 205s-40.6 132.6-113 194.4c0 0 70.1 40.6 69.4 39.4 20.1-20.1 38.2-40.6 53.7-60.4 16.1-7 31.5-13.6 46.7-19.8-18.6 33.5-48.7 83.8-78.8 115.6l42.4 37s28.8-27.7 60.4-61.2h36v61.8H372.9v49.5h140.3v118.5c-1.7 0-3.6 0-5.4-.2-15.4-.7-39.5-3.3-49-18.2-11.5-18.1-3-51.5-2.4-71.9h-97l-3.4 1.8s-35.5 159.1 102.3 155.5c129.1 3.6 203-36 238.6-63.1l14.2 52.6 79.6-33.2-53.9-131.9-64.6 20.1 12.1 45.2c-16.6 12.4-35.6 21.7-56.2 28.4V561.3h137.1v-49.5H628.1V450h137.6v-49.5H521.3c17.6-21.4 31.5-41.1 35-53.6l-42.5-11.6c182.8-65.5 284.5-54.2 283.6 53.2v282.8s10.8 97.1-100.4 90.1l-60.2-12.9-14.2 57.1S882.5 880 903.7 680.2c21.3-200-5.2-327.3-5.2-327.3zm-707.4 18.3l-45.4 69.7 83.6 52.1s56 28.5 29.4 81.9C233.8 625.5 112 736.3 112 736.3l109 68.1c75.4-163.7 70.5-142 89.5-200.7 19.5-60.1 23.7-105.9-9.4-139.1-42.4-42.6-47-46.6-110-93.4z"
-          />
-        </svg>
-      </span>
+        <path
+          d="M168.5 273.7a68.7 68.7 0 10137.4 0 68.7 68.7 0 10-137.4 0zm730 79.2s-23.7-184.4-426.9-70.1c17.3-30 25.6-49.5 25.6-49.5L396.4 205s-40.6 132.6-113 194.4c0 0 70.1 40.6 69.4 39.4 20.1-20.1 38.2-40.6 53.7-60.4 16.1-7 31.5-13.6 46.7-19.8-18.6 33.5-48.7 83.8-78.8 115.6l42.4 37s28.8-27.7 60.4-61.2h36v61.8H372.9v49.5h140.3v118.5c-1.7 0-3.6 0-5.4-.2-15.4-.7-39.5-3.3-49-18.2-11.5-18.1-3-51.5-2.4-71.9h-97l-3.4 1.8s-35.5 159.1 102.3 155.5c129.1 3.6 203-36 238.6-63.1l14.2 52.6 79.6-33.2-53.9-131.9-64.6 20.1 12.1 45.2c-16.6 12.4-35.6 21.7-56.2 28.4V561.3h137.1v-49.5H628.1V450h137.6v-49.5H521.3c17.6-21.4 31.5-41.1 35-53.6l-42.5-11.6c182.8-65.5 284.5-54.2 283.6 53.2v282.8s10.8 97.1-100.4 90.1l-60.2-12.9-14.2 57.1S882.5 880 903.7 680.2c21.3-200-5.2-327.3-5.2-327.3zm-707.4 18.3l-45.4 69.7 83.6 52.1s56 28.5 29.4 81.9C233.8 625.5 112 736.3 112 736.3l109 68.1c75.4-163.7 70.5-142 89.5-200.7 19.5-60.1 23.7-105.9-9.4-139.1-42.4-42.6-47-46.6-110-93.4z"
+        />
+      </svg>
     </span>
-  </div>
-</div>
+  </span>
+  <span
+    class="ant-badge-status-text"
+  >
+    Success
+  </span>
+</span>
+`;
+
+exports[`Badge status dot 1`] = `
+<span
+  class="ant-badge ant-badge-status ant-badge-not-a-wrapper ant-badge"
+>
+  <span
+    class="ant-badge-status-dot ant-badge-status-success"
+  />
+  <span
+    class="ant-badge-status-text"
+  >
+    Success
+  </span>
+</span>
 `;
 
-exports[`Badge icon mode should render correctly 1`] = `
-<div
-  class="ant-space ant-space-horizontal ant-space-align-center ant-badge"
+exports[`Badge status icon 1`] = `
+<span
+  class="ant-badge ant-badge-status css-dev-only-do-not-override-18iikkb"
+  style="display: inline-block;"
 >
-  <div
-    class="ant-space-item"
+  <span
+    class="ant-badge-status-icon ant-badge-status-success"
   >
     <span
-      class="ant-badge-status-icon ant-badge-status-success"
+      aria-label="check-circle"
+      class="anticon anticon-check-circle"
+      role="img"
     >
-      <span
-        aria-label="check-circle"
-        class="anticon anticon-check-circle"
-        role="img"
+      <svg
+        aria-hidden="true"
+        data-icon="check-circle"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
       >
-        <svg
-          aria-hidden="true"
-          data-icon="check-circle"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
-          />
-        </svg>
-      </span>
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+        />
+      </svg>
     </span>
-  </div>
-</div>
+  </span>
+  <span
+    class="ant-badge-status-text"
+  >
+    Success
+  </span>
+</span>
 `;

packages/design/src/badge/__tests__/index.test.tsx

@@ -1,21 +1,51 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Badge } from '@oceanbase/design';
-import { TaobaoOutlined } from '@ant-design/icons';
+import { TaobaoOutlined } from '@oceanbase/icons';
 
 describe('Badge', () => {
+  it('status dot', () => {
+    const { container, asFragment } = render(<Badge status="success" text="Success" />);
+    // badge
+    expect(container.querySelector('.ant-badge')).toBeTruthy();
+    expect(container.querySelector('.ant-badge-status')).toBeTruthy();
+    // status dot
+    expect(container.querySelector('.ant-badge-status-dot')).toBeTruthy();
+    expect(container.querySelector('.ant-badge-status-success')).toBeTruthy();
+    // status text
+    expect(container.querySelector('.ant-badge-status-text')).toBeTruthy();
+    expect(container.querySelector('.ant-badge-status-text').textContent).toBe('Success');
+    expect(asFragment().firstChild).toMatchSnapshot();
+  });
 
-  it('icon mode should render correctly', () => {
-    const { container, asFragment } = render(<Badge status='success' icon={true} />);
+  it('status icon', () => {
+    const { container, asFragment } = render(<Badge status="success" text="Success" icon={true} />);
+    // badge
+    expect(container.querySelector('.ant-badge')).toBeTruthy();
+    expect(container.querySelector('.ant-badge-status')).toBeTruthy();
+    // status icon
     expect(container.querySelector('.ant-badge-status-icon')).toBeTruthy();
+    expect(container.querySelector('.ant-badge-status-success')).toBeTruthy();
+    // status text
+    expect(container.querySelector('.ant-badge-status-text')).toBeTruthy();
+    expect(container.querySelector('.ant-badge-status-text').textContent).toBe('Success');
     expect(asFragment().firstChild).toMatchSnapshot();
   });
 
-  it('custom icon mode should render correctly', () => {
+  it('status custom icon', () => {
     const { container, asFragment } = render(
-      <Badge status='success' icon={<TaobaoOutlined />} />
+      <Badge status="success" text="Success" icon={<TaobaoOutlined />} />
     );
+    // badge
+    expect(container.querySelector('.ant-badge')).toBeTruthy();
+    expect(container.querySelector('.ant-badge-status')).toBeTruthy();
+    // status icon
     expect(container.querySelector('.ant-badge-status-icon')).toBeTruthy();
+    expect(container.querySelector('.ant-badge-status-success')).toBeTruthy();
+    expect(container.querySelector('.anticon-taobao')).toBeTruthy();
+    // status text
+    expect(container.querySelector('.ant-badge-status-text')).toBeTruthy();
+    expect(container.querySelector('.ant-badge-status-text').textContent).toBe('Success');
     expect(asFragment().firstChild).toMatchSnapshot();
   });
 });

packages/design/src/badge/demo/icon.tsx → packages/design/src/badge/demo/status-custom-icon.tsx

@@ -1,16 +1,21 @@
 import React from 'react';
 import { Badge, Space } from '@oceanbase/design';
-import { LoadingOutlined, AppleOutlined, WindowsOutlined, ChromeOutlined, TaobaoOutlined } from '@ant-design/icons';
+import {
+  LoadingOutlined,
+  AppleOutlined,
+  WindowsOutlined,
+  ChromeOutlined,
+  TaobaoOutlined,
+} from '@ant-design/icons';
 
 const App: React.FC = () => (
-  <Space size="middle" direction="vertical">
-    <Badge icon={<LoadingOutlined />} status="success" text="Success" />
+  <Space direction="vertical">
+    <Badge icon={<ChromeOutlined />} status="success" text="Success" />
     <Badge icon={<AppleOutlined />} status="error" text="Error" />
     <Badge icon={<WindowsOutlined />} status="default" text="Default" />
-    <Badge icon={<ChromeOutlined />} status="processing" text="Processing" />
+    <Badge icon={<LoadingOutlined />} status="processing" text="Processing" />
     <Badge icon={<TaobaoOutlined />} status="warning" text="Warning" />
   </Space>
-
 );
 
 export default App;

packages/design/src/badge/demo/icon-badge.tsx → packages/design/src/badge/demo/status-icon.tsx

@@ -11,15 +11,15 @@ const App: React.FC = () => (
       <Badge icon={true} status="warning" />
     </Space>
     <br />
-    <Space size="middle" direction="vertical">
+    <br />
+    <Space direction="vertical">
       <Badge icon={true} status="success" text="Success" />
       <Badge icon={true} status="error" text="Error" />
       <Badge icon={true} status="default" text="Default" />
       <Badge icon={true} status="processing" text="Processing" />
       <Badge icon={true} status="warning" text="Warning" />
     </Space>
   </>
-
 );
 
 export default App;

packages/design/src/badge/demo/basic.tsx → packages/design/src/badge/demo/status.tsx

@@ -11,6 +11,7 @@ const App: React.FC = () => (
       <Badge status="warning" />
     </Space>
     <br />
+    <br />
     <Space direction="vertical">
       <Badge status="success" text="Success" />
       <Badge status="error" text="Error" />

packages/design/src/badge/index.md

@@ -9,19 +9,19 @@ demo:
 
 - 🔥 完全兼容 antd [Badge](https://ant.design/components/badge-cn) 的能力和 API，可无缝切换。
 - 💄 定制主题和样式，符合 OceanBase Design 设计规范。
-- 🆕 新增 icon 属性，支持图标展示模式。
+- 🆕 新增 `icon` 属性，支持状态图标，仅设置了 `status` 有效。
 
 ## 代码演示
 
 <!-- prettier-ignore -->
-<code src="./demo/basic.tsx" title="状态点" description="用于表示状态的小圆点。"></code>
-<code src="./demo/icon-badge.tsx" title="图标模式" description="使用图标标识状态，增强感知"></code>
-<code src="./demo/icon.tsx" title="自定义图标"></code>
+<code src="./demo/status.tsx" title="状态点" description="用于表示状态的小圆点。"></code>
+<code src="./demo/status-icon.tsx" title="状态图标" description="使用图标标识状态，增强感知。"></code>
+<code src="./demo/status-custom-icon.tsx" title="自定义状态图标。"></code>
 
 ## API
 
-| 参数 | 说明                                         | 类型    | 默认值 | 版本 |
-| :--- | :------------------------------------------- | :------ | :----- | :--- |
-| icon | 是否为图标模式，值为 true 时展示默认图标，值为 ReactNode 时展示自定义图标 | boolean \| React.ReactNode | false  | -    |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| :-- | :-- | :-- | :-- | :-- |
+| icon | 是否为图标模式，值为 true 时展示默认图标，值为 ReactNode 时展示自定义图标 | boolean \| React.ReactNode | false | - |
 
 - 更多 API 详见 antd Badge 文档: https://ant.design/components/badge-cn