feat(tag): refactor maxWidth dom to control length of text tag (#3083)

* feat: sync vue2 pr 2220

* fix: maxWidth

* chore: update snapshot

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/tag/Tag.tsx

@@ -114,6 +114,14 @@ export const TagFunction: ForwardRefRenderFunction<HTMLDivElement, TagProps> = (
     return calculatedStyle;
   }, [color, variant, style]);
 
+  const getTextStyle = useMemo(() => {
+    if (!maxWidth) return {};
+
+    return {
+      maxWidth: isNaN(Number(maxWidth)) ? String(maxWidth) : `${maxWidth}px`,
+    };
+  }, [maxWidth]);
+
   const tag = (
     <div
       ref={ref}
@@ -122,14 +130,12 @@ export const TagFunction: ForwardRefRenderFunction<HTMLDivElement, TagProps> = (
         if (disabled) return;
         onClick({ e });
       }}
-      style={
-        maxWidth ? { maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth, ...getTagStyle } : getTagStyle
-      }
+      style={getTagStyle}
       {...otherTagProps}
     >
       <>
         {icon}
-        <span className={maxWidth ? `${tagClassPrefix}--text` : undefined} {...titleAttribute}>
+        <span className={maxWidth ? `${tagClassPrefix}--text` : undefined} style={getTextStyle} {...titleAttribute}>
           {children ?? content}
         </span>
         {closable && !disabled && deleteIcon}

src/tag/__tests__/vitest-tag.test.jsx

@@ -35,25 +35,25 @@ describe('Tag Component', () => {
     const domWrapper = container.firstChild;
     expect(domWrapper.style.backgroundColor).toBe('rgb(255, 0, 0)');
   });
