Refine Stepper component

[pricop]

This PR changes the following on the BS6 stepper component:

• Adds support for custom font-sizes (now defaults to sm variant)
• Improves text alignment for horizontal steppers
• Improved the stepper line weight by making it slightly thinner
• Fixes gap between count bubble and text containers on horizontal steppers
• Fixes height for text containers overflowing in unwanted places on horizontal steppers
• Fixed RTL direction not displaying correctly
• Opens the possibility for some very eye candy steppers 😍

I've created a comment for each change, so please bear with me until the end 😅.

New font-size variable and new font-size default

---

Since the counter bubble is customizable via --stepper-size CSS var, it makes sense for the for a --stepper-font-size to be present as well.

This also changes the default font-size to -sm size for the counter inside the bubble.

This is the perfect example where we should use the -sm variant, because the progress bar & the bubble are visually supportive elements. It also makes the bubble feel slightly more relaxed.

Before

After

While subtle, when inspected on the screen, it makes a world of a difference.

[pricop]

Smaller track-size

Changing the --stepper-track-size to .125rem further relaxes the component by taking away the attention from the track itself, allowing bubbles and text to be more easily readable at a glance without feeling overcrowded.

The industry standard is 1px or 2px at max for regular font-size. For much larger font-sizes, one can increase it to 4px or whatever, but the default should be smaller.

As a result, the stepper tracker has been reduced from 4px down to 2px.

Before

After

For reference:

• Tailwind UI practices 2px width: https://tailwindcss.com/plus/ui-blocks/application-ui/navigation/progress-bars#component-4b1efed043d1ab5688c705f2e27524f3
• Material UI practices 1px width: https://material.angular.dev/components/stepper/overview
• Preline UI practices 1px width: https://preline.co/docs/stepper.html
• Flowbite UI practices 1px width: https://flowbite.com/docs/components/stepper/
• ReUI practices 1px width: https://reui.io/patterns/stepper

[pricop]

Fixed text row for horizontal steppers

Because .stepper-item had grid-template-rows property set to repeat(2, var(--stepper-size));, it would force the 2nd row (the text row) to be as big in height as the counter bubble, and since the text was horizontally centered, it would make the spacing not be consistent with that of a vertical stepper.

Before

After

Furthermore, this also fixes something extremely important. Horizontal steppers will always be fighting for space on more condensed UIs (e.g: half screen container), and if the text is too long, with the old code having a forced height that was matching the bubble's height, the text would not fit, so it would start overflowing outside the container.

Before

After

[pricop]

Text alignment on horizontal steppers

Adding align-items property set to start for horizontal steppers, makes the text always start at the top, regardless of whether other columns overflow to multiple lines or not, therefore the spacing will always be equal between the count bubble and the text.

Before

After

[pricop]

The best part

I saved the best part for the end 😅.

Since these changes don't limit us anymore to the height of the count bubble for the text container, we can now add help text, badge or any other type of decorations for the steps text, which imo is insanely helpful, as one could add a bit more information, without cluttering the UI.

Stepper with help text example:

Mark-up:

<ol class="stepper stepper-horizontal w-100">
  <li class="stepper-item active"><div><div class="fw-semibold">Create</div><div class="small fg-secondary">Create an account.</div></div></li>
  <li class="stepper-item active"><div><div class="fw-semibold">Confirm</div><div class="small fg-secondary">Confirm your email.</div></div></li>
  <li class="stepper-item"><div><div class="fw-semibold">Set-up</div><div class="small fg-secondary">Configure your profile.</div></div></li>
  <li class="stepper-item"><div><div class="fw-semibold">Complete</div><div class="small fg-secondary">Welcome aboard!</div></div></li>
</ol>

Stepper with badge and theme variant example

Mark-up:

<ol class="stepper stepper-horizontal w-100">
  <li class="stepper-item theme-success active"><div><div>Create account</div><div class="badge badge-subtle theme-success">Complete</div></div></li>
  <li class="stepper-item active"><div><div>Confirm email</div><div class="badge badge-subtle theme-primary">In-progress</div></div></li>
  <li class="stepper-item"><div><div>Update profile</div><div class="badge badge-subtle theme-secondary">Pending</div></div></li>
  <li class="stepper-item"><div><div>Finish</div><div class="badge badge-subtle theme-secondary">Pending</div></div></li>
