twbs / bootstrap / 23226189956

94%

main: 96%

push

github

Refine Stepper component (#42165)

* Add stepper font size variable to tokens map

Since the `--stepper-size` container is customizable, it makes sense for the `font-size` to be as well, when using larger sizes, larger font size may also be required.

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

This is the perfect example where if we use the `-sm` variant, it makes the text feel more relaxed inside the bubble.

* Reduce stepper track size from 0.25rem to 0.125rem

This 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.

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

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

* Add align-items start to horizontal stepper

This will make the text to always start at the top, regardless of whether other bubbles have a multi-line text or not.

* Fixed horizontal stepper text gap & text overflow

Fixes the horizontal bottom row being fixed in height, causing the spacing between the count bubble and the text not be the same as intended (as the gap dictates), nor as its vertical stepper counterpart.

This also fixes the text overflowing outside fixed boundaries, causing it to move in places it shouldn't be.

* Refactor to use logical properties

Fixed RTL mode by making use of logical properties instead of physical ones.

* C... (continued)

902 of 1006 branches covered (89.66%)

Branch coverage included in aggregate %.

2654 of 2780 relevant lines covered (95.47%)

188.53 hits per line