From 8690661355c3d3a347a9ca0804f4cc83d03866ff Mon Sep 17 00:00:00 2001 From: georgianastasov Date: Thu, 29 Jan 2026 10:50:26 +0200 Subject: [PATCH 1/3] fix(stepper): prevent step indicator from shrinking with long titles - 21.0.x --- .../components/stepper/_stepper-theme.scss | 4 ++ .../src/stepper/stepper.component.spec.ts | 53 ++++++++++++++++++- 2 files changed, 56 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/core/src/core/styles/components/stepper/_stepper-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/stepper/_stepper-theme.scss index 558489d3864..3662584753a 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/stepper/_stepper-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/stepper/_stepper-theme.scss @@ -408,6 +408,10 @@ align-items: center; //gap: $title-gap--horizontal; } + + %igx-stepper__step-indicator { + flex-shrink: 0; + } } %igx-stepper__step--start, diff --git a/projects/igniteui-angular/stepper/src/stepper/stepper.component.spec.ts b/projects/igniteui-angular/stepper/src/stepper/stepper.component.spec.ts index 5dfafc2feed..c6fd4a9bb3f 100644 --- a/projects/igniteui-angular/stepper/src/stepper/stepper.component.spec.ts +++ b/projects/igniteui-angular/stepper/src/stepper/stepper.component.spec.ts @@ -85,7 +85,8 @@ describe('Rendering Tests', () => { imports: [ NoopAnimationsModule, IgxStepperSampleTestComponent, - IgxStepperLinearComponent + IgxStepperLinearComponent, + IgxStepperIndicatorNoShrinkComponent ] }).compileComponents(); }) @@ -722,6 +723,27 @@ describe('Rendering Tests', () => { stepper.horizontalAnimationType = 'fade'; testAnimationBehavior('fade', fix, false); })); + + fit('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(); + fixture.detectChanges(); + + const cmp = fixture.componentInstance; + const stepperInstance = cmp.stepper; + + expect(stepperInstance.orientation).toBe(IgxStepperOrientation.Vertical); + expect(stepperInstance.titlePosition).toBe(IgxStepperTitlePosition.End); + + const indicator = stepperInstance.steps[0].nativeElement.querySelector(`.${STEP_INDICATOR_CLASS}`) as HTMLElement; + + expect(indicator).not.toBeNull(); + expect(getComputedStyle(indicator).flexShrink).toBe('0'); + + const { width, height } = indicator.getBoundingClientRect(); + expect(Math.abs(width - height)).toBeLessThan(1.5); + })); }); describe('Keyboard navigation', () => { @@ -1378,3 +1400,32 @@ export class IgxStepperSampleTestComponent { export class IgxStepperLinearComponent { @ViewChild(IgxStepperComponent) public stepper: IgxStepperComponent; } + +@Component({ + template: ` +
+ + + {{ longTitle }} +
Content
+ + + Short +
Content
+ + +
+ `, + 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'; +} From 0418327fe1342174d3015158d3de6838f1a60fbe Mon Sep 17 00:00:00 2001 From: georgianastasov Date: Thu, 29 Jan 2026 11:15:52 +0200 Subject: [PATCH 2/3] test(stepper): change fit to it for step indicator shrink test --- .../stepper/src/stepper/stepper.component.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/stepper/src/stepper/stepper.component.spec.ts b/projects/igniteui-angular/stepper/src/stepper/stepper.component.spec.ts index c6fd4a9bb3f..97ef1f9a0c3 100644 --- a/projects/igniteui-angular/stepper/src/stepper/stepper.component.spec.ts +++ b/projects/igniteui-angular/stepper/src/stepper/stepper.component.spec.ts @@ -724,7 +724,7 @@ describe('Rendering Tests', () => { testAnimationBehavior('fade', fix, false); })); - fit('should not shrink the step indicator in vertical orientation when titlePosition="end" and the title is very long', fakeAsync(() => { + 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(); From c438888b4ff827c66ed2bafa1f37ee713f24256c Mon Sep 17 00:00:00 2001 From: georgianastasov Date: Thu, 29 Jan 2026 17:18:32 +0200 Subject: [PATCH 3/3] fix(stepper): prevent indicator shrinking with min-width --- .../components/stepper/_stepper-theme.scss | 9 +-------- .../src/stepper/stepper.component.spec.ts | 16 ++++++---------- 2 files changed, 7 insertions(+), 18 deletions(-) diff --git a/projects/igniteui-angular/core/src/core/styles/components/stepper/_stepper-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/stepper/_stepper-theme.scss index 3662584753a..c203d40842a 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/stepper/_stepper-theme.scss +++ b/projects/igniteui-angular/core/src/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'); @@ -408,10 +409,6 @@ align-items: center; //gap: $title-gap--horizontal; } - - %igx-stepper__step-indicator { - flex-shrink: 0; - } } %igx-stepper__step--start, @@ -637,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); diff --git a/projects/igniteui-angular/stepper/src/stepper/stepper.component.spec.ts b/projects/igniteui-angular/stepper/src/stepper/stepper.component.spec.ts index 97ef1f9a0c3..a14cf858ca4 100644 --- a/projects/igniteui-angular/stepper/src/stepper/stepper.component.spec.ts +++ b/projects/igniteui-angular/stepper/src/stepper/stepper.component.spec.ts @@ -728,21 +728,17 @@ describe('Rendering Tests', () => { const fixture = TestBed.createComponent(IgxStepperIndicatorNoShrinkComponent); fixture.detectChanges(); tick(); - fixture.detectChanges(); - - const cmp = fixture.componentInstance; - const stepperInstance = cmp.stepper; - - expect(stepperInstance.orientation).toBe(IgxStepperOrientation.Vertical); - expect(stepperInstance.titlePosition).toBe(IgxStepperTitlePosition.End); + const stepperInstance = fixture.componentInstance.stepper; const indicator = stepperInstance.steps[0].nativeElement.querySelector(`.${STEP_INDICATOR_CLASS}`) as HTMLElement; - expect(indicator).not.toBeNull(); - expect(getComputedStyle(indicator).flexShrink).toBe('0'); - + 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); })); });