feat(opal): toasts stack like phone notifications
Merged
RA
6h ago+336+336+012345678901234567890123456789-80-80-01234567890123456789
Description
- New toasts come in at the top: the newest slides in at the top and pushes the others down.
- Overflow piles at the bottom: past 3 toasts, the oldest tuck behind the stack. The two newest piled toasts peek out as layered card edges, and a "+N more" count (an Opal
Tag) sits under them. - Leaving: a toast that times out or is dismissed slides off toward the end side (right in LTR, left in RTL) and fades while it keeps its slot. Then its space closes, and the next piled toast rises into the freed slot, in one motion. The stack never grows during this.
- Layering: toasts layer by their place in the stack, top highest, so a card never jumps in front of the one above it.
- Timers: a toast counts down only while it is on show. A piled toast keeps its time left and resumes when it rises into a slot.
- Above other overlays:
--z-toastrises from 1100 to 1250, above modals, popovers and banners, so an open dropdown no longer covers toasts. Tooltips stay above toasts, so a toast's own Retry tooltip still shows. - Design decision, the pile does not expand: "+N more" is a count, not a control. To reach an older toast, dismiss the newer ones. The toast README records the reasons and the steps to bring expansion back.
- New Opal string
toastMoreCount("+N more"), in all 9 locales.
Demo
https://github.com/user-attachments/assets/27cac036-8415-479a-be58-fd08e7d4c716
Summary by cubic
Toasts now stack like phone notifications: the newest slides in at the top and pushes the older ones down, and past three the oldest tuck behind the stack as layered card edges with a "+N more" Tag underneath.
- A toast counts down only while on show; piling pauses its timer, which resumes when it rises back into a slot.
- A leaving toast holds its slot while sliding off toward the end side, then its space closes as the next piled toast rises; a toast closed while leaving never rejoins the pile, and one dismissed from the pile leaves out of sight without playing an exit.
--z-toastrises to 1250, above modals, popovers and banners, so an open dropdown never covers toasts; tooltips stay above.- The "+N more" count is not a control — the pile does not expand; the README records the decision and how to bring expansion back.
- Adds the
toastMoreCountOpal string in all 9 locales.
Summary by CodeRabbit
- New Features
- Toast notifications now stack into layered piles, with a localized “+N more” indicator when additional notifications are piled.
- Only visible toasts count down; piled toasts resume their remaining time when they become visible again.
- Toasts animate as they leave and appear above menus, dialogs, and other overlays, but below tooltips.
- Piles are non-expandable.
- Localization
- Added translations for toast counts and tab-scrolling labels across supported languages.
- Documentation
- Documented toast stacking, timing, animations, and non-expandable piles.