KEMBAR78
refactor!: update notification container to use native popover by sissbruecker · Pull Request #9819 · vaadin/web-components · GitHub
Skip to content

Conversation

@sissbruecker
Copy link
Contributor

Description

Fixes #9728

Type of change

  • Breaking change

* @mixes OverlayStackMixin
*/
export const NotificationContainerMixin = (superClass) =>
class extends OverlayStackMixin(superClass) {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

It seems that the notification overlay was only using OverlayStackMixin to participate in the global z-index coordination logic, and for other the other logic in that mixin it was excluded. Since the z-index is not necessary anymore it looks like the mixin can be removed, and the few lines for bring to front can be duplicated. This also allows removing some extra logic from the mixin.

This also fixes a regression introduced by #9773, where opening a notification after another overlay component triggers an error because _deepContains is not defined on the notification container because it does not have OverlayFocusMixin.

There is one side-effect of this, which is that OverlayStackMixin.bringToFront might not do anything in other overlay components if:

  • the overlay component is the last one tracked in the attached instances of the mixin
  • however the notification container is at the top of the top-layer stack

I can't think of any issues this could cause at this point. Worst case a modeless dialog might show behind a notification when dragged, whereas currently it would move above it.

Copy link
Member

Choose a reason for hiding this comment

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

Yes, I think the change is fine. When we originally added bringToFront() API in vaadin/vaadin-overlay#168, it was explicitly mentioned that notification was supposed to be on top of everything:

Notification uses separate z-index space (on top of everything) & overlay implementation and thus shouldn't be affected by this change.

I was also thinking about modeless dialog behind a notification, but probably it's ok for now.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

All of these tests have become obsolete I believe. As an alternative I tried adding some new tests that verify that the native popover API is used properly, maybe something like this can be done for other overlay components as well. Theoretically we could also have ITs to verify the stacking order in the top layer in different opening order or when using bring to front.

Copy link
Member

Choose a reason for hiding this comment

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

I'm ok with removing ITs for now, we can consider adding new tests in a separate PR.

@sonarqubecloud
Copy link

@sissbruecker sissbruecker marked this pull request as ready for review July 28, 2025 16:21
@sissbruecker sissbruecker requested a review from web-padawan July 28, 2025 16:22
@web-padawan web-padawan merged commit c173d67 into main Jul 29, 2025
10 checks passed
@web-padawan web-padawan deleted the refactor/notification-native-popover branch July 29, 2025 08:47
@vaadin-bot
Copy link
Collaborator

This ticket/PR has been released with Vaadin 25.0.0-beta2.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[notification] Update to use native popover for the notification container

3 participants