fix(module:badge): allow nzTitle set to null (#4965)

close #4776

components/badge/badge.component.ts

@@ -30,24 +30,10 @@ import { InputBoolean, isEmpty } from 'ng-zorro-antd/core/util';
 import { Subject } from 'rxjs';
 import { startWith, take, takeUntil } from 'rxjs/operators';
 
-export type NzBadgeStatusType = 'success' | 'processing' | 'default' | 'error' | 'warning';
+import { badgePresetColors } from './preset-colors';
+import { NzBadgeStatusType } from './types';
 
 const NZ_CONFIG_COMPONENT_NAME = 'backTop';
-const NZ_BADGE_COLORS = [
-  'pink',
-  'red',
-  'yellow',
-  'orange',
-  'cyan',
-  'green',
-  'blue',
-  'purple',
-  'geekblue',
-  'magenta',
-  'volcano',
-  'gold',
-  'lime'
-];
 
 @Component({
   selector: 'nz-badge',
@@ -72,7 +58,7 @@ const NZ_BADGE_COLORS = [
         [@.disabled]="notWrapper"
         [@zoomBadgeMotion]
         [ngStyle]="nzStyle"
-        [attr.title]="nzTitle || nzCount"
+        [attr.title]="nzTitle === null ? '' : nzTitle || nzCount"
         [style.right.px]="nzOffset && nzOffset[0] ? -nzOffset[0] : null"
         [style.marginTop.px]="nzOffset && nzOffset[1] ? nzOffset[1] : null"
         [class.ant-badge-count]="!nzDot"
@@ -108,7 +94,6 @@ export class NzBadgeComponent implements OnInit, AfterViewInit, OnChanges, OnDes
   maxNumberArray: string[] = [];
   countArray: number[] = [];
   countSingleArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
-  colorArray = NZ_BADGE_COLORS;
   presetColor: string | null = null;
   count: number;
   @ViewChild('contentElement', { static: false }) contentElement: ElementRef;
@@ -181,7 +166,7 @@ export class NzBadgeComponent implements OnInit, AfterViewInit, OnChanges, OnDes
       this.generateMaxNumberArray();
     }
     if (nzColor) {
-      this.presetColor = this.colorArray.indexOf(this.nzColor) !== -1 ? this.nzColor : null;
+      this.presetColor = badgePresetColors.indexOf(this.nzColor) !== -1 ? this.nzColor : null;
     }
   }
 

components/badge/badge.spec.ts

@@ -57,6 +57,12 @@ describe('badge', () => {
       expect(badgeElement.nativeElement.querySelector('sup').getAttribute('title')).toBe('test');
     });
 
+    it('should be no title attribute when `nzTitle` is null', () => {
+      testComponent.title = null;
+      fixture.detectChanges();
+      expect(badgeElement.nativeElement.querySelector('sup').getAttribute('title')).toBeFalsy();
+    });
+
     it('should offset work', () => {
       testComponent.offset = [10, 10];
       fixture.detectChanges();
@@ -162,6 +168,6 @@ export class NzTestBadgeBasicComponent {
   status: string;
   style: NgStyleInterface;
   text: string;
-  title: string;
+  title: string | null;
   offset: [number, number];
 }

components/badge/demo/no-wrapper.ts

@@ -4,7 +4,11 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-badge-no-wrapper',
   template: `
     <nz-badge [nzCount]="25"></nz-badge>
-    <nz-badge [nzCount]="4" [nzStyle]="{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }"></nz-badge>
+    <nz-badge
+      [nzCount]="4"
+      class="site-badge-count-4"
+      [nzStyle]="{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }"
+    ></nz-badge>
     <nz-badge [nzCount]="109" [nzStyle]="{ backgroundColor: '#52c41a' }"></nz-badge>
   `,
   styles: [

components/badge/doc/index.en-US.md

@@ -38,5 +38,5 @@ import { NzBadgeModule } from 'ng-zorro-antd/badge';
 | `[nzShowZero]` | Whether to show badge when `count` is zero | `boolean` | `false` |
 | `[nzStatus]` | Set `nz-badge` as a status dot | `'success' \| 'processing' \| 'default' \| 'error' \| 'warning'` | - |
 | `[nzText]` | If `nzStatus` is set, `text` sets the display text of the status `dot` | `string` | - |
-| `[nzTitle]` | Text to show when hovering over the badge（Only Non-standalone) | `string` | `nzCount` |
+| `[nzTitle]` | Text to show when hovering over the badge（Only Non-standalone), hide when value is `null` | `string \| null` | `nzCount` |
 | `[nzOffset]` | set offset of the badge dot, like[x, y] (Only Non-standalone) | `[number, number]` | - |

components/badge/doc/index.zh-CN.md

@@ -39,5 +39,5 @@ import { NzBadgeModule } from 'ng-zorro-antd/badge';
 | `[nzShowZero]` | 当数值为 0 时，是否展示 Badge | `boolean` | `false` |
 | `[nzStatus]` | 设置 `nz-badge` 为状态点 | `'success' \| 'processing' \| 'default' \| 'error' \| 'warning'` | - |
 | `[nzText]` | 在设置了 `nzStatus` 的前提下有效，设置状态点的文本 | `string` | - |
-| `[nzTitle]` | 设置鼠标放在状态点上时显示的文字（非独立使用时) | `string` | `nzCount` |
+| `[nzTitle]` | 设置鼠标放在状态点上时显示的文字（非独立使用时), 为 `null` 时隐藏 | `string \| null` | `nzCount` |
 | `[nzOffset]` | 设置状态点的位置偏移，格式为 [x, y] (非独立使用时) | `[number, number]` | - |

components/badge/preset-colors.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+export const badgePresetColors: ReadonlyArray<string> = [
+  'pink',
+  'red',
+  'yellow',
+  'orange',
+  'cyan',
+  'green',
+  'blue',
+  'purple',
+  'geekblue',
+  'magenta',
+  'volcano',
+  'gold',
+  'lime'
+];

components/badge/types.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+export type NzBadgeStatusType = 'success' | 'processing' | 'default' | 'error' | 'warning';

scripts/site/_site/doc/style/patch.less

@@ -129,6 +129,15 @@ label {
 
 [data-theme='dark'] {
 
+  .site-badge-count-4 .ant-badge-count {
+    background-color: @component-background !important;
+    box-shadow: 0 0 0 1px #434343 inset !important;
+  }
+
+  .head-example {
+    background: rgba(255,255,255,.12) !important;
+  }
+
   .popover-menu .ant-popover-inner-content #nav a {
     color: @text-color;
   }