Show all toasts #5933
Show all toasts #5933
Conversation
|
Build successful! 🎉 |
There was a problem hiding this comment.
Just one comment on the docs and a clarification question. I was surprised that we couldn't just keep everything the same on main and just set the priority of the toasts being added by the ToastContainer to the same value but I see you have changes here to flip it so that non prioritized toasts are added to the bottom instead of the top of the stack (hence your question at standup haha). Didn't realize it would involve changes in useToastState though, but it seems like an aria implementation with toasts with priorities set still work, though I guess a non-prioritized toast stack would now follow our bottom to top stack order now...
|
|
||
| this.visibleToasts = prevToasts.concat(toasts).sort((a, b) => b.priority - a.priority); |
There was a problem hiding this comment.
So technically this updateVisibleToast function would work even if multiple toasts were being added/removed at the same time but now we use an index value so it assumes that we are only adding/removing one at a time right? I was a bit concerned but I guess the add/remove have always only supported adding one at a time anyways. Lemme know if I'm following these changes correctly
There was a problem hiding this comment.
The stately API currently exposes add, remove, close of one item at a time. When I add a whole bunch with five second timeouts quickly or try to close them all with the close button this change works.
The reason this code was modified is because it was moving closed and removed Toasts to the bottom of the visible queue then doing the exit animation. When you have one item showing and being removed that works, but with multiple visible items and one is removed, the removed item jumps to the bottom of the visible list. We need to keep the item being removed in the current position.
|
Build successful! 🎉 |
I expected requests for additional animations to come in via this PR review or in a testing session. |
|
Build successful! 🎉 |
|
## API Changes
unknown top level export { type: 'any' } |
| @@ -58,7 +58,7 @@ Then, queue a toast from anywhere: | |||
|
|
|||
| Toasts are triggered using one of the methods of <TypeLink links={docs.links} type={docs.exports.ToastQueue} />. A <<TypeLink links={docs.links} type={docs.exports.ToastContainer} />> element must be rendered at the root of your app in order to display the queued toasts. | |||
|
|
|||
| Toasts are shown according to a priority queue, depending on their variant. Actionable toasts are prioritized over non-actionable toasts, and errors are prioritized over other types of notifications. Only one toast is displayed at a time. See the [Spectrum design docs](https://spectrum.adobe.com/page/toast/#Priority-queue) for full information on toast priorities. | |||
| Toasts are shown according to the order they are added, with the most recent toast appearing at the bottom of the stack. Please use Toasts sparingly, see [Spectrum design docs](https://spectrum.corp.adobe.com/page/toast/#Too-many-toasts). | |||
There was a problem hiding this comment.
can't put corp links in public docs.
Closes
Do we want to add additional animations to this?
✅ Pull Request Checklist:
📝 Test Instructions:
Goto a Toast story and add a Toast.
🧢 Your Project:
RSP