Stepper text in current state visual issue

[Olivier]

On the stepper component, the text below doesn't follow the specification for the "current" state.
I've specified bold for the text and weight 700 but the preview doesn't display the change (the 3rd step on screenshot)
Same during integration ...

In the meantime, It's not really clear at first glance which item (step? step link?) to custom to modify the text under the step indicator...

thanks

[Nick Iliev]

Hello Olivier,

I've provided guidance about the Stepper styles in our private thread. For added visibility, I am also reposting the instructions here.

To change the text properties of the current step, use the "Stepper > Current Step > Normal" template and drill down to the "(span) Text" component part.

Please note that changing the styles will only affect steps created through text and not those that use SVG icons. In your screenshot, you're testing the third step, which features an SVG icon (specifically an icon called 'success' that appears when the Stepper performs validation). The properties of the SVG icon are not linked to the font-weight property of the text, meaning you cannot adjust the font weight for validated steps (success and error) while also displaying an SVG icon. Instead, you can modify the Size property within the "... Step > Success > (span) Icon Wrap" component to alter the appearance of the rendered SVG icon (see the screenshot for reference).

To modify the text under the step indicator, use the ".. Step > Normal > (a) Step Link" component part (demonstrated below).

For your convenience, I've created the following CodeSandbox application that demonstrates the above.

https://codesandbox.io/p/sandbox/gallant-carlos-vtj58r 

 

Regards,
Nick Iliev
Progress Telerik