fix(Tag): The ellipsis with icons should work (#687)

* fix(Tag): The ellipsis with icons should work * refactor: Use class to replace the fixed value * chore: Add comment * refactor: Rename class & remove un use code
oceanbase · Sep 5, 2024 · a06a704 · a06a704
1 parent 2d05b36
commit a06a704
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 13 deletions.
diff --git a/packages/design/src/tag/demo/ellipsis.tsx b/packages/design/src/tag/demo/ellipsis.tsx
@@ -1,3 +1,4 @@
+import { CheckCircleOutlined } from '@oceanbase/icons';
 import { Tag } from '@oceanbase/design';
 import React from 'react';
 
@@ -10,6 +11,7 @@ const App: React.FC = () => (
       excess.Show ellipsis for excess.Show ellipsis for excess.Show ellipsis for excess.
     </Tag>
     <Tag
+      icon={<CheckCircleOutlined />}
       ellipsis={{
         tooltip: {
           placement: 'topLeft',

diff --git a/packages/design/src/tag/index.tsx b/packages/design/src/tag/index.tsx
@@ -7,7 +7,6 @@ import Typography from '../typography';
 import useStyle from './style';
 import { getEllipsisConfig } from '../_util/getEllipsisConfig';
 import type { Ellipsis } from '../_util/getEllipsisConfig';
-import { TooltipPlacement } from '../tooltip';
 
 export * from 'antd/es/tag';
 
@@ -20,6 +19,7 @@ const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
     {
       children,
       prefixCls: customizePrefixCls,
+      icon,
       className,
       ellipsis = {
         tooltip: {
@@ -35,18 +35,29 @@ const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
     const { wrapSSR } = useStyle(prefixCls);
 
     const ellipsisConfig = getEllipsisConfig(ellipsis, children);
-
     const tagCls = classNames(
       {
         [`${prefixCls}-ellipsis`]: !!ellipsisConfig,
       },
       className
     );
 
+    const realIcon = icon ? <span className={`${prefixCls}-icon`}>{icon}</span> : null;
+
     return wrapSSR(
-      <AntTag ref={ref} prefixCls={customizePrefixCls} className={tagCls} {...restProps}>
+      <AntTag
+        ref={ref}
+        prefixCls={customizePrefixCls}
+        className={tagCls}
+        icon={ellipsisConfig ? null : icon}
+        {...restProps}
+      >
         {ellipsisConfig ? (
-          <Typography.Text ellipsis={ellipsisConfig}>{children}</Typography.Text>
+          <Typography.Text ellipsis={ellipsisConfig}>
+            {/* Typography.Text 存在 ellipsis 配置时 ，将 icon 放在 Typography.Text 内部，避免溢出时与 icon 发生样式冲突。这里保留 Typography.Text 主要为了使用 Typography.Text 的判断内容溢出展示 Tooltip 的能力，自定义实现成本过大 */}
+            {realIcon}
+            {children}
+          </Typography.Text>
         ) : (
           children
         )}

diff --git a/packages/design/src/tag/style/index.ts b/packages/design/src/tag/style/index.ts
@@ -1,10 +1,12 @@
-import { type FullToken, type GenerateStyle } from 'antd/es/theme/internal';
+import { mergeToken, type FullToken, type GenerateStyle } from 'antd/es/theme/internal';
 import { genComponentStyleHook } from '../../_util/genComponentStyleHook';
 import { genPresetColor } from 'antd/lib/theme/internal';
 import { getWeakenBorderColor } from '../../_util/getWeakenBorderColor';
 import type { CSSObject } from '@ant-design/cssinjs';
 
-export type TagToken = FullToken<'Tag'>;
+export type TagToken = FullToken<'Tag'> & {
+  tagPaddingHorizontal: number;
+};
 
 const getTagBorderColor = (color: string) => {
   return getWeakenBorderColor(color);
@@ -37,14 +39,19 @@ const genPresetStyle = (token: TagToken) =>
   });
 
 export const genTagStyle: GenerateStyle<TagToken> = (token: TagToken): CSSObject => {
-  const { antCls, componentCls } = token;
+  const { antCls, componentCls, tagPaddingHorizontal, lineWidth, calc } = token;
+
+  const paddingInline = calc(tagPaddingHorizontal).sub(lineWidth).equal();
   return {
     [`${componentCls}`]: {
       paddingInline: token.paddingXS,
       borderColor: getTagBorderColor(token.colorBorder),
       fontSize: token.fontSizeSM,
       [`${antCls}-typography`]: {
         fontSize: token.fontSizeSM,
+        [`${componentCls}-icon`]: {
+          marginInlineEnd: paddingInline,
+        },
       },
       ['&-ellipsis']: {
         maxWidth: '100%',
@@ -67,13 +74,17 @@ export const genTagStyle: GenerateStyle<TagToken> = (token: TagToken): CSSObject
 
 export default (prefixCls: string) => {
   const useStyle = genComponentStyleHook('Tag', (token: TagToken) => {
+    const tagToken = mergeToken<TagToken>(token, {
+      tagPaddingHorizontal: 8, // Fixed padding.
+    });
+
     return [
-      genTagStyle(token),
-      genPresetStyle(token),
-      genTagPresetStatusStyle(token, 'success'),
-      genTagPresetStatusStyle(token, 'error'),
-      genTagPresetStatusStyle(token, 'processing'),
-      genTagPresetStatusStyle(token, 'warning'),
+      genTagStyle(tagToken),
+      genPresetStyle(tagToken),
+      genTagPresetStatusStyle(tagToken, 'success'),
+      genTagPresetStatusStyle(tagToken, 'error'),
+      genTagPresetStatusStyle(tagToken, 'processing'),
+      genTagPresetStatusStyle(tagToken, 'warning'),
     ];
   });
   return useStyle(prefixCls);