refactor!: update context-menu to use native popover #9839
Conversation
| this._onVaadinOverlayOpen(e); | ||
| }); | ||
|
|
||
| const overlaySlot = document.createElement('slot'); |
There was a problem hiding this comment.
I think we could revert #6870 and keep overlay in the template (and also set id="overlay" on it).
There was a problem hiding this comment.
That seems to be a bigger thing? There are multiple observers accessing _overlayElement, which doesn't work if it's only initialized in ready. It seems those would need to be refactored to use updated instead.
There was a problem hiding this comment.
Yes, indeed. I think we can do that in a separate PR.
|
| * | ||
| * @returns {HTMLElement} | ||
| */ | ||
| getFirstChild() { |
There was a problem hiding this comment.
I'm not sure why this is in the public API, but it wasn't really that useful in the context of this component.
There was a problem hiding this comment.
Changed some snapshot tests to check the context menu light DOM.
| * - `<vaadin-menu-bar-button>` - has the same API as [`<vaadin-button>`](#/elements/vaadin-button). | ||
| * - `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item). | ||
| * - `<vaadin-menu-bar-list-box>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box). | ||
| * - `<vaadin-menu-bar-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay). |
There was a problem hiding this comment.
For menu bar the <vaadin-menu-bar-submenu> now needs to be targeted for styling. Mentioning it like this seems consistent with other components.
|
This ticket/PR has been released with Vaadin 25.0.0-beta2. |
3 participants
Description
Updates
vaadin-context-menuto use native popovers for its overlay. As part of that overlay content is rendered into a slotted div in the light DOM. Likewise, the submenu is slotted from the light DOM. Also updatesvaadin-menu-barto use the new structure forvaadin-menu-bar-submenu.Fixes #9714
Fixes #9715
Type of change