diff --git a/src/tag/Tag.tsx b/src/tag/Tag.tsx index a3778f37a1..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 = (
= ( 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 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
"`;