GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

docs: improve component demo style (#38643) 

* chore: examine badge

* chore: examine button

* chore: examine alert

* test: update snapshot
pull/38645/head
Wuxh 2 years ago
committed by GitHub
parent
ced4f0246e
commit
d225c56c31
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 428 additions and 384 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      components/alert/demo/action.md
  2. 6
      components/alert/demo/basic.md
  3. 6
      components/alert/demo/style.md
  4. 382
      components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
  5. 382
      components/badge/__tests__/__snapshots__/demo.test.ts.snap
  6. 10
      components/badge/demo/basic.md
  7. 6
      components/badge/demo/colorful-with-count-debug.md
  8. 6
      components/badge/demo/ribbbon.md
  9. 6
      components/badge/demo/ribbbon.tsx
  10. 2
      components/button/index.zh-CN.md

6
components/alert/demo/action.md
View File

@ -5,9 +5,3 @@
## en-US
Custom action.
<style>
.code-box-demo .ant-alert {
margin-bottom: 16px;
}
</style>

6
components/alert/demo/basic.md
View File

@ -5,9 +5,3 @@
## en-US
The simplest usage for short messages.
<style>
.code-box-demo .ant-alert {
margin-bottom: 16px;
}
</style>

6
components/alert/demo/style.md
View File

@ -5,9 +5,3 @@
## en-US
There are 4 types of Alert: `success`, `info`, `warning`, `error`.
<style>
[data-theme="compact"] .code-box-demo .ant-alert {
margin-bottom: 8px;
}
</style>

382
components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -1728,312 +1728,354 @@ exports[`renders ./components/badge/demo/overflow.tsx extend context correctly 1
`;
exports[`renders ./components/badge/demo/ribbbon.tsx extend context correctly 1`] = `
Array [
<div
class="ant-space ant-space-vertical"
style="width:100%"
>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
</div>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-pink"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-pink"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
</div>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-red"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-red"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
</div>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-cyan"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-cyan"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
</div>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-green"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-green"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
</div>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-purple"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-purple"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
</div>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-volcano"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-volcano"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
</div>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-magenta"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-magenta"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
]
</div>
</div>
`;
exports[`renders ./components/badge/demo/ribbon-debug.tsx extend context correctly 1`] = `

382
components/badge/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -1728,312 +1728,354 @@ exports[`renders ./components/badge/demo/overflow.tsx correctly 1`] = `
`;
exports[`renders ./components/badge/demo/ribbbon.tsx correctly 1`] = `
Array [
<div
class="ant-space ant-space-vertical"
style="width:100%"
>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
</div>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-pink"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-pink"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
</div>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-red"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-red"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
</div>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-cyan"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-cyan"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
</div>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-green"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-green"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
</div>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-purple"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-purple"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
</div>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
style="margin-bottom:16px"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-volcano"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-volcano"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
</div>
<div
class="ant-ribbon-wrapper"
class="ant-space-item"
>
<div
class="ant-card ant-card-bordered ant-card-small"
class="ant-ribbon-wrapper"
>
<div
class="ant-card-head"
class="ant-card ant-card-bordered ant-card-small"
>
<div
class="ant-card-head-wrapper"
class="ant-card-head"
>
<div
class="ant-card-head-title"
class="ant-card-head-wrapper"
>
Pushes open the window
<div
class="ant-card-head-title"
>
Pushes open the window
</div>
</div>
</div>
<div
class="ant-card-body"
>
and raises the spyglass.
</div>
</div>
<div
class="ant-card-body"
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-magenta"
>
and raises the spyglass.
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>
<div
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-magenta"
>
<span
class="ant-ribbon-text"
>
Hippies
</span>
<div
class="ant-ribbon-corner"
/>
</div>
</div>,
]
</div>
</div>
`;
exports[`renders ./components/badge/demo/ribbon-debug.tsx correctly 1`] = `

10
components/badge/demo/basic.md
View File

@ -5,13 +5,3 @@
## en-US
Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZero` to show it.
<style>
.ant-badge:not(.ant-badge-not-a-wrapper) {
margin-right: 20px;
}
.ant-badge.ant-badge-rtl:not(.ant-badge-not-a-wrapper) {
margin-right: 0;
margin-left: 20px;
}
</style>

6
components/badge/demo/colorful-with-count-debug.md
View File

@ -5,9 +5,3 @@
## en-US
support `count` when use colorful badge
```css
.ant-tag {
margin-bottom: 8px;
}
```

6
components/badge/demo/ribbbon.md
View File

@ -5,9 +5,3 @@
## en-US
Use ribbon badge.
```css
#components-badge-demo-ribbbon .ant-card {
margin-bottom: 16px;
}
```

6
components/badge/demo/ribbbon.tsx
View File

@ -1,8 +1,8 @@
import React from 'react';
import { Badge, Card } from 'antd';
import { Badge, Card, Space } from 'antd';
const App: React.FC = () => (
<>
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
<Badge.Ribbon text="Hippies">
<Card title="Pushes open the window" size="small">
and raises the spyglass.
@ -43,7 +43,7 @@ const App: React.FC = () => (
and raises the spyglass.
</Card>
</Badge.Ribbon>
</>
</Space>
);
export default App;

2
components/button/index.zh-CN.md
View File

@ -83,7 +83,7 @@ group:
<style>
.site-button-ghost-wrapper {
padding: 8px;
padding: 16px;
background: rgb(190, 200, 200);
}

Write Preview
Loading…
Cancel
Save