From d08786e83d2a4224665b9bb0fd387e357ff2cfb6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Fri, 6 Sep 2024 15:38:50 +0800 Subject: [PATCH 1/3] feat: sync vue2 pr 2220 --- src/tag/Tag.tsx | 10 ++++---- src/tag/__tests__/vitest-tag.test.jsx | 34 ++++++++++++++------------- src/tag/defaultProps.ts | 2 +- src/tag/tag.en-US.md | 4 ++-- src/tag/tag.md | 4 ++-- 5 files changed, 29 insertions(+), 25 deletions(-) diff --git a/src/tag/Tag.tsx b/src/tag/Tag.tsx index a3778f37a1..2aa34fc073 100644 --- a/src/tag/Tag.tsx +++ b/src/tag/Tag.tsx @@ -122,14 +122,16 @@ export const TagFunction: ForwardRefRenderFunction = ( if (disabled) return; onClick({ e }); }} - style={ - maxWidth ? { maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth, ...getTagStyle } : getTagStyle - } + style={getTagStyle} {...otherTagProps} > <> {icon} - + {children ?? content} {closable && !disabled && deleteIcon} diff --git a/src/tag/__tests__/vitest-tag.test.jsx b/src/tag/__tests__/vitest-tag.test.jsx index 9b8670976e..8485134800 100644 --- a/src/tag/__tests__/vitest-tag.test.jsx +++ b/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(); 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(); 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(); 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(); 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(); - 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(); + 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( , ); - 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( , ); - 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( , ); - 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) => { diff --git a/src/tag/defaultProps.ts b/src/tag/defaultProps.ts index 78c9ae26f3..8a9cebe30f 100644 --- a/src/tag/defaultProps.ts +++ b/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: [] }; diff --git a/src/tag/tag.en-US.md b/src/tag/tag.en-US.md index 5a4c3b5509..53a5d375da 100644 --- a/src/tag/tag.en-US.md +++ b/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 diff --git a/src/tag/tag.md b/src/tag/tag.md index 396b7daee7..4d99e4d943 100644 --- a/src/tag/tag.md +++ b/src/tag/tag.md @@ -30,8 +30,8 @@ onClose | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
-- | -- | -- | -- | -- 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 From bc6b0471adbeec8498f068c3c18f34e1aab43862 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Fri, 6 Sep 2024 15:59:56 +0800 Subject: [PATCH 2/3] fix: maxWidth --- src/tag/Tag.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/tag/Tag.tsx b/src/tag/Tag.tsx index 2aa34fc073..09153187f7 100644 --- a/src/tag/Tag.tsx +++ b/src/tag/Tag.tsx @@ -114,6 +114,14 @@ export const TagFunction: ForwardRefRenderFunction = ( return calculatedStyle; }, [color, variant, style]); + const getTextStyle = useMemo(() => { + if (!maxWidth) return {}; + + return { + maxWidth: isNaN(Number(maxWidth)) ? String(maxWidth) : `${maxWidth}px`, + }; + }, [maxWidth]); + const tag = (
= ( > <> {icon} - + {children ?? content} {closable && !disabled && deleteIcon} From 83a2d1f05e1165668c8c611fb7e4ea94e0a2955e Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 6 Sep 2024 08:44:31 +0000 Subject: [PATCH 3/3] chore: update snapshot --- test/snap/__snapshots__/csr.test.jsx.snap | 4 ++-- test/snap/__snapshots__/ssr.test.jsx.snap | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index d310bd8f5c..3cdd7f59b2 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -117171,10 +117171,10 @@ exports[`csr snapshot test > csr test src/tag/_example/long-text.tsx 1`] = `
默认超八个字超长文本标签超长省略文本标签 @@ -134069,7 +134069,7 @@ exports[`ssr snapshot test > ssr test src/tag/_example/delete.tsx 1`] = `"
ssr test src/tag/_example/icon.tsx 1`] = `"
默认标签
"`; -exports[`ssr snapshot test > ssr test src/tag/_example/long-text.tsx 1`] = `"
默认超八个字超长文本标签超长省略文本标签
"`; +exports[`ssr snapshot test > ssr test src/tag/_example/long-text.tsx 1`] = `"
默认超八个字超长文本标签超长省略文本标签
"`; exports[`ssr snapshot test > ssr test src/tag/_example/selectable.tsx 1`] = `"
选中/未选态
选中态
未选态
选中禁用
未选禁用
选中/未选态
选中态
未选态
选中禁用
未选禁用
Outline Tag
Checked
Unchecked
Disabled
Disabled
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index f062a0ab62..8d4500aca8 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -1030,7 +1030,7 @@ exports[`ssr snapshot test > ssr test src/tag/_example/delete.tsx 1`] = `"
ssr test src/tag/_example/icon.tsx 1`] = `"
默认标签
"`; -exports[`ssr snapshot test > ssr test src/tag/_example/long-text.tsx 1`] = `"
默认超八个字超长文本标签超长省略文本标签
"`; +exports[`ssr snapshot test > ssr test src/tag/_example/long-text.tsx 1`] = `"
默认超八个字超长文本标签超长省略文本标签
"`; exports[`ssr snapshot test > ssr test src/tag/_example/selectable.tsx 1`] = `"
选中/未选态
选中态
未选态
选中禁用
未选禁用
选中/未选态
选中态
未选态
选中禁用
未选禁用
Outline Tag
Checked
Unchecked
Disabled
Disabled
"`;