diff --git a/src/statusTag/__tests__/index.test.tsx b/src/statusTag/__tests__/index.test.tsx index 365e11b16..241bc4f61 100644 --- a/src/statusTag/__tests__/index.test.tsx +++ b/src/statusTag/__tests__/index.test.tsx @@ -55,4 +55,9 @@ describe('test StatusTag suite', () => { const loadingWarper = container.querySelector(`.ant-spin-spinning`)!; expect(loadingWarper).toBeInTheDocument(); }); + test('should render StatusTag no icon', () => { + const { container } = render(自定义文案); + const loadingWarper = container.querySelector(`.${prefixCls}--icon`)!; + expect(loadingWarper).not.toBeInTheDocument(); + }); }); diff --git a/src/statusTag/demos/noIcon.tsx b/src/statusTag/demos/noIcon.tsx new file mode 100644 index 000000000..47522114d --- /dev/null +++ b/src/statusTag/demos/noIcon.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { Space } from 'antd'; +import { StatusTag } from 'dt-react-component'; + +export default () => { + const presets = ['blue', 'yellow', 'green', 'gray', 'red', 'purple', 'cyan', 'pink']; + + return ( + + {presets.map((preset) => ( + + {preset} + + ))} + + ); +}; diff --git a/src/statusTag/index.md b/src/statusTag/index.md index 46983380e..4c7643777 100644 --- a/src/statusTag/index.md +++ b/src/statusTag/index.md @@ -19,7 +19,8 @@ StatusTag 组件作用于任务运行状态效果展示 基础使用 状态点 加载中 -加载中 +自定义图标 +不展示图标 ## API diff --git a/src/statusTag/index.tsx b/src/statusTag/index.tsx index 2f5c431c5..0b9df9b1e 100644 --- a/src/statusTag/index.tsx +++ b/src/statusTag/index.tsx @@ -70,10 +70,13 @@ const StatusTag: React.FC = function StatusTag(props) { color = 'green', loading = false, background, + style, ...other } = props; const prefixCls = 'dtc-statusTag'; + const showDefaultIcon = icon === undefined; + const classes = classNames(`${prefixCls}`, className, { [`${prefixCls}--border`]: type === 'outline', [`${prefixCls}--fill`]: type === 'fill', @@ -100,13 +103,19 @@ const StatusTag: React.FC = function StatusTag(props) { }; return ( -
+
{loading ? ( - } size="small" /> + } + size="small" + /> ) : ( -
- {icon ?? <>} -
+ (icon || showDefaultIcon) && ( +
+ {icon ?? <>} +
+ ) )} {props.children}
diff --git a/src/statusTag/style.scss b/src/statusTag/style.scss index ab1dadb12..ee3cd7694 100644 --- a/src/statusTag/style.scss +++ b/src/statusTag/style.scss @@ -58,6 +58,7 @@ $colors: ( display: flex; align-items: center; font-size: 16px; + margin-right: 8px; &--default { display: inline-block; width: 6px; @@ -68,7 +69,6 @@ $colors: ( &__text { font-size: 12px; font-weight: 400; - margin-left: 8px; line-height: 22px; white-space: nowrap; }