fix(stepper): prevent step indicator from shrinking with long titles - 20.1.x (#16820)

Author: georgianastasov

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

@@ -203,6 +203,7 @@
         font-size: rem(12px);
         height: $indicator-size;
         width: $indicator-size;
+        min-width: $indicator-size;
         white-space: nowrap;
         border-radius: var-get($theme, 'border-radius-indicator');
         color: var-get($theme, 'indicator-color');
@@ -633,10 +634,6 @@
 
         %igx-stepper__step--start,
         %igx-stepper__step--end {
-            %igx-stepper__step-indicator {
-                flex: 1 0 auto;
-            }
-
             %igx-stepper__step-header {
                 @if $variant != 'fluent' {
                     padding: calc(#{$step-header-padding} / 2);

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

@@ -83,7 +83,8 @@ describe('Rendering Tests', () => {
                 imports: [
                     NoopAnimationsModule,
                     IgxStepperSampleTestComponent,
-                    IgxStepperLinearComponent
+                    IgxStepperLinearComponent,
+                    IgxStepperIndicatorNoShrinkComponent
                 ]
             }).compileComponents();
         })
@@ -720,6 +721,23 @@ describe('Rendering Tests', () => {
             stepper.horizontalAnimationType = 'fade';
             testAnimationBehavior('fade', fix, false);
         }));
+
+        it('should not shrink the step indicator in vertical orientation when titlePosition="end" and the title is very long', fakeAsync(() => {
+            const fixture = TestBed.createComponent(IgxStepperIndicatorNoShrinkComponent);
+            fixture.detectChanges();
+            tick();
+
+            const stepperInstance = fixture.componentInstance.stepper;
+            const indicator = stepperInstance.steps[0].nativeElement.querySelector(`.${STEP_INDICATOR_CLASS}`) as HTMLElement;
+
+            const { minWidth } = getComputedStyle(indicator);
+            const { width, height } = indicator.getBoundingClientRect();
+
+            expect(minWidth).not.toBe('0px');
+            expect(minWidth).not.toBe('auto');
+            expect(Math.abs(width - height)).toBeLessThan(1.5);
+            expect(Math.abs(width - parseFloat(minWidth))).toBeLessThan(1.5);
+        }));
     });
 
     describe('Keyboard navigation', () => {
@@ -1358,3 +1376,32 @@ export class IgxStepperSampleTestComponent {
 export class IgxStepperLinearComponent {
     @ViewChild(IgxStepperComponent) public stepper: IgxStepperComponent;
 }
+
+@Component({
+    template: `
+        <div>
+            <igx-stepper #stepper [orientation]="'vertical'" [titlePosition]="'end'">
+                <igx-step [active]="true">
+                    <span igxStepTitle>{{ longTitle }}</span>
+                    <div igxStepContent>Content</div>
+                </igx-step>
+                <igx-step>
+                    <span igxStepTitle>Short</span>
+                    <div igxStepContent>Content</div>
+                </igx-step>
+            </igx-stepper>
+        </div>
+    `,
+    imports: [
+        IgxStepperComponent,
+        IgxStepComponent,
+        IgxStepTitleDirective,
+        IgxStepContentDirective
+    ]
+})
+export class IgxStepperIndicatorNoShrinkComponent {
+    @ViewChild(IgxStepperComponent) public stepper: IgxStepperComponent;
+
+    public longTitle =
+        'This is a very very very very very very very very very very very very very very very very very very very very very long step title that should not shrink the indicator';
+}