fix(module:steps): remove top-level redundant div element (#7582)

The first `div` child of the `nz-steps` element is redundant and should be merged with the `nz-steps` element.
NG-ZORRO · Aug 4, 2022 · 60beabc · 60beabc
1 parent 2fe4c81
commit 60beabc
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 47 deletions.
diff --git a/components/steps/demo/nav.ts b/components/steps/demo/nav.ts
@@ -39,7 +39,6 @@ import { Component } from '@angular/core';
   styles: [
     `
       nz-steps {
-        display: block;
         margin-bottom: 60px;
         box-shadow: rgb(232, 232, 232) 0px -1px 0px 0 inset;
       }

diff --git a/components/steps/steps.component.ts b/components/steps/steps.component.ts
@@ -26,7 +26,7 @@ import { merge, Subscription } from 'rxjs';
 import { startWith, takeUntil } from 'rxjs/operators';
 
 import { NzDestroyService } from 'ng-zorro-antd/core/services';
-import { BooleanInput, NgClassType, NzSizeDSType } from 'ng-zorro-antd/core/types';
+import { BooleanInput, NzSizeDSType } from 'ng-zorro-antd/core/types';
 import { toBoolean } from 'ng-zorro-antd/core/util';
 
 import { NzStepComponent } from './step.component';
@@ -41,11 +41,19 @@ export type nzProgressDotTemplate = TemplateRef<{ $implicit: TemplateRef<void>;
   preserveWhitespaces: false,
   selector: 'nz-steps',
   exportAs: 'nzSteps',
-  template: `
-    <div class="ant-steps" [ngClass]="classMap">
-      <ng-content></ng-content>
-    </div>
-  `,
+  template: `<ng-content></ng-content>`,
+  host: {
+    class: 'ant-steps',
+    '[class.ant-steps-horizontal]': `nzDirection === 'horizontal'`,
+    '[class.ant-steps-vertical]': `nzDirection === 'vertical'`,
+    '[class.ant-steps-label-horizontal]': `nzDirection === 'horizontal'`,
+    '[class.ant-steps-label-vertical]': `(showProcessDot || nzLabelPlacement === 'vertical') && nzDirection === 'horizontal'`,
+    '[class.ant-steps-dot]': 'showProcessDot',
+    '[class.ant-steps-small]': `nzSize === 'small'`,
+    '[class.ant-steps-navigation]': `nzType === 'navigation'`,
+    '[class.ant-steps-rtl]': `dir === 'rtl'`,
+    '[class.ant-steps-with-progress]': 'showProgress'
+  },
   providers: [NzDestroyService]
 })
 export class NzStepsComponent implements OnChanges, OnInit, AfterContentInit {
@@ -79,36 +87,28 @@ export class NzStepsComponent implements OnChanges, OnInit, AfterContentInit {
   showProcessDot = false;
   showProgress = false;
   customProcessDotTemplate?: TemplateRef<{ $implicit: TemplateRef<void>; status: string; index: number }>;
-  classMap: NgClassType = {};
   dir: Direction = 'ltr';
 
   constructor(
     private ngZone: NgZone,
     private cdr: ChangeDetectorRef,
     @Optional() private directionality: Directionality,
     private destroy$: NzDestroyService
-  ) {
-    this.setClassMap();
-  }
+  ) {}
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.nzStartIndex || changes.nzDirection || changes.nzStatus || changes.nzCurrent || changes.nzSize) {
       this.updateChildrenSteps();
     }
-    if (changes.nzDirection || changes.nzProgressDot || changes.nzLabelPlacement || changes.nzSize) {
-      this.setClassMap();
-    }
   }
 
   ngOnInit(): void {
     this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
       this.dir = direction;
-      this.setClassMap();
       this.cdr.detectChanges();
     });
 
     this.dir = this.directionality.value;
-    this.setClassMap();
     this.updateChildrenSteps();
   }
 
@@ -124,7 +124,6 @@ export class NzStepsComponent implements OnChanges, OnInit, AfterContentInit {
   private updateHostProgressClass(): void {
     if (this.steps && !this.showProcessDot) {
       this.showProgress = !!this.steps.toArray().find(step => step.nzPercentage !== null);
-      this.setClassMap();
     }
   }
 
@@ -157,18 +156,4 @@ export class NzStepsComponent implements OnChanges, OnInit, AfterContentInit {
         });
     }
   }
-
-  private setClassMap(): void {
-    this.classMap = {
-      [`ant-steps-${this.nzDirection}`]: true,
-      [`ant-steps-label-horizontal`]: this.nzDirection === 'horizontal',
-      [`ant-steps-label-vertical`]:
-        (this.showProcessDot || this.nzLabelPlacement === 'vertical') && this.nzDirection === 'horizontal',
-      [`ant-steps-dot`]: this.showProcessDot,
-      ['ant-steps-small']: this.nzSize === 'small',
-      ['ant-steps-navigation']: this.nzType === 'navigation',
-      ['ant-steps-rtl']: this.dir === 'rtl',
-      ['ant-steps-with-progress']: this.showProgress
-    };
-  }
 }
diff --git a/components/steps/steps.spec.ts b/components/steps/steps.spec.ts
@@ -56,9 +56,7 @@ describe('steps', () => {
       fixture.detectChanges();
       tick();
       fixture.detectChanges();
-      expect(outStep.nativeElement.firstElementChild.className).toBe(
-        'ant-steps ant-steps-horizontal ant-steps-label-horizontal'
-      );
+      expect(outStep.nativeElement.className).toBe('ant-steps ant-steps-horizontal ant-steps-label-horizontal');
       expect(innerSteps[0].nativeElement.className).toBe('ant-steps-item ant-steps-item-active ant-steps-item-process');
       expect(innerSteps[1].nativeElement.className).toBe('ant-steps-item ant-steps-item-wait');
       expect(innerSteps[2].nativeElement.className).toBe('ant-steps-item ant-steps-item-wait');
@@ -141,7 +139,7 @@ describe('steps', () => {
       testComponent.size = 'small';
       testComponent.cdr.markForCheck();
       fixture.detectChanges();
-      expect(outStep.nativeElement.firstElementChild.className).toBe(
+      expect(outStep.nativeElement.className).toBe(
         'ant-steps ant-steps-horizontal ant-steps-label-horizontal ant-steps-small'
       );
     });
@@ -151,15 +149,15 @@ describe('steps', () => {
       testComponent.direction = 'vertical';
       testComponent.cdr.markForCheck();
       fixture.detectChanges();
-      expect(outStep.nativeElement.firstElementChild.className).toBe('ant-steps ant-steps-vertical');
+      expect(outStep.nativeElement.className).toBe('ant-steps ant-steps-vertical');
     });
 
     it('should label placement display correct', () => {
       fixture.detectChanges();
       testComponent.labelPlacement = 'vertical';
       testComponent.cdr.markForCheck();
       fixture.detectChanges();
-      expect(outStep.nativeElement.firstElementChild!.classList).toContain('ant-steps-label-vertical');
+      expect(outStep.nativeElement.classList).toContain('ant-steps-label-vertical');
     });
 
     it('should status display correct', fakeAsync(() => {
@@ -197,7 +195,7 @@ describe('steps', () => {
       fixture.detectChanges();
       tick();
       fixture.detectChanges();
-      expect(outStep.nativeElement.firstElementChild!.classList.contains('ant-steps-dot')).toBe(true);
+      expect(outStep.nativeElement.classList.contains('ant-steps-dot')).toBe(true);
       expect(
         innerSteps[0].nativeElement
           .querySelector('.ant-steps-icon')
@@ -224,7 +222,7 @@ describe('steps', () => {
       fixture.detectChanges();
       tick();
       fixture.detectChanges();
-      expect(outStep.nativeElement.firstElementChild!.classList.contains('ant-steps-dot')).toBe(true);
+      expect(outStep.nativeElement.classList.contains('ant-steps-dot')).toBe(true);
       expect(innerSteps[0].nativeElement.querySelector('.ant-steps-icon').firstElementChild.innerText.trim()).toBe(
         'process0'
       );
@@ -497,7 +495,7 @@ describe('steps', () => {
       fixture.detectChanges();
 
       steps
-        .map(step => step.nativeElement.querySelector('.ant-steps'))
+        .map(step => step.nativeElement)
         .forEach((e: HTMLElement) => {
           expect(e.classList).toContain('ant-steps-navigation');
         });
@@ -511,11 +509,11 @@ describe('steps', () => {
       fixture.detectChanges();
       tick();
       fixture.detectChanges();
-      expect(outStep.nativeElement.firstElementChild.classList).toContain('ant-steps-rtl');
+      expect(outStep.nativeElement.classList).toContain('ant-steps-rtl');
 
       fixture.componentInstance.direction = 'ltr';
       fixture.detectChanges();
-      expect(outStep.nativeElement.firstElementChild.classList).not.toContain('ant-steps-rtl');
+      expect(outStep.nativeElement.classList).not.toContain('ant-steps-rtl');
     }));
   });
 });
@@ -635,11 +633,7 @@ export class NzTestStepAsyncComponent implements OnInit {
 }
 
 @Component({
-  template: `
-    <div [dir]="direction">
-      <nz-test-outer-steps></nz-test-outer-steps>
-    </div>
-  `
+  template: ` <nz-test-outer-steps [dir]="direction"></nz-test-outer-steps> `
 })
 export class NzTestOuterStepsRtlComponent {
   @ViewChild(Dir) dir!: Dir;