Toast Timeout

[crypnull]

Toasts are a really useful feature to show error and success messages to the user, I've noticed that if I want a toast to appear I need to add the active class to it, this works but makes the toast stay on screen forever which is quite annoying, I could instead also use ui("toast-selector", millisecondsToHide) but doing this to a dynamically created number of toasts would get messy, I purpose that toasts could have a timeout attribute which removes the need for adding the active class, if the timeout is missing and active is in the class it could keep current behaviour, in the example below the toast would appear and timeout after 3 seconds.

<div class="toast" id="toast" timeout="3000">
  <i>warning</i>
  <span>I'm a toast</span>
</div>

I also wanted to say thank you for responding so quickly to my other 2 issues regarding bugs, I am really starting to love Beercss and I am creating a few websites with it, I hope surch strong development continues! :)

[myrp-leonardo]

Hi, I don't understand the problem. Some points IMO:

1. When you add active class to your element, you need a js to do that. Why not use ui(...) directly at this moment?
2. Seems a bad UX practice have multiple toasts at same time. I think the framework not support this.
3. Add a timeout attribute seems against the logic of framework. data-ui is the only attribute that the framework has.
4. How about to add a default timeout for toasts?
5. Or maybe create a new helpers like 1s, 2s, 3s, 4s, 5s, 6s?

<div class="toast 3s">
  <i>warning</i>
  <span>I'm a toast</span>
</div>

How about that ☝️?

[crypnull]

I was not using Javascript to add active to the element. I think mulitple toasts can be useful in certian sitations such as notifying the user of mulitple things which timeout at different times depending on the severity. The timeout attribute was an example, it could even be data-timeout or just be a class. A default timeout for active HTML elements would also work. Helpers like that could also work.

In the meantime I through together a quick Javascript function to allow me to achive what I wanted for my own site using Laravel.

function createToast(message, timeout = 3000, background = "error", text = "any-text", position = "bottom") {
    const id = "toast-" + Date.now();
    const div = document.createElement("div");

    div.id = id;
    div.classList.add("toast", background, text, position);
    div.innerHTML = message;

    document.body.appendChild(div);

    ui("#" + id, timeout);
}

And on the Laravel side I do:

<script>
    document.addEventListener("DOMContentLoaded", function() {
        @if($errors->any())
            @foreach($errors->all() as $error)
                createToast("<span>{{$error}}</span>", 3000, "error");
            @endforeach
        @endif
    });
</script>

It's not the most elegant but it works for me for now.

[laurentpayot]

The active class should not be removed because of "non-dismissive" ~~toasts~~ snackbars, as the MD3 specs say:

Dismissive snackbars appear temporarily, and disappear on their own without requiring user input. Non-dismissive snackbars persist until the user takes an action or selects the close affordance.

[KicKerBNU]

Very good catch @laurentpayot agreed with the option of non-dismissive. I know that is not common use but could help on special cases

[leonardorafael]

We will close this issue by inactivity, fell free to reopen it.