fix(@vtmn/css, @vtmn/react, @vtmn/vue, @vtmn/svelte): linear progressbar animation

[thibault-mahe]

Changes description

• Rework linear progressbar with an animated progress
• "Boyscout" refacto on the progressbar: isolating aria-props, caching redundant variables & booleans, ...

Context

• The linear progress bar didn't have an animated progress like the circular one has.
• Close #1234

Checklist

• [x] Make sure you are requesting to pull a topic/feature/bugfix branch. Please, don't request directly from your main!
• [x] Check commits & PR names matches our requested structure. It must follow the https://www.conventionalcommits.org pattern.
• [x] Check your code additions will fail neither code linting checks.
• [x] I have reviewed the submitted code.
• [x] I have tested on related showcases.
• [x] If it includes design changes, please ask for a review with a core team designer.

Does this introduce a breaking change?

• No

[CLAassistant]

All committers have signed the CLA.

[thibault-mahe]

Regarding last commit on "harmonize showcases", here some context :

• The SVG takes the size of its given width and height properties (if provided), or the size of its most direct parent with these properties;
• if no size is provided, the SVG can default to a 300 x 150 size . The consensus is not applied by all browsers, some (Firefox) let the svg taking up all the available space (see https://svgwg.org/specs/integration/#svg-css-sizing).
• This last point means that the progressbar showcases are different from one browser to another. To harmonize them I inserted the showcased component in a div with a width of 300px as it was already done for the Vue component.

[thibault-mahe]

Thanks for your reviews @lauthieb @Tlahey, I made some changes accordingly:

• progressbar's animation is now made with a custom property set on the HTML/JSX, and the variable is then directly used in the css of the component (in packages/sources/css/...progressbar/...)
• the labelId has now a default undefined value to avoid using a ternary when its value is used
• progressbar state boolean and ariaProps are now put in cache inside the setup constructor in Vue component (similar to the React one)
• In Svelte, I added the class vtmn-progressbar_variant--linear on linear component. It was missing (the class is set on both React and Vue components) and is now needed for the CSS. It might be a breaking change 😬 Can you check on this and tell me @Tlahey please ?

Thanks guys!

[lauthieb]

Hi @Tlahey, can you please check again? Thanks in advance :)

[Tlahey]

@thibault-mahe thanks for your enhancement ! 🤩 I suggest you littles changes on your PR, I'm available to discuss :)

[thibault-mahe]

Last commit fixes:

• removing "unset" value set on component. The default value is then directly managed by the CSS. cc @Tlahey
• visually hide the indicator stroke when the progress is null. This one is manage with a scale value set to 0, it is the simpler and more elegant solution I came with. What do you think @GaspardMathon ?

Hi @romuleald, feel free to review this changes as well if you want to :)