fix(module:button): fix add class ant-btn-icon-only(#7631) (#7678)

* fix(module:button): fix add class ant-btn-icon-only(#7631) * test(module:button): add class ant-btn-icon-only --------- Co-authored-by: Master Yi <xh765155143@gmail.com>
NG-ZORRO · Sep 18, 2023 · 7470ed6 · 7470ed6
1 parent ceb29a9
commit 7470ed6
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 22 deletions.
diff --git a/components/button/button.component.ts b/components/button/button.component.ts
@@ -62,6 +62,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'button';
     '[class.ant-btn-block]': `nzBlock`,
     '[class.ant-input-search-button]': `nzSearch`,
     '[class.ant-btn-rtl]': `dir === 'rtl'`,
+    '[class.ant-btn-icon-only]': `iconOnly`,
     '[attr.tabindex]': 'disabled ? -1 : (tabIndex === null ? null : tabIndex)',
     '[attr.disabled]': 'disabled || null'
   }
@@ -101,28 +102,17 @@ export class NzButtonComponent implements OnDestroy, OnChanges, AfterViewInit, A
     });
   }
 
-  assertIconOnly(element: HTMLButtonElement, renderer: Renderer2): void {
-    const listOfNode = Array.from(element.childNodes);
-    const iconCount = listOfNode.filter(node => {
-      const iconChildNodes = Array.from(node.childNodes || []);
-      return node.nodeName === 'SPAN' && iconChildNodes.length > 0 && iconChildNodes.every(ic => ic.nodeName === 'svg');
-    }).length;
+  public get iconOnly(): boolean {
+    const listOfNode = Array.from((this.elementRef?.nativeElement as HTMLButtonElement)?.childNodes || []);
     const noText = listOfNode.every(node => node.nodeName !== '#text');
-    // ignore icon
-    const noSpan = listOfNode
-      .filter(node => {
-        const iconChildNodes = Array.from(node.childNodes || []);
-        return !(
-          node.nodeName === 'SPAN' &&
-          iconChildNodes.length > 0 &&
-          iconChildNodes.every(ic => ic.nodeName === 'svg')
-        );
-      })
-      .every(node => node.nodeName !== 'SPAN');
-    const isIconOnly = noSpan && noText && iconCount >= 1;
-    if (isIconOnly) {
-      renderer.addClass(element, 'ant-btn-icon-only');
-    }
+    // ignore icon and comment
+    const noSpan =
+      listOfNode.filter(node => {
+        return !(node.nodeName === '#comment' || !!(node as HTMLElement)?.attributes?.getNamedItem('nz-icon'));
+      }).length == 0;
+    const isIconOnly = !!this.nzIconDirectiveElement && noSpan && noText;
+
+    return isIconOnly;
   }
 
   constructor(
@@ -173,7 +163,6 @@ export class NzButtonComponent implements OnDestroy, OnChanges, AfterViewInit, A
   }
 
   ngAfterViewInit(): void {
-    this.assertIconOnly(this.elementRef.nativeElement, this.renderer);
     this.insertSpan(this.elementRef.nativeElement.childNodes, this.renderer);
   }
 

diff --git a/components/button/button.spec.ts b/components/button/button.spec.ts
@@ -132,6 +132,42 @@ describe('button', () => {
       testBed.fixture.detectChanges();
       expect(buttonElement.classList).toContain('ant-btn-icon-only');
     }));
+    it('should icon only works correctly with any tag', fakeAsync(() => {
+      const testBed = createComponentBed(TestButtonIconOnlyWithAnyTagComponent, {
+        imports: [NzIconTestModule],
+        declarations: [NzButtonComponent]
+      });
+      const buttonElement = testBed.debugElement.query(By.directive(NzButtonComponent)).nativeElement;
+      testBed.fixture.detectChanges();
+      expect(buttonElement.classList).toContain('ant-btn-icon-only');
+    }));
+    it('should icon only works correctly with any Comment', fakeAsync(() => {
+      const testBed = createComponentBed(TestButtonIconOnlyWithCommentComponent, {
+        imports: [NzIconTestModule],
+        declarations: [NzButtonComponent]
+      });
+      const buttonElement = testBed.debugElement.query(By.directive(NzButtonComponent)).nativeElement;
+      testBed.fixture.detectChanges();
+      expect(buttonElement.classList).toContain('ant-btn-icon-only');
+    }));
+    it('should icon only works correctly with any text', fakeAsync(() => {
+      const testBed = createComponentBed(TestButtonIconOnlyWithTextComponent, {
+        imports: [NzIconTestModule],
+        declarations: [NzButtonComponent]
+      });
+      const buttonElement = testBed.debugElement.query(By.directive(NzButtonComponent)).nativeElement;
+      testBed.fixture.detectChanges();
+      expect(buttonElement.classList).not.toContain('ant-btn-icon-only');
+    }));
+    it('should icon only works correctly without nz-icon', fakeAsync(() => {
+      const testBed = createComponentBed(TestButtonIconOnlyWithoutIconComponent, {
+        imports: [NzIconTestModule],
+        declarations: [NzButtonComponent]
+      });
+      const buttonElement = testBed.debugElement.query(By.directive(NzButtonComponent)).nativeElement;
+      testBed.fixture.detectChanges();
+      expect(buttonElement.classList).not.toContain('ant-btn-icon-only');
+    }));
     it('should icon only loading works correctly', () => {
       const testBed = createComponentBed(TestButtonIconOnlyLoadingComponent, {
         imports: [NzIconTestModule],
@@ -283,6 +319,44 @@ export class TestButtonWithIconComponent implements OnInit {
 })
 export class TestButtonIconOnlyComponent {}
 
+@Component({
+  template: `
+    <button nz-button>
+      <u nz-icon nzType="up"></u>
+    </button>
+  `
+})
+export class TestButtonIconOnlyWithAnyTagComponent {}
+
+@Component({
+  template: `
+    <button nz-button>
+      <i nz-icon nzType="down"></i>
+      <!-- Comment -->
+    </button>
+  `
+})
+export class TestButtonIconOnlyWithCommentComponent {}
+
+@Component({
+  template: `
+    <button nz-button>
+      <i nz-icon nzType="down"></i>
+      text
+    </button>
+  `
+})
+export class TestButtonIconOnlyWithTextComponent {}
+
+@Component({
+  template: `
+    <button nz-button>
+      <span>text</span>
+    </button>
+  `
+})
+export class TestButtonIconOnlyWithoutIconComponent {}
+
 @Component({
   template: `
     <button nz-button nzLoading>