[toast] Support variable height stacking #2742
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
atomiks
added
type: enhancement
commit: |
✅ Deploy Preview for base-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Bundle size report
|
atomiks
force-pushed
the
feat/toast-variable-height-stacking
branch
8 times, most recently
from
fc9094a to
952d36f
Compare
| * Indicates the height of the frontmost toast at index 0 in the list. | ||
| * @type {number} | ||
| */ | ||
| index0Height = '--toast-index-0-height', |
Member
There was a problem hiding this comment.
Would frontmostHeight or foremostHeight be a better name? My brain instinctively thought there were also index-1, index-2, ... vars.
Suggested change
| index0Height = '--toast-index-0-height', | |
| frontmostHeight = '--toast-frontmost-height', |
| "cssVariables": {} | ||
| "cssVariables": { | ||
| "--toast-frontmost-height": { | ||
| "description": "Indicates the height of the frontmost toast at index 0 in the list.", |
Member
There was a problem hiding this comment.
nit: "index 0" sounds redundant with frontmost
Suggested change
| "description": "Indicates the height of the frontmost toast at index 0 in the list.", | |
| "description": "Indicates the height of the frontmost toast in the list.", |
or
Suggested change
| "description": "Indicates the height of the frontmost toast at index 0 in the list.", | |
| "description": "Indicates the height of the frontmost toast.", |
atomiks
force-pushed
the
feat/toast-variable-height-stacking
branch
from
298b160 to
b1bd10b
Compare
michaldudak
approved these changes
Sep 23, 2025
Member
michaldudak
left a comment
michaldudak
left a comment
There was a problem hiding this comment.
Minor remarks only - approving.
atomiks
force-pushed
the
feat/toast-variable-height-stacking
branch
from
dd8e775 to
bf12feb
Compare
1 task
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #1955
Screen.Recording.2025-09-16.at.10.25.33.am.mov
New part
Adds a new
<Toast.Content>part to apply fade-out andoverflow: hiddeneffects to, and to allowResizeObserverto only measure content changes now that theheightof the toast changes and transitions.Styles fixes
There's a new
--peekvariable (user-defined in the demos) and changedtransformlogic that ensures the "peek" part of stacked toasts behind the front one is constant and doesn't change based on the height of the toasts. I also noticed this fixed the animation bug that was present when holding downEnteron the toast creator button.