From 34a277cdaa9dd04a54f03733d76b2a54ee9765d1 Mon Sep 17 00:00:00 2001 From: Wuxh Date: Thu, 17 Nov 2022 13:20:58 +0800 Subject: [PATCH] docs: improve component demo style (#38598) * docs: delete redundant codes repetitive examples that can make it difficult for developers to read * chore: update snapshot * docs(badge): wrapping documents with `Space` * chore: update snapshot * chore(space): optimize documents easy to read * chore: update badge demo * chore: update demo * Revert "chore(space): optimize documents" This reverts commit 88a4378f16cede5b628f885a48a341d507fd53e3. * chore: update snapshots * chore(button): add debug demo * test(button): update snapshots * docs(button): example document beautify * test(button): update snapshots commit by af04705c8f * test(alert): update snapshots * chore: Reverse format --- .../__snapshots__/demo-extend.test.ts.snap | 2294 +++++----- .../__tests__/__snapshots__/demo.test.ts.snap | 2294 +++++----- components/alert/demo/action.tsx | 4 +- components/alert/demo/banner.tsx | 9 +- components/alert/demo/closable.tsx | 6 +- components/alert/demo/custom-icon.tsx | 6 +- components/alert/demo/description.tsx | 6 +- components/alert/demo/icon.tsx | 6 +- components/alert/demo/smooth-closed.tsx | 13 +- components/alert/demo/style.tsx | 6 +- .../__snapshots__/demo-extend.test.ts.snap | 1378 +++--- .../__tests__/__snapshots__/demo.test.ts.snap | 1378 +++--- components/badge/demo/basic.tsx | 6 +- components/badge/demo/change.tsx | 41 +- .../badge/demo/colorful-with-count-debug.tsx | 37 +- components/badge/demo/dot.tsx | 6 +- components/badge/demo/mix.tsx | 6 +- components/badge/demo/overflow.tsx | 6 +- components/badge/demo/size.tsx | 6 +- components/badge/demo/title.tsx | 6 +- .../__snapshots__/demo-extend.test.ts.snap | 3743 ++++++++++------- .../__tests__/__snapshots__/demo.test.ts.snap | 3121 ++++++++------ components/button/demo/basic.tsx | 7 +- components/button/demo/block.tsx | 6 +- .../button/demo/chinese-chars-loading.tsx | 6 +- components/button/demo/danger.tsx | 6 +- components/button/demo/debug-icon.md | 7 + components/button/demo/debug-icon.tsx | 55 + components/button/demo/disabled.md | 7 - components/button/demo/disabled.tsx | 101 +- components/button/demo/ghost.md | 7 - components/button/demo/ghost.tsx | 6 +- components/button/demo/icon.tsx | 90 +- components/button/demo/loading.tsx | 12 +- components/button/demo/multiple.tsx | 8 +- components/button/demo/size.tsx | 57 +- components/button/index.en-US.md | 12 +- components/button/index.zh-CN.md | 12 +- 38 files changed, 8386 insertions(+), 6391 deletions(-) create mode 100644 components/button/demo/debug-icon.md create mode 100644 components/button/demo/debug-icon.tsx diff --git a/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap index 031dfe2778..6b5b6f8847 100644 --- a/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1,65 +1,103 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders ./components/alert/demo/action.tsx extend context correctly 1`] = ` -Array [ +
, - +
-
, +
, - , -] +
+ +
+
+ +
+ + + + + + `; exports[`renders ./components/alert/demo/banner.tsx extend context correctly 1`] = ` -Array [ +
, -
, - , -
, - , -
, +
+
+ -
, -] + +
+ +
+ `; exports[`renders ./components/alert/demo/basic.tsx extend context correctly 1`] = ` @@ -434,93 +475,105 @@ exports[`renders ./components/alert/demo/basic.tsx extend context correctly 1`] `; exports[`renders ./components/alert/demo/closable.tsx extend context correctly 1`] = ` -Array [ +
, + Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text +
+ + + + , -] + Error Text + +
+ Error Description Error Description Error Description Error Description Error Description Error Description +
+ + + + + `; exports[`renders ./components/alert/demo/close-text.tsx extend context correctly 1`] = ` @@ -553,400 +606,469 @@ exports[`renders ./components/alert/demo/close-text.tsx extend context correctly `; exports[`renders ./components/alert/demo/custom-icon.tsx extend context correctly 1`] = ` -Array [ +
, +
, + , + , + , -] + + `; exports[`renders ./components/alert/demo/description.tsx extend context correctly 1`] = ` -Array [ +
, +
, + , + , -] + + `; exports[`renders ./components/alert/demo/error-boundary.tsx extend context correctly 1`] = ` @@ -961,121 +1083,27 @@ exports[`renders ./components/alert/demo/error-boundary.tsx extend context corre `; exports[`renders ./components/alert/demo/icon.tsx extend context correctly 1`] = ` -Array [ +
, - , - , - , +
, - , - , - , -] + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ `; exports[`renders ./components/alert/demo/smooth-closed.tsx extend context correctly 1`] = ` -
+
+
+

+ click the close button to see the effect +

+
+
-

- placeholder text here -

`; exports[`renders ./components/alert/demo/style.tsx extend context correctly 1`] = ` -Array [ +
, +
, +
, + , -] + + `; diff --git a/components/alert/__tests__/__snapshots__/demo.test.ts.snap b/components/alert/__tests__/__snapshots__/demo.test.ts.snap index fc4c6b46c4..f6df1a0146 100644 --- a/components/alert/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/alert/__tests__/__snapshots__/demo.test.ts.snap @@ -1,65 +1,103 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders ./components/alert/demo/action.tsx correctly 1`] = ` -Array [ +
, - +
-
, +
, - , -] +
+ +
+
+ +
+ + + + + + `; exports[`renders ./components/alert/demo/banner.tsx correctly 1`] = ` -Array [ +
, -
, - , -
, - , -
, +
+
+ -
, -] + +
+ +
+ `; exports[`renders ./components/alert/demo/basic.tsx correctly 1`] = ` @@ -434,93 +475,105 @@ exports[`renders ./components/alert/demo/basic.tsx correctly 1`] = ` `; exports[`renders ./components/alert/demo/closable.tsx correctly 1`] = ` -Array [ +
, + Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text +
+ + + + , -] + Error Text + +
+ Error Description Error Description Error Description Error Description Error Description Error Description +
+ + + + + `; exports[`renders ./components/alert/demo/close-text.tsx correctly 1`] = ` @@ -553,400 +606,469 @@ exports[`renders ./components/alert/demo/close-text.tsx correctly 1`] = ` `; exports[`renders ./components/alert/demo/custom-icon.tsx correctly 1`] = ` -Array [ +
, +
, + , + , + , -] + + `; exports[`renders ./components/alert/demo/description.tsx correctly 1`] = ` -Array [ +
, +
, + , + , -] + + `; exports[`renders ./components/alert/demo/error-boundary.tsx correctly 1`] = ` @@ -961,121 +1083,27 @@ exports[`renders ./components/alert/demo/error-boundary.tsx correctly 1`] = ` `; exports[`renders ./components/alert/demo/icon.tsx correctly 1`] = ` -Array [ +
, - , - , - , +
, - , - , - , -] + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ `; exports[`renders ./components/alert/demo/smooth-closed.tsx correctly 1`] = ` -
+
+
+

