feat(components/molecule/stepper): improve compressed style UX

[jordevo]

molecule/stepper

🔍 Show

Making step label's text flow through the component:

Also fixing for vertical disposition:

TASK:

Description, Motivation and Context

Types of changes

• 🪲 Bug fix (non-breaking change which fixes an issue)
• ✨ New feature (non-breaking change which adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
• 🧾 Documentation
• 📷 Demo
• 🧪 Test
• 🧠 Refactor
• 💄 Styles
• 🛠️ Tool

Screenshots - Animations

[github-actions]

	STATEMENTS	BRANCHES	FUNCTIONS	LINES
≍	≍ 0＝	≍ 0.03↑	≍ 0＝	≍ 0＝
%	76.17	63.58	65.72	77.94
ABS	3335 / 4378	1968 / 3095	648 / 986	3163 / 4058

[github-actions]

	STATEMENTS	BRANCHES	FUNCTIONS	LINES
≍	≍ 0＝	≍ 0.03↑	≍ 0＝	≍ 0＝
%	76.17	63.58	65.72	77.94
ABS	3335 / 4378	1968 / 3095	648 / 986	3163 / 4058

[andresin87]

Does it work in vertical mode?

[jordevo]

@andresin87 @giodelabarrera thanks for reviewing the PR... turns out the issue with the label when the component had the design='COMPRESSED' set came from the way the demo is generating the labels...

https://github.com/SUI-Components/sui-components/blob/master/components/molecule/stepper/demo/articles/ArticleDesignAlignment.js#L26-L28

so nothing to worry about that... will remove those changes

[github-actions]

	STATEMENTS	BRANCHES	FUNCTIONS	LINES
≍	≍ 0＝	≍ 0＝	≍ 0＝	≍ 0＝
%	76.17	63.5	65.72	77.93
ABS	3334 / 4377	1973 / 3107	648 / 986	3161 / 4056

[github-actions]

	STATEMENTS	BRANCHES	FUNCTIONS	LINES
≍	≍ 0＝	≍ 0＝	≍ 0＝	≍ 0＝
%	76.17	63.5	65.72	77.93
ABS	3334 / 4377	1973 / 3107	648 / 986	3161 / 4056

[jordevo]

Does it work in vertical mode?

it works now! :)

[github-actions]

	STATEMENTS	BRANCHES	FUNCTIONS	LINES
≍	≍ 0＝	≍ 0.01↑	≍ 0＝	≍ 0＝
%	76.17	63.51	65.72	77.93
ABS	3334 / 4377	1976 / 3111	648 / 986	3161 / 4056