From 0fc420da489ec6769165f66ccffa4f4957e79ea8 Mon Sep 17 00:00:00 2001 From: Hsuan Lee Date: Wed, 1 Apr 2020 10:41:58 +0800 Subject: [PATCH] fix(module:badge): allow `nzTitle` set to null close #4776 --- components/badge/badge.component.ts | 23 ++++------------------- components/badge/badge.spec.ts | 8 +++++++- components/badge/demo/no-wrapper.ts | 6 +++++- components/badge/doc/index.en-US.md | 2 +- components/badge/doc/index.zh-CN.md | 2 +- components/badge/preset-colors.ts | 23 +++++++++++++++++++++++ components/badge/types.ts | 9 +++++++++ scripts/site/_site/doc/style/patch.less | 9 +++++++++ 8 files changed, 59 insertions(+), 23 deletions(-) create mode 100644 components/badge/preset-colors.ts create mode 100644 components/badge/types.ts diff --git a/components/badge/badge.component.ts b/components/badge/badge.component.ts index c15b1f266c4..69556429a85 100644 --- a/components/badge/badge.component.ts +++ b/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; } } diff --git a/components/badge/badge.spec.ts b/components/badge/badge.spec.ts index b41e0b67a59..bf6be661eb6 100644 --- a/components/badge/badge.spec.ts +++ b/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]; } diff --git a/components/badge/demo/no-wrapper.ts b/components/badge/demo/no-wrapper.ts index 7b42d06a54a..dd924dd2b75 100644 --- a/components/badge/demo/no-wrapper.ts +++ b/components/badge/demo/no-wrapper.ts @@ -4,7 +4,11 @@ import { Component } from '@angular/core'; selector: 'nz-demo-badge-no-wrapper', template: ` - + `, styles: [ diff --git a/components/badge/doc/index.en-US.md b/components/badge/doc/index.en-US.md index c58e4afdd68..d27288b6353 100644 --- a/components/badge/doc/index.en-US.md +++ b/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]` | - | diff --git a/components/badge/doc/index.zh-CN.md b/components/badge/doc/index.zh-CN.md index e2dec840374..ccdbdc4db32 100644 --- a/components/badge/doc/index.zh-CN.md +++ b/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]` | - | diff --git a/components/badge/preset-colors.ts b/components/badge/preset-colors.ts new file mode 100644 index 00000000000..648c5f99539 --- /dev/null +++ b/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 = [ + 'pink', + 'red', + 'yellow', + 'orange', + 'cyan', + 'green', + 'blue', + 'purple', + 'geekblue', + 'magenta', + 'volcano', + 'gold', + 'lime' +]; diff --git a/components/badge/types.ts b/components/badge/types.ts new file mode 100644 index 00000000000..94a1e2bce59 --- /dev/null +++ b/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'; diff --git a/scripts/site/_site/doc/style/patch.less b/scripts/site/_site/doc/style/patch.less index a83f4c1b031..3280e00b497 100644 --- a/scripts/site/_site/doc/style/patch.less +++ b/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; }