+ click the close button to see the effect +

+
+
-

- placeholder text here -

`; exports[`renders ./components/alert/demo/style.tsx correctly 1`] = ` -Array [ +
, +
, +
, + , -] + + `; diff --git a/components/alert/demo/action.tsx b/components/alert/demo/action.tsx index bb69f81e19..bdce18f934 100644 --- a/components/alert/demo/action.tsx +++ b/components/alert/demo/action.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Alert, Button, Space } from 'antd'; const App: React.FC = () => ( - <> + ( } closable /> - + ); export default App; diff --git a/components/alert/demo/banner.tsx b/components/alert/demo/banner.tsx index cc8bcb6a67..552d6ca9ee 100644 --- a/components/alert/demo/banner.tsx +++ b/components/alert/demo/banner.tsx @@ -1,20 +1,17 @@ import React from 'react'; -import { Alert } from 'antd'; +import { Alert, Space } from 'antd'; const App: React.FC = () => ( - <> + -
-
-
- + ); export default App; diff --git a/components/alert/demo/closable.tsx b/components/alert/demo/closable.tsx index 184f7d5aab..2d04f4ebaf 100644 --- a/components/alert/demo/closable.tsx +++ b/components/alert/demo/closable.tsx @@ -1,12 +1,12 @@ import React from 'react'; -import { Alert } from 'antd'; +import { Alert, Space } from 'antd'; const onClose = (e: React.MouseEvent) => { console.log(e, 'I was closed.'); }; const App: React.FC = () => ( - <> + ( closable onClose={onClose} /> - + ); export default App; diff --git a/components/alert/demo/custom-icon.tsx b/components/alert/demo/custom-icon.tsx index e4a13df2f9..e1767a937e 100644 --- a/components/alert/demo/custom-icon.tsx +++ b/components/alert/demo/custom-icon.tsx @@ -1,11 +1,11 @@ import React from 'react'; import { SmileOutlined } from '@ant-design/icons'; -import { Alert } from 'antd'; +import { Alert, Space } from 'antd'; const icon = ; const App: React.FC = () => ( - <> + @@ -39,7 +39,7 @@ const App: React.FC = () => ( type="error" showIcon /> - + ); export default App; diff --git a/components/alert/demo/description.tsx b/components/alert/demo/description.tsx index 6c68f794b0..0abd7b08b1 100644 --- a/components/alert/demo/description.tsx +++ b/components/alert/demo/description.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { Alert } from 'antd'; +import { Alert, Space } from 'antd'; const App: React.FC = () => ( - <> + ( description="Error Description Error Description Error Description Error Description" type="error" /> - + ); export default App; diff --git a/components/alert/demo/icon.tsx b/components/alert/demo/icon.tsx index f9dcfb8648..bc9baca870 100644 --- a/components/alert/demo/icon.tsx +++ b/components/alert/demo/icon.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { Alert } from 'antd'; +import { Alert, Space } from 'antd'; const App: React.FC = () => ( - <> + @@ -32,7 +32,7 @@ const App: React.FC = () => ( type="error" showIcon /> - + ); export default App; diff --git a/components/alert/demo/smooth-closed.tsx b/components/alert/demo/smooth-closed.tsx index da15f90dc4..e132c1b144 100644 --- a/components/alert/demo/smooth-closed.tsx +++ b/components/alert/demo/smooth-closed.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Alert } from 'antd'; +import { Alert, Switch, Space } from 'antd'; const App: React.FC = () => { const [visible, setVisible] = useState(true); @@ -9,12 +9,13 @@ const App: React.FC = () => { }; return ( -
- {visible ? ( + + {visible && ( - ) : null} -

placeholder text here

-
+ )} +

click the close button to see the effect

+ + ); }; diff --git a/components/alert/demo/style.tsx b/components/alert/demo/style.tsx index 4eae02a379..f89bc3f879 100644 --- a/components/alert/demo/style.tsx +++ b/components/alert/demo/style.tsx @@ -1,13 +1,13 @@ import React from 'react'; -import { Alert } from 'antd'; +import { Alert, Space } from 'antd'; const App: React.FC = () => ( - <> + - + ); export default App; diff --git a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap index a12fd57658..1011fc9077 100644 --- a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1,245 +1,294 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders ./components/badge/demo/basic.tsx extend context correctly 1`] = ` -Array [ - +
- - - - 5 - + class="ant-avatar-string" + style="opacity:0" + /> - - , - - - - - - 0 - - , - - - - - - + + + 5 + + + - , -] +
+
+ + + + + + 0 + + +
+
+ + + + + + + + +
+ `; exports[`renders ./components/badge/demo/change.tsx extend context correctly 1`] = ` -Array [ - - - - - - - - 5 - - - - , +
- - - -
, - +
+
+
+
+ + + + + + +
+
+ +
+
+
+ `; exports[`renders ./components/badge/demo/colorful.tsx extend context correctly 1`] = ` @@ -567,15 +616,19 @@ Array [ `; exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx extend context correctly 1`] = ` -Array [ +
pink
@@ -606,15 +659,16 @@ Array [ -
, +
red
@@ -645,15 +699,16 @@ Array [ -
, +
yellow
@@ -684,15 +739,16 @@ Array [ -
, +
orange
@@ -723,15 +779,16 @@ Array [ -
, +
cyan
@@ -762,15 +819,16 @@ Array [ -
, +
green
@@ -801,15 +859,16 @@ Array [ -
, +
blue
@@ -840,15 +899,16 @@ Array [ -
, +
purple
@@ -879,15 +939,16 @@ Array [ -
, +
geekblue
@@ -918,15 +979,16 @@ Array [ -
, +
magenta
@@ -957,15 +1019,16 @@ Array [ -
, +
volcano
@@ -996,15 +1059,16 @@ Array [ -
, +
gold
@@ -1035,15 +1099,16 @@ Array [ -
, +
lime
@@ -1074,54 +1139,65 @@ Array [ -
, -] + + `; exports[`renders ./components/badge/demo/dot.tsx extend context correctly 1`] = ` -Array [ - +
- + + + - - , - +
- - Link something - - - , -] + + Link something + + + +
+
`; exports[`renders ./components/badge/demo/link.tsx extend context correctly 1`] = ` @@ -1160,186 +1236,227 @@ exports[`renders ./components/badge/demo/link.tsx extend context correctly 1`] = `; exports[`renders ./components/badge/demo/mix.tsx extend context correctly 1`] = ` -Array [ - +
- - - - 5 - + class="ant-avatar-string" + style="opacity:0" + /> - - , - - - - - - - 5 + + 5 + - - - , - + +
+
- - - - 5 - + class="ant-avatar-string" + style="opacity:0" + /> - - , - - - - - - - 5 + + 5 + + + +
+
+ + + - - , - + + + 5 + + + + +
+
+ class="ant-avatar ant-avatar-lg ant-avatar-square" + > + + + + + + 5 + + + - - , - +
+ + + - - , - +
+ + + - - , - +
+ + + - - , -] +
+
+ + + + + + +
+
`; exports[`renders ./components/badge/demo/no-wrapper.tsx extend context correctly 1`] = ` @@ -1490,103 +1607,124 @@ exports[`renders ./components/badge/demo/offset.tsx extend context correctly 1`] `; exports[`renders ./components/badge/demo/overflow.tsx extend context correctly 1`] = ` -Array [ - +
- - - - 9 - + class="ant-avatar-string" + style="opacity:0" + /> - - 9 + + 9 + + + + 9 + + + + +
+
+ + + - - , - + 99+ + + +
+
+ class="ant-avatar ant-avatar-lg ant-avatar-square" + > + + + + 10+ + - - 99+ - - , - +
+ class="ant-avatar ant-avatar-lg ant-avatar-square" + > + + + + 999+ + - - 10+ - - , - - - - - - 999+ - - , -] +
+
`; exports[`renders ./components/badge/demo/ribbbon.tsx extend context correctly 1`] = ` @@ -2062,64 +2200,75 @@ exports[`renders ./components/badge/demo/ribbon-debug.tsx extend context correct `; exports[`renders ./components/badge/demo/size.tsx extend context correctly 1`] = ` -Array [ - +
- - - - 5 - + class="ant-avatar-string" + style="opacity:0" + /> - - , - + + + 5 + + + + +
+
- - - - 5 - + class="ant-avatar-string" + style="opacity:0" + /> - - , -] + + + + 5 + + + + +
+
`; exports[`renders ./components/badge/demo/status.tsx extend context correctly 1`] = ` @@ -2280,72 +2429,83 @@ Array [ `; exports[`renders ./components/badge/demo/title.tsx extend context correctly 1`] = ` -Array [ - +
- - - - 5 - + class="ant-avatar-string" + style="opacity:0" + /> - - , - + + + 5 + + + + +
+
+ class="ant-avatar ant-avatar-lg ant-avatar-square" + > + + + + + + - + + + + + 5 + + + - - - - - - - - - - 5 - - - - , -] +
+
`; diff --git a/components/badge/__tests__/__snapshots__/demo.test.ts.snap b/components/badge/__tests__/__snapshots__/demo.test.ts.snap index a0bf2e8209..02f5361399 100644 --- a/components/badge/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/badge/__tests__/__snapshots__/demo.test.ts.snap @@ -1,245 +1,294 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders ./components/badge/demo/basic.tsx correctly 1`] = ` -Array [ - +
- - - - 5 - + class="ant-avatar-string" + style="opacity:0" + /> - - , - - - - - - 0 - - , - - - - - - + + + 5 + + + - , -] +
+
+ + + + + + 0 + + +
+
+ + + + + + + + +
+ `; exports[`renders ./components/badge/demo/change.tsx correctly 1`] = ` -Array [ - - - - - - - - 5 - - - - , +
- - - -
, - +
+
+
+
+ + + + + + +
+
+ +
+
+
+ `; exports[`renders ./components/badge/demo/colorful.tsx correctly 1`] = ` @@ -567,15 +616,19 @@ Array [ `; exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx correctly 1`] = ` -Array [ +
pink
@@ -606,15 +659,16 @@ Array [ -
, +
red
@@ -645,15 +699,16 @@ Array [ -
, +
yellow
@@ -684,15 +739,16 @@ Array [ -
, +
orange
@@ -723,15 +779,16 @@ Array [ -
, +
cyan
@@ -762,15 +819,16 @@ Array [ -
, +
green
@@ -801,15 +859,16 @@ Array [ -
, +
blue
@@ -840,15 +899,16 @@ Array [ -
, +
purple
@@ -879,15 +939,16 @@ Array [ -
, +
geekblue
@@ -918,15 +979,16 @@ Array [ -
, +
magenta
@@ -957,15 +1019,16 @@ Array [ -
, +
volcano
@@ -996,15 +1059,16 @@ Array [ -
, +
gold
@@ -1035,15 +1099,16 @@ Array [ -
, +
lime
@@ -1074,54 +1139,65 @@ Array [ -
, -] + + `; exports[`renders ./components/badge/demo/dot.tsx correctly 1`] = ` -Array [ - +
- + + + - - , - +
- - Link something - - - , -] + + Link something + + + +
+
`; exports[`renders ./components/badge/demo/link.tsx correctly 1`] = ` @@ -1160,186 +1236,227 @@ exports[`renders ./components/badge/demo/link.tsx correctly 1`] = ` `; exports[`renders ./components/badge/demo/mix.tsx correctly 1`] = ` -Array [ - +
- - - - 5 - + class="ant-avatar-string" + style="opacity:0" + /> - - , - - - - - - - 5 + + 5 + - - - , - + +
+
- - - - 5 - + class="ant-avatar-string" + style="opacity:0" + /> - - , - - - - - - - 5 + + 5 + + + +
+
+ + + - - , - + + + 5 + + + + +
+
+ class="ant-avatar ant-avatar-lg ant-avatar-square" + > + + + + + + 5 + + + - - , - +
+ + + - - , - +
+ + + - - , - +
+ + + - - , -] +
+
+ + + + + + +
+
`; exports[`renders ./components/badge/demo/no-wrapper.tsx correctly 1`] = ` @@ -1490,103 +1607,124 @@ exports[`renders ./components/badge/demo/offset.tsx correctly 1`] = ` `; exports[`renders ./components/badge/demo/overflow.tsx correctly 1`] = ` -Array [ - +
- - - - 9 - + class="ant-avatar-string" + style="opacity:0" + /> - - 9 + + 9 + + + + 9 + + + + +
+
+ + + - - , - + 99+ + + +
+
+ class="ant-avatar ant-avatar-lg ant-avatar-square" + > + + + + 10+ + - - 99+ - - , - +
+ class="ant-avatar ant-avatar-lg ant-avatar-square" + > + + + + 999+ + - - 10+ - - , - - - - - - 999+ - - , -] +
+
`; exports[`renders ./components/badge/demo/ribbbon.tsx correctly 1`] = ` @@ -2062,64 +2200,75 @@ exports[`renders ./components/badge/demo/ribbon-debug.tsx correctly 1`] = ` `; exports[`renders ./components/badge/demo/size.tsx correctly 1`] = ` -Array [ - +
- - - - 5 - + class="ant-avatar-string" + style="opacity:0" + /> - - , - + + + 5 + + + + +
+
- - - - 5 - + class="ant-avatar-string" + style="opacity:0" + /> - - , -] + + + + 5 + + + + +
+
`; exports[`renders ./components/badge/demo/status.tsx correctly 1`] = ` @@ -2280,72 +2429,83 @@ Array [ `; exports[`renders ./components/badge/demo/title.tsx correctly 1`] = ` -Array [ - +
- - - - 5 - + class="ant-avatar-string" + style="opacity:0" + /> - - , - + + + 5 + + + + +
+
+ class="ant-avatar ant-avatar-lg ant-avatar-square" + > + + + + + + - + + + + + 5 + + + - - - - - - - - - - 5 - - - - , -] +
+
`; diff --git a/components/badge/demo/basic.tsx b/components/badge/demo/basic.tsx index 53fb137d2f..eae6e0f1f7 100644 --- a/components/badge/demo/basic.tsx +++ b/components/badge/demo/basic.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { ClockCircleOutlined } from '@ant-design/icons'; -import { Avatar, Badge } from 'antd'; +import { Avatar, Badge, Space } from 'antd'; const App: React.FC = () => ( - <> + @@ -13,7 +13,7 @@ const App: React.FC = () => ( }> - + ); export default App; diff --git a/components/badge/demo/change.tsx b/components/badge/demo/change.tsx index 252222e0d6..aec8bbbf61 100644 --- a/components/badge/demo/change.tsx +++ b/components/badge/demo/change.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import { MinusOutlined, PlusOutlined, QuestionOutlined } from '@ant-design/icons'; -import { Avatar, Badge, Button, Divider, Switch } from 'antd'; +import { Avatar, Badge, Button, Switch, Space } from 'antd'; const ButtonGroup = Button.Group; @@ -30,27 +30,24 @@ const App: React.FC = () => { }; return ( - <> - - - - - - - - - - - - - - + + + + + + + , - + +
- - Default Button - - , - +
+
- - Dashed Button - - , -
, - +
+
- - Text Button - - , - +
+
- - Link Button - - , -] + +
+ `; exports[`renders ./components/button/demo/block.tsx extend context correctly 1`] = ` -Array [ - , - + +
- - Default - - , - +
+
- - Dashed - - , - +
+
- - Link - - , -] + +
+ `; exports[`renders ./components/button/demo/chinese-chars-loading.tsx extend context correctly 1`] = ` -Array [ - , - + +
- - + + - - 部署 - , - , -
+
- - + + - - Submit - , - +
+
- - + + - - 部署 - , -
+
- - + + - - - 按 钮 - - , -] + 部署 + +
+
+ +
+ `; exports[`renders ./components/button/demo/danger.tsx extend context correctly 1`] = ` +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+`; + +exports[`renders ./components/button/demo/debug-icon.tsx extend context correctly 1`] = ` Array [ - , - , - , - , - , +
+
+
+ +
+
+
+
+ +
+ +
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+ +
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+ +
+ +
+
+
+
+
+ +
+
+ +
+
+
+
+ +
+ +
+
+
+
+
+ +
+
+ + + + + +
+
+
+ , ] `; exports[`renders ./components/button/demo/disabled.tsx extend context correctly 1`] = ` -Array [ - , - , -
, - , - , -
, - , - , -
, - , - , -
, - , - , -
, - , - , -
, - , - , -
, - , - , +
- - +
+
+ +
+
+ +
+
- - Ghost(disabled) - - -
, -] +
+ +
+
+ +
+
+ +
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+ `; exports[`renders ./components/button/demo/ghost.tsx extend context correctly 1`] = `
- - +
+
- - Default - - - +
+
- - Dashed - - - +
+
- - Danger - - + +
`; exports[`renders ./components/button/demo/icon.tsx extend context correctly 1`] = ` -Array [ - , -
-
-
- +
+ +
+
+ +
+
+ +
+
+
+
+ +
+ +
+
+
+
+
+ +
-
, - , - , - , -
-
-
- -
-
, - , -
, - , -
-
-
-
- + aria-label="search" + class="anticon anticon-search" + role="img" + > + + + + Search + +
-
-
, - , - , -
-
-
-
- -
-
, - , - - - - - , -
, -
, - , -
-
-
-
- + aria-label="search" + class="anticon anticon-search" + role="img" + > + + + + Search + +
-
-
, - , - , - , -
-
-
-
- + aria-label="search" + class="anticon anticon-search" + role="img" + > + + +
-
, - , -
, - , -
-
-
-
- -
- -
-
-
, - , - , -
-
-
-
- -
- -
-
-
, - , - - - - - , -] +
+
`; exports[`renders ./components/button/demo/legacy-group.tsx extend context correctly 1`] = ` @@ -1577,436 +2077,465 @@ Array [ `; exports[`renders ./components/button/demo/loading.tsx extend context correctly 1`] = ` -Array [ +
- -
-
- +
+
- - + + - - - Loading - - -
-
- +
+
- - + + - - + +
-
, +
- -
-
- -
-
- +
+
- - - - + + + + Click me! + + +
+
+ +
- , -] + + `; exports[`renders ./components/button/demo/multiple.tsx extend context correctly 1`] = ` -Array [ - , - , +
+
+
-
-
+
+
+ + +
+
- - - , - +
+
- - - - Download - - , - , +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
, ] `; diff --git a/components/button/__tests__/__snapshots__/demo.test.ts.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap index e47ddf6578..24d85b4188 100644 --- a/components/button/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/button/__tests__/__snapshots__/demo.test.ts.snap @@ -1,1005 +1,1505 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders ./components/button/demo/basic.tsx correctly 1`] = ` -Array [ - , - +
+
- - Default Button - - , - +
+
- - Dashed Button - - , -
, - +
+
- - Text Button - - , - +
+
- - Link Button - - , -] + +
+
`; exports[`renders ./components/button/demo/block.tsx correctly 1`] = ` -Array [ - , - +
+
- - Default - - , - +
+
- - Dashed - - , - +
+
- - Link - - , -] + +
+
`; exports[`renders ./components/button/demo/chinese-chars-loading.tsx correctly 1`] = ` -Array [ - , - +
+
- - + + - - 部署 - , - , -
+
- - + + - - Submit - , - +
+
- - + + - - 部署 - , -
+
- - + + - - - 按 钮 - - , -] + 部署 + +
+
+ +
+ `; exports[`renders ./components/button/demo/danger.tsx correctly 1`] = ` -Array [ - , - + +
- - Default - - , - +
+
- - Dashed - - , - +
+
- - Text - - , - +
+
- - Link - - , -] + +
+ `; -exports[`renders ./components/button/demo/disabled.tsx correctly 1`] = ` +exports[`renders ./components/button/demo/debug-icon.tsx correctly 1`] = ` Array [ - , - , -
, - , - , -
, - , - , -
, - , - , -
, - , - , -
, - , - , -
, - , - , -
, - , - ,
- - + + Default + + + +
, + , +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + + + + +
+
+
, ] `; +exports[`renders ./components/button/demo/disabled.tsx correctly 1`] = ` +
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+`; + exports[`renders ./components/button/demo/ghost.tsx correctly 1`] = `
- - +
+
- - Default - - - +
+
- - Dashed - - - +
+
- - Danger - - + +
`; exports[`renders ./components/button/demo/icon.tsx correctly 1`] = ` -Array [ - , - + +
+ +
+
+ +
+
+ +
+
+ +
+ + +
- - A - - , - , - +
+
- - - - , - +
+
- - - - - Search - - , -
, - +
+
- - - - , - +
+
- - - - - Search - - , - , - , - - - - - , -
, -
, - , - , - , - , - , -
, - , - , - , - , - - - - - , -] + + + + + +
+ + + `; exports[`renders ./components/button/demo/legacy-group.tsx correctly 1`] = ` @@ -1241,252 +1741,281 @@ Array [ `; exports[`renders ./components/button/demo/loading.tsx correctly 1`] = ` -Array [ +
- -
-
- +
+
- - + + - - - Loading - - -
-
- +
+
- - + + - - + +
-
, +
- -
-
- -
-
- +
+
- - - - + + + + Click me! + + +
+
+ +
- , -] + + `; exports[`renders ./components/button/demo/multiple.tsx correctly 1`] = ` -Array [ - , - , +
+
+
-
, -] +
+
+
+ + +
+
+ `; exports[`renders ./components/button/demo/size.tsx correctly 1`] = ` @@ -1553,167 +2082,241 @@ Array [ , -
, -
, - , - , - , -
, - , -
, - , - , - + +
+ +
+
+ +
+ + +
- - - , - +
+
- - - - Download - - , - , +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + , ] `; diff --git a/components/button/demo/basic.tsx b/components/button/demo/basic.tsx index 9f22982e47..da2b2fc5bd 100644 --- a/components/button/demo/basic.tsx +++ b/components/button/demo/basic.tsx @@ -1,15 +1,14 @@ import React from 'react'; -import { Button } from 'antd'; +import { Button, Space } from 'antd'; const App: React.FC = () => ( - <> + -
- + ); export default App; diff --git a/components/button/demo/block.tsx b/components/button/demo/block.tsx index e585b7b40d..89d9a2136f 100644 --- a/components/button/demo/block.tsx +++ b/components/button/demo/block.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { Button } from 'antd'; +import { Button, Space } from 'antd'; const App: React.FC = () => ( - <> + @@ -13,7 +13,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 ca9be535bf..635513f039 100644 --- a/components/button/demo/chinese-chars-loading.tsx +++ b/components/button/demo/chinese-chars-loading.tsx @@ -1,13 +1,13 @@ import React from 'react'; import { PoweroffOutlined } from '@ant-design/icons'; -import { Button } from 'antd'; +import { Button, Space } from 'antd'; const Text1 = () => '部署'; const Text2 = () => 部署; const Text3 = () => 'Submit'; const App = () => ( - <> + - + ); export default App; diff --git a/components/button/demo/danger.tsx b/components/button/demo/danger.tsx index eca69edaf2..c00046a9b7 100644 --- a/components/button/demo/danger.tsx +++ b/components/button/demo/danger.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { Button } from 'antd'; +import { Button, Space } 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.md b/components/button/demo/debug-icon.md new file mode 100644 index 0000000000..c0c0fc5dc7 --- /dev/null +++ b/components/button/demo/debug-icon.md @@ -0,0 +1,7 @@ +## zh-CN + +调试使用 + +## en-US + +Debug usage diff --git a/components/button/demo/debug-icon.tsx b/components/button/demo/debug-icon.tsx new file mode 100644 index 0000000000..e1b6d6334c --- /dev/null +++ b/components/button/demo/debug-icon.tsx @@ -0,0 +1,55 @@ +import React, { useState } from 'react'; +import { SearchOutlined } from '@ant-design/icons'; +import { Button, Tooltip, ConfigProvider, Radio, Divider, Space } from 'antd'; +import type { SizeType } from 'antd/es/config-provider/SizeContext'; + +const App: React.FC = () => { + const [size, setSize] = useState('large'); + + return ( + <> + setSize(e.target.value)}> + Large + Default + Small + + + Preview + + + + + + + + + + + + + + + + - -
- - -
- - -
- - -
- - -
- - -
- - -
- - -
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
- + + ); export default App; diff --git a/components/button/demo/ghost.md b/components/button/demo/ghost.md index 5858082937..4c0ebaaca8 100644 --- a/components/button/demo/ghost.md +++ b/components/button/demo/ghost.md @@ -5,10 +5,3 @@ ## en-US `ghost` property will make button's background transparent, it is commonly used in colored background. - -```css -.site-button-ghost-wrapper { - padding: 26px 16px 16px; - background: rgb(190, 200, 200); -} -``` diff --git a/components/button/demo/ghost.tsx b/components/button/demo/ghost.tsx index 8db7226de0..e6872a30f2 100644 --- a/components/button/demo/ghost.tsx +++ b/components/button/demo/ghost.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { Button } from 'antd'; +import { Button, Space } 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 32dacbe02e..eb687883ef 100644 --- a/components/button/demo/icon.tsx +++ b/components/button/demo/icon.tsx @@ -1,66 +1,38 @@ import React from 'react'; import { SearchOutlined } from '@ant-design/icons'; -import { Button, Tooltip } from 'antd'; +import { Button, Tooltip, Space } from 'antd'; const App: React.FC = () => ( - <> - - - - - -
- - - - - - - - -
- - - - - + + + + + + + + + + @@ -33,7 +33,7 @@ const App: React.FC = () => { @@ -52,7 +52,7 @@ const App: React.FC = () => { onClick={() => enterLoading(2)} /> - + ); }; diff --git a/components/button/demo/multiple.tsx b/components/button/demo/multiple.tsx index 06a70334e8..f1e0cad130 100644 --- a/components/button/demo/multiple.tsx +++ b/components/button/demo/multiple.tsx @@ -1,8 +1,8 @@ import React from 'react'; import type { MenuProps } from 'antd'; -import { Button, Dropdown } from 'antd'; +import { Button, Dropdown, Space } from 'antd'; -const onMenuClick: MenuProps['onClick'] = e => { +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 3957d2bf00..db4fed605e 100644 --- a/components/button/demo/size.tsx +++ b/components/button/demo/size.tsx @@ -1,41 +1,46 @@ import React, { useState } from 'react'; import { DownloadOutlined } from '@ant-design/icons'; -import { Button, Radio } from 'antd'; +import { Button, Radio, Space, Divider } from 'antd'; import type { SizeType } from 'antd/es/config-provider/SizeContext'; const App: React.FC = () => { - const [size, setSize] = useState('large'); + const [size, setSize] = useState('large'); // default is 'middle' return ( <> - setSize(e.target.value)}> + setSize(e.target.value)}> Large Default Small -
-
- - - -
- -
- - + + Preview + + + + + + + + + + + + + ); }; diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md index 90945387eb..a4373a5678 100644 --- a/components/button/index.en-US.md +++ b/components/button/index.en-US.md @@ -34,6 +34,7 @@ And 4 other properties additionally. Type Icon +Debug Icon Size Disabled Loading @@ -75,14 +76,11 @@ Following the Ant Design specification, we will add one space between if Button Button with two Chinese characters