From bc8daa2015b388888b077b66d93941f356cf0432 Mon Sep 17 00:00:00 2001
From: MPopov <desig9stein@gmail.com>
Date: Fri, 17 Sep 2021 16:49:58 +0300
Subject: [PATCH] final touches to the layout.

---
 .../stepper/_stepper-component.scss           |   8 +-
 .../components/stepper/_stepper-theme.scss    | 119 ++++++++++--------
 .../styles/themes/schemas/light/_stepper.scss |  14 ++-
 .../core/styles/typography/_typography.scss   |   1 +
 .../src/lib/stepper/igx-stepper.component.ts  |   5 +-
 .../lib/stepper/step/igx-step.component.html  |   7 +-
 .../lib/stepper/step/igx-step.component.ts    |   2 +-
 src/app/stepper/stepper.sample.html           |  19 ++-
 src/app/stepper/stepper.sample.scss           |  15 ++-
 9 files changed, 124 insertions(+), 66 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-component.scss
index 02bf77c1462..ff96d643b53 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-component.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-component.scss
@@ -31,8 +31,12 @@
         @extend %igx-stepper__step-content !optional;
     }
 
-    @include e(step, $m: active) {
-        @extend %igx-stepper__step--active !optional;
+    @include e(step-content-wrapper) {
+        @extend %igx-stepper__step-content-wrapper !optional;
+    }
+
+    @include e(step, $m: current) {
+        @extend %igx-stepper__step--current !optional;
     }
 
     @include e(step, $m: skip) {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss
index 1250e3b5801..11823239d6c 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss
@@ -23,13 +23,11 @@
     $title-color: null,
     $subtitle-color: null,
     $incomplete-color: null,
-    //$complete-color: null,
-    //$error-color: null,
-    //$optional-color: null,
-    //$current-color: null,
-    //$disabled-color: null,
+    $current-color: null,
+    $step-line: null,
+    $complete-step-line: null,
 ) {
-    $name: 'igx-switch';
+    $name: 'igx-stepper';
     $switch-schema: ();
 
     @if map-has-key($schema, $name) {
@@ -43,10 +41,14 @@
     @return extend($theme, (
         name: $name,
         palette: $palette,
+
         step-hover-background: $step-hover-background,
         title-color: $title-color,
         subtitle-color: $subtitle-color,
         incomplete-color: $incomplete-color,
+        current-color: $current-color,
+        step-line: $step-line,
+        complete-step-line: $complete-step-line,
     ));
 }
 
@@ -59,6 +61,9 @@
 
     $variant: map-get($theme, variant);
 
+    $dashed-border: #fff;
+    $dashed-border-size: rem(20px) rem(1px);
+
     $left: if-ltr(left, right);
     $right: if-ltr(right, left);
 
@@ -72,7 +77,6 @@
     %stepper-display {
         flex-direction: column;
         width: 100%;
-        overflow: hidden;
     }
 
     %igx-stepper__header {
@@ -81,37 +85,55 @@
     }
 
     %igx-stepper__body {
-        overflow: hidden;
         position: relative
     }
 
+    %stepper-display,
+    %igx-stepper__body,
+    %igx-stepper__step-header,
+    %igx-stepper__title-wrapper {
+        overflow: hidden;
+    }
+
     %igx-stepper__step {
         position: relative;
         flex-direction: column;
         align-content: center;
         justify-content: center;
+        align-self: flex-start;
 
         &:last-of-type {
-            &::before {
-                display: none;
+            %igx-stepper__step-content-wrapper {
+                &::before {
+                    display: none;
+                }
             }
         }
     }
 
     %igx-stepper__step-header {
-        padding: rem(24px);
         display: flex;
-        align-content: center;
+        align-items: center;
+        padding: rem(24px);
+        position: relative;
+
+        igx-icon,
+        igx-avatar,
+        igx-badge,
+        igx-circular-bar,
+        [igxbutton] {
+            max-height: rem(24px);
+            max-width: rem(24px);
+        }
 
         &:hover {
-            //background: --var($theme, 'title-color');
-            background: rgba(255, 255, 255, .1);
+            background: --var($theme, 'step-hover-background');
         }
     }
 
-    %igx-stepper__step--active {
+    %igx-stepper__step--current {
         %igx-stepper__step-icon {
-            color: #4dff12;
+            color: --var($theme, 'current-color');
         }
     }
 
@@ -131,21 +153,6 @@
         cursor: default;
     }
 
-    %igx-stepper__step-content {
-        margin-#{$left}: rem(36px);
-        position: relative;
-
-        &::before {
-            content: '';
-            position: absolute;
-            top: rem(-16px);
-            bottom: rem(-16px);
-            #{$left}: rem(0);
-            width: rem(1px);
-            background: #999;
-        }
-    }
-
     %igx-stepper__body-content {
         display: block;
         position: absolute;
@@ -160,7 +167,7 @@
         z-index: -1;
     }
 
-    %igx-stepper__step-content,
+    %igx-stepper__step-content-wrapper,
     %igx-stepper__body-content {
         padding: 0 rem(24px) rem(24px) rem(24px);
     }
@@ -170,8 +177,23 @@
         position: relative;
     }
 
+    %igx-stepper__step-content-wrapper {
+        margin-#{$left}: rem(36px);
+        position: relative;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: rem(-16px);
+            bottom: rem(-16px);
+            #{$left}: rem(0);
+            width: rem(1px);
+            background: #999;
+        }
+    }
+
     %igx-stepper__step-icon {
-        color: #09f;
+        color: --var($theme, 'incomplete-color');
         margin-#{$right}: rem(12px);
     }
 
@@ -185,16 +207,14 @@
 
     %igx-stepper__title-wrapper {
         width: 100%;
-        overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
         min-width: rem(50px);
     }
 
     %igx-stepper__title {
-        color: #fff;
+        color: --var($theme, 'title-color');
         text-overflow: ellipsis;
-        overflow: hidden;
     }
 
     %igx-stepper__title--top {
@@ -211,23 +231,22 @@
         }
 
         %igx-stepper__step {
+            position: relative;
+            overflow: hidden;
             flex-direction: row;
             flex-grow: 1;
 
-            &::after {
+            &::after,
+            &::before {
                 content: '';
                 width: auto;
-                height: 1px;
                 flex: 1;
-                top: rem(-13px);
+                top: rem(36px);
                 position: relative;
-                align-self: center;
-                background: #999;
+                border-top: rem(1px) solid --var($theme, 'step-line');
             }
 
             &:last-of-type {
-                flex-basis: 0;
-
                 %igx-stepper__step-header::after,
                 &::after {
                     display: none;
@@ -235,7 +254,8 @@
             }
 
             &:first-of-type {
-                %igx-stepper__step-header::before {
+                %igx-stepper__step-header::before,
+                &::before {
                     display: none;
                 }
             }
@@ -244,11 +264,9 @@
         %igx-stepper__step-header {
             display: flex;
             flex-direction: column;
-            justify-content: center;
+            justify-content: flex-start;
             align-items: center;
-            position: relative;
             padding: rem(24px) rem(32px);
-            margin: 0 rem(8px);
             cursor: pointer;
 
             &::before,
@@ -256,8 +274,7 @@
                 top: rem(36px);
                 content: '';
                 position: absolute;
-                height: rem(1px);
-                background: #999;
+                border-top: rem(1px) solid --var($theme, 'step-line');
                 width: calc(50% - 16px);
             }
 
@@ -279,6 +296,10 @@
         %igx-stepper__step-icon {
             margin: 0;
         }
+
+        %igx-stepper__step-content-wrapper {
+            text-align: center;
+        }
     }
 }
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_stepper.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_stepper.scss
index 50b152af17e..34cae3b34ca 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_stepper.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_stepper.scss
@@ -26,7 +26,19 @@ $_light-stepper: (
 
     incomplete-color: (
         igx-color: ('grays', 400)
-    )
+    ),
+
+    current-color: (
+        igx-color: ('primary', 500)
+    ),
+
+    step-line: (
+        igx-color: ('grays', 200)
+    ),
+
+    complete-step-line: (
+        igx-color: ('grays', 900)
+    ),
 );
 
 /// Generates a fluent stepper schema.
diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss
index c066145e58b..37a12ac5c8f 100644
--- a/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss
@@ -33,6 +33,7 @@
 @import '../components/slider/slider-theme';
 @import '../components/snackbar/snackbar-theme';
 @import '../components/switch/switch-theme';
+@import '../components/stepper/stepper-theme';
 @import '../components/tabs/tabs-theme';
 @import '../components/time-picker/time-picker-theme';
 @import '../components/toast/toast-theme';
diff --git a/projects/igniteui-angular/src/lib/stepper/igx-stepper.component.ts b/projects/igniteui-angular/src/lib/stepper/igx-stepper.component.ts
index 118342dd043..e327003b991 100644
--- a/projects/igniteui-angular/src/lib/stepper/igx-stepper.component.ts
+++ b/projects/igniteui-angular/src/lib/stepper/igx-stepper.component.ts
@@ -4,7 +4,7 @@ import {
     AfterViewInit, Component, HostBinding, OnDestroy, OnInit,
     Input, Output, EventEmitter, ContentChildren, QueryList, ElementRef, NgModule
 } from '@angular/core';
-import { IgxCarouselComponentBase } from 'igniteui-angular';
+import {IgxCarouselComponentBase, IgxRippleModule} from 'igniteui-angular';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { growVerIn, growVerOut } from '../animations/grow';
@@ -245,7 +245,8 @@ export class IgxStepperComponent extends IgxCarouselComponentBase implements OnI
 
 @NgModule({
     imports: [
-        CommonModule
+        CommonModule,
+        IgxRippleModule
     ],
     declarations: [
         IgxStepComponent,
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
index 99dadc24335..67289c10a5f 100644
--- a/projects/igniteui-angular/src/lib/stepper/step/igx-step.component.html
+++ b/projects/igniteui-angular/src/lib/stepper/step/igx-step.component.html
@@ -8,7 +8,7 @@
     </div>
 </ng-template>
 
-<div class="igx-stepper__step-header" [ngClass]="stepHeaderClasses" (click)="onPointerDown($event)">
+<div class="igx-stepper__step-header" igxRipple [ngClass]="stepHeaderClasses" (click)="onPointerDown($event)">
     <ng-content select='[igxStepIcon]'></ng-content>
     <div class="igx-stepper__title-wrapper">
         <ng-container *ngTemplateOutlet="defaultLabel"></ng-container>
@@ -16,5 +16,8 @@
 </div>
 
 <ng-container *ngIf="!isHorizontal">
-    <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
+    <div class="igx-stepper__step-content-wrapper">
+        <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
+    </div>
 </ng-container>
+
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
index 34c83a26bd7..654f7b56d52 100644
--- a/projects/igniteui-angular/src/lib/stepper/step/igx-step.component.ts
+++ b/projects/igniteui-angular/src/lib/stepper/step/igx-step.component.ts
@@ -312,7 +312,7 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements OnInit, A
 
     public get stepHeaderClasses() {
         if (this.active) {
-            return 'igx-stepper__step--active';
+            return 'igx-stepper__step--current';
         }
         if (this.disabled) {
             return 'igx-stepper__step--disabled';
diff --git a/src/app/stepper/stepper.sample.html b/src/app/stepper/stepper.sample.html
index b3c7887d8b7..93694906c06 100644
--- a/src/app/stepper/stepper.sample.html
+++ b/src/app/stepper/stepper.sample.html
@@ -3,12 +3,12 @@
     <!-- <igx-buttongroup [values]="stepTypes" (selected)="toggleStepTypes($event)"></igx-buttongroup> -->
     <!-- <igx-buttongroup [values]="labelPositions" (selected)="toggleLabelPos($event)"></igx-buttongroup> -->
     <button igxButton="outlined" (click)="changeOrientation()">Change Orientation</button>
-    <div>
+    <div class="sample-actions__btg">
         <p>Vertical Animation Settings</p>
         <igx-buttongroup [values]="verticalAnimations" (selected)="toggleVerticalAnimations($event)">
         </igx-buttongroup>
     </div>
-    <div>
+    <div class="sample-actions__btg">
         <p>Horizontal Animation Type</p>
         <igx-buttongroup [values]="horizontalAnimationTypes" (selected)="toggleHorizontalAnimations($event)">
         </igx-buttongroup>
@@ -29,19 +29,24 @@
     </igx-step>
 
     <igx-step #step2 [skip]="true" (activeChange)="activeStepChange($event)">
-        <igx-icon igxStepIcon>calendar_today</igx-icon>
+        <igx-circular-bar
+            igxStepIcon
+            [animate]="false"
+            [indeterminate]="true"
+            [textVisibility]="false"
+        ></igx-circular-bar>
         <label igxStepLabel>Step No 2</label>
         <igx-date-picker></igx-date-picker>
     </igx-step>
 
     <igx-step #step3 [disabled]="true" (activeChange)="activeStepChange($event)">
-        <igx-icon igxStepIcon>alarm</igx-icon>
+        <igx-avatar igxStepIcon src="https://www.infragistics.com/angular-demos/assets/images/men/1.jpg" roundShape="true"></igx-avatar>
         <label igxStepLabel>Step No 3</label>
         <igx-time-picker></igx-time-picker>
     </igx-step>
 
     <igx-step #step4 [active]="true" (activeChange)="activeStepChange($event)">
-        <igx-icon igxStepIcon>check_circle</igx-icon>
+        <igx-badge icon="check" igxStepIcon></igx-badge>
         <label igxStepLabel>Step No 4</label>
         <igx-select [placeholder]="'Pick One'">
             <igx-select-item [value]="'Apple'" [disabled]="true">Apple</igx-select-item>
@@ -52,7 +57,9 @@
     </igx-step>
 
     <igx-step #step5 (activeChange)="activeStepChange($event)">
-        <igx-icon igxStepIcon>delete</igx-icon>
+        <button igxStepIcon igxButton="icon">
+            <igx-icon>delete</igx-icon>
+        </button>
         <label igxStepLabel>Step No 5</label>
         <div>
             <button igxButton>Click me</button>
diff --git a/src/app/stepper/stepper.sample.scss b/src/app/stepper/stepper.sample.scss
index ca559f25086..0502b0b7f1f 100644
--- a/src/app/stepper/stepper.sample.scss
+++ b/src/app/stepper/stepper.sample.scss
@@ -2,10 +2,19 @@
     margin: 20px 0;
     display: flex;
     gap: 25px;
-}
 
-::ng-deep {
-    .igx-button-group {
+    p {
+        margin-top: 0;
+        margin-bottom: 4px;
+        font-size: 14px;
+    }
+
+    button {
+        align-self: center;
+    }
+
+    &__btg {
         width: 250px;
     }
 }
+