fix(module:badge): after setting nzColor, display incorrect (#9376)

Author: yociduo

components/badge/badge-sup.component.ts

@@ -4,6 +4,7 @@
  */
 
 import {
+  booleanAttribute,
   ChangeDetectionStrategy,
   Component,
   Input,
@@ -49,11 +50,13 @@ import { NzSafeAny, NzSizeDSType } from 'ng-zorro-antd/core/types';
   `,
   host: {
     class: 'ant-scroll-number',
+    '[class]': `isPresetColor ? ('ant-badge-status-' + nzColor) : ''`,
     '[@.disabled]': `disableAnimation`,
     '[@zoomBadgeMotion]': '',
     '[attr.title]': `nzTitle === null ? '' : nzTitle || nzCount`,
     '[style]': `nzStyle`,
     '[style.right.px]': `nzOffset && nzOffset[0] ? -nzOffset[0] : null`,
+    '[style.background]': `isPresetColor ? nzStyle?.background : nzColor`,
     '[style.margin-top.px]': `nzOffset && nzOffset[1] ? nzOffset[1] : null`,
     '[class.ant-badge-count]': `!nzDot`,
     '[class.ant-badge-count-sm]': `nzSize === 'small'`,
@@ -71,6 +74,8 @@ export class NzBadgeSupComponent implements OnInit, OnChanges {
   @Input() nzCount?: number | TemplateRef<NzSafeAny>;
   @Input() noAnimation = false;
   @Input() nzSize: NzSizeDSType = 'default';
+  @Input({ transform: booleanAttribute }) isPresetColor = false;
+  @Input() nzColor?: string = undefined;
   maxNumberArray: string[] = [];
   countArray: number[] = [];
   count: number = 0;

components/badge/badge.component.ts

@@ -42,9 +42,10 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'badge';
   animations: [zoomBadgeMotion],
   imports: [NzBadgeSupComponent, NzOutletModule],
   template: `
-    @if (nzStatus || nzColor) {
+    @if ((nzStatus || nzColor) && !showSup && !nzCount) {
       <span
-        class="ant-badge-status-dot ant-badge-status-{{ nzStatus || presetColor }}"
+        class="ant-badge-status-dot"
+        [class]="(nzStatus || presetColor) && 'ant-badge-status-' + (nzStatus || presetColor)"
         [style.background]="!presetColor && nzColor"
         [style]="nzStyle"
       ></span>
@@ -56,6 +57,8 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'badge';
     <ng-container *nzStringTemplateOutlet="nzCount">
       @if (showSup) {
         <nz-badge-sup
+          [isPresetColor]="nzStatus || presetColor"
+          [nzColor]="nzStatus || presetColor || nzColor"
           [nzOffset]="nzOffset"
           [nzSize]="nzSize"
           [nzTitle]="nzTitle"
@@ -72,7 +75,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'badge';
   host: {
     class: 'ant-badge',
     '[class.ant-badge-status]': 'nzStatus',
-    '[class.ant-badge-not-a-wrapper]': '!!(nzStandalone || nzStatus || nzColor)'
+    '[class.ant-badge-not-a-wrapper]': '!!(nzStandalone || ((nzStatus || nzColor) && !showSup && !nzCount))'
   }
 })
 export class NzBadgeComponent implements OnChanges, OnInit {

components/badge/badge.spec.ts

@@ -148,6 +148,7 @@ describe('nz-badge', () => {
 
     it('should status work', () => {
       testComponent.inner = false;
+      testComponent.count = 0;
       const statusList = ['success', 'processing', 'default', 'error', 'warning'];
       statusList.forEach(status => {
         testComponent.status = status;
@@ -191,6 +192,65 @@ describe('nz-badge', () => {
       tick();
       expect(component.presetColor).toEqual(null);
     }));
+
+    it('should display correct of nzColor related change', fakeAsync(() => {
+      let color: string | undefined;
+      testComponent.inner = false;
+      testComponent.count = 0;
+      testComponent.status = 'success';
+      fixture.detectChanges();
+      expect(badgeElement.nativeElement.classList).toContain('ant-badge-not-a-wrapper');
+      expect(badgeElement.nativeElement.querySelector('.ant-badge-status-dot').classList).toContain(
+        `ant-badge-status-success`
+      );
+      expect(badgeElement.nativeElement.querySelector('.ant-badge-status-text').innerText).toBe('');
+      expect(badgeElement.nativeElement.querySelector('nz-badge-sup')).toBeNull();
+
+      testComponent.status = '';
+      testComponent.text = 'test';
+      fixture.detectChanges();
+      expect(badgeElement.nativeElement.classList).toContain('ant-badge-not-a-wrapper');
+      expect(badgeElement.nativeElement.querySelector('.ant-badge-status-dot')).toBeNull();
+      expect(badgeElement.nativeElement.querySelector('.ant-badge-status-text')).toBeNull();
+      expect(badgeElement.nativeElement.querySelector('nz-badge-sup')).toBeNull();
+
+      color = 'blue';
+      testComponent.color = color;
+      fixture.detectChanges();
+      expect(badgeElement.nativeElement.classList).toContain('ant-badge-not-a-wrapper');
+      expect(badgeElement.nativeElement.querySelector('.ant-badge-status-dot').classList).toContain(
+        `ant-badge-status-${color}`
+      );
+      expect(badgeElement.nativeElement.querySelector('.ant-badge-status-text').innerText).toBe('test');
+      expect(badgeElement.nativeElement.querySelector('nz-badge-sup')).toBeNull();
+
+      testComponent.inner = true;
+      color = '#f5222d';
+      testComponent.color = color;
+      fixture.detectChanges();
+      expect(badgeElement.nativeElement.classList).toContain('ant-badge-not-a-wrapper');
+      expect(badgeElement.nativeElement.querySelector('.ant-badge-status-dot').classList).not.toContain(
+        `ant-badge-status-`
+      );
+      expect(badgeElement.nativeElement.querySelector('.ant-badge-status-dot').style.backgroundColor).toBe(
+        'rgb(245, 34, 45)'
+      );
+      expect(badgeElement.nativeElement.querySelector('.ant-badge-status-text').innerText).toBe('test');
+      expect(badgeElement.nativeElement.querySelector('nz-badge-sup')).toBeNull();
+
+      testComponent.text = '';
+      testComponent.showZero = true;
+      fixture.detectChanges();
+      expect(badgeElement.nativeElement.classList).not.toContain('ant-badge-not-a-wrapper');
+      expect(badgeElement.nativeElement.querySelector('.ant-badge-status-dot')).toBeNull();
+      expect(badgeElement.nativeElement.querySelector('.ant-badge-status-text')).toBeNull();
+
+      testComponent.count = 5;
+      fixture.detectChanges();
+      expect(badgeElement.nativeElement.classList).not.toContain('ant-badge-not-a-wrapper');
+      expect(badgeElement.nativeElement.querySelector('.ant-badge-status-dot')).toBeNull();
+      expect(badgeElement.nativeElement.querySelector('.ant-badge-status-text')).toBeNull();
+    }));
   });
 
   describe('ribbon', () => {
@@ -275,6 +335,7 @@ describe('nz-badge', () => {
       [nzTitle]="title"
       [nzStandalone]="!inner"
       [nzSize]="size"
+      [nzColor]="color"
     >
       @if (inner) {
         <a></a>
@@ -295,6 +356,7 @@ export class NzTestBadgeBasicComponent {
   offset?: [number, number];
   size: NzSizeDSType = 'default';
   noAnimation = true;
+  color?: string;
 }
 
 @Component({