feat(tag): add title api (#3064)

Tencent · Aug 26, 2024 · 1b6870a · 1b6870a
1 parent db39793
commit 1b6870a
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 11 deletions.
diff --git a/src/tag/Tag.tsx b/src/tag/Tag.tsx
@@ -2,7 +2,6 @@ import React, { ForwardRefRenderFunction, FocusEvent, forwardRef, useMemo } from
 import classNames from 'classnames';
 import { CloseIcon as TdCloseIcon } from 'tdesign-icons-react';
 import tinycolor from 'tinycolor2';
-
 import noop from '../_util/noop';
 import useConfig from '../hooks/useConfig';
 import useGlobalIcon from '../hooks/useGlobalIcon';
@@ -18,7 +17,6 @@ export interface TagProps extends TdTagProps, StyledProps {
   /**
    * 标签内容
    */
-  children?: React.ReactNode;
   tabIndex?: number;
   onFocus?: (e: FocusEvent<HTMLDivElement>) => void;
   onBlur?: (e: FocusEvent<HTMLDivElement>) => void;
@@ -42,6 +40,7 @@ export const TagFunction: ForwardRefRenderFunction<HTMLDivElement, TagProps> = (
     disabled,
     children,
     color,
+    title: titleAttr,
     ...otherTagProps
   } = props;
 
@@ -82,10 +81,11 @@ export const TagFunction: ForwardRefRenderFunction<HTMLDivElement, TagProps> = (
     />
   );
 
-  const title = (() => {
+  const title = useMemo(() => {
+    if (Reflect.has(props, 'title')) return titleAttr;
     if (children && typeof children === 'string') return children;
     if (content && typeof content === 'string') return content;
-  })();
+  }, [children, content, props, titleAttr]);
   const titleAttribute = title ? { title } : undefined;
 
   const getTagStyle = useMemo(() => {

diff --git a/src/tag/defaultProps.ts b/src/tag/defaultProps.ts
@@ -14,6 +14,6 @@ export const tagDefaultProps: TdTagProps = {
   variant: 'dark',
 };
 
-export const checkTagDefaultProps: TdCheckTagProps = { disabled: false, size: 'medium' };
+export const checkTagDefaultProps: TdCheckTagProps = { defaultChecked: undefined, disabled: false, size: 'medium' };
 
 export const checkTagGroupDefaultProps: TdCheckTagGroupProps = { multiple: false, defaultValue: [] };
diff --git a/src/tag/tag.en-US.md b/src/tag/tag.en-US.md
@@ -18,6 +18,7 @@ maxWidth | String / Number | - | \- | N
 shape | String | square | options: square/round/mark | N
 size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 theme | String | default | options: default/primary/warning/danger/success | N
+title | String | - | title of tag | N
 variant | String | dark | options: dark/light/outline/light-outline | N
 onClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 onClose | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
@@ -29,16 +30,16 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 className | String | - | className of component | N
 style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
-checked | Boolean | - | \- | N
-defaultChecked | Boolean | - | uncontrolled property | N
+checked | Boolean | undefined | \- | N
+defaultChecked | Boolean | undefined | uncontrolled property | N
 checkedProps | Object | - | used to set checked tag props。Typescript：`TdTagProps` | N
 children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 content | TNode | - | Typescript：`string \| number \| string[] \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | false | \- | N
 size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 uncheckedProps | Object | - | used to set unchecked tag props。Typescript：`TdTagProps` | N
 value | String / Number | - | tag unique key | N
-onChange | Function |  | Typescript：`(checked: boolean, context: CheckTagChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。<br/>`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/> | N
+onChange | Function |  | Typescript：`(checked: boolean, context: CheckTagChangeContext)  => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。<br/>`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/> | N
 onClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 
 

diff --git a/src/tag/tag.md b/src/tag/tag.md
@@ -18,6 +18,7 @@ maxWidth | String / Number | - | 标签最大宽度，宽度超出后会出现
 shape | String | square | 标签类型，有三种：方形、圆角方形、标记型。可选项：square/round/mark | N
 size | String | medium | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 theme | String | default | 组件风格，用于描述组件不同的应用场景。可选项：default/primary/warning/danger/success | N
+title | String | - | 标签标题，在标签hover时展示，默认为标签内容 | N
 variant | String | dark | 标签风格变体。可选项：dark/light/outline/light-outline | N
 onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击时触发 | N
 onClose | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果关闭按钮存在，点击关闭按钮时触发 | N
@@ -29,16 +30,16 @@ onClose | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
-checked | Boolean | - | 标签选中的状态，默认风格（theme=default）才有选中态 | N
-defaultChecked | Boolean | - | 标签选中的状态，默认风格（theme=default）才有选中态。非受控属性 | N
+checked | Boolean | undefined | 标签选中的状态，默认风格（theme=default）才有选中态 | N
+defaultChecked | Boolean | undefined | 标签选中的状态，默认风格（theme=default）才有选中态。非受控属性 | N
 checkedProps | Object | - | 透传标签选中态属性。TS 类型：`TdTagProps` | N
 children | TNode | - | 组件子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 content | TNode | - | 组件子元素；传入数组时：[选中内容，非选中内容]。TS 类型：`string \| number \| string[] \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N
 size | String | medium | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 uncheckedProps | Object | - | 透传标签未选态属性。TS 类型：`TdTagProps` | N
 value | String / Number | - | 标签唯一标识，一般用于标签组场景，单个可选择标签无需设置 | N
-onChange | Function |  | TS 类型：`(checked: boolean, context: CheckTagChangeContext) => void`<br/>状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。<br/>`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/> | N
+onChange | Function |  | TS 类型：`(checked: boolean, context: CheckTagChangeContext)  => void`<br/>状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。<br/>`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/> | N
 onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击标签时触发 | N
 
 

diff --git a/src/tag/type.ts b/src/tag/type.ts
@@ -54,6 +54,11 @@ export interface TdTagProps {
    * @default default
    */
   theme?: 'default' | 'primary' | 'warning' | 'danger' | 'success';
+  /**
+   * 标签标题，在标签hover时展示，默认为标签内容
+   * @default ''
+   */
+  title?: string;
   /**
    * 标签风格变体
    * @default dark