Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Sep 9, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d08786e
feat: sync vue2 pr 2220
liweijie0812 Sep 6, 2024
bc6b047
fix: maxWidth
liweijie0812 Sep 6, 2024
83a2d1f
chore: update snapshot
github-actions[bot] Sep 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 10 additions & 4 deletions src/tag/Tag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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}
Expand Down
34 changes: 18 additions & 16 deletions src/tag/__tests__/vitest-tag.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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'];
Expand Down Expand Up @@ -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) => {
Expand Down
2 changes: 1 addition & 1 deletion src/tag/defaultProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: [] };
4 changes: 2 additions & 2 deletions src/tag/tag.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions src/tag/tag.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions test/snap/__snapshots__/csr.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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="默认超八个字超长文本标签超长省略文本标签"
>
默认超八个字超长文本标签超长省略文本标签
Expand Down Expand Up @@ -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>"`;

Expand Down
2 changes: 1 addition & 1 deletion test/snap/__snapshots__/ssr.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>"`;

Expand Down
Loading