diff --git a/components/badge/__tests__/__snapshots__/demo.test.js.snap b/components/badge/__tests__/__snapshots__/demo.test.js.snap
index c31f8b800d..34f6f6672f 100644
--- a/components/badge/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/badge/__tests__/__snapshots__/demo.test.js.snap
@@ -1,14 +1,18 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/badge/demo/basic.md correctly 1`] = `
-
+Array [
-
+
+
+
-
+ ,
-
+
+
+
0
-
+ ,
-
+
+
+
-
-
-
-
-
-
-
-
- 5
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ 5
+
+
+
+ ,
+
-
-
+
+
+
+
-
-
- #f50
-
-
-
+ class="ant-badge-status-dot"
+ style="background:#f50"
+ />
-
-
- #2db7f5
-
+ #f50
-
+ ,
+
,
+
-
-
- #87d068
-
-
-
+ class="ant-badge-status-dot"
+ style="background:#2db7f5"
+ />
-
-
- #108ee9
-
+ #2db7f5
-
,
+ ,
+
,
+
+
+
+ #87d068
+
+ ,
+
,
+
+
+
+ #108ee9
+
+ ,
]
`;
exports[`renders ./components/badge/demo/dot.md correctly 1`] = `
-
+Array [
@@ -490,6 +506,7 @@ exports[`renders ./components/badge/demo/dot.md correctly 1`] = `
aria-label="notification"
class="anticon anticon-notification"
role="img"
+ style="font-size:16px"
>
-
-
-
-
-
-
+ ,
@@ -545,8 +539,8 @@ exports[`renders ./components/badge/demo/dot.md correctly 1`] = `
class="ant-scroll-number ant-badge-dot"
data-show="true"
/>
-
-
-
-
-
-
-
- 4
-
-
-
-
-
@@ -716,10 +873,14 @@ exports[`renders ./components/badge/demo/offset.md correctly 1`] = `
-
+
+
+
+Array [
-
+
+
+
-
+ ,
-
+
+
+
99+
-
+ ,
-
+
+
+
10+
-
+ ,
-
+
+
+
999+
-
-
+ ,
+
,
@@ -1413,8 +1598,8 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = `
>
Success
-
-
+ ,
+
,
@@ -1426,8 +1611,8 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = `
>
Error
-
-
+ ,
+
,
@@ -1439,8 +1624,8 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = `
>
Default
-
-
+ ,
+
,
@@ -1452,8 +1637,8 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = `
>
Processing
-
-
+ ,
+
,
@@ -1465,19 +1650,23 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = `
>
Warning
-
-
+ ,
+]
`;
exports[`renders ./components/badge/demo/title.md correctly 1`] = `
-
+Array [
-
+
+
+
-
+ ,
-
+
+
+
-
-
@@ -143,6 +144,9 @@ describe('Badge', () => {
,
);
expect(wrapper.render()).toMatchSnapshot();
+ expect(wrapper.find(Badge).at(0).find('.ant-scroll-number-only-unit').text()).toBe('5');
+ expect(wrapper.find(Badge).at(1).find('.ant-scroll-number-only-unit').text()).toBe('5');
+ expect(wrapper.find(Badge).at(2).find('.ant-scroll-number-only-unit').text()).toBe('5');
});
it('Badge should work when status/color is empty string', () => {
@@ -156,72 +160,3 @@ describe('Badge', () => {
expect(wrapper.find('.ant-badge')).toHaveLength(2);
});
});
-
-describe('Ribbon', () => {
- mountTest(Badge.Ribbon);
- rtlTest(Badge.Ribbon);
-
- describe('placement', () => {
- it('works with `start` & `end` placement', () => {
- const wrapperStart = mount(
-
-
- ,
- );
- expect(wrapperStart.find('.ant-ribbon-placement-start').length).toEqual(1);
-
- const wrapperEnd = mount(
-
-
- ,
- );
- expect(wrapperEnd.find('.ant-ribbon-placement-end').length).toEqual(1);
- });
- });
-
- describe('color', () => {
- it('works with preset color', () => {
- const wrapper = mount(
-
-
- ,
- );
- expect(wrapper.find('.ant-ribbon-color-green').length).toEqual(1);
- });
- it('works with custom color', () => {
- const wrapperLeft = mount(
-
-
- ,
- );
- expect(wrapperLeft.find('.ant-ribbon').prop('style').background).toEqual('#888');
- expect(wrapperLeft.find('.ant-ribbon-corner').prop('style').color).toEqual('#888');
- const wrapperRight = mount(
-
-
- ,
- );
- expect(wrapperRight.find('.ant-ribbon').prop('style').background).toEqual('#888');
- expect(wrapperRight.find('.ant-ribbon-corner').prop('style').color).toEqual('#888');
- });
- });
-
- describe('text', () => {
- it('works with string', () => {
- const wrapper = mount(
-
-
- ,
- );
- expect(wrapper.find('.ant-ribbon').text()).toEqual('cool');
- });
- it('works with element', () => {
- const wrapper = mount(
- }>
-
- ,
- );
- expect(wrapper.find('.cool').length).toEqual(1);
- });
- });
-});
diff --git a/components/badge/__tests__/ribbon.test.tsx b/components/badge/__tests__/ribbon.test.tsx
new file mode 100644
index 0000000000..b708e9f25a
--- /dev/null
+++ b/components/badge/__tests__/ribbon.test.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Badge from '../index';
+import mountTest from '../../../tests/shared/mountTest';
+import rtlTest from '../../../tests/shared/rtlTest';
+
+describe('Ribbon', () => {
+ mountTest(Badge.Ribbon);
+ rtlTest(Badge.Ribbon);
+
+ describe('placement', () => {
+ it('works with `start` & `end` placement', () => {
+ const wrapperStart = mount(
+
+
+ ,
+ );
+ expect(wrapperStart.find('.ant-ribbon-placement-start').length).toEqual(1);
+
+ const wrapperEnd = mount(
+
+
+ ,
+ );
+ expect(wrapperEnd.find('.ant-ribbon-placement-end').length).toEqual(1);
+ });
+ });
+
+ describe('color', () => {
+ it('works with preset color', () => {
+ const wrapper = mount(
+
+
+ ,
+ );
+ expect(wrapper.find('.ant-ribbon-color-green').length).toEqual(1);
+ });
+ it('works with custom color', () => {
+ const wrapperLeft = mount(
+
+
+ ,
+ );
+ expect(wrapperLeft.find('.ant-ribbon').prop('style')?.background).toEqual('#888');
+ expect(wrapperLeft.find('.ant-ribbon-corner').prop('style')?.color).toEqual('#888');
+ const wrapperRight = mount(
+
+
+ ,
+ );
+ expect(wrapperRight.find('.ant-ribbon').prop('style')?.background).toEqual('#888');
+ expect(wrapperRight.find('.ant-ribbon-corner').prop('style')?.color).toEqual('#888');
+ });
+ });
+
+ describe('text', () => {
+ it('works with string', () => {
+ const wrapper = mount(
+
+
+ ,
+ );
+ expect(wrapper.find('.ant-ribbon').text()).toEqual('cool');
+ });
+ it('works with element', () => {
+ const wrapper = mount(
+ }>
+
+ ,
+ );
+ expect(wrapper.find('.cool').length).toEqual(1);
+ });
+ });
+});
diff --git a/components/badge/demo/basic.md b/components/badge/demo/basic.md
index 225190f718..26cf697437 100644
--- a/components/badge/demo/basic.md
+++ b/components/badge/demo/basic.md
@@ -14,21 +14,21 @@ title:
Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZero` to show it.
```jsx
-import { Badge } from 'antd';
+import { Badge, Avatar } from 'antd';
import { ClockCircleOutlined } from '@ant-design/icons';
ReactDOM.render(
- ,
+ ,
mountNode,
);
```
@@ -41,15 +41,4 @@ ReactDOM.render(
margin-right: 0;
margin-left: 20px;
}
-.head-example {
- width: 42px;
- height: 42px;
- border-radius: 2px;
- background: #eee;
- display: inline-block;
- vertical-align: middle;
-}
-[data-theme="dark"] .head-example {
- background: rgba(255,255,255,.12);
-}
diff --git a/components/badge/demo/change.md b/components/badge/demo/change.md
index d5613a9ff4..e824cff023 100644
--- a/components/badge/demo/change.md
+++ b/components/badge/demo/change.md
@@ -14,7 +14,7 @@ title:
The count will be animated as it changes.
```jsx
-import { Badge, Button, Switch } from 'antd';
+import { Badge, Button, Switch, Divider, Avatar } from 'antd';
import { MinusOutlined, PlusOutlined, QuestionOutlined } from '@ant-design/icons';
const ButtonGroup = Button.Group;
@@ -49,30 +49,27 @@ class Demo extends React.Component {
render() {
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
+ <>
@@ -51,7 +51,7 @@ ReactDOM.render(
-
+
,
mountNode,
);
diff --git a/components/badge/demo/dot.md b/components/badge/demo/dot.md
index e6d6353fc8..10c3cb58a5 100644
--- a/components/badge/demo/dot.md
+++ b/components/badge/demo/dot.md
@@ -18,26 +18,14 @@ import { Badge } from 'antd';
import { NotificationOutlined } from '@ant-design/icons';
ReactDOM.render(
- ,
+ ,
mountNode,
);
```
-
-
diff --git a/components/badge/demo/link.md b/components/badge/demo/link.md
index 063eaad2e6..87adefca8c 100644
--- a/components/badge/demo/link.md
+++ b/components/badge/demo/link.md
@@ -1,5 +1,5 @@
---
-order: 3
+order: 5
title:
zh-CN: 可点击
en-US: Clickable
@@ -14,12 +14,12 @@ title:
The badge can be wrapped with `a` tag to make it linkable.
```jsx
-import { Badge } from 'antd';
+import { Badge, Avatar } from 'antd';
ReactDOM.render(
-
+
,
mountNode,
diff --git a/components/badge/demo/mix.md b/components/badge/demo/mix.md
new file mode 100644
index 0000000000..ca246b4fb6
--- /dev/null
+++ b/components/badge/demo/mix.md
@@ -0,0 +1,49 @@
+---
+order: 99
+title:
+ zh-CN: 各种混用的情况
+ en-US: Mixed usage
+debug: true
+---
+
+## zh-CN
+
+测试 `count` `stauts` `color` `dot` 共用的情况。
+
+## en-US
+
+Using `count/dot` with custom `stauts/color`.
+
+```jsx
+import { Badge, Avatar } from 'antd';
+
+ReactDOM.render(
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ,
+ mountNode,
+);
+```
diff --git a/components/badge/demo/no-wrapper.md b/components/badge/demo/no-wrapper.md
index ed870ab5b7..075898c51d 100644
--- a/components/badge/demo/no-wrapper.md
+++ b/components/badge/demo/no-wrapper.md
@@ -24,15 +24,9 @@ const Demo = () => {
return (
- {
- setShow(!show);
- }}
- />
+ setShow(!show)} />
: 0} />
-
{
ReactDOM.render(, mountNode);
```
-
-```css
-.site-badge-count-4 .ant-badge-count {
- color: #999;
- background-color: #fff;
- box-shadow: 0 0 0 1px #d9d9d9 inset;
-}
-```
-
-
diff --git a/components/badge/demo/offset.md b/components/badge/demo/offset.md
index 2ae6c7449f..418aea9125 100644
--- a/components/badge/demo/offset.md
+++ b/components/badge/demo/offset.md
@@ -1,5 +1,5 @@
---
-order: 5
+order: 6
title:
zh-CN: 自定义位置偏移
en-US: Offset
@@ -14,14 +14,12 @@ title:
Set offset of the badge dot, the format is `[left, top]`, which represents the offset of the status dot from the left and top of the default position.
```jsx
-import { Badge } from 'antd';
+import { Badge, Avatar } from 'antd';
ReactDOM.render(
- <>
-
-
-
- ,
+
+
+ ,
mountNode,
);
```
diff --git a/components/badge/demo/overflow.md b/components/badge/demo/overflow.md
index 90755336c4..63e029e4f4 100644
--- a/components/badge/demo/overflow.md
+++ b/components/badge/demo/overflow.md
@@ -14,23 +14,23 @@ title:
`${overflowCount}+` is displayed when count is larger than `overflowCount`. The default value of `overflowCount` is `99`.
```jsx
-import { Badge } from 'antd';
+import { Badge, Avatar } from 'antd';
ReactDOM.render(
- ,
+ ,
mountNode,
);
```
diff --git a/components/badge/demo/ribbbon.md b/components/badge/demo/ribbbon.md
index 2fd2f3e25a..048ee2fb56 100644
--- a/components/badge/demo/ribbbon.md
+++ b/components/badge/demo/ribbbon.md
@@ -1,5 +1,5 @@
---
-order: 15
+order: 10
title:
zh-CN: 缎带
en-US: Ribbon
diff --git a/components/badge/demo/size.md b/components/badge/demo/size.md
index e2d7af41c9..f9d4877f8b 100644
--- a/components/badge/demo/size.md
+++ b/components/badge/demo/size.md
@@ -1,5 +1,5 @@
---
-order: 9
+order: 7
title:
zh-CN: 大小
en-US: Size
@@ -14,15 +14,15 @@ title:
Set size of numeral Badge.
```jsx
-import { Badge } from 'antd';
+import { Badge, Avatar } from 'antd';
ReactDOM.render(
<>
-
+
-
+
,
mountNode,
diff --git a/components/badge/demo/status.md b/components/badge/demo/status.md
index df11046e29..f0e9b47765 100644
--- a/components/badge/demo/status.md
+++ b/components/badge/demo/status.md
@@ -1,5 +1,5 @@
---
-order: 6
+order: 8
title:
zh-CN: 状态点
en-US: Status
@@ -17,7 +17,7 @@ Standalone badge with status.
import { Badge } from 'antd';
ReactDOM.render(
-
+ <>
@@ -33,7 +33,7 @@ ReactDOM.render(
-
,
+ ,
mountNode,
);
```
diff --git a/components/badge/demo/title.md b/components/badge/demo/title.md
index 1b6d5279f5..d585c59174 100644
--- a/components/badge/demo/title.md
+++ b/components/badge/demo/title.md
@@ -15,39 +15,17 @@ debug: true
The badge will display `title` when hovered over, instead of `count`.
```jsx
-import { Badge } from 'antd';
+import { Badge, Avatar } from 'antd';
ReactDOM.render(
- ,
+ ,
mountNode,
);
```
-
-
diff --git a/components/badge/index.tsx b/components/badge/index.tsx
index c91dbb4f9c..b6bb93af5e 100644
--- a/components/badge/index.tsx
+++ b/components/badge/index.tsx
@@ -58,16 +58,16 @@ const Badge: CompoundedComponent = ({
const prefixCls = getPrefixCls('badge', customizePrefixCls);
// ================================ Misc ================================
- const numberedDisplayCount = ((count as number) > (overflowCount as number)
- ? `${overflowCount}+`
- : count) as string | number | null;
+ const numberedDisplayCount = (
+ (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 showAsDot = (dot && !isZero) || hasStatus;
+ const showAsDot = dot && !isZero;
const mergedCount = showAsDot ? '' : numberedDisplayCount;