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

oceanbase · Mar 5, 2024 · e0ab50c · e0ab50c
1 parent 0cab973
commit e0ab50c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/packages/design/src/badge/index.tsx b/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(

diff --git a/packages/design/src/badge/style/index.ts b/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,