mirror of
https://github.com/onyx-dot-app/onyx.git
synced 2026-10-22 03:14:06 -05:00
Raunak Bhagat
a4ed03e671
## 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-toast` rises 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
<!-- This is an auto-generated description by cubic. -->
---
## 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-toast` rises 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 `toastMoreCount` Opal string in all 9 locales.
<sup>Written for commit 94c33147d1.
Summary will update on new commits.</sup>
<a
href="https://cubic.dev/pr/onyx-dot-app/onyx/pull/16459?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="View guided diff"
src="https://www.cubic.dev/buttons/review-in-cubic-light.svg"></picture></a>
<a
href="https://www.cubic.dev/action/auto-fix/pr/onyx-dot-app/onyx/16459?returnTo=https%3A%2F%2Fgithub.com%2Fonyx-dot-app%2Fonyx%2Fpull%2F16459&source=description"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/turn-on-auto-fix-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/turn-on-auto-fix-light.svg"><img
alt="Turn on auto-fix"
src="https://www.cubic.dev/buttons/turn-on-auto-fix-light.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
<!-- coderabbit-ai-generated:v1 -->
## 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.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
