fix(stepper): prevent content shift in vertical stepper - master

[georgianastasov]

Closes #16822

Additional information (check all that apply):

• Bug fix
• New functionality
• Documentation
• Demos
• CI/CD

Checklist:

• All relevant tags have been applied to this PR
• This PR includes unit tests covering all the new code (test guidelines)
• This PR includes API docs for newly added methods/properties (api docs guidelines)
• This PR includes feature/README.MD updates for the feature docs
• This PR includes general feature table updates in the root README.MD
• This PR includes CHANGELOG.MD updates for newly added functionality
• This PR contains breaking changes
• This PR includes ng update migrations for the breaking changes (migrations guidelines)
• This PR includes behavioral changes and the feature specification has been updated with them

[RivaIvanova]

I think all these calculations are unnecessary, or at least I don't see why they are needed. Let me know.
Can't this be achieved by removing the [aria-selected='true'] rule and setting the padding-inline-start: $v-line-indent; on %igx-stepper__step-content-wrapper? I saw that these aria-selected styles are related to this issue. The above suggestion seems to cover both cases, but test it across all themes as well.

[georgianastasov]

I think all these calculations are unnecessary, or at least I don't see why they are needed. Let me know. Can't this be achieved by removing the [aria-selected='true'] rule and setting the padding-inline-start: $v-line-indent; on %igx-stepper__step-content-wrapper? I saw that these aria-selected styles are related to this issue. The above suggestion seems to cover both cases, but test it across all themes as well.

The jump happens because the content wrapper uses padding: 16px, but when a step becomes active we override only padding-inline-start to $v-line-indent.

$v-line-indent is calculated (step-header-padding + indicator-size/2) and is typically not 16px so during navigation the start padding flips 16px - $v-line-indent, which causes the horizontal jitter.

My fix removes that state-based change by making the content offset constant: effectively the layout previously ended up as margin-start ($v-line-indent) + padding-start ($v-line-indent) when active, so the stable value is 2 * $v-line-indent. That’s why padding-inline-start: calc(#{$v-line-indent} * 2) is used, and the separator is repositioned with calc(#{$v-line-indent} - (#{$separator-size} / 2)) to keep it aligned with the indicator center.

I did try the suggested approach, and actually I started with something similar initially. While it can remove the jitter itself, it introduces a new visual regression: the whole step/content alignment shifts, so the stepper looks moved left/misaligned.

So the current fix is intentionally written this way because it: removes the layout shift, preserves the intended alignment (indicator center + separator + content), avoids introducing a new visual issue in this configuration.

[RivaIvanova]

I am not able to reproduce the left shifting/misalignment. I tested with the sample in the issue.

[georgianastasov]

I am not able to reproduce the left shifting/misalignment. I tested with the sample in the issue.

You’re right. I reviewed my earlier attempt and I did make a mistake: I removed margin-inline-start: $v-line-indent and left only padding-inline-start: $v-line-indent. That’s what caused the step/content block to look shifted/misaligned in my screenshot.

I re-tested. I remove the [aria-selected='true'] rule and set padding-inline-start: $v-line-indent directly on %igx-stepper__step-content-wrapper while keeping the existing margin-inline-start and it fixes the jitter without introducing the alignment regression.

So yes, we can go with the simpler change. I’ll implement it and push the update.