mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 16:06:28 +08:00
fix(Badge): fix accidentally rendering an empty element when text props is empty (#37681)
* test(badge): add case * fix(badge): fix accidentally rendering an empty element when text props is empty * chore(badge): update demo * test(badge): update snapshot * docs: beautify docs Add several supported ways to describe colors * test(badge): update snapshot * chore: update snapshot * test: update snapshots * Revert "test: update snapshots" This reverts commit 2bd11650aea3b3a447a891f09708032f9c41cb3d. * test: update snapshot
This commit is contained in:
Wuxh
GitHub
parent
3ae7703303
commit
a70ef1b8da
@ -247,8 +247,13 @@ Array [
|
||||
Presets
|
||||
</span>
|
||||
</div>,
|
||||
<div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -262,7 +267,10 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -276,7 +284,10 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -290,7 +301,10 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -304,7 +318,10 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -318,7 +335,10 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -332,7 +352,10 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -346,7 +369,10 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -360,7 +386,10 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -374,7 +403,10 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -388,7 +420,10 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -402,7 +437,10 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -416,7 +454,9 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -441,61 +481,80 @@ Array [
|
||||
Custom
|
||||
</span>
|
||||
</div>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot"
|
||||
style="background: rgb(255, 85, 0);"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
#f50
|
||||
</span>
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot"
|
||||
style="background: rgb(45, 183, 245);"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot"
|
||||
style="background: rgb(255, 85, 0);"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
>
|
||||
#f50
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
#2db7f5
|
||||
</span>
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot"
|
||||
style="background: rgb(135, 208, 104);"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot"
|
||||
style="background: rgb(45, 183, 245);"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
>
|
||||
rgb(45, 183, 245)
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
#87d068
|
||||
</span>
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot"
|
||||
style="background: rgb(16, 142, 233);"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot"
|
||||
style="background: rgb(103, 103, 103);"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
>
|
||||
hsl(102, 53%, 61%)
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
#108ee9
|
||||
</span>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
>
|
||||
hwb(205 6% 9%)
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
@ -1538,121 +1597,158 @@ Array [
|
||||
|
||||
exports[`renders ./components/badge/demo/status.md extend context correctly 1`] = `
|
||||
Array [
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-success"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-error"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-default"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-processing"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-warning"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-success"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right: 8px;"
|
||||
>
|
||||
Success
|
||||
</span>
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-error"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-success"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right: 8px;"
|
||||
>
|
||||
Error
|
||||
</span>
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-default"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-error"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right: 8px;"
|
||||
>
|
||||
Default
|
||||
</span>
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-processing"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-default"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right: 8px;"
|
||||
>
|
||||
Processing
|
||||
</span>
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-warning"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-processing"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
Warning
|
||||
</span>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-warning"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-success"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
>
|
||||
Success
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-error"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
>
|
||||
Error
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-default"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
>
|
||||
Default
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-processing"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
>
|
||||
Processing
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-warning"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
>
|
||||
Warning
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
|
||||
@ -247,8 +247,13 @@ Array [
|
||||
Presets
|
||||
</span>
|
||||
</div>,
|
||||
<div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -262,7 +267,10 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -276,7 +284,10 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -290,7 +301,10 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -304,7 +318,10 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -318,7 +335,10 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -332,7 +352,10 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -346,7 +369,10 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -360,7 +386,10 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -374,7 +403,10 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -388,7 +420,10 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -402,7 +437,10 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -416,7 +454,9 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
@ -441,61 +481,80 @@ Array [
|
||||
Custom
|
||||
</span>
|
||||
</div>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot"
|
||||
style="background: rgb(255, 85, 0);"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
#f50
|
||||
</span>
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot"
|
||||
style="background: rgb(45, 183, 245);"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot"
|
||||
style="background: rgb(255, 85, 0);"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
>
|
||||
#f50
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
#2db7f5
|
||||
</span>
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot"
|
||||
style="background: rgb(135, 208, 104);"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot"
|
||||
style="background: rgb(45, 183, 245);"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
>
|
||||
rgb(45, 183, 245)
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
#87d068
|
||||
</span>
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot"
|
||||
style="background: rgb(16, 142, 233);"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot"
|
||||
style="background: rgb(103, 103, 103);"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
>
|
||||
hsl(102, 53%, 61%)
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
#108ee9
|
||||
</span>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
>
|
||||
hwb(205 6% 9%)
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
@ -1538,121 +1597,158 @@ Array [
|
||||
|
||||
exports[`renders ./components/badge/demo/status.md correctly 1`] = `
|
||||
Array [
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-success"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-error"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-default"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-processing"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-warning"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-success"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right: 8px;"
|
||||
>
|
||||
Success
|
||||
</span>
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-error"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-success"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right: 8px;"
|
||||
>
|
||||
Error
|
||||
</span>
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-default"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-error"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right: 8px;"
|
||||
>
|
||||
Default
|
||||
</span>
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-processing"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-default"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right: 8px;"
|
||||
>
|
||||
Processing
|
||||
</span>
|
||||
</span>,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-warning"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-processing"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
Warning
|
||||
</span>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-warning"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-success"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
>
|
||||
Success
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-error"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
>
|
||||
Error
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-default"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
>
|
||||
Default
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-processing"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
>
|
||||
Processing
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<span
|
||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-warning"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
>
|
||||
Warning
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
|
||||
@ -165,4 +165,10 @@ describe('Badge', () => {
|
||||
|
||||
expect(container.querySelectorAll('.ant-badge')).toHaveLength(2);
|
||||
});
|
||||
|
||||
it('Badge not render status-text when text is empty string', () => {
|
||||
const { container } = render(<Badge status="default" text={undefined} />);
|
||||
|
||||
expect(container.querySelectorAll('.ant-badge > .ant-badge-status-text')).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
|
||||
@ -14,7 +14,7 @@ title:
|
||||
We preset a series of colorful Badge styles for use in different situations. You can also set it to a hex color string for custom color.
|
||||
|
||||
```tsx
|
||||
import { Badge, Divider } from 'antd';
|
||||
import { Badge, Divider, Space } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const colors = [
|
||||
@ -36,31 +36,20 @@ const colors = [
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Divider orientation="left">Presets</Divider>
|
||||
<div>
|
||||
<Space direction="vertical">
|
||||
{colors.map(color => (
|
||||
<div key={color}>
|
||||
<Badge color={color} text={color} />
|
||||
</div>
|
||||
<Badge key={color} color={color} text={color} />
|
||||
))}
|
||||
</div>
|
||||
</Space>
|
||||
<Divider orientation="left">Custom</Divider>
|
||||
<>
|
||||
<Space direction="vertical">
|
||||
<Badge color="#f50" text="#f50" />
|
||||
<br />
|
||||
<Badge color="#2db7f5" text="#2db7f5" />
|
||||
<br />
|
||||
<Badge color="#87d068" text="#87d068" />
|
||||
<br />
|
||||
<Badge color="#108ee9" text="#108ee9" />
|
||||
</>
|
||||
<Badge color="rgb(45, 183, 245)" text="rgb(45, 183, 245)" />
|
||||
<Badge color="hsl(102, 53%, 61%)" text="hsl(102, 53%, 61%)" />
|
||||
<Badge color="hwb(205 6% 9%)" text="hwb(205 6% 9%)" />
|
||||
</Space>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
```css
|
||||
.ant-tag {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
```
|
||||
|
||||
@ -14,26 +14,26 @@ title:
|
||||
Standalone badge with status.
|
||||
|
||||
```tsx
|
||||
import { Badge } from 'antd';
|
||||
import { Badge, Space } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Badge status="success" />
|
||||
<Badge status="error" />
|
||||
<Badge status="default" />
|
||||
<Badge status="processing" />
|
||||
<Badge status="warning" />
|
||||
<Space>
|
||||
<Badge status="success" />
|
||||
<Badge status="error" />
|
||||
<Badge status="default" />
|
||||
<Badge status="processing" />
|
||||
<Badge status="warning" />
|
||||
</Space>
|
||||
<br />
|
||||
<Badge status="success" text="Success" />
|
||||
<br />
|
||||
<Badge status="error" text="Error" />
|
||||
<br />
|
||||
<Badge status="default" text="Default" />
|
||||
<br />
|
||||
<Badge status="processing" text="Processing" />
|
||||
<br />
|
||||
<Badge status="warning" text="Warning" />
|
||||
<Space direction="vertical">
|
||||
<Badge status="success" text="Success" />
|
||||
<Badge status="error" text="Error" />
|
||||
<Badge status="default" text="Default" />
|
||||
<Badge status="processing" text="Processing" />
|
||||
<Badge status="warning" text="Warning" />
|
||||
</Space>
|
||||
</>
|
||||
);
|
||||
|
||||
|
||||
@ -165,9 +165,11 @@ const Badge: CompoundedComponent = ({
|
||||
return (
|
||||
<span {...restProps} className={badgeClassName} style={mergedStyle}>
|
||||
<span className={statusCls} style={statusStyle} />
|
||||
<span style={{ color: statusTextColor }} className={`${prefixCls}-status-text`}>
|
||||
{text}
|
||||
</span>
|
||||
{text && (
|
||||
<span style={{ color: statusTextColor }} className={`${prefixCls}-status-text`}>
|
||||
{text}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
@ -16501,9 +16501,6 @@ Array [
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-success"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>
|
||||
Finished
|
||||
</span>
|
||||
@ -16721,9 +16718,6 @@ Array [
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-success"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>
|
||||
Finished
|
||||
</span>
|
||||
@ -16941,9 +16935,6 @@ Array [
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-success"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>
|
||||
Finished
|
||||
</span>
|
||||
@ -17551,9 +17542,6 @@ Array [
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-success"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>
|
||||
Finished
|
||||
</span>
|
||||
@ -17771,9 +17759,6 @@ Array [
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-success"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>
|
||||
Finished
|
||||
</span>
|
||||
@ -17991,9 +17976,6 @@ Array [
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-success"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>
|
||||
Finished
|
||||
</span>
|
||||
@ -18601,9 +18583,6 @@ Array [
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-success"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>
|
||||
Finished
|
||||
</span>
|
||||
@ -18821,9 +18800,6 @@ Array [
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-success"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>
|
||||
Finished
|
||||
</span>
|
||||
@ -19041,9 +19017,6 @@ Array [
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-success"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>
|
||||
Finished
|
||||
</span>
|
||||
|
||||
@ -12675,9 +12675,6 @@ Array [
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-success"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>
|
||||
Finished
|
||||
</span>
|
||||
@ -12764,9 +12761,6 @@ Array [
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-success"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>
|
||||
Finished
|
||||
</span>
|
||||
@ -12853,9 +12847,6 @@ Array [
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-success"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>
|
||||
Finished
|
||||
</span>
|
||||
@ -13332,9 +13323,6 @@ Array [
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-success"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>
|
||||
Finished
|
||||
</span>
|
||||
@ -13421,9 +13409,6 @@ Array [
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-success"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>
|
||||
Finished
|
||||
</span>
|
||||
@ -13510,9 +13495,6 @@ Array [
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-success"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>
|
||||
Finished
|
||||
</span>
|
||||
@ -13989,9 +13971,6 @@ Array [
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-success"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>
|
||||
Finished
|
||||
</span>
|
||||
@ -14078,9 +14057,6 @@ Array [
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-success"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>
|
||||
Finished
|
||||
</span>
|
||||
@ -14167,9 +14143,6 @@ Array [
|
||||
<span
|
||||
class="ant-badge-status-dot ant-badge-status-success"
|
||||
/>
|
||||
<span
|
||||
class="ant-badge-status-text"
|
||||
/>
|
||||
</span>
|
||||
Finished
|
||||
</span>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user