spectrum-web-components
spectrum-web-components copied to clipboard
adobe
[Bug]: Toast stays behind dialog
Code of conduct
- [x] I agree to follow this project's code of conduct.
Impacted component(s)
toasts, dialogs
Expected behavior
Toasts should be visible on top of dialogs
Actual behavior
When using a full screen dialog - I can see toasts getting populated on DOM, but they stay behind the dialog overlay, cannot see them on the screen.
Screenshots
What browsers are you seeing the problem in?
No response
How can we reproduce this issue?
- I have a quick repro here - https://153834.prenv.projectx.corp.adobe.com/
- to check this experience - please turn feature flag - brands-one-click-setup true on the link above.
- Go to brands (left navbar)
- Click Create brand > Quickly setup existing brand
- Dialog will open and there click - Show toast
- This toast is populated in the DOM, but does not show on top of the dialog, it stays underneath it.
Sample code or abstract reproduction which illustrates the problem
https://stackblitz.com/edit/vitejs-vite-pbfmpjfu?file=src%2Fmy-element.ts
Severity
SEV 3
Logs taken while reproducing problem
No response
Would you like to track this issue in Jira?
- [x] Yes, please tell me the ticket number!
@tanya-kanodia In Spectrum's design system, toasts are meant to be used for non-blocking notifications
- Full-screen dialogs are meant to be blocking, requiring user attention and interaction
- It's generally not recommended to show toasts while a full-screen dialog is open, as it could:
- Distract from the primary task in the dialog
- Create confusion about which UI element has priority
- Break the modal pattern of the dialog
Recommendations: If you need to show notifications while a dialog is open, consider:
- Including the notification within the dialog itself
- Using a different UI pattern that's more appropriate for the context
- Showing the toast after the dialog is closed
- Using a non-full-screen dialog if you need to maintain visibility of other UI elements
If you need further discussion can you have your design team reach out to Spectrum Designers and take a call here?
