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

Jump to bottom

fix: rm Tag useless style #47504

Merged
merged 1 commit into from
Feb 21, 2024
Merged

fix: rm Tag useless style #47504

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2,009 changes: 827 additions & 1,182 deletions components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap
View file
Open in desktop

Large diffs are not rendered by default.

1,981 changes: 812 additions & 1,169 deletions components/tag/__tests__/__snapshots__/demo.test.ts.snap
View file
Open in desktop

Large diffs are not rendered by default.

32 changes: 12 additions & 20 deletions components/tag/demo/animation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React, { useEffect, useRef, useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { TweenOneGroup } from 'rc-tween-one';
import type { InputRef } from 'antd';
import { Input, Tag, theme } from 'antd';
import { Flex, Input, Tag, theme } from 'antd';
import { TweenOneGroup } from 'rc-tween-one';

const App: React.FC = () => {
const { token } = theme.useToken();
Expand Down Expand Up @@ -39,8 +39,8 @@ const App: React.FC = () => {
setInputValue('');
};

const forMap = (tag: string) => {
const tagElem = (
const forMap = (tag: string) => (
<span key={tag} style={{ display: 'inline-block' }}>
<Tag
closable
onClose={(e) => {
Expand All @@ -50,13 +50,8 @@ const App: React.FC = () => {
>
{tag}
</Tag>
);
return (
<span key={tag} style={{ display: 'inline-block' }}>
{tagElem}
</span>
);
};
</span>
);

const tagChild = tags.map(forMap);

Expand All @@ -69,21 +64,18 @@ const App: React.FC = () => {
<>
<div style={{ marginBottom: 16 }}>
<TweenOneGroup
enter={{
scale: 0.8,
opacity: 0,
type: 'from',
duration: 100,
}}
appear={false}
enter={{ scale: 0.8, opacity: 0, type: 'from', duration: 100 }}
leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
onEnd={(e) => {
if (e.type === 'appear' || e.type === 'enter') {
(e.target as any).style = 'display: inline-block';
}
}}
leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
appear={false}
>
{tagChild}
<Flex gap="small" wrap="wrap">
{tagChild}
</Flex>
</TweenOneGroup>
</div>
{inputVisible ? (
Expand Down
14 changes: 5 additions & 9 deletions components/tag/demo/basic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,25 @@
import { CloseCircleOutlined } from '@ant-design/icons';
import React from 'react';
import { Space, Tag } from 'antd';

const log = (e: React.MouseEvent<HTMLElement>) => {
console.log(e);
};
import { CloseCircleOutlined } from '@ant-design/icons';
import { Flex, Tag } from 'antd';

const preventDefault = (e: React.MouseEvent<HTMLElement>) => {
e.preventDefault();
console.log('Clicked! But prevent default.');
};

const App: React.FC = () => (
<Space size={[0, 8]} wrap>
<Flex gap="small" wrap="wrap">
<Tag>Tag 1</Tag>
<Tag>
<a href="https://github.com/ant-design/ant-design/issues/1862">Link</a>
</Tag>
<Tag closeIcon onClose={preventDefault}>
Prevent Default
</Tag>
<Tag closeIcon={<CloseCircleOutlined />} onClose={log}>
<Tag closeIcon={<CloseCircleOutlined />} onClose={console.log}>
Tag 2
</Tag>
</Space>
</Flex>
);

export default App;
10 changes: 5 additions & 5 deletions components/tag/demo/borderless.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react';
import { Divider, Space, Tag } from 'antd';
import { Divider, Flex, Tag } from 'antd';

const App: React.FC = () => (
<>
<Space size={[0, 'small']} wrap>
<Flex gap="small" wrap="wrap">
<Tag bordered={false}>Tag 1</Tag>
<Tag bordered={false}>Tag 2</Tag>
<Tag bordered={false} closable>
Expand All @@ -12,9 +12,9 @@ const App: React.FC = () => (
<Tag bordered={false} closable>
Tag 4
</Tag>
</Space>
</Flex>
<Divider />
<Space size={[0, 'small']} wrap>
<Flex gap="small" wrap="wrap">
<Tag bordered={false} color="processing">
processing
</Tag>
Expand Down Expand Up @@ -60,7 +60,7 @@ const App: React.FC = () => (
<Tag bordered={false} color="purple">
purple
</Tag>
</Space>
</Flex>
</>
);

Expand Down
12 changes: 6 additions & 6 deletions components/tag/demo/borderlessLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React from 'react';
import { Divider, Space, Tag, theme } from 'antd';
import { Divider, Flex, Tag, theme } from 'antd';

const App: React.FC = () => {
const { token } = theme.useToken();
return (
<div style={{ backgroundColor: token.colorBgLayout, padding: 16 }}>
<Space size={[0, 'small']} wrap>
<div style={{ backgroundColor: token.colorBgLayout, padding: token.padding }}>
<Flex gap="small" wrap="wrap">
<Tag bordered={false}>Tag 1</Tag>
<Tag bordered={false}>Tag 2</Tag>
<Tag bordered={false} closable>
Expand All @@ -14,9 +14,9 @@ const App: React.FC = () => {
<Tag bordered={false} closable>
Tag 4
</Tag>
</Space>
</Flex>
<Divider />
<Space size={[0, 'small']} wrap>
<Flex gap="small" wrap="wrap">
<Tag bordered={false} color="magenta">
magenta
</Tag>
Expand Down Expand Up @@ -50,7 +50,7 @@ const App: React.FC = () => {
<Tag bordered={false} color="purple">
purple
</Tag>
</Space>
</Flex>
</div>
);
};
Expand Down
35 changes: 15 additions & 20 deletions components/tag/demo/checkable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
import React, { useState } from 'react';
import { Space, Tag } from 'antd';

const { CheckableTag } = Tag;
import React from 'react';
import { Flex, Tag } from 'antd';

const tagsData = ['Movies', 'Books', 'Music', 'Sports'];

const App: React.FC = () => {
const [selectedTags, setSelectedTags] = useState<string[]>(['Books']);

const [selectedTags, setSelectedTags] = React.useState<string[]>(['Movies']);
const handleChange = (tag: string, checked: boolean) => {
const nextSelectedTags = checked
? [...selectedTags, tag]
Expand All @@ -17,20 +14,18 @@ const App: React.FC = () => {
};

return (
<>
<span style={{ marginRight: 8 }}>Categories:</span>
<Space size={[0, 8]} wrap>
{tagsData.map((tag) => (
<CheckableTag
key={tag}
checked={selectedTags.includes(tag)}
onChange={(checked) => handleChange(tag, checked)}
>
{tag}
</CheckableTag>
))}
</Space>
</>
<Flex gap="small" wrap="wrap" align="center">
<span>Categories:</span>
{tagsData.map<React.ReactNode>((tag) => (
<Tag.CheckableTag
key={tag}
checked={selectedTags.includes(tag)}
onChange={(checked) => handleChange(tag, checked)}
>
{tag}
</Tag.CheckableTag>
))}
</Flex>
);
};

Expand Down
6 changes: 3 additions & 3 deletions components/tag/demo/colorful-inverse.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react';
import { Space, Tag } from 'antd';
import { Flex, Tag } from 'antd';

const App: React.FC = () => (
<Space size={[0, 8]} wrap>
<Flex gap="small" wrap="wrap">
<Tag color="magenta-inverse">magenta</Tag>
<Tag color="red-inverse">red</Tag>
<Tag color="volcano-inverse">volcano</Tag>
Expand All @@ -14,7 +14,7 @@ const App: React.FC = () => (
<Tag color="blue-inverse">blue</Tag>
<Tag color="geekblue-inverse">geekblue</Tag>
<Tag color="purple-inverse">purple</Tag>
</Space>
</Flex>
);

export default App;
10 changes: 5 additions & 5 deletions components/tag/demo/colorful.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react';
import { Divider, Space, Tag } from 'antd';
import { Divider, Flex, Tag } from 'antd';

const App: React.FC = () => (
<>
<Divider orientation="left">Presets</Divider>
<Space size={[0, 8]} wrap>
<Flex gap="small" wrap="wrap">
<Tag color="magenta">magenta</Tag>
<Tag color="red">red</Tag>
<Tag color="volcano">volcano</Tag>
Expand All @@ -16,14 +16,14 @@ const App: React.FC = () => (
<Tag color="blue">blue</Tag>
<Tag color="geekblue">geekblue</Tag>
<Tag color="purple">purple</Tag>
</Space>
</Flex>
<Divider orientation="left">Custom</Divider>
<Space size={[0, 8]} wrap>
<Flex gap="small" wrap="wrap">
<Tag color="#f50">#f50</Tag>
<Tag color="#2db7f5">#2db7f5</Tag>
<Tag color="#87d068">#87d068</Tag>
<Tag color="#108ee9">#108ee9</Tag>
</Space>
</Flex>
</>
);

Expand Down
21 changes: 8 additions & 13 deletions components/tag/demo/component-token.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,12 @@
import { CloseCircleOutlined, SyncOutlined } from '@ant-design/icons';
import React from 'react';
import { ConfigProvider, Space, Tag } from 'antd';
import { CloseCircleOutlined, SyncOutlined } from '@ant-design/icons';
import { ConfigProvider, Flex, Tag } from 'antd';

export default () => (
const App: React.FC = () => (
<ConfigProvider
theme={{
components: {
Tag: {
defaultBg: '#f9f0ff',
defaultColor: '#4b34d3',
},
},
}}
theme={{ components: { Tag: { defaultBg: '#f9f0ff', defaultColor: '#4b34d3' } } }}
>
<Space size={[0, 8]} wrap>
<Flex gap="small" wrap="wrap">
<Tag>
<a href="https://github.com/ant-design/ant-design/issues/1862">Link</a>
</Tag>
Expand All @@ -33,6 +26,8 @@ export default () => (
<Tag icon={<SyncOutlined spin />} color="processing">
processing
</Tag>
</Space>
</Flex>
</ConfigProvider>
);

export default App;
24 changes: 12 additions & 12 deletions components/tag/demo/control.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,18 @@
import React, { useEffect, useRef, useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import type { InputRef } from 'antd';
import { Input, Space, Tag, theme, Tooltip } from 'antd';
import { Flex, Input, Tag, theme, Tooltip } from 'antd';

const tagInputStyle: React.CSSProperties = {
width: 64,
height: 22,
marginInlineEnd: 8,
verticalAlign: 'top',
};

const App: React.FC = () => {
const { token } = theme.useToken();
const [tags, setTags] = useState(['Unremovable', 'Tag 2', 'Tag 3']);
const [tags, setTags] = useState<string[]>(['Unremovable', 'Tag 2', 'Tag 3']);
const [inputVisible, setInputVisible] = useState(false);
const [inputValue, setInputValue] = useState('');
const [editInputIndex, setEditInputIndex] = useState(-1);
Expand Down Expand Up @@ -57,22 +64,15 @@ const App: React.FC = () => {
setEditInputValue('');
};

const tagInputStyle: React.CSSProperties = {
width: 64,
height: 22,
marginInlineEnd: 8,
verticalAlign: 'top',
};

const tagPlusStyle: React.CSSProperties = {
height: 22,
background: token.colorBgContainer,
borderStyle: 'dashed',
};

return (
<Space size={[0, 8]} wrap>
{tags.map((tag, index) => {
<Flex gap="small" wrap="wrap">
{tags.map<React.ReactNode>((tag, index) => {
if (editInputIndex === index) {
return (
<Input
Expand Down Expand Up @@ -132,7 +132,7 @@ const App: React.FC = () => {
New Tag
</Tag>
)}
</Space>
</Flex>
);
};

Expand Down
6 changes: 3 additions & 3 deletions components/tag/demo/customize.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import React from 'react';
import { CloseCircleOutlined } from '@ant-design/icons';
import { Tag } from 'antd';
import { Flex, Tag } from 'antd';

const App: React.FC = () => (
<>
<Flex gap="small" wrap="wrap">
<Tag closable closeIcon="关 闭">
Tag1
</Tag>
<Tag closable closeIcon={<CloseCircleOutlined />}>
Tag2
</Tag>
</>
</Flex>
);

export default App;