feat: add Badge[status, text], close: #2715 (#2780)

* feat: add Badge[status, text], close: #2715

* feat: optimize Badge[status, text]

components/badge/demo/status.md

@@ -0,0 +1,36 @@
+---
+order: 7
+title:
+  zh-CN: 状态点
+  en-US: Status
+---
+
+## zh-CN
+
+用于表示状态的小圆点。
+
+## en-US
+
+Standalone badge with status.
+
+````jsx
+import { Badge } from 'antd';
+
+ReactDOM.render(
+  <div>
+    <label>Status: &nbsp;</label>
+    <Badge status="success" />
+    <Badge status="error" />
+    <Badge status="default" />
+    <Badge status="processing" />
+    <Badge status="warning" />
+    <br />
+    <Badge status="success" text="Success" /><br />
+    <Badge status="error" text="Error" /><br />
+    <Badge status="default" text="Default" /><br />
+    <Badge status="processing" text="Processing" /><br />
+    <Badge status="warning" text="Warning" />
+  </div>,
+  mountNode
+);
+````

components/badge/index.en-US.md

@@ -28,3 +28,5 @@ Badge normally appears in proximity to notification or head picture with eye-cat
 | count          | Number to show in badge | Number     |         |
 | overflowCount  | Max count to show       | Number     | 99      |
 | dot            | whether to show red dot without number | Boolean | false  |
+| status         | Set Badge as a status dot | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' |
+| text           | If `status` is set, `text` is to set the text of status dot | String | '' |

components/badge/index.tsx

@@ -13,6 +13,8 @@ interface BadgeProps {
   style?: React.CSSProperties;
   prefixCls?: string;
   className?: string;
+  status?: 'success' | 'processing' | 'default' | 'error' | 'warning';
+  text?: string;
 }
 
 export default class Badge extends React.Component<BadgeProps, any> {
@@ -21,6 +23,7 @@ export default class Badge extends React.Component<BadgeProps, any> {
     count: null,
     dot: false,
     overflowCount: 99,
+    // status: 'default',
   };
 
   static propTypes = {
@@ -33,18 +36,25 @@ export default class Badge extends React.Component<BadgeProps, any> {
   };
 
   render() {
-    let { count, prefixCls, overflowCount, className, style, children, dot } = this.props;
+    let { count, prefixCls, overflowCount, className, style, children, dot, status, text } = this.props;
+    const isDot = dot || status;
 
     count = count > overflowCount ? `${overflowCount}+` : count;
 
     // dot mode don't need count
-    if (dot) {
+    if (isDot) {
       count = '';
     }
 
     // null undefined "" "0" 0
-    const hidden = (!count || count === '0') && !dot;
+    const hidden = (!count || count === '0') && !isDot;
-    const scrollNumberCls = prefixCls + (dot ? '-dot' : '-count');
+    const scrollNumberCls = classNames({
+      [`${prefixCls}-dot`]: isDot,
+      [`${prefixCls}-count`]: !isDot,
+      [`${prefixCls}-status`]: status,
+      [`${prefixCls}-status-${status}`]: status,
+      [`${prefixCls}-status-with-text`]: text,
+    });
     const badgeCls = classNames({
       [className]: !!className,
       [prefixCls]: true,
@@ -70,6 +80,10 @@ export default class Badge extends React.Component<BadgeProps, any> {
               />
           }
         </Animate>
+        {
+          hidden || !text ? null :
+            <span className={`${prefixCls}-status-text`}>{text}</span>
+        }
       </span>
     );
   }

components/badge/index.zh-CN.md

@@ -28,4 +28,6 @@ english: Badge
 |----------------|----------------------------------|------------|---------|--------|
 | count          | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | Number     |         |        |
 | overflowCount  | 展示封顶的数字值                 | Number     |         | 99     |
-| dot            | 不展示数字，只有一个小红点       | boolean    |         | false  |
+| dot            | 不展示数字，只有一个小红点       | Boolean    |         | false  |
+| status         | 设置 Badge 为状态点            | Enum      | 'success'、'processing'、'default'、'error'、'warning' | '' |
+| text           | 在设置了 `status` 的前提下有效，设置状态点的文本  | String | | '' |

components/badge/style/index.less

@@ -47,6 +47,38 @@
     box-shadow: 0 0 0 1px #fff;
   }
 
+  &-status {
+    width: 6px;
+    height: 6px;
+
+    &-success {
+      background-color: @success-color;
+    }
+    &-processing {
+      background-color: @primary-color;
+      animation: antStatusProcessing 1.2s infinite ease-in-out;
+    }
+    &-default {
+      background-color: @normal-color;
+    }
+    &-error {
+      background-color: @error-color;
+    }
+    &-warning {
+      background-color: @warning-color;
+    }
+
+    &-with-text {
+      top: 5px;
+    }
+
+    &-text {
+      color: @text-color;
+      font-size: @font-size-base;
+      margin-left: 8px; // 8 - (6 / 2) === 5
+    }
+  }
+
   &-zoom-appear,
   &-zoom-enter {
     animation: antZoomBadgeIn .3s @ease-out-back;
@@ -66,6 +98,16 @@
   }
 }
 
+@keyframes antStatusProcessing {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
 a & {
   &-count:hover {
     background: tint(@error-color, 20%);

components/style/themes/default.less

@@ -4,6 +4,7 @@
 @success-color          : #87d068;
 @error-color            : #f50;
 @warning-color          : #fa0;
+@normal-color           : #d9d9d9;
 
 // ------ Base & Require ------
 @body-background        : #fff;