Stepper: Discrepancies with WC when having a long title/subtitle

[RivaIvanova]

Description

Example text:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

1. Step title/subtitle size

Horizontal mode, titlePosition top/bottom

Horizontal mode, titlePosition start/end

• In both cases, the Angular step title is quite longer compared to the WC one.

2. Missing ellipses

Vertical mode, titlePosition top/bottom - There are no ellipses at the end of the text of the Angular step title. With titlePosition start/end, there are.

3. Angular steps can get hidden if the first step has very long text.

Horizontal mode. Set the example text as the first step title/subtitle.

• igniteui-angular version: master, 21.0.x, 20.1.x
• browser:

Steps to reproduce

1. Open the stepper demo http://localhost:4200/stepper and configure according to the above examples.

Result

In description.

Expected result

Aligned with the WC stepper.

Attachments

Attach a sample if available, and screenshots, if applicable.

[desig9stein]

@RivaIvanova @simeonoff

The root of the layout inconsistency stems from a layout mismatch: the Angular stepper relies on Flexbox, while our Web Components utilize CSS Grid. To achieve true visual parity, we would need to refactor the Angular component to a Grid-based layout.

Given the scale of this refactor, I’d like to discuss whether we should backlog it for a feature sprint.

[github-actions]

There has been no recent activity and this issue has been marked inactive.