fix: rm Tag useless style (ant-design#47504)

DraculaPrince · Mar 29, 2024 · b972404 · b972404
1 parent 45d1322
commit b972404
Show file tree

Hide file tree

Showing 16 changed files with 1,746 additions and 2,489 deletions.
diff --git a/components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap
diff --git a/components/tag/__tests__/__snapshots__/demo.test.ts.snap b/components/tag/__tests__/__snapshots__/demo.test.ts.snap
diff --git a/components/tag/demo/animation.tsx b/components/tag/demo/animation.tsx
@@ -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();
@@ -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) => {
@@ -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);
 
@@ -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 ? (

diff --git a/components/tag/demo/basic.tsx b/components/tag/demo/basic.tsx
@@ -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;
diff --git a/components/tag/demo/borderless.tsx b/components/tag/demo/borderless.tsx
@@ -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>
@@ -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>
@@ -60,7 +60,7 @@ const App: React.FC = () => (
       <Tag bordered={false} color="purple">
         purple
       </Tag>
-    </Space>
+    </Flex>
   </>
 );
 

diff --git a/components/tag/demo/borderlessLayout.tsx b/components/tag/demo/borderlessLayout.tsx
@@ -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>
@@ -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>
@@ -50,7 +50,7 @@ const App: React.FC = () => {
         <Tag bordered={false} color="purple">
           purple
         </Tag>
-      </Space>
+      </Flex>
     </div>
   );
 };

diff --git a/components/tag/demo/checkable.tsx b/components/tag/demo/checkable.tsx
@@ -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]
@@ -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>
   );
 };
 

diff --git a/components/tag/demo/colorful-inverse.tsx b/components/tag/demo/colorful-inverse.tsx
@@ -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>
@@ -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;
diff --git a/components/tag/demo/colorful.tsx b/components/tag/demo/colorful.tsx
@@ -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>
@@ -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>
   </>
 );
 

diff --git a/components/tag/demo/component-token.tsx b/components/tag/demo/component-token.tsx
@@ -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>
@@ -33,6 +26,8 @@ export default () => (
       <Tag icon={<SyncOutlined spin />} color="processing">
         processing
       </Tag>
-    </Space>
+    </Flex>
   </ConfigProvider>
 );
+
+export default App;
diff --git a/components/tag/demo/control.tsx b/components/tag/demo/control.tsx
@@ -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);
@@ -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
@@ -132,7 +132,7 @@ const App: React.FC = () => {
           New Tag
         </Tag>
       )}
-    </Space>
+    </Flex>
   );
 };
 

diff --git a/components/tag/demo/customize.tsx b/components/tag/demo/customize.tsx
@@ -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;