diff --git a/packages/design/src/badge/index.tsx b/packages/design/src/badge/index.tsx index c03482583..ed9eec897 100644 --- 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( const { wrapSSR, hashId } = useStyle(prefixCls); const iconMap = { - default: , + default: , processing: ( ( ), success: , error: , - warning: , + warning: , }; return wrapSSR( diff --git a/packages/design/src/badge/style/index.ts b/packages/design/src/badge/style/index.ts index 1a6bf02f3..116c95fc2 100644 --- 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 = (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 = (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 = (token: BadgeToken): CSS color: token.colorPrimary, }, [`&${componentCls}-status-default`]: { - color: token.colorTextPlaceholder, + color: token.colorFill, }, [`&${componentCls}-status-error`]: { color: token.colorError,