From 06dff86287dc7dc385c8d8938c7e5a22fa8e10cd Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 2 Aug 2021 12:22:30 +0800 Subject: [PATCH] fix: Badge count style when customize color (#31617) * fix: Badge count style when customize color close #31590 close #31591 * add demo for debug * update badge demos * create ribbon.test.tsx --- .../__tests__/__snapshots__/demo.test.js.snap | 813 +++++++++++------- .../__snapshots__/index.test.js.snap | 62 +- .../__snapshots__/ribbon.test.tsx.snap | 18 + components/badge/__tests__/index.test.js | 73 +- components/badge/__tests__/ribbon.test.tsx | 74 ++ components/badge/demo/basic.md | 23 +- components/badge/demo/change.md | 47 +- components/badge/demo/colorful.md | 6 +- components/badge/demo/dot.md | 18 +- components/badge/demo/link.md | 6 +- components/badge/demo/mix.md | 49 ++ components/badge/demo/no-wrapper.md | 23 +- components/badge/demo/offset.md | 12 +- components/badge/demo/overflow.md | 14 +- components/badge/demo/ribbbon.md | 2 +- components/badge/demo/size.md | 8 +- components/badge/demo/status.md | 6 +- components/badge/demo/title.md | 32 +- components/badge/index.tsx | 8 +- 19 files changed, 754 insertions(+), 540 deletions(-) create mode 100644 components/badge/__tests__/__snapshots__/ribbon.test.tsx.snap create mode 100644 components/badge/__tests__/ribbon.test.tsx create mode 100644 components/badge/demo/mix.md 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 - + , - + + + - -
+ , +] `; exports[`renders ./components/badge/demo/change.md correctly 1`] = ` -
-
- - - - - - 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" /> - -
+ , +] `; exports[`renders ./components/badge/demo/link.md correctly 1`] = ` @@ -557,8 +551,13 @@ exports[`renders ./components/badge/demo/link.md correctly 1`] = ` class="ant-badge" > + class="ant-avatar ant-avatar-lg ant-avatar-square" + > + + `; +exports[`renders ./components/badge/demo/mix.md correctly 1`] = ` +Array [ + + + + + + + + 5 + + + + , + + + + + + + + 5 + + + + , + + + + + + + + 5 + + + + , + + + + + + + + 5 + + + + , + + + + + + , + + + + + + , + + + + + + , + + + + + + , +] +`; + exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
-
- - - - - 4 - - - - -
@@ -716,10 +873,14 @@ exports[`renders ./components/badge/demo/offset.md correctly 1`] = ` - + + + +Array [ - + + + - + , - + + + 99+ - + , - + + + 10+ - + , - + + + 999+ - -
+ , +] `; exports[`renders ./components/badge/demo/ribbbon.md correctly 1`] = ` @@ -1301,10 +1478,14 @@ Array [ - + + + - + + + +Array [ @@ -1360,7 +1545,7 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = ` - + , @@ -1370,7 +1555,7 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = ` - + , @@ -1380,7 +1565,7 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = ` - + , @@ -1390,7 +1575,7 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = ` - + , @@ -1400,8 +1585,8 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = ` - -
+ , +
, @@ -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 [ - + + + - + , - + + + - -
+ , +] `; diff --git a/components/badge/__tests__/__snapshots__/index.test.js.snap b/components/badge/__tests__/__snapshots__/index.test.js.snap index c6c31b7766..d9155ad6c4 100644 --- a/components/badge/__tests__/__snapshots__/index.test.js.snap +++ b/components/badge/__tests__/__snapshots__/index.test.js.snap @@ -7,31 +7,64 @@ exports[`Badge render Badge status/color when contains children 1`] = ` > + > + + + 5 + + + + > + + + 5 + + + + > + + + 5 + + + `; @@ -547,20 +580,3 @@ exports[`Badge should support offset when count is a ReactNode 1`] = ` /> `; - -exports[`Ribbon rtl render component should be rendered correctly in RTL direction 1`] = ` -
-
- -
-
-
-`; diff --git a/components/badge/__tests__/__snapshots__/ribbon.test.tsx.snap b/components/badge/__tests__/__snapshots__/ribbon.test.tsx.snap new file mode 100644 index 0000000000..6a4f0245ab --- /dev/null +++ b/components/badge/__tests__/__snapshots__/ribbon.test.tsx.snap @@ -0,0 +1,18 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Ribbon rtl render component should be rendered correctly in RTL direction 1`] = ` +
+
+ +
+
+
+`; diff --git a/components/badge/__tests__/index.test.js b/components/badge/__tests__/index.test.js index 4ab639de5b..c7189297f9 100644 --- a/components/badge/__tests__/index.test.js +++ b/components/badge/__tests__/index.test.js @@ -128,6 +128,7 @@ describe('Badge', () => { }); // https://github.com/ant-design/ant-design/issues/21331 + // https://github.com/ant-design/ant-design/issues/31590 it('render Badge status/color when contains children', () => { const wrapper = mount(
@@ -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 ( - + <> + + + + + + + + + + + + + + ); } } diff --git a/components/badge/demo/colorful.md b/components/badge/demo/colorful.md index d295b219be..f5d142533a 100644 --- a/components/badge/demo/colorful.md +++ b/components/badge/demo/colorful.md @@ -1,5 +1,5 @@ --- -order: 8 +order: 9 title: zh-CN: 多彩徽标 en-US: Colorful Badge @@ -43,7 +43,7 @@ ReactDOM.render( ))}
Custom -
+ <>
@@ -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;