Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Z26PGOBL opened this issue Sep 7, 2023 · 3 comments
Labels
community 👥 As we stopped improvements for this version of Vitamin, this issue needs to be done by the community enhancement 🚀 New feature or request

Comments

@Z26PGOBL
Copy link
Contributor

Z26PGOBL commented Sep 7, 2023

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

Capture d’écran 2023-09-07 à 15 44 19

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

@Z26PGOBL Z26PGOBL added the bug 🐛 Something isn't working label Sep 7, 2023
@lauthieb
Copy link
Member

lauthieb commented Sep 7, 2023

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

CleanShot 2023-08-23 at 15 57 48

@lauthieb lauthieb added enhancement 🚀 New feature or request community 👥 As we stopped improvements for this version of Vitamin, this issue needs to be done by the community and removed bug 🐛 Something isn't working labels Sep 7, 2023
@lauthieb lauthieb changed the title feat (@vtmn/css): be able to choose the duration of display for snackbar (& toast) feat(@vtmn/css): be able to choose the duration of display for snackbar (& toast) Sep 7, 2023
@Z26PGOBL
Copy link
Contributor Author

Z26PGOBL commented Sep 8, 2023

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
Copy link
Member

lauthieb commented Sep 8, 2023

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
community 👥 As we stopped improvements for this version of Vitamin, this issue needs to be done by the community enhancement 🚀 New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants