fix(module:modal): fix close button style (#5014)

NG-ZORRO · Apr 13, 2020 · 174099e · 174099e
1 parent 9073fa5
commit 174099e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/components/drawer/drawer.component.ts b/components/drawer/drawer.component.ts
@@ -72,11 +72,11 @@ const NZ_CONFIG_COMPONENT_NAME = 'drawer';
         >
           <div class="ant-drawer-content">
             <div class="ant-drawer-wrapper-body" [style.height]="isLeftOrRight ? '100%' : null">
-              <div *ngIf="nzTitle || nzClosable" [class.ant-drawer-header]="!!nzTitle" [class.ant-drawer-header-no-title]="!!nzTitle">
+              <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">
+                <button *ngIf="nzClosable" (click)="closeClick()" aria-label="Close" class="ant-drawer-close" style="--scroll-bar: 0px;">
                   <i nz-icon nzType="close"></i>
                 </button>
               </div>

diff --git a/components/drawer/drawer.spec.ts b/components/drawer/drawer.spec.ts
@@ -167,6 +167,16 @@ describe('NzDrawerComponent', () => {
     expect(overlayContainerElement.querySelector('.ant-drawer .ant-drawer-title')).toBe(null);
   });
 
+  it('should render header when is no title but is closeable', () => {
+    component.closable = true;
+    component.open();
+    fixture.detectChanges();
+
+    expect(overlayContainerElement.querySelector('.ant-drawer')!.classList.contains('ant-drawer-open')).toBe(true);
+    expect(overlayContainerElement.querySelector('.ant-drawer-header-no-title')).toBeTruthy();
+    expect(overlayContainerElement.querySelector('.ant-drawer .ant-drawer-title')).toBe(null);
+  });
+
   it('should support string title', () => {
     component.title = component.stringTitle;
     component.open();