</ol>

These could potentially even be included in the Documentation as an example on the variation section.

So for those more creative, this will also be an option, without having to change core Boostrap code to be able to achieve such results. 🙃

I did not made examples for vertical steppers, because for those there's always going to be decent space available to get creative.

[pricop]

Further improvement ideas

One last thing that perhaps you could change, since I'm not sure how or even if last active element should be targeted for this suggestion, but I strongly believe that the theme-color should change the color of the stepper line on the right side of the count bubble, not on the left side, except for the last active element, which should be gray on the right side.

Current

Even though the first step was "complete" by being marked with the success theme, the stepper line that goes towards the second step shows the primary color, which I feel it's off.

Improvement suggestion (I've photoshopped an example for you to have a look at).

And a few reference images:
https://dribbble.com/shots/14012793-Stepper-Components
https://dribbble.com/shots/26376029-Stepper-Component-Visual-Progress-Tracker
https://dribbble.com/shots/24355595-Popup-Vertical-Stepper

I'm yet to find one that colors the line on the left side.

Let me know what do you think.

[pricop]

RTL fix

Because of the usage of physical properties such as left, right, padding-left, the UI breaks when viewed in RTL.

I've added logical properties instead, and the stepper now displays correctly on both directions.

Before

After

Hopefully this was it. Waiting for feedback on everything 😁.

[mdo]

Looking great! I'd love to see the examples you have at #42165 (comment) in a new section called Complex Steppers or something like that. Feel free to to do in this PR or a follow-up, dealer's choice.

Sidebar: we have the /examples page and I want to rethink that for v6. Probably make it more akin to our regular docs pages or something, unsure what we'll have time for in 6.0 vs 6.x.

[pricop]

I've made a separate PR (#42174) for the Docs.

#42165 (comment) - what's your take on this? Do you think it should be changed so that the theme customizes the right side instead of the left side?

[pricop]

I've done it, this is the way it should work in my opinion.

If I reached "Step 3", then the lines leading to "Step 3" should be green, because the process leading to that step was complete.

Tested in all possible scenarios, including those where there could be gaps between "active" elements, when only first step is active, only the last step is active, RTL direction, etc.

Should be ready for merging 💪.

[mdo]

If I reached "Step 3", then the lines leading to "Step 3" should be green, because the process leading to that step was complete.

We could always look into gradients for stuff like this too :)

[pricop]

--stepper-gap set to high values such as 8rem breaks the horizontal lines, looking into it.

[pricop]

Yup, forgot to account for gap size when calcualting the width.

Fixed 🙃.

[pricop]

True, something like stepper-gradient class would be neat, however it would be rather complex to implement:

• Start and ending bubbles would need to right, and to left gradients for Horizontal Stepper, and to top and to bottom for Vertical Stepper.
• Middle lines would need radial gradients.
• Middle lines would need to be twice as long, so colors blend in properly.
• When there's a gap between active elements, would also require some dark magic to target those CSS selectors and apply the gradient in the proper direction(s).

Perhaps as a future update?

[pricop]

Went the extra mile and polished this up, so that both vertical and horizontal steppers now have the same capabilities.

• Added the ability to create "complex" vertical steppers (with assistive text or whatever decorators one wants)
• Added a new --stepper-text-gap var to control the space between text & bubble.
• Improved positioning by switching to logical attributes
• Fixed text becoming centered on both x and y axis when overflowing (prone on small screen displays)
• Fixed the track lines becoming disjointed when the text of a bubble was overflowing (prone on small screen displays)

Issues fixed

Before (notice the track lines disjointed as well as the text becoming centered when it overflows)

After (track lines now properly span across bubbles, and the text is always at the start when it overflows)

---

New feature (complex vertical stepper) 🔥

I'll also update the PR for Docs and switch one of the "Complex" examples to vertical mode, so that we display both variants in a complex state.

[mdo]

Rebased and made edits—once tests pass will merge. I've made steppers container-responsive instead of viewport-responsive. Also edited some docs and fixed the linter errors. @pricop You should double check you have the suggested extensions added for linting locally so your CI jobs don't fail for you :).