fix issue ant-design#9359

iammathew · Feb 15, 2018 · 207ce65 · 207ce65
1 parent a438b9b
commit 207ce65
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 4 deletions.
diff --git a/components/badge/__tests__/__snapshots__/demo.test.js.snap b/components/badge/__tests__/__snapshots__/demo.test.js.snap
@@ -423,6 +423,13 @@ exports[`renders ./components/badge/demo/dot.md correctly 1`] = `
       data-show="true"
     />
   </span>
+  <span
+    class="ant-badge"
+  >
+    <i
+      class="anticon anticon-notification"
+    />
+  </span>
   <span
     class="ant-badge"
   >

diff --git a/components/badge/__tests__/index.test.js b/components/badge/__tests__/index.test.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Badge from '../index';
+
+describe('Badge', () => {
+  test('badge dot not scaling count > 9', () => {
+    const badge = mount(<Badge count={10} dot />);
+    expect(badge.find('.ant-card-multiple-words').length).toBe(0);
+  });
+  test('badge dot not showing count == 0', () => {
+    const badge = mount(<Badge count={0} dot />);
+    expect(badge.find('.ant-badge-dot').length).toBe(0);
+  });
+});
diff --git a/components/badge/demo/dot.md b/components/badge/demo/dot.md
@@ -12,6 +12,7 @@ title:
 ## en-US
 
 This will simply display a red badge, without a specific count.
+If count equals 0, it won't display the dot.
 
 ````jsx
 import { Badge, Icon } from 'antd';
@@ -21,6 +22,9 @@ ReactDOM.render(
     <Badge dot>
       <Icon type="notification" />
     </Badge>
+    <Badge count={0} dot>
+      <Icon type="notification" />
+    </Badge>
     <Badge dot>
       <a href="#">Link something</a>
     </Badge>

diff --git a/components/badge/index.tsx b/components/badge/index.tsx
@@ -59,14 +59,13 @@ export default class Badge extends React.Component<BadgeProps, any> {
       offset,
       ...restProps,
     } = this.props;
-    const isDot = dot || status;
     let displayCount = (count as number) > (overflowCount as number) ? `${overflowCount}+` : count;
+    const isZero = displayCount === '0' || displayCount === 0; 
+    const isDot = (dot && !isZero) || status;
     // dot mode don't need count
     if (isDot) {
       displayCount = '';
     }
-
-    const isZero = displayCount === '0' || displayCount === 0;
     const isEmpty = displayCount === null || displayCount === undefined || displayCount === '';
     const hidden = (isEmpty || (isZero && !showZero)) && !isDot;
     const statusCls = classNames({
@@ -76,7 +75,7 @@ export default class Badge extends React.Component<BadgeProps, any> {
     const scrollNumberCls = classNames({
       [`${prefixCls}-dot`]: isDot,
       [`${prefixCls}-count`]: !isDot,
-      [`${prefixCls}-multiple-words`]: count && count.toString && count.toString().length > 1,
+      [`${prefixCls}-multiple-words`]: !isDot && count && count.toString && count.toString().length > 1,
       [`${prefixCls}-status-${status}`]: !!status,
     });
     const badgeCls = classNames(className, prefixCls, {