fix(stepper): prevent content shift in vertical stepper - 20.1.x (#16833)

Author: georgianastasov

projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss

@@ -350,6 +350,7 @@
 
     %igx-stepper__step-content-wrapper {
         margin-inline-start: $v-line-indent;
+        padding-inline-start: $v-line-indent;
         position: relative;
         min-height: if($variant == 'indigo', rem(24px), rem(32px));
 
@@ -364,12 +365,6 @@
         }
     }
 
-    [aria-selected='true'] {
-        %igx-stepper__step-content-wrapper {
-            padding-inline-start: $v-line-indent;
-        }
-    }
-
     @if $variant == 'indigo' {
         [aria-selected='true'] {
             %igx-stepper__step-content-wrapper {

projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts

@@ -738,6 +738,32 @@ describe('Rendering Tests', () => {
             expect(Math.abs(width - height)).toBeLessThan(1.5);
             expect(Math.abs(width - parseFloat(minWidth))).toBeLessThan(1.5);
         }));
+
+        it('should not shift step content horizontally when navigating between steps in vertical mode', fakeAsync(() => {
+            const indicatorFix = TestBed.createComponent(IgxStepperIndicatorNoShrinkComponent);
+            indicatorFix.detectChanges();
+            const indicatorStepper = indicatorFix.componentInstance.stepper;
+
+            const getContentWrapperStyles = (stepIndex: number) => {
+                const contentWrapper = indicatorStepper.steps[stepIndex].nativeElement.querySelector('.igx-stepper__step-content-wrapper') as HTMLElement;
+                const styles = window.getComputedStyle(contentWrapper);
+                return {
+                    paddingInlineStart: styles.paddingInlineStart || styles.paddingLeft,
+                    marginInlineStart: styles.marginInlineStart || styles.marginLeft
+                };
+            };
+
+            const step0ActiveStyles = getContentWrapperStyles(0);
+
+            indicatorStepper.navigateTo(1);
+            indicatorFix.detectChanges();
+            tick(500);
+
+            const step0InactiveStyles = getContentWrapperStyles(0);
+
+            expect(step0InactiveStyles.paddingInlineStart).toBe(step0ActiveStyles.paddingInlineStart);
+            expect(step0InactiveStyles.marginInlineStart).toBe(step0ActiveStyles.marginInlineStart);
+        }));
     });
 
     describe('Keyboard navigation', () => {