test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 03:59:01 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

feat: Badge support colorful custom count style (#37609)

Browse Source 
Co-authored-by: tangwenhui <tangwenhui@rd.netease.com>
This commit is contained in:
kiner-tang(文辉) 2022-09-19 11:52:17 +08:00 committed by GitHub
parent 87aad19fc8
commit 2415c0f636
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 1122 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -497,6 +497,518 @@ Array [
]
`;
exports[`renders ./components/badge/demo/colorful-with-count-debug.md extend context correctly 1`] = `
Array [
<div
style="display:inline-block;vertical-align:middle"
>
<span
class="ant-badge"
>
<div
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
>
pink
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-pink"
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</sup>
</span>
</div>,
<div
style="display:inline-block;vertical-align:middle"
>
<span
class="ant-badge"
>
<div
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
>
red
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-red"
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</sup>
</span>
</div>,
<div
style="display:inline-block;vertical-align:middle"
>
<span
class="ant-badge"
>
<div
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
>
yellow
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-yellow"
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</sup>
</span>
</div>,
<div
style="display:inline-block;vertical-align:middle"
>
<span
class="ant-badge"
>
<div
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
>
orange
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-orange"
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</sup>
</span>
</div>,
<div
style="display:inline-block;vertical-align:middle"
>
<span
class="ant-badge"
>
<div
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
>
cyan
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-cyan"
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</sup>
</span>
</div>,
<div
style="display:inline-block;vertical-align:middle"
>
<span
class="ant-badge"
>
<div
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
>
green
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-green"
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</sup>
</span>
</div>,
<div
style="display:inline-block;vertical-align:middle"
>
<span
class="ant-badge"
>
<div
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
>
blue
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-blue"
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</sup>
</span>
</div>,
<div
style="display:inline-block;vertical-align:middle"
>
<span
class="ant-badge"
>
<div
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
>
purple
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-purple"
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</sup>
</span>
</div>,
<div
style="display:inline-block;vertical-align:middle"
>
<span
class="ant-badge"
>
<div
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
>
geekblue
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-geekblue"
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</sup>
</span>
</div>,
<div
style="display:inline-block;vertical-align:middle"
>
<span
class="ant-badge"
>
<div
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
>
magenta
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-magenta"
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</sup>
</span>
</div>,
<div
style="display:inline-block;vertical-align:middle"
>
<span
class="ant-badge"
>
<div
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
>
volcano
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-volcano"
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</sup>
</span>
</div>,
<div
style="display:inline-block;vertical-align:middle"
>
<span
class="ant-badge"
>
<div
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
>
gold
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-gold"
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</sup>
</span>
</div>,
<div
style="display:inline-block;vertical-align:middle"
>
<span
class="ant-badge"
>
<div
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
>
lime
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-lime"
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</sup>
</span>
</div>,
]
`;
exports[`renders ./components/badge/demo/dot.md extend context correctly 1`] = `
Array [
<span
@ -581,7 +1093,7 @@ exports[`renders ./components/badge/demo/link.md extend context correctly 1`] =
exports[`renders ./components/badge/demo/mix.md extend context correctly 1`] = `
Array [
<span
class="ant-badge ant-badge-status"
class="ant-badge"
>
<span
class="ant-avatar ant-avatar-lg ant-avatar-square"
@ -609,7 +1121,7 @@ Array [
</sup>
</span>,
<span
class="ant-badge ant-badge-status"
class="ant-badge"
>
<span
class="ant-avatar ant-avatar-lg ant-avatar-square"
@ -637,7 +1149,7 @@ Array [
</sup>
</span>,
<span
class="ant-badge ant-badge-status"
class="ant-badge"
>
<span
class="ant-avatar ant-avatar-lg ant-avatar-square"
@ -665,7 +1177,7 @@ Array [
</sup>
</span>,
<span
class="ant-badge ant-badge-status"
class="ant-badge"
>
<span
class="ant-avatar ant-avatar-lg ant-avatar-square"

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

@ -497,6 +497,518 @@ Array [
]
`;
exports[`renders ./components/badge/demo/colorful-with-count-debug.md correctly 1`] = `
Array [
<div
style="display:inline-block;vertical-align:middle"
>
<span
class="ant-badge"
>
<div
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
>
pink
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-pink"
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</sup>
</span>
</div>,
<div
style="display:inline-block;vertical-align:middle"
>
<span
class="ant-badge"
>
<div
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
>
red
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-red"
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</sup>
</span>
</div>,
<div
style="display:inline-block;vertical-align:middle"
>
<span
class="ant-badge"
>
<div
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
>
yellow
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-yellow"
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</sup>
</span>
</div>,
<div
style="display:inline-block;vertical-align:middle"
>
<span
class="ant-badge"
>
<div
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
>
orange
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-orange"
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</sup>
</span>
</div>,
<div
style="display:inline-block;vertical-align:middle"
>
<span
class="ant-badge"
>
<div
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
>
cyan
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-cyan"
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</sup>
</span>
</div>,
<div
style="display:inline-block;vertical-align:middle"
>
<span
class="ant-badge"
>
<div
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
>
green
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-green"
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</sup>
</span>
</div>,
<div
style="display:inline-block;vertical-align:middle"
>
<span
class="ant-badge"
>
<div
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
>
blue
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-blue"
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</sup>
</span>
</div>,
<div
style="display:inline-block;vertical-align:middle"
>
<span
class="ant-badge"
>
<div
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
>
purple
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-purple"
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</sup>
</span>
</div>,
<div
style="display:inline-block;vertical-align:middle"
>
<span
class="ant-badge"
>
<div
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
>
geekblue
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-geekblue"
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</sup>
</span>
</div>,
<div
style="display:inline-block;vertical-align:middle"
>
<span
class="ant-badge"
>
<div
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
>
magenta
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-magenta"
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</sup>
</span>
</div>,
<div
style="display:inline-block;vertical-align:middle"
>
<span
class="ant-badge"
>
<div
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
>
volcano
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-volcano"
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</sup>
</span>
</div>,
<div
style="display:inline-block;vertical-align:middle"
>
<span
class="ant-badge"
>
<div
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
>
gold
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-gold"
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</sup>
</span>
</div>,
<div
style="display:inline-block;vertical-align:middle"
>
<span
class="ant-badge"
>
<div
style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
>
lime
</div>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-status-lime"
data-show="true"
title="44"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
4
</span>
</span>
</sup>
</span>
</div>,
]
`;
exports[`renders ./components/badge/demo/dot.md correctly 1`] = `
Array [
<span
@ -581,7 +1093,7 @@ exports[`renders ./components/badge/demo/link.md correctly 1`] = `
exports[`renders ./components/badge/demo/mix.md correctly 1`] = `
Array [
<span
class="ant-badge ant-badge-status"
class="ant-badge"
>
<span
class="ant-avatar ant-avatar-lg ant-avatar-square"
@ -609,7 +1121,7 @@ Array [
</sup>
</span>,
<span
class="ant-badge ant-badge-status"
class="ant-badge"
>
<span
class="ant-avatar ant-avatar-lg ant-avatar-square"
@ -637,7 +1149,7 @@ Array [
</sup>
</span>,
<span
class="ant-badge ant-badge-status"
class="ant-badge"
>
<span
class="ant-avatar ant-avatar-lg ant-avatar-square"
@ -665,7 +1177,7 @@ Array [
</sup>
</span>,
<span
class="ant-badge ant-badge-status"
class="ant-badge"
>
<span
class="ant-avatar ant-avatar-lg ant-avatar-square"

6
components/badge/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -3,7 +3,7 @@
exports[`Badge render Badge status/color when contains children 1`] = `
<div>
<span
class="ant-badge ant-badge-status"
class="ant-badge"
>
<a />
<sup
@ -24,7 +24,7 @@ exports[`Badge render Badge status/color when contains children 1`] = `
</sup>
</span>
<span
class="ant-badge ant-badge-status"
class="ant-badge"
>
<a />
<sup
@ -45,7 +45,7 @@ exports[`Badge render Badge status/color when contains children 1`] = `
</sup>
</span>
<span
class="ant-badge ant-badge-status"
class="ant-badge"
>
<a />
<sup

14
components/badge/__tests__/index.test.tsx
View File

@ -165,4 +165,18 @@ describe('Badge', () => {
expect(container.querySelectorAll('.ant-badge')).toHaveLength(2);
});
it('Badge should display count when color and count are both exist', () => {
const { container } = render(
<>
<Badge className="badge1" text="badge" color="pink" count={44} />
<Badge className="badge2" text="badge" color="pink" count={0} />
<Badge className="badge3" text="badge" color="pink" />
</>,
);
expect(container.querySelectorAll('.ant-badge-count')).toHaveLength(1);
expect(container.querySelectorAll('[title="44"]')).toHaveLength(1);
expect(container.querySelectorAll('.ant-badge-status-dot')).toHaveLength(2);
});
});

