mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

fix(badge): fix the color cannot be customized when count is 0 (#39062)

Browse Source 
* test(badge): add case

* fix(badge): fix the color cannot be customized when count is 0

* test(badge): update snapshots

* docs(badge): update demo

* test: update case

* test(badge): update snapshots
This commit is contained in:
Wuxh 2022-11-29 09:49:18 +08:00 committed by GitHub
parent 8e8a073c33
commit 647a03af09
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 297 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1332,6 +1332,78 @@ Array [
style="background:#fa541c"
/>
</span>,
<span
class="ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
title="0"
>
0
</sup>
</span>,
<span
class="ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-count ant-badge-status-blue"
data-show="true"
title="0"
>
0
</sup>
</span>,
<span
class="ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
style="background:#f0f"
title="0"
>
0
</sup>
</span>,
<span
class="ant-badge"
>
<span
class="ant-avatar ant-avatar-lg ant-avatar-square"
>
<span
class="ant-avatar-string"
style="opacity:0"
/>
</span>
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
title="0"
>
0
</sup>
</span>,
<span
class="ant-badge"
>
<span
class="ant-avatar ant-avatar-lg ant-avatar-square"
>
<span
class="ant-avatar-string"
style="opacity:0"
/>
</span>
<sup
class="ant-scroll-number ant-badge-count ant-badge-status-blue"
data-show="true"
title="0"
>
0
</sup>
</span>,
]
`;
@ -1357,6 +1429,42 @@ exports[`renders ./components/badge/demo/no-wrapper.md extend context correctly
/>
</button>
</div>
<div
class="ant-space-item"
style="margin-right:8px"
>
<span
class="ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
data-show="true"
style="background:#faad14"
title="11"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
1
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
1
</span>
</span>
</sup>
</span>
</div>
<div
class="ant-space-item"
style="margin-right:8px"

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

@ -1332,6 +1332,78 @@ Array [
style="background:#fa541c"
/>
</span>,
<span
class="ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
title="0"
>
0
</sup>
</span>,
<span
class="ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-count ant-badge-status-blue"
data-show="true"
title="0"
>
0
</sup>
</span>,
<span
class="ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
style="background:#f0f"
title="0"
>
0
</sup>
</span>,
<span
class="ant-badge"
>
<span
class="ant-avatar ant-avatar-lg ant-avatar-square"
>
<span
class="ant-avatar-string"
style="opacity:0"
/>
</span>
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
title="0"
>
0
</sup>
</span>,
<span
class="ant-badge"
>
<span
class="ant-avatar ant-avatar-lg ant-avatar-square"
>
<span
class="ant-avatar-string"
style="opacity:0"
/>
</span>
<sup
class="ant-scroll-number ant-badge-count ant-badge-status-blue"
data-show="true"
title="0"
>
0
</sup>
</span>,
]
`;
@ -1357,6 +1429,42 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
/>
</button>
</div>
<div
class="ant-space-item"
style="margin-right:8px"
>
<span
class="ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
data-show="true"
style="background:#faad14"
title="11"
>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
1
</span>
</span>
<span
class="ant-scroll-number-only"
style="transition:none"
>
<span
class="ant-scroll-number-only-unit current"
>
1
</span>
</span>
</sup>
</span>
</div>
<div
class="ant-space-item"
style="margin-right:8px"

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

@ -1,5 +1,58 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Badge Badge should display 0 when count is 0 1`] = `
<div>
<span
class="ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
title="0"
>
0
</sup>
</span>
<span
class="ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-count ant-badge-status-blue"
data-show="true"
title="0"
>
0
</sup>
</span>
<span
class="ant-badge ant-badge-not-a-wrapper"
>
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
style="background: rgb(255, 0, 255);"
title="0"
>
0
</sup>
</span>
<span
class="ant-badge"
>
<div>
children
</div>
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
title="0"
>
0
</sup>
</span>
</div>
`;
exports[`Badge render Badge status/color when contains children 1`] = `
<div>
<span

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

@ -185,4 +185,21 @@ describe('Badge', () => {
expect(container.querySelectorAll('.ant-badge > .ant-badge-status-text')).toHaveLength(0);
});
// https://github.com/ant-design/ant-design/issues/38965
it('Badge should display 0 when count is 0', () => {
const { container } = render(
<>
<Badge count={0} showZero />
<Badge count={0} showZero color="blue" />
<Badge count={0} showZero color="#f0f" />
<Badge count={0} showZero>
<div>children</div>
</Badge>
</>,
);
expect(container).toMatchSnapshot();
expect(container.querySelectorAll('[title="0"]')).toHaveLength(4);
});
});

9
components/badge/demo/mix.md
View File

@ -44,6 +44,15 @@ const App: React.FC = () => (
<Badge dot color="#fa541c">
<Avatar shape="square" size="large" />
</Badge>
<Badge count={0} showZero />
<Badge count={0} showZero color="blue" />
<Badge count={0} showZero color="#f0f" />
<Badge count={0} showZero>
<Avatar shape="square" size="large" />
</Badge>
<Badge count={0} showZero color="blue">
<Avatar shape="square" size="large" />
</Badge>
</>
);

1
components/badge/demo/no-wrapper.md
View File

@ -26,6 +26,7 @@ const App: React.FC = () => {
return (
<Space>
<Switch checked={show} onChange={() => setShow(!show)} />
<Badge count={show ? 11 : 0} showZero color="#faad14" />
<Badge count={show ? 25 : 0} />
<Badge count={show ? <ClockCircleOutlined style={{ color: '#f5222d' }} /> : 0} />
<Badge

2
components/badge/index.tsx
View File

@ -65,7 +65,7 @@ const Badge: CompoundedComponent = ({
const isZero = numberedDisplayCount === '0' || numberedDisplayCount === 0;
const ignoreCount = count === null || isZero;
const ignoreCount = count === null || (isZero && !showZero);
const hasStatus =
((status !== null && status !== undefined) || (color !== null && color !== undefined)) &&