diff --git a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
index ba74f2f586..d1c0a066c4 100644
--- a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2,69 +2,48 @@
exports[`renders components/button/demo/basic.tsx extend context correctly 1`] = `
-
-
-
-
+ Primary Button
+
+
+
-
+ Default Button
+
+
+
-
+ Dashed Button
+
+
+
-
+ Text Button
+
+
+
+
+ Link Button
+
+
-
-
-
-
+ Primary
+
+
+
-
+ Default
+
+
+
-
+ Dashed
+
+
+
-
+ disabled
+
+
+
-
+ text
+
+
+
+
+ Link
+
+
-
-
-
-
-
-
-
-
-
+
+
-
+
+ 部 署
+
+
+
-
+
+
+
+ 部署
+
+
-
-
-
-
-
-
-
-
-
-
-
+
+ TEXT
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
+
+ TEXT
+
+
+
+
`;
@@ -490,69 +382,48 @@ exports[`renders components/button/demo/component-token.tsx extend context corre
exports[`renders components/button/demo/danger.tsx extend context correctly 1`] = `
-
-
-
-
+ Primary
+
+
+
-
+ Default
+
+
+
-
+ Dashed
+
+
+
-
+ Text
+
+
+
+
+ Link
+
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
,
]
@@ -1142,336 +959,216 @@ exports[`renders components/button/demo/debug-icon.tsx extend context correctly
exports[`renders components/button/demo/disabled.tsx extend context correctly 1`] = `
-
-
-
-
-
-
-
-
+
+ Primary
+
+
+
-
-
-
-
-
-
-
-
+
+ Default
+
+
+
-
-
-
-
-
-
-
-
+
+ Dashed
+
+
+
-
-
-
-
-
-
-
-
+
+ Text
+
+
+
-
-
-
-
-
-
-
-
+
+ Link
+
+
+
-
-
-
-
-
-
-
-
+
+ Danger Default
+
+
+
-
-
-
-
-
-
-
-
+
+ Danger Text
+
+
+
-
-
-
-
-
-
-
-
+
+ Danger Link
+
+
+
-
+
+ Ghost
+
+
+
`;
@@ -1480,57 +1177,40 @@ exports[`renders components/button/demo/disabled.tsx extend context correctly 2`
exports[`renders components/button/demo/ghost.tsx extend context correctly 1`] = `
`;
@@ -1538,413 +1218,363 @@ exports[`renders components/button/demo/ghost.tsx extend context correctly 2`] =
exports[`renders components/button/demo/icon.tsx extend context correctly 1`] = `
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
`;
@@ -2307,208 +1937,174 @@ exports[`renders components/button/demo/legacy-group.tsx extend context correctl
exports[`renders components/button/demo/loading.tsx extend context correctly 1`] = `
-
-
-
-
-
+
+
+
+
+ Loading
+
+
+
-
+
+
+
+
+ Loading
+
+
+
-
+
+
+
+
+
-
-
+ Click me!
+
+
+
-
-
-
-
+
+
+
+
+ Click me!
+
+
+
-
+
+
-
-
-
-
,
]
diff --git a/components/button/__tests__/__snapshots__/demo.test.ts.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap
index 468663d464..c2506f7054 100644
--- a/components/button/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/button/__tests__/__snapshots__/demo.test.ts.snap
@@ -2,544 +2,415 @@
exports[`renders components/button/demo/basic.tsx correctly 1`] = `
+
+
+
+
+
+
+`;
+
+exports[`renders components/button/demo/block.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/button/demo/chinese-chars-loading.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders components/button/demo/component-token.tsx correctly 1`] = `
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`renders components/button/demo/block.tsx correctly 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`renders components/button/demo/chinese-chars-loading.tsx correctly 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
`;
-exports[`renders components/button/demo/component-token.tsx correctly 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
exports[`renders components/button/demo/danger.tsx correctly 1`] = `
-
-
-
-
+ Primary
+
+
+
-
+ Default
+
+
+
-
+ Dashed
+
+
+
-
+ Text
+
+
+
+
+ Link
+
+
`;
@@ -678,368 +549,314 @@ Array [
-
-
-
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+ Search
+
+
+
-
+
+
+
+
+
-
+
+
+
+
+
+ Search
+
+
-
-
-
+
+
+
+
+
-
+
+
+
+
+ Search
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`renders components/button/demo/ghost.tsx correctly 1`] = `
-
`;
+exports[`renders components/button/demo/ghost.tsx correctly 1`] = `
+
+
+
+
+
+
+`;
+
exports[`renders components/button/demo/icon.tsx correctly 1`] = `
-
-
-
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+ Search
+
+
+
-
+
+
+
+
+
-
+
+
+
+
+
+ Search
+
+
-
-
-
+
+
+
+
+
-
+
+
+
+
+ Search
+
+
+
-
-
-
-
-
+
+
+
+
+ Loading
+
+
+
-
+
+
+
+
+ Loading
+
+
+
-
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
-
-
+ Link
+
+
+
+
+
-
+
+
+
+
+
-
+
+
+
+
+
-
+
+
+
+
+ Download
+
+
+
-
+
+
+
+
+
+ Download
+
+
,
]
diff --git a/components/button/demo/basic.tsx b/components/button/demo/basic.tsx
index da2b2fc5bd..0cda77ee32 100644
--- a/components/button/demo/basic.tsx
+++ b/components/button/demo/basic.tsx
@@ -1,14 +1,14 @@
import React from 'react';
-import { Button, Space } from 'antd';
+import { Button, Flex } from 'antd';
const App: React.FC = () => (
-
+
-
+
);
export default App;
diff --git a/components/button/demo/block.tsx b/components/button/demo/block.tsx
index 4a9ed7ee3d..7691882595 100644
--- a/components/button/demo/block.tsx
+++ b/components/button/demo/block.tsx
@@ -1,8 +1,8 @@
import React from 'react';
-import { Button, Space } from 'antd';
+import { Button, Flex } from 'antd';
const App: React.FC = () => (
-
+
@@ -19,7 +19,7 @@ const App: React.FC = () => (
-
+
);
export default App;
diff --git a/components/button/demo/chinese-chars-loading.tsx b/components/button/demo/chinese-chars-loading.tsx
index 791772f010..de7675cdc1 100644
--- a/components/button/demo/chinese-chars-loading.tsx
+++ b/components/button/demo/chinese-chars-loading.tsx
@@ -1,14 +1,13 @@
-// @ts-nocheck
-import { PoweroffOutlined } from '@ant-design/icons';
import React from 'react';
-import { Button, Space } from 'antd';
+import { PoweroffOutlined } from '@ant-design/icons';
+import { Button, Flex } from 'antd';
const Text1 = () => '部署';
const Text2 = () => 部署;
const Text3 = () => 'Submit';
const App: React.FC = () => (
-
+
-
+
);
export default App;
diff --git a/components/button/demo/component-token.tsx b/components/button/demo/component-token.tsx
index 9fec6db5b3..51bd10bae9 100644
--- a/components/button/demo/component-token.tsx
+++ b/components/button/demo/component-token.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Button, ConfigProvider, Space } from 'antd';
+import { Button, ConfigProvider, Flex } from 'antd';
const App: React.FC = () => (
(
colorPrimary: '#1976d2',
controlHeight: 36,
primaryShadow:
- '0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)',
+ '0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12)',
fontWeight: 500,
defaultBorderColor: 'rgba(25, 118, 210, 0.5)',
colorText: '#1976d2',
@@ -22,13 +22,13 @@ const App: React.FC = () => (
},
}}
>
-
-
+
+
-
-
+
+
@@ -36,8 +36,8 @@ const App: React.FC = () => (
CONTAINED
-
-
+
+
);
diff --git a/components/button/demo/danger.tsx b/components/button/demo/danger.tsx
index c00046a9b7..d205355e2a 100644
--- a/components/button/demo/danger.tsx
+++ b/components/button/demo/danger.tsx
@@ -1,8 +1,8 @@
import React from 'react';
-import { Button, Space } from 'antd';
+import { Button, Flex } from 'antd';
const App: React.FC = () => (
-
+
@@ -16,7 +16,7 @@ const App: React.FC = () => (
-
+
);
export default App;
diff --git a/components/button/demo/debug-icon.tsx b/components/button/demo/debug-icon.tsx
index e7ba6d1f93..d8af351388 100644
--- a/components/button/demo/debug-icon.tsx
+++ b/components/button/demo/debug-icon.tsx
@@ -1,11 +1,10 @@
+import React from 'react';
import { SearchOutlined } from '@ant-design/icons';
-import React, { useState } from 'react';
-import { Button, ConfigProvider, Divider, Radio, Space, Tooltip } from 'antd';
+import { Button, ConfigProvider, Divider, Flex, Radio, Tooltip } from 'antd';
import type { SizeType } from 'antd/es/config-provider/SizeContext';
const App: React.FC = () => {
- const [size, setSize] = useState('large');
-
+ const [size, setSize] = React.useState('large');
return (
<>
setSize(e.target.value)}>
@@ -17,8 +16,8 @@ const App: React.FC = () => {
Preview
-
-
+
+
} />
@@ -32,8 +31,8 @@ const App: React.FC = () => {
} />
}>Search
-
-
+
+
} />
@@ -49,8 +48,8 @@ const App: React.FC = () => {
Search
-
-
+
+
);
diff --git a/components/button/demo/disabled.tsx b/components/button/demo/disabled.tsx
index c334f2e5c4..5f1a5a5842 100644
--- a/components/button/demo/disabled.tsx
+++ b/components/button/demo/disabled.tsx
@@ -1,73 +1,73 @@
import React from 'react';
-import { Button, Space } from 'antd';
+import { Button, Flex } from 'antd';
const App: React.FC = () => (
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
);
export default App;
diff --git a/components/button/demo/ghost.tsx b/components/button/demo/ghost.tsx
index e6872a30f2..fe0da63cc4 100644
--- a/components/button/demo/ghost.tsx
+++ b/components/button/demo/ghost.tsx
@@ -1,8 +1,8 @@
import React from 'react';
-import { Button, Space } from 'antd';
+import { Button, Flex } from 'antd';
const App: React.FC = () => (
-
+
@@ -13,7 +13,7 @@ const App: React.FC = () => (
-
+
);
export default App;
diff --git a/components/button/demo/icon.tsx b/components/button/demo/icon.tsx
index eb687883ef..855e8d6393 100644
--- a/components/button/demo/icon.tsx
+++ b/components/button/demo/icon.tsx
@@ -1,10 +1,10 @@
import React from 'react';
import { SearchOutlined } from '@ant-design/icons';
-import { Button, Tooltip, Space } from 'antd';
+import { Button, Flex, Tooltip } from 'antd';
const App: React.FC = () => (
-
-
+
+
} />
@@ -18,8 +18,8 @@ const App: React.FC = () => (
} />
}>Search
-
-
+
+
} />
@@ -31,8 +31,8 @@ const App: React.FC = () => (
Search
} href="https://www.google.com" />
-
-
+
+
);
export default App;
diff --git a/components/button/demo/loading.tsx b/components/button/demo/loading.tsx
index 2efb35d6a0..0562c4516e 100644
--- a/components/button/demo/loading.tsx
+++ b/components/button/demo/loading.tsx
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { PoweroffOutlined } from '@ant-design/icons';
-import { Button, Space } from 'antd';
+import { Button, Flex } from 'antd';
const App: React.FC = () => {
const [loadings, setLoadings] = useState([]);
@@ -22,8 +22,8 @@ const App: React.FC = () => {
};
return (
-
-
+
+
@@ -31,9 +31,8 @@ const App: React.FC = () => {
Loading
} loading />
-
-
-
+
+
@@ -51,8 +50,8 @@ const App: React.FC = () => {
loading={loadings[2]}
onClick={() => enterLoading(2)}
/>
-
-
+
+
);
};
diff --git a/components/button/demo/multiple.tsx b/components/button/demo/multiple.tsx
index f1e0cad130..aef4eeeb4e 100644
--- a/components/button/demo/multiple.tsx
+++ b/components/button/demo/multiple.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import type { MenuProps } from 'antd';
-import { Button, Dropdown, Space } from 'antd';
+import { Button, Dropdown, Flex } from 'antd';
const onMenuClick: MenuProps['onClick'] = (e) => {
console.log('click', e);
@@ -22,11 +22,11 @@ const items = [
];
const App: React.FC = () => (
-
+
Actions
-
+
);
export default App;
diff --git a/components/button/demo/size.tsx b/components/button/demo/size.tsx
index db4fed605e..ebbbb87396 100644
--- a/components/button/demo/size.tsx
+++ b/components/button/demo/size.tsx
@@ -1,11 +1,10 @@
import React, { useState } from 'react';
import { DownloadOutlined } from '@ant-design/icons';
-import { Button, Radio, Space, Divider } from 'antd';
+import { Button, Divider, Flex, Radio } from 'antd';
import type { SizeType } from 'antd/es/config-provider/SizeContext';
const App: React.FC = () => {
const [size, setSize] = useState('large'); // default is 'middle'
-
return (
<>
setSize(e.target.value)}>
@@ -16,8 +15,8 @@ const App: React.FC = () => {
Preview
-
-
+
+
@@ -25,11 +24,11 @@ const App: React.FC = () => {
-
+
-
+
} size={size} />
} size={size} />
} size={size} />
@@ -39,8 +38,8 @@ const App: React.FC = () => {
} size={size}>
Download
-
-
+
+
);
};