feat(module:popover,popconfirm,tooltip): overlayClassName supports space delimited classes string (#8972)

Author: Laffery

components/popconfirm/popconfirm.spec.ts

@@ -241,6 +241,29 @@ describe('NzPopconfirm', () => {
     fixture.detectChanges();
     expect(overlayContainerElement.children[0].classList).toContain('cdk-overlay-backdrop');
   }));
+
+  it('should change overlayClass when the nzPopconfirmOverlayClassName is changed', fakeAsync(() => {
+    const triggerElement = component.stringTemplate.nativeElement;
+
+    dispatchMouseEvent(triggerElement, 'click');
+    waitingForTooltipToggling();
+
+    component.class = 'testClass2';
+    fixture.detectChanges();
+
+    expect(overlayContainerElement.querySelector<HTMLElement>('.testClass')).toBeNull();
+    expect(overlayContainerElement.querySelector<HTMLElement>('.testClass2')).not.toBeNull();
+  }));
+
+  it('should nzPopconfirmOverlayClassName support classes listed in the string (space delimited)', fakeAsync(() => {
+    const triggerElement = component.stringTemplate.nativeElement;
+    component.class = 'testClass1 testClass2';
+
+    dispatchMouseEvent(triggerElement, 'click');
+    waitingForTooltipToggling();
+
+    expect(overlayContainerElement.querySelector('.testClass1.testClass2')).not.toBeNull();
+  }));
 });
 
 @Component({
@@ -259,6 +282,7 @@ describe('NzPopconfirm', () => {
       [nzBeforeConfirm]="beforeConfirm"
       [nzPopconfirmShowArrow]="nzPopconfirmShowArrow"
       [nzPopconfirmBackdrop]="nzPopconfirmBackdrop"
+      [nzPopconfirmOverlayClassName]="class"
       (nzOnConfirm)="confirm()"
       (nzOnCancel)="cancel()"
     >
@@ -297,4 +321,5 @@ export class NzPopconfirmTestNewComponent {
   @ViewChild('iconTemplate', { static: false }) iconTemplate!: ElementRef;
 
   visible = false;
+  class = 'testClass';
 }

components/popover/popover.spec.ts

@@ -105,7 +105,7 @@ describe('NzPopover', () => {
     expect(overlayContainerElement.children[0].classList).toContain('cdk-overlay-backdrop');
   }));
 
-  it('nzPopoverOverlayClickable: false is to prohibit hiding', fakeAsync(() => {
+  it('should prohibit hiding popover when nzPopoverOverlayClickable is false', fakeAsync(() => {
     const triggerElement = component.hideTemplate.nativeElement;
 
     dispatchMouseEvent(triggerElement, 'click');
@@ -116,12 +116,42 @@ describe('NzPopover', () => {
     waitingForTooltipToggling();
     expect(overlayContainerElement.textContent).toContain('content-string');
   }));
+
+  it('should change overlayClass when the nzPopoverOverlayClassName is changed', fakeAsync(() => {
+    const triggerElement = component.stringPopover.nativeElement;
+
+    dispatchMouseEvent(triggerElement, 'mouseenter');
+    waitingForTooltipToggling();
+
+    component.class = 'testClass2';
+    fixture.detectChanges();
+
+    expect(overlayContainerElement.querySelector<HTMLElement>('.testClass')).toBeNull();
+    expect(overlayContainerElement.querySelector<HTMLElement>('.testClass2')).not.toBeNull();
+  }));
+
+  it('should nzPopoverOverlayClassName support classes listed in the string (space delimited)', fakeAsync(() => {
+    const triggerElement = component.stringPopover.nativeElement;
+    component.class = 'testClass1 testClass2';
+
+    dispatchMouseEvent(triggerElement, 'mouseenter');
+    waitingForTooltipToggling();
+
+    expect(overlayContainerElement.querySelector('.testClass1.testClass2')).not.toBeNull();
+  }));
 });
 
 @Component({
   imports: [NzPopoverModule],
   template: `
-    <a #stringPopover nz-popover nzPopoverTitle="title-string" nzPopoverContent="content-string">Show</a>
+    <a
+      #stringPopover
+      nz-popover
+      nzPopoverTitle="title-string"
+      nzPopoverContent="content-string"
+      [nzPopoverOverlayClassName]="class"
+      >Show</a
+    >
 
     <a #templatePopover nz-popover [nzPopoverTitle]="templateTitle" [nzPopoverContent]="templateContent">Show</a>
 
@@ -172,4 +202,5 @@ export class NzPopoverTestComponent {
 
   content = 'content';
   visible = false;
+  class = 'testClass';
 }

components/tooltip/base.ts

@@ -494,11 +494,21 @@ export abstract class NzTooltipBaseComponent implements OnDestroy, OnInit {
 
   protected updateStyles(): void {
     this._classMap = {
-      [this.nzOverlayClassName]: true,
+      ...this.transformClassListToMap(this.nzOverlayClassName),
       [`${this._prefix}-placement-${this.preferredPlacement}`]: true
     };
   }
 
+  protected transformClassListToMap(klass: string): Record<string, boolean> {
+    const result: Record<string, boolean> = {};
+    /**
+     * @see https://github.com/angular/angular/blob/f6e97763cfab9fa2bea6e6b1303b64f1b499c3ef/packages/common/src/directives/ng_class.ts#L92
+     */
+    const classes = klass !== null ? klass.split(/\s+/) : [];
+    classes.forEach(className => (result[className] = true));
+    return result;
+  }
+
   /**
    * Empty component cannot be opened.
    */

components/tooltip/tooltip.spec.ts

@@ -203,7 +203,7 @@ describe('nz-tooltip', () => {
       expect(overlayContainerElement.querySelector<HTMLElement>('.ant-tooltip')!.style.color).toBe('rgb(0, 0, 0)');
     }));
 
-    it('should change overlayClass when the overlayClass is changed', fakeAsync(() => {
+    it('should change overlayClass when the nzTooltipOverlayClassName is changed', fakeAsync(() => {
       const triggerElement = component.titleString.nativeElement;
 
       dispatchMouseEvent(triggerElement, 'mouseenter');
@@ -212,9 +212,21 @@ describe('nz-tooltip', () => {
       component.class = 'testClass2';
       fixture.detectChanges();
 
+      expect(overlayContainerElement.querySelector<HTMLElement>('.testClass')).toBeNull();
       expect(overlayContainerElement.querySelector<HTMLElement>('.testClass2')).not.toBeNull();
     }));
 
+    it('should nzTooltipOverlayClassName support classes listed in the string (space delimited)', fakeAsync(() => {
+      const triggerElement = component.titleString.nativeElement;
+      component.class = 'testClass1 testClass2';
+      fixture.detectChanges();
+
+      dispatchMouseEvent(triggerElement, 'mouseenter');
+      waitingForTooltipToggling();
+
+      expect(overlayContainerElement.querySelector<HTMLElement>('.testClass1.testClass2')).not.toBeNull();
+    }));
+
     it('should hide when the title is changed to null', fakeAsync(() => {
       const title = 'title-string';
       const triggerElement = component.titleString.nativeElement;

components/tooltip/tooltip.ts

@@ -133,7 +133,7 @@ export class NzToolTipComponent extends NzTooltipBaseComponent {
     const isColorPreset = this.nzColor && isPresetColor(this.nzColor);
 
     this._classMap = {
-      [this.nzOverlayClassName]: true,
+      ...this.transformClassListToMap(this.nzOverlayClassName),
       [`${this._prefix}-placement-${this.preferredPlacement}`]: true,
       [`${this._prefix}-${this.nzColor}`]: isColorPreset
     };