-  it(`props.color expect variant='dark'`, () => {
+  it(`props.color expect variant=dark`, () => {
     const { container } = render(<Tag color={'#ff0000'} variant={'dark'} theme={'primary'}></Tag>);
     const domWrapper = container.firstChild;
     expect(domWrapper.style.backgroundColor).toBe('rgb(255, 0, 0)');
     expect(domWrapper.style.color).toBe('white');
   });
-  it(`props.color expect variant='light'`, () => {
+  it(`props.color expect variant=light`, () => {
     const { container } = render(<Tag color={'#ff0000'} variant={'light'}></Tag>);
     const domWrapper = container.firstChild;
     expect(domWrapper.style.color).toBe('rgb(255, 0, 0)');
     expect(domWrapper.style.backgroundColor).toBe('rgba(255, 0, 0, 0.1)');
   });
-  it(`props.color expect variant='outline'`, () => {
+  it(`props.color expect variant=outline`, () => {
     const { container } = render(<Tag color={'#ff0000'} variant={'outline'}></Tag>);
     const domWrapper = container.firstChild;
     expect(domWrapper.style.borderColor).toBe('#ff0000');
     expect(domWrapper.style.color).toBe('rgb(255, 0, 0)');
   });
-  it(`props.color expect variant='light-outline'`, () => {
+  it(`props.color expect variant=light-outline`, () => {
     const { container } = render(<Tag color={'#ff0000'} variant={'light-outline'}></Tag>);
     const domWrapper = container.firstChild;
     expect(domWrapper.style.borderColor).toBe('#ff0000');
@@ -80,10 +80,15 @@ describe('Tag Component', () => {
 
   it(`props.maxWidth is equal to 150px`, () => {
     const { container } = render(<Tag maxWidth={'150px'} content={'This is a long long long long long tag'}></Tag>);
-    const domWrapper = container.firstChild;
+    const domWrapper = container.querySelector('.t-tag--text');
+    expect(domWrapper.getAttribute('title')).toBe('This is a long long long long long tag');
+    expect(domWrapper.style.maxWidth).toBe('150px');
+  });
+  it(`props.maxWidth is equal to 150`, () => {
+    const { container } = render(<Tag maxWidth={'150'} content={'This is a long long long long long tag'}></Tag>);
+    const domWrapper = container.querySelector('.t-tag--text');
+    expect(domWrapper.getAttribute('title')).toBe('This is a long long long long long tag');
     expect(domWrapper.style.maxWidth).toBe('150px');
-    const domWrapper1 = container.querySelector('.t-tag--text');
-    expect(domWrapper1.getAttribute('title')).toBe('This is a long long long long long tag');
   });
 
   const shapeClassNameList = [{ 't-tag--square': false }, 't-tag--round', 't-tag--mark'];
@@ -123,28 +128,25 @@ describe('Tag Component', () => {
     const { container } = render(
       <Tag title={'This is a long tag'} content={'This is a long long long long long tag'} maxWidth={'150px'}></Tag>,
     );
-    const domWrapper = container.firstChild;
+    const domWrapper = container.querySelector('.t-tag--text');
     expect(domWrapper.style.maxWidth).toBe('150px');
-    const domWrapper1 = container.querySelector('.t-tag--text');
-    expect(domWrapper1.getAttribute('title')).toBe('This is a long tag');
+    expect(domWrapper.getAttribute('title')).toBe('This is a long tag');
   });
   it(`props.title is equal to `, () => {
     const { container } = render(
       <Tag title={''} content={'This is a long long long long long tag'} maxWidth={'150px'}></Tag>,
     );
-    const domWrapper = container.firstChild;
+    const domWrapper = container.querySelector('.t-tag--text');
     expect(domWrapper.style.maxWidth).toBe('150px');
-    const domWrapper1 = container.querySelector('.t-tag--text');
-    expect(domWrapper1.getAttribute('title')).toBeNull();
+    expect(domWrapper.getAttribute('title')).toBeNull();
   });
   it(`props.title is equal to undefined`, () => {
     const { container } = render(
       <Tag title={undefined} content={'This is a long long long long long tag'} maxWidth={'150px'}></Tag>,
     );
-    const domWrapper = container.firstChild;
+    const domWrapper = container.querySelector('.t-tag--text');
     expect(domWrapper.style.maxWidth).toBe('150px');
-    const domWrapper1 = container.querySelector('.t-tag--text');
-    expect(domWrapper1.getAttribute('title')).toBeNull();
+    expect(domWrapper.getAttribute('title')).toBeNull();
   });
 
   ['dark', 'light', 'outline', 'light-outline'].forEach((item) => {

src/tag/defaultProps.ts

@@ -14,6 +14,6 @@ export const tagDefaultProps: TdTagProps = {
   variant: 'dark',
 };
 
-export const checkTagDefaultProps: TdCheckTagProps = { defaultChecked: undefined, disabled: false, size: 'medium' };
+export const checkTagDefaultProps: TdCheckTagProps = { disabled: false, size: 'medium' };
 
 export const checkTagGroupDefaultProps: TdCheckTagGroupProps = { multiple: false, defaultValue: [] };

src/tag/tag.en-US.md

@@ -30,8 +30,8 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 className | String | - | className of component | N
 style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
-checked | Boolean | undefined | \- | N
-defaultChecked | Boolean | undefined | uncontrolled property | N
+checked | Boolean | - | \- | N
+defaultChecked | Boolean | - | 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

src/tag/tag.md

@@ -30,8 +30,8 @@ onClose | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
-checked | Boolean | undefined | 标签选中的状态，默认风格（theme=default）才有选中态 | N
-defaultChecked | Boolean | undefined | 标签选中的状态，默认风格（theme=default）才有选中态。非受控属性 | N
+checked | Boolean | - | 标签选中的状态，默认风格（theme=default）才有选中态 | N
+defaultChecked | Boolean | - | 标签选中的状态，默认风格（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

test/snap/__snapshots__/csr.test.jsx.snap

@@ -117171,10 +117171,10 @@ exports[`csr snapshot test > csr test src/tag/_example/long-text.tsx 1`] = `
 <div>
   <div
     class="t-tag t-tag--default t-tag--dark t-tag--ellipsis"
-    style="max-width: 150px;"
   >
     <span
       class="t-tag--text"
+      style="max-width: 150px;"
       title="默认超八个字超长文本标签超长省略文本标签"
     >
       默认超八个字超长文本标签超长省略文本标签
@@ -134069,7 +134069,7 @@ exports[`ssr snapshot test > ssr test src/tag/_example/delete.tsx 1`] = `"<div s
 
 exports[`ssr snapshot test > ssr test src/tag/_example/icon.tsx 1`] = `"<div class=\\"t-tag t-tag--default t-tag--dark\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-discount\\"><path fill=\\"currentColor\\" d=\\"M11.5 1.19l10.5.8.81 10.51-10.93 10.93L.56 12.13 11.5 1.18zm.76 2.06l-8.87 8.87 8.49 8.49 8.87-8.87-.61-7.88-7.88-.6zm3.86 4.63a1 1 0 10-1.41 1.41 1 1 0 001.41-1.41zm-2.83-1.42a3 3 0 114.24 4.25 3 3 0 01-4.24-4.25z\\"></path></svg><span title=\\"默认标签\\">默认标签</span></div>"`;
 
-exports[`ssr snapshot test > ssr test src/tag/_example/long-text.tsx 1`] = `"<div class=\\"t-tag t-tag--default t-tag--dark t-tag--ellipsis\\" style=\\"max-width:150px\\"><span class=\\"t-tag--text\\" title=\\"默认超八个字超长文本标签超长省略文本标签\\">默认超八个字超长文本标签超长省略文本标签</span></div>"`;
+exports[`ssr snapshot test > ssr test src/tag/_example/long-text.tsx 1`] = `"<div class=\\"t-tag t-tag--default t-tag--dark t-tag--ellipsis\\"><span class=\\"t-tag--text\\" style=\\"max-width:150px\\" title=\\"默认超八个字超长文本标签超长省略文本标签\\">默认超八个字超长文本标签超长省略文本标签</span></div>"`;
 
 exports[`ssr snapshot test > ssr test src/tag/_example/selectable.tsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><label>StyleA</label></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--default t-tag--dark t-tag t-tag--check\\" style=\\"margin-right:32px\\" tabindex=\\"0\\"><span title=\\"选中/未选态\\">选中/未选态</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--primary t-tag--dark t-tag t-tag--check t-tag--checked\\" tabindex=\\"0\\" checked=\\"\\"><span title=\\"选中态\\">选中态</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--default t-tag--dark t-tag t-tag--check\\" tabindex=\\"0\\"><span title=\\"未选态\\">未选态</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--primary t-tag--dark t-tag--disabled t-tag t-tag--check t-tag--checked t-tag--disabled\\" checked=\\"\\"><span title=\\"选中禁用\\">选中禁用</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--default t-tag--dark t-tag--disabled t-tag t-tag--check t-tag--disabled\\"><span title=\\"未选禁用\\">未选禁用</span></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><label>StyleB</label></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--default t-tag--outline t-tag t-tag--check\\" style=\\"margin-right:32px\\" tabindex=\\"0\\"><span title=\\"选中/未选态\\">选中/未选态</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--primary t-tag--dark t-tag t-tag--check t-tag--checked\\" tabindex=\\"0\\" checked=\\"\\"><span title=\\"选中态\\">选中态</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--default t-tag--outline t-tag t-tag--check\\" tabindex=\\"0\\"><span title=\\"未选态\\">未选态</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--primary t-tag--dark t-tag--disabled t-tag t-tag--check t-tag--checked t-tag--disabled\\" checked=\\"\\"><span title=\\"选中禁用\\">选中禁用</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--default t-tag--outline t-tag--disabled t-tag t-tag--check t-tag--disabled\\"><span title=\\"未选禁用\\">未选禁用</span></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><label>StyleC</label></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--default t-tag--outline t-tag t-tag--check\\" style=\\"margin-right:32px\\" tabindex=\\"0\\"><span title=\\"Outline Tag\\">Outline Tag</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--primary t-tag--outline t-tag t-tag--check t-tag--checked\\" tabindex=\\"0\\" checked=\\"\\"><span title=\\"Checked\\">Checked</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--default t-tag--outline t-tag t-tag--check\\" tabindex=\\"0\\"><span title=\\"Unchecked\\">Unchecked</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--primary t-tag--outline t-tag--disabled t-tag t-tag--check t-tag--checked t-tag--disabled\\" checked=\\"\\"><span title=\\"Disabled\\">Disabled</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--default t-tag--outline t-tag--disabled t-tag t-tag--check t-tag--disabled\\"><span title=\\"Disabled\\">Disabled</span></div></div></div></div></div>"`;
 

test/snap/__snapshots__/ssr.test.jsx.snap

@@ -1030,7 +1030,7 @@ exports[`ssr snapshot test > ssr test src/tag/_example/delete.tsx 1`] = `"<div s
 
 exports[`ssr snapshot test > ssr test src/tag/_example/icon.tsx 1`] = `"<div class=\\"t-tag t-tag--default t-tag--dark\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-discount\\"><path fill=\\"currentColor\\" d=\\"M11.5 1.19l10.5.8.81 10.51-10.93 10.93L.56 12.13 11.5 1.18zm.76 2.06l-8.87 8.87 8.49 8.49 8.87-8.87-.61-7.88-7.88-.6zm3.86 4.63a1 1 0 10-1.41 1.41 1 1 0 001.41-1.41zm-2.83-1.42a3 3 0 114.24 4.25 3 3 0 01-4.24-4.25z\\"></path></svg><span title=\\"默认标签\\">默认标签</span></div>"`;
 
-exports[`ssr snapshot test > ssr test src/tag/_example/long-text.tsx 1`] = `"<div class=\\"t-tag t-tag--default t-tag--dark t-tag--ellipsis\\" style=\\"max-width:150px\\"><span class=\\"t-tag--text\\" title=\\"默认超八个字超长文本标签超长省略文本标签\\">默认超八个字超长文本标签超长省略文本标签</span></div>"`;
+exports[`ssr snapshot test > ssr test src/tag/_example/long-text.tsx 1`] = `"<div class=\\"t-tag t-tag--default t-tag--dark t-tag--ellipsis\\"><span class=\\"t-tag--text\\" style=\\"max-width:150px\\" title=\\"默认超八个字超长文本标签超长省略文本标签\\">默认超八个字超长文本标签超长省略文本标签</span></div>"`;
 
 exports[`ssr snapshot test > ssr test src/tag/_example/selectable.tsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><label>StyleA</label></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--default t-tag--dark t-tag t-tag--check\\" style=\\"margin-right:32px\\" tabindex=\\"0\\"><span title=\\"选中/未选态\\">选中/未选态</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--primary t-tag--dark t-tag t-tag--check t-tag--checked\\" tabindex=\\"0\\" checked=\\"\\"><span title=\\"选中态\\">选中态</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--default t-tag--dark t-tag t-tag--check\\" tabindex=\\"0\\"><span title=\\"未选态\\">未选态</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--primary t-tag--dark t-tag--disabled t-tag t-tag--check t-tag--checked t-tag--disabled\\" checked=\\"\\"><span title=\\"选中禁用\\">选中禁用</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--default t-tag--dark t-tag--disabled t-tag t-tag--check t-tag--disabled\\"><span title=\\"未选禁用\\">未选禁用</span></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><label>StyleB</label></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--default t-tag--outline t-tag t-tag--check\\" style=\\"margin-right:32px\\" tabindex=\\"0\\"><span title=\\"选中/未选态\\">选中/未选态</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--primary t-tag--dark t-tag t-tag--check t-tag--checked\\" tabindex=\\"0\\" checked=\\"\\"><span title=\\"选中态\\">选中态</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--default t-tag--outline t-tag t-tag--check\\" tabindex=\\"0\\"><span title=\\"未选态\\">未选态</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--primary t-tag--dark t-tag--disabled t-tag t-tag--check t-tag--checked t-tag--disabled\\" checked=\\"\\"><span title=\\"选中禁用\\">选中禁用</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--default t-tag--outline t-tag--disabled t-tag t-tag--check t-tag--disabled\\"><span title=\\"未选禁用\\">未选禁用</span></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><label>StyleC</label></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--default t-tag--outline t-tag t-tag--check\\" style=\\"margin-right:32px\\" tabindex=\\"0\\"><span title=\\"Outline Tag\\">Outline Tag</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--primary t-tag--outline t-tag t-tag--check t-tag--checked\\" tabindex=\\"0\\" checked=\\"\\"><span title=\\"Checked\\">Checked</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--default t-tag--outline t-tag t-tag--check\\" tabindex=\\"0\\"><span title=\\"Unchecked\\">Unchecked</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--primary t-tag--outline t-tag--disabled t-tag t-tag--check t-tag--checked t-tag--disabled\\" checked=\\"\\"><span title=\\"Disabled\\">Disabled</span></div></div><div class=\\"t-space-item\\"><div class=\\"t-tag t-tag--default t-tag--outline t-tag--disabled t-tag t-tag--check t-tag--disabled\\"><span title=\\"Disabled\\">Disabled</span></div></div></div></div></div>"`;