fix(module:drawer): fix the HTML structure of the drawer header (#4311)

* fix(module:drawer): fix the HTML structure of the drawer header close #4304 * fix(module:drawer): fix the template conditions * test(module:drawer): fix test * fix(module:drawer): fix the template conditions
NG-ZORRO · Oct 23, 2019 · 5cdd5db · 5cdd5db
1 parent 4c10e5b
commit 5cdd5db
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/components/drawer/nz-drawer.component.html b/components/drawer/nz-drawer.component.html
@@ -18,14 +18,16 @@
         <div class="ant-drawer-wrapper-body"
           [style.overflow]="isLeftOrRight ? 'auto' : null"
           [style.height]="isLeftOrRight ? '100%' : null">
-          <div *ngIf="nzTitle" class="ant-drawer-header">
-            <div class="ant-drawer-title">
+          <div *ngIf="nzTitle || nzClosable"
+            [class.ant-drawer-header]="!!nzTitle"
+            [class.ant-drawer-header-no-title]="!!nzTitle">
+            <div *ngIf="nzTitle" class="ant-drawer-title">
               <ng-container *nzStringTemplateOutlet="nzTitle"><div [innerHTML]="nzTitle"></div></ng-container>
             </div>
+            <button *ngIf="nzClosable" (click)="closeClick()" aria-label="Close" class="ant-drawer-close">
+              <i nz-icon nzType="close"></i>
+            </button>
           </div>
-          <button *ngIf="nzClosable" (click)="closeClick()" aria-label="Close" class="ant-drawer-close">
-            <span class="ant-drawer-close-x"><i nz-icon nzType="close"></i></span>
-          </button>
           <div class="ant-drawer-body" [ngStyle]="nzBodyStyle">
             <ng-template cdkPortalOutlet></ng-template>
             <ng-container *ngIf="isTemplateRef(nzContent)">

diff --git a/components/drawer/nz-drawer.spec.ts b/components/drawer/nz-drawer.spec.ts
@@ -168,7 +168,7 @@ describe('NzDrawerComponent', () => {
     component.open();
     fixture.detectChanges();
     expect(overlayContainerElement.querySelector('.ant-drawer')!.classList.contains('ant-drawer-open')).toBe(true);
-    expect(overlayContainerElement.querySelector('.ant-drawer .ant-drawer-header')).toBe(null);
+    expect(overlayContainerElement.querySelector('.ant-drawer .ant-drawer-title')).toBe(null);
   });
 
   it('should support string title', () => {