fix(module:page-header): fix page-header style break change

components/core/util/measure-scrollbar.ts

@@ -5,18 +5,18 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
+let scrollbarVerticalSize: number;
+let scrollbarHorizontalSize: number;
 
-export function measureScrollbar(direction: 'vertical' | 'horizontal' = 'vertical', prefix: string = 'ant'): number {
-  let scrollbarVerticalSize;
-  let scrollbarHorizontalSize;
+// Measure scrollbar width for padding body during modal show/hide
+const scrollbarMeasure = {
+  position: 'absolute',
+  top: '-9999px',
+  width: '50px',
+  height: '50px'
+};
 
-  // Measure scrollbar width for padding body during modal show/hide
-  const scrollbarMeasure = {
-    position: 'absolute',
-    top: '-9999px',
-    width: '50px',
-    height: '50px'
-  };
+export function measureScrollbar(direction: 'vertical' | 'horizontal' = 'vertical', prefix: string = 'ant'): number {
   if (typeof document === 'undefined' || typeof window === 'undefined') {
     return 0;
   }

components/page-header/demo/module

@@ -1,6 +1,7 @@
 import { NzPageHeaderModule } from 'ng-zorro-antd/page-header';
 import { NzTagModule } from 'ng-zorro-antd/tag';
 import { NzTabsModule } from 'ng-zorro-antd/tabs';
+import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
 
-export const moduleList = [ NzPageHeaderModule, NzTagModule, NzTabsModule, NzBreadCrumbModule ];
+export const moduleList = [ NzPageHeaderModule, NzTagModule, NzTabsModule, NzBreadCrumbModule, NzButtonModule ];

components/page-header/nz-page-header-cells.ts

@@ -12,7 +12,7 @@ import { Directive } from '@angular/core';
   selector: 'nz-page-header-title, [nz-page-header-title]',
   exportAs: 'nzPageHeaderTitle',
   host: {
-    class: 'ant-page-header-title-view-title'
+    class: 'ant-page-header-heading-title'
   }
 })
 export class NzPageHeaderTitleDirective {}
@@ -21,7 +21,7 @@ export class NzPageHeaderTitleDirective {}
   selector: 'nz-page-header-subtitle, [nz-page-header-subtitle]',
   exportAs: 'nzPageHeaderSubtitle',
   host: {
-    class: 'ant-page-header-title-view-sub-title'
+    class: 'ant-page-header-heading-sub-title'
   }
 })
 export class NzPageHeaderSubtitleDirective {}
@@ -30,7 +30,7 @@ export class NzPageHeaderSubtitleDirective {}
   selector: 'nz-page-header-content, [nz-page-header-content]',
   exportAs: 'nzPageHeaderContent',
   host: {
-    class: 'ant-page-header-content-view'
+    class: 'ant-page-header-content'
   }
 })
 export class NzPageHeaderContentDirective {}
@@ -39,7 +39,7 @@ export class NzPageHeaderContentDirective {}
   selector: 'nz-page-header-tags, [nz-page-header-tags]',
   exportAs: 'nzPageHeaderTags',
   host: {
-    class: 'ant-page-header-title-view-tags'
+    class: 'ant-page-header-heading-tags'
   }
 })
 export class NzPageHeaderTagDirective {}
@@ -48,7 +48,7 @@ export class NzPageHeaderTagDirective {}
   selector: 'nz-page-header-extra, [nz-page-header-extra]',
   exportAs: 'nzPageHeaderExtra',
   host: {
-    class: 'ant-page-header-title-view-extra'
+    class: 'ant-page-header-heading-extra'
   }
 })
 export class NzPageHeaderExtraDirective {}

components/page-header/nz-page-header.component.html

@@ -8,12 +8,12 @@
   <nz-divider nzType="vertical"></nz-divider>
 </div>
 
-<div class="ant-page-header-title-view">
-  <span class="ant-page-header-title-view-title" *ngIf="nzTitle">
+<div class="ant-page-header-heading">
+  <span class="ant-page-header-heading-title" *ngIf="nzTitle">
     <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
   </span>
   <ng-content *ngIf="!nzTitle" select="nz-page-header-title, [nz-page-header-title]"></ng-content>
-  <span class="ant-page-header-title-view-sub-title" *ngIf="nzSubtitle">
+  <span class="ant-page-header-heading-sub-title" *ngIf="nzSubtitle">
     <ng-container *nzStringTemplateOutlet="nzSubtitle">{{ nzSubtitle }}</ng-container>
   </span>
   <ng-content *ngIf="!nzSubtitle" select="nz-page-header-subtitle, [nz-page-header-subtitle]"></ng-content>

components/page-header/nz-page-header.spec.ts

@@ -29,8 +29,8 @@ describe('NzPageHeaderComponent', () => {
     const pageHeader = fixture.debugElement.query(By.directive(NzPageHeaderComponent));
     fixture.detectChanges();
     expect(pageHeader.nativeElement.classList).toContain('ant-page-header');
-    expect(pageHeader.nativeElement.querySelector('.ant-page-header-title-view-title')).toBeTruthy();
-    expect(pageHeader.nativeElement.querySelector('.ant-page-header-title-view-sub-title')).toBeTruthy();
+    expect(pageHeader.nativeElement.querySelector('.ant-page-header-heading-title')).toBeTruthy();
+    expect(pageHeader.nativeElement.querySelector('.ant-page-header-heading-sub-title')).toBeTruthy();
   });
 
   it('should breadcrumb work', () => {
@@ -44,7 +44,7 @@ describe('NzPageHeaderComponent', () => {
     const fixture = TestBed.createComponent(NzDemoPageHeaderContentComponent);
     const pageHeader = fixture.debugElement.query(By.directive(NzPageHeaderComponent));
     fixture.detectChanges();
-    const content = pageHeader.nativeElement.querySelector('nz-page-header-content.ant-page-header-content-view');
+    const content = pageHeader.nativeElement.querySelector('nz-page-header-content.ant-page-header-content');
     expect(content).toBeTruthy();
     expect((content as HTMLElement).children.length > 0).toBe(true);
   });
@@ -54,10 +54,8 @@ describe('NzPageHeaderComponent', () => {
     const pageHeader = fixture.debugElement.query(By.directive(NzPageHeaderComponent));
     fixture.detectChanges();
     expect(pageHeader.nativeElement.classList).toContain('ant-page-header-has-footer');
-    expect(
-      pageHeader.nativeElement.querySelector('nz-page-header-extra.ant-page-header-title-view-extra')
-    ).toBeTruthy();
-    expect(pageHeader.nativeElement.querySelector('nz-page-header-tags.ant-page-header-title-view-tags')).toBeTruthy();
+    expect(pageHeader.nativeElement.querySelector('nz-page-header-extra.ant-page-header-heading-extra')).toBeTruthy();
+    expect(pageHeader.nativeElement.querySelector('nz-page-header-tags.ant-page-header-heading-tags')).toBeTruthy();
     expect(pageHeader.nativeElement.querySelector('nz-page-header-footer.ant-page-header-footer')).toBeTruthy();
   });