feat(@vtmn/css): be able to choose the duration of display for snackbar (& toast)

[Z26PGOBL]

Describe the bug

We are implementing the snackbar in our application and for accessibility purpose our UI/UX team recommended that the snackbar should be displayed for 8 seconds. We see that the duration is hardcoded in the --vtmn-animation_overlay custom property of animations design-tokens so we manage to override it, but we think it would be good to be able to set it more "gracefully".

Steps to reproduce

1. Go to https://decathlon.github.io/vitamin-web/@vtmn/showcase-css/?path=/docs/components-overlays-snackbar--demo
2. Click on a demo button
3. See the snackbar appear and disappear after about 5 seconds

Expected behavior We should be able to set the duration time

[lauthieb]

Hello Pauline,

Thanks for this issue and your proposition.

Normally, you can totally control the display duration of the VtmnSnackbar on your own. Here is an example I made with @vtmn/react: https://stackblitz.com/edit/vitejs-vite-rnupye?file=src%2FApp.jsx

[Z26PGOBL]

it works if you put a value smaller than 4,5 second, but if you put 8000 as timeout value the snackbar will still disappear after 4,5 second and not 8. Furthermore, with 1s as time out, the fade-out and vanish animation are not launched

[lauthieb]

Hi @Z26PGOBL, oh you're right, sorry! That's a good catch. We take this feedback for our new implementation of Vitamin (currently inner source) & I've put this issue with "community" label. Feel free to contribute, I'll be there to review. Thank you!