Refactor and improve the Toast utility

[endigo9740]

The store queue we have now fully supports this, we're just not taking advantage of it currently. The idea is toast messages would stack in some fashion, like so. Though I'm open to other suggestions!

NOTE: don't forget a11y when implementing this!

[salisshuaibu11]

Why do you prefer it this way instead of stacking them on top of each other, though the UI is cool, in the end, the toast is still going to disappear after some time. But I think we can utilize the two by allowing the user to opt for the one he wants to use.

In the case of notifications, we can use the store queue just like the way this reminder is functioning, but for things like deleting, creating something e.t.c we can use normal toast. what do you think about it?

[endigo9740]

I haven't settled on any particular UI or layout yet. I'll dive deeper into this once I get to this ticket, which should be later this week. Just wanted to show an example of what's possible.

in the end, the toast is still going to disappear after some time

The length of time they display can be adjusted, and there's setting to persist until dismissed. So it is possible for them to queue up. We need to handle that display when this occurs, or multiple come in at once.

[salisshuaibu11]

i came across this in twitter:

https://twitter.com/blvdmitry/status/1569772945702010881?s=20&t=oYVk5qc9u7HD8b-2Q6X2UQ

[endigo9740]

@salisshuaibu11 This is great! I like that a lot. It's more of what I had in mind for sure.

[endigo9740]

I've made a bit of progress on this. It now allows for multiple to show vertically stacked, and also allows for custom background color per toast.

Still working on some timeout bugs and the 3D stacked effected. But will return to this later!

[salisshuaibu11]

Nice work

[endigo9740]

Reference for myself: https://twitter.com/chriscoyier/status/1584564243814551552

[kimjunsung04]

Feature request: custom button text.

[endigo9740]

A draft PR has been started if anyone wishes to test this out:

• Toast refactor #510

This includes a number of improvements:

• Allow for additional positions
• Enter/leave animations are based on the position
• Supports display of multiple toasts at once
• However, there's a max number possible (configured via the max prop
• Has more and better style adjustments

Still more to do, but here's some previews.

[endigo9740]

I've also pushed a handful of updates to the Toasts PR:

• Added support for HTML within message and action labels
• I've rebuilt portions of the Toast store to better support autohide (this was broken with multiple shown)
• Renamed the ToastSettings type and moved it to it's own types.ts file to follow convention
• Updated all portions of the Doc where toasts are used, including updating index.ts
• Added support for classes to customize one-off toast messages via the data object
• I've wrote the Usage instructions, follow the simpler structure used for Dialogs
• Updated the tests to get back in a working state

A couple notes of what's not present:

1. We do not have a means to animate a particular toast on dismiss. out:transition works, but not as expected due to the fact that the queue isn't a normal array, but a store value that happens to be an array. Svelte is looking for an update to the individual array item, but when the store updates it replaces the ENTIRE array, which throws off the animation. I'd welcome suggestions to work around this.
2. Ideally the toast should default to tertiary rather than accent color, but this doesn't work well due to the test color issues we're aware of with buttons, etc. When we introduce the on-{x} token styles for text color I'll look to change this.