Skip to content

experiment: add notification base styles #9540

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 11 commits into
base: main
Choose a base branch
from
Draft

Conversation

jouni
Copy link
Member

@jouni jouni commented Jun 24, 2025

Depends on #9525 (Update: I’m not sure that is absolutely needed, as we might be able to use `:nth-child(1 of [slot="..."]) instead.)

Screen.Recording.2025-06-25.at.9.43.00.mov

Supported custom properties

Property  Description
--vaadin-notification-viewport-inset Space between notifications and the viewport. 
--vaadin-notification-width 40ch 
--vaadin-notification-background  
--vaadin-notification-padding  
--vaadin-notification-gap Space between the notifications in one stack and how much overlapping notifications show below the top most one. 
--vaadin-notification-border-width  
--vaadin-notification-border-color  
--vaadin-notification-border-radius  
--vaadin-notification-box-shadow  

Remaining issues:

  • Safari CSS recalc/layout workaround (need a selector in light DOM)
  • Touch device usability: notifications need to be focusable (tabindex=0), or some other trick, for the hover styles to work, so that you can expand a stack of notifications.
    • Also, how to dismiss/collapse a stack of notifications on touch devices is unclear. Perhaps we need to reserve a little space above/below the stack where you can touch to release the hover/focus styles.
  • Update unit and visual tests

Comment on lines +146 to +149
/* TODO (SAFARI-WORKAROUND-PART-2): without this, rendering isn't updated properly for the card that changes from order 1 -> 2 (max-height doesn't update) */
/* Either this needs to be implemented with SlotStylesMixin or we need to find a way to trigger the same behavior with shadow DOM styles */
vaadin-notification-card[style] {
}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we can't find a better solution, then this needs to be implemented as slotted styles.

@jouni jouni force-pushed the base-notification branch from 0c1d4d3 to d521596 Compare June 30, 2025 15:31
jouni added 2 commits July 1, 2025 10:47
support backdrop-filter in notification card, as well as other layout improvements (how well box shadows are visible etc)
Copy link

sonarqubecloud bot commented Jul 1, 2025

Quality Gate Failed Quality Gate failed

Failed conditions
4 Security Hotspots

See analysis details on SonarQube Cloud

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant