fix(design): Use correct icon and color for Badge status

packages/design/src/badge/index.tsx

@@ -1,12 +1,12 @@
 import React, { useContext } from 'react';
-import { Badge as AntBadge, Space } from 'antd';
+import { Badge as AntBadge } from 'antd';
 import type { BadgeProps as AntBadgeProps } from 'antd/es/badge';
 import {
   CloseCircleFilled,
   CheckCircleFilled,
   Loading3QuartersOutlined,
-  StopFilled,
-  ClockCircleFilled,
+  MinusCircleFilled,
+  EllipsisCircleFilled,
 } from '@oceanbase/icons';
 import classNames from 'classnames';
 import ConfigProvider from '../config-provider';
@@ -25,7 +25,7 @@ const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
     const { wrapSSR, hashId } = useStyle(prefixCls);
 
     const iconMap = {
-      default: <StopFilled />,
+      default: <MinusCircleFilled rotate={45} />,
       processing: (
         <Loading3QuartersOutlined
           style={{
@@ -36,7 +36,7 @@ const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
       ),
       success: <CheckCircleFilled />,
       error: <CloseCircleFilled />,
-      warning: <ClockCircleFilled />,
+      warning: <EllipsisCircleFilled />,
     };
 
     return wrapSSR(

packages/design/src/badge/style/index.ts

@@ -6,6 +6,8 @@ export type BadgeToken = FullToken<'Badge'>;
 
 export const genBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSObject => {
   const { componentCls } = token;
+  // dot size is larger than antd
+  const dotSize = token.fontSizeLG / 2;
   return {
     [`${componentCls}`]: {
       // inherit color from parent instead of fixed colorText
@@ -14,12 +16,15 @@ export const genBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSS
     [`${componentCls}${componentCls}-status`]: {
       // dot style
       [`${componentCls}-status-dot`]: {
-        width: 8,
-        height: 8,
+        width: dotSize,
+        height: dotSize,
+        [`&${componentCls}-status-default`]: {
+          backgroundColor: token.colorFill,
+        },
       },
       // icon style
       [`${componentCls}-status-icon`]: {
-        fontSize: 12,
+        fontSize: token.fontSizeSM,
         // remove dot style
         backgroundColor: 'transparent',
         ['&::after']: {
@@ -32,7 +37,7 @@ export const genBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSS
           color: token.colorPrimary,
         },
         [`&${componentCls}-status-default`]: {
-          color: token.colorTextPlaceholder,
+          color: token.colorFill,
         },
         [`&${componentCls}-status-error`]: {
           color: token.colorError,

packages/icons/package.json

@@ -37,7 +37,7 @@
   "dependencies": {
     "@ant-design/colors": "^7.0.2",
     "@ant-design/icons": "^5.3.0",
-    "@oceanbase/icons-svg": "^1.0.5"
+    "@oceanbase/icons-svg": "^1.0.6"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

packages/icons/src/asn/EllipsisCircleFilled.ts

@@ -0,0 +1,7 @@
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const EllipsisCircleFilled: IconDefinition = {"icon":{"tag":"svg","attrs":{"viewBox":"0 0 12 12","focusable":"false"},"children":[{"tag":"path","attrs":{"d":"M6 0a6 6 0 100 12A6 6 0 006 0zM3.87 5.47c.3 0 .53.25.53.57 0 .31-.24.57-.53.57-.3 0-.54-.26-.54-.57 0-.32.24-.57.54-.57zm2.13 0c.3 0 .53.25.53.57 0 .31-.24.57-.53.57-.3 0-.53-.26-.53-.57 0-.32.24-.57.53-.57zm2.13 0c.3 0 .54.25.54.57 0 .31-.24.57-.54.57-.3 0-.53-.26-.53-.57 0-.32.24-.57.53-.57z"}}]},"name":"ellipsis-circle","theme":"filled"};
+
+export default EllipsisCircleFilled;

packages/icons/src/icons/EllipsisCircleFilled.tsx

@@ -0,0 +1,12 @@
+// DON NOT EDIT IT MANUALLY
+import * as React from 'react';
+import EllipsisCircleFilledSvg from '../asn/EllipsisCircleFilled';
+import AntdIcon, { AntdIconProps } from '../components/AntdIcon';
+
+const EllipsisCircleFilled = (
+  props: AntdIconProps,
+  ref: React.ForwardedRef<HTMLSpanElement>,
+) => <AntdIcon {...props} ref={ref} icon={EllipsisCircleFilledSvg} />;
+
+EllipsisCircleFilled.displayName = 'EllipsisCircleFilled';
+export default React.forwardRef<HTMLSpanElement, AntdIconProps>(EllipsisCircleFilled);

packages/icons/src/index.ts

@@ -3,6 +3,7 @@ export { default as CloneFilled } from './icons/CloneFilled';
 export { default as CpuFilled } from './icons/CpuFilled';
 export { default as DatabaseRadiusFilled } from './icons/DatabaseRadiusFilled';
 export { default as DouyinFilled } from './icons/DouyinFilled';
+export { default as EllipsisCircleFilled } from './icons/EllipsisCircleFilled';
 export { default as HeaderTableFilled } from './icons/HeaderTableFilled';
 export { default as IdcFilled } from './icons/IdcFilled';
 export { default as InternetFilled } from './icons/InternetFilled';