67
components/badge/demo/colorful-with-count-debug.md Normal file
View File

@ -0,0 +1,67 @@
---
order: 101
title:
zh-CN: 多彩徽标支持 count 显示 Debug
en-US: Colorful Badge support count Debug
debug: true
---
## zh-CN
在使用多彩徽标的同时，支持 count 属性显示
## en-US
support `count` when use colorful badge
```tsx
import { Badge } from 'antd';
import React from 'react';
const colors = [
'pink',
'red',
'yellow',
'orange',
'cyan',
'green',
'blue',
'purple',
'geekblue',
'magenta',
'volcano',
'gold',
'lime',
];
const App: React.FC = () => (
<>
{colors.map(color => (
<div key={color} style={{ display: 'inline-block', verticalAlign: 'middle' }}>
<Badge color={color} count={44}>
<div
style={{
width: 90,
height: 90,
lineHeight: '90px',
background: '#ccc',
textAlign: 'center',
marginBottom: 10,
}}
>
{color}
</div>
</Badge>
</div>
))}
</>
);
export default App;
```
```css
.ant-tag {
margin-bottom: 8px;
}
```

9
components/badge/index.tsx
View File

@ -63,11 +63,14 @@ const Badge: CompoundedComponent = ({
(count as number) > (overflowCount as number) ? `${overflowCount}+` : count
) as string | number | null;
const hasStatus =
(status !== null && status !== undefined) || (color !== null && color !== undefined);
const isZero = numberedDisplayCount === '0' || numberedDisplayCount === 0;
const ignoreCount = count === null || (count !== null && isZero);
const hasStatus =
((status !== null && status !== undefined) || (color !== null && color !== undefined)) &&
ignoreCount;
const showAsDot = dot && !isZero;
const mergedCount = showAsDot ? '' : numberedDisplayCount;