refactor(stepper): layout and class names

IgniteUI · Sep 15, 2021 · 42f3631 · 42f3631
1 parent 46062af
commit 42f3631
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 3 deletions.
diff --git a/projects/igniteui-angular/src/lib/stepper/igx-stepper.component.html b/projects/igniteui-angular/src/lib/stepper/igx-stepper.component.html
@@ -1,8 +1,8 @@
-<div class="igx-stepper" [ngClass]="orientation === 'Horizontal' ? 'igx-stepper--horizontal' : 'igx-stepper--vertical'">
+<div class="igx-stepper__header">
     <ng-content select="igx-step"></ng-content>
 </div>
 
-<div *ngIf="orientation === 'Horizontal'" class="horizontal-container">
+<div *ngIf="orientation === 'Horizontal'" class="igx-stepper__body">
     <ng-container *ngFor="let step of steps">
         <ng-container *ngTemplateOutlet="step.contentTemplate"></ng-container>
     </ng-container>

diff --git a/projects/igniteui-angular/src/lib/stepper/igx-stepper.component.ts b/projects/igniteui-angular/src/lib/stepper/igx-stepper.component.ts
@@ -36,6 +36,11 @@ export class IgxStepperComponent extends IgxCarouselComponentBase implements OnI
     @HostBinding('class.igx-stepper')
     public cssClass = 'igx-stepper';
 
+    @HostBinding('class.igx-stepper--horizontal')
+    public get directionClass() {
+        return this.orientation === IgxStepperOrienatation.Horizontal;
+    }
+
     /** Get/Set the animation settings that branches should use when expanding/collpasing.
      *
      * ```html

diff --git a/projects/igniteui-angular/src/lib/stepper/step/igx-step.component.html b/projects/igniteui-angular/src/lib/stepper/step/igx-step.component.html
@@ -5,7 +5,7 @@
 </ng-template>
 
 <ng-template #contentTemplate>
-    <div class="igx-step__content" [ngClass]="{ 'igx-step__content--active': active }" #contentContainer>
+    <div [ngClass]="contentClasses" #contentContainer>
         <ng-content *ngIf="active || collapsing"></ng-content>
     </div>
 </ng-template>

diff --git a/projects/igniteui-angular/src/lib/stepper/step/igx-step.component.ts b/projects/igniteui-angular/src/lib/stepper/step/igx-step.component.ts
@@ -301,6 +301,14 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements OnInit, A
     /** @hidden @internal */
     public ngAfterViewInit() { }
 
+    public get contentClasses() {
+        if (this.isHorizontal) {
+            return { 'igx-stepper__body-content': true, 'igx-stepper__body-content--active': this.active };
+        } else {
+            return 'igx-step__content';
+        }
+    }
+
     public get stepHeaderClasses() {
         if (this.active) {
             return 'igx-step__header--active';
@@ -311,6 +319,9 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements OnInit, A
         if (this.skip) {
             return 'igx-step__header--skip';
         }
+        if (this.optional) {
+            return 'igx-step__header--optional';
+        }
     }
 
     // /**