Wui 242 component stepper responsive

[jonathan-herbault]

DESCRIPTION

This Pr aims to update de stepper to be more responsive and not broken on little screen.

The different main changes are (https://linear.app/wttj/issue/WUI-242/component-or-stepper) :

• Stepper item can no longer take 2 lines.
• Stepper item and separator keep their size.
• Stepper correctly scroll horizontally.
• The Stepper item selected is centered (if possible on the center of the stepper)
• If the Stepper is scrolling, now show a fade (left or right). The fade should not appear if you are at 0% for the left or 100% for the right.

HOW TO TEST

Find the Stepper component.
Check that previous exemples are not broken.
A new exemple responsive has been added to demonstrate (and help to test) the responsive of the Stepper.

SCREENSHOTS / SCREEN RECORDINGS

Scroll Right fade:

Both scroll fade:

Scroll left fade :

ANIMATION:
https://github.com/user-attachments/assets/910eb84f-55b3-46c6-8781-09af7b5fcb1a

COMPATIBILITY

• Tested on Safari (desktop)
• Tested on Chrome (desktop)
• Tested on Firefox (desktop)
• Tested on mobile device sizes
• Tested on tablet device sizes
• Tested on IOS Safari (either device or simulator)

QA

• Thoroughly tested in local environment
• Added tests for all new features
• Added tests that considered edge cases

[linear]

WUI-242 COMPONENT | STEPPER

[github-actions]

👀 Visit Preview

[cnairi]

Could you please rebase @jonathan-herbault?
Guidelines are here to avoid massive conflics: https://wttj.slack.com/archives/C09CT2BSF0B/p1763989674754069?thread_ts=1763720141.002349&cid=C09CT2BSF0B

thanks

[jonathan-herbault]

Could you please rebase @jonathan-herbault? Guidelines are here to avoid massive conflics: https://wttj.slack.com/archives/C09CT2BSF0B/p1763989674754069?thread_ts=1763720141.002349&cid=C09CT2BSF0B

thanks

@cnairi sounds good now. And thx for the tips !

[Isaacmaamouche]

I think using the intersection observer to check for the first step item and its container left boundary (same for last item and right boundary) could be better for performance but that could mean a complete rework of what you did.
I can try giving it a shot in the coming week. For now, this is still great!

[theo-mesnil]

I think you can have a basic class for

content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 70px;
      pointer-events: none;
      z-index: 1;

Then have a class for each with

right: 0;
 background: linear-gradient(
        to left,
        var(--components-colors-stepper-color-background),
        transparent
      );

[theo-mesnil]

maybe root and wrapper can be switch name

[theo-mesnil]

We need to keep scrollbar, even if is not beautiful