Is there a way to take advantage of mavo's toast feature, for personal message

[GalinhaLX]

Hi

When deleting a value, mavo toasts an undo message:

<div class="mv-ui mv-message mv-deleted" aria-live="polite"><button type="button" class="mv-close mv-ui" title="Dismiss">×</button>slots deleted<button type="button">Undo</button></div>

Does Mavo provide a way , os is there a trick, to use that toast feature with an app?

Something like
<button mv-action="set(toast.message, 'my message to the world')">click me</button>

[DmitrySharabin]

This feature would be really nice to have. Welcome to the club of people who need it. There are plenty of us, including me. 😅

A long time ago, I used the Mavo messaging system in a very hacky way in this demo (I would not recommend doing it this way now). See mv-action on the buttons.

However, there is another workaround till we don't have this feature in the core. Originally found by @karger. You can see it in action in the Mavordle game. See these lines https://github.com/DmitrySharabin/mavo-wordle/blob/5d16973a3a41143dee1c911777d66f6950fce5fc/index.html#L47-L50 and https://github.com/DmitrySharabin/mavo-wordle/blob/5d16973a3a41143dee1c911777d66f6950fce5fc/index.html#L85 (for example) in the source code.

[LeaVerou]

Hey, we could add a message() or even toast() action. It should be pretty easy to implement!

[DmitrySharabin]

Hey @GalinhaLX, does this cover your usecases? Is there anything I'm missing?

@LeaVerou Could you please review the prototype?

[GalinhaLX]

Hi @DmitrySharabin

Wow! , that's very nice! thank you so much for this new function

Notes:

1. I found that it is limited to 3 stacked toasts (after that, the toasts are on top of each other, until the first ones disappear).
2. Close button covers text
3. One option I would suggest, is to add an option for toast position (top right, bottom right, top center...) natively, although this could probably be forced via CSS.
4. and last but not least, as per this good idea standardize colors in CSS #851 👍 a good opportunity to introduce custom properties for colors in mavo

[DmitrySharabin]

@GalinhaLX Based on your feedback, I made some improvements to the prototype. Thank you! 🙏🏻
Issues from 2 through 4 can indeed be solved with CSS. However, I added some progressive enhancements that will work as soon as the :has() selector is widely supported. Please keep in mind that this is just a prototype: it might not be included in the core and/or some names might change.

@LeaVerou Could please take a look at the prototype: I suggest adding a couple of changes to the Mavo.UI.Message class. It might be you'll find some of them appropriate to include in the core. There is still some room for improvement (e.g., custom properties names and class names). I'll be happy to iterate over it.

[LeaVerou]

I would suggest you make a plugin for this, it would be far easier to iterate on it like that and it means it's immediately useful to people.

In terms of API, I would suggest using something close_button as a param name instead of button, which could mean any button (e.g. OK). Not sure what an inline toast is supposed to be.

Semi-related, we should probably find a good web component for toasts and use that instead of reinventing the wheel.