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..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'); @@ -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); 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..a14cf858ca4 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,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', () => { @@ -1378,3 +1396,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'; +}