refactor!: update avatar-group overlay to use native popover (#9754)

web-padawan · web-flow · commit 570c0e96c1a8 · 2025-07-17T11:24:50.000+03:00
diff --git a/packages/avatar-group/src/styles/vaadin-avatar-group-base-styles.js b/packages/avatar-group/src/styles/vaadin-avatar-group-base-styles.js
@@ -48,7 +48,7 @@ export const avatarGroupStyles = css`
     --_d: calc(var(--_dir) * -1);
   }
 
-  ::slotted(vaadin-avatar:not(:first-child)) {
+  ::slotted(vaadin-avatar:not(:first-of-type)) {
     margin-inline-start: calc(
       var(--vaadin-avatar-group-overlap, 8px) * -1 - var(--vaadin-focus-ring-width) +
         var(--vaadin-avatar-group-gap, 2px)
@@ -57,7 +57,7 @@ export const avatarGroupStyles = css`
 
   :host(:not([theme~='reverse'])) ::slotted(vaadin-avatar:last-child),
   :host(:not([theme~='reverse']):not([has-overflow])) ::slotted(vaadin-avatar:nth-last-child(2)),
-  :host([theme~='reverse']) ::slotted(vaadin-avatar:first-child) {
+  :host([theme~='reverse']) ::slotted(vaadin-avatar:first-of-type) {
     mask-image: none;
   }
 `;
diff --git a/packages/avatar-group/src/styles/vaadin-avatar-group-core-styles.js b/packages/avatar-group/src/styles/vaadin-avatar-group-core-styles.js
@@ -25,17 +25,17 @@ export const avatarGroupStyles = css`
     flex-wrap: nowrap;
   }
 
-  ::slotted(vaadin-avatar:not(:first-child)) {
+  ::slotted(vaadin-avatar:not(:first-of-type)) {
     mask-image: url('data:image/svg+xml;utf8,<svg viewBox=%220 0 300 300%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22><path fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M300 0H0V300H300V0ZM150 200C177.614 200 200 177.614 200 150C200 122.386 177.614 100 150 100C122.386 100 100 122.386 100 150C100 177.614 122.386 200 150 200Z%22 fill=%22black%22/></svg>');
     mask-size: calc(300% + var(--vaadin-avatar-group-overlap-border) * 6 - var(--vaadin-avatar-outline-width) * 6);
   }
 
-  ::slotted(vaadin-avatar:not([dir='rtl']):not(:first-child)) {
+  ::slotted(vaadin-avatar:not([dir='rtl']):not(:first-of-type)) {
     margin-left: calc(var(--vaadin-avatar-group-overlap) * -1 - var(--vaadin-avatar-outline-width));
     mask-position: calc(50% - var(--vaadin-avatar-size) + var(--vaadin-avatar-group-overlap));
   }
 
-  ::slotted(vaadin-avatar[dir='rtl']:not(:first-child)) {
+  ::slotted(vaadin-avatar[dir='rtl']:not(:first-of-type)) {
     margin-right: calc(var(--vaadin-avatar-group-overlap) * -1);
     mask-position: calc(
       50% + var(--vaadin-avatar-size) - var(--vaadin-avatar-group-overlap) + var(--vaadin-avatar-outline-width)
diff --git a/packages/avatar-group/src/vaadin-avatar-group-mixin.js b/packages/avatar-group/src/vaadin-avatar-group-mixin.js
@@ -144,16 +144,17 @@ export const AvatarGroupMixin = (superClass) =>
       return [...this.children].filter((node) => node.localName === 'vaadin-avatar');
     }
 
-    constructor() {
-      super();
-
-      this.__overlayRenderer = this.__overlayRenderer.bind(this);
-    }
-
     /** @protected */
     ready() {
       super.ready();
 
+      this._menuController = new SlotController(this, 'overlay', 'vaadin-avatar-group-menu', {
+        initializer: (menu) => {
+          menu.addEventListener('keydown', this._onListKeyDown.bind(this));
+          this._menuElement = menu;
+        },
+      });
+
       this._overflowController = new SlotController(this, 'overflow', 'vaadin-avatar', {
         initializer: (overflow) => {
           overflow.setAttribute('role', 'button');
@@ -170,6 +171,8 @@ export const AvatarGroupMixin = (superClass) =>
           this._overflowTooltip = tooltip;
         },
       });
+
+      this.addController(this._menuController);
       this.addController(this._overflowController);
 
       this._overlayElement = this.$.overlay;
@@ -229,8 +232,8 @@ export const AvatarGroupMixin = (superClass) =>
         }
       }
 
-      if (props.has('_overflowItems')) {
-        this.__overflowItemsChanged(this._overflowItems, props.get('_overflowItems'));
+      if (props.has('_overflowItems') || props.has('__effectiveI18n') || props.has('_theme')) {
+        this.__renderMenu();
       }
     }
 
@@ -241,34 +244,31 @@ export const AvatarGroupMixin = (superClass) =>
 
     /**
      * Renders items when they are provided by the `items` property and clears the content otherwise.
-     * @param {!HTMLElement} root
      * @private
      */
-    __overlayRenderer(root) {
+    __renderMenu() {
       render(
         html`
-          <vaadin-avatar-group-menu @keydown="${this._onListKeyDown}">
-            ${(this._overflowItems || []).map(
-              (item) => html`
-                <vaadin-avatar-group-menu-item>
-                  <vaadin-avatar
-                    .name="${item.name}"
-                    .abbr="${item.abbr}"
-                    .img="${item.img}"
-                    .colorIndex="${item.colorIndex}"
-                    .i18n="${this.__effectiveI18n}"
-                    class="${ifDefined(item.className)}"
-                    theme="${ifDefined(this._theme)}"
-                    aria-hidden="true"
-                    tabindex="-1"
-                  ></vaadin-avatar>
-                  ${item.name || ''}
-                </vaadin-avatar-group-menu-item>
-              `,
-            )}
-          </vaadin-avatar-group-menu>
+          ${(this._overflowItems || []).map(
+            (item) => html`
+              <vaadin-avatar-group-menu-item>
+                <vaadin-avatar
+                  .name="${item.name}"
+                  .abbr="${item.abbr}"
+                  .img="${item.img}"
+                  .colorIndex="${item.colorIndex}"
+                  .i18n="${this.__effectiveI18n}"
+                  class="${ifDefined(item.className)}"
+                  theme="${ifDefined(this._theme)}"
+                  aria-hidden="true"
+                  tabindex="-1"
+                ></vaadin-avatar>
+                ${item.name || ''}
+              </vaadin-avatar-group-menu-item>
+            `,
+          )}
         `,
-        root,
+        this._menuElement,
         { host: this },
       );
     }
@@ -453,10 +453,6 @@ export const AvatarGroupMixin = (superClass) =>
     /** @private */
     __openedChanged(opened, oldOpened) {
       if (opened) {
-        if (!this._menuElement) {
-          this._menuElement = this.$.overlay.querySelector('vaadin-avatar-group-menu');
-        }
-
         this._openedWithFocusRing = this._overflow.hasAttribute('focus-ring');
       } else if (oldOpened) {
         this._overflow.focus();
@@ -468,18 +464,6 @@ export const AvatarGroupMixin = (superClass) =>
       this._overflow.setAttribute('aria-expanded', opened === true);
     }
 
-    /** @private */
-    __overflowItemsChanged(items, oldItems) {
-      // Prevent renderer from being called unnecessarily on initialization
-      if (items && items.length === 0 && (!oldItems || oldItems.length === 0)) {
-        return;
-      }
-
-      if (items || oldItems) {
-        this.$.overlay.requestContentUpdate();
-      }
-    }
-
     /** @private */
     __setItemsInView() {
       const avatars = this._avatars;
diff --git a/packages/avatar-group/src/vaadin-avatar-group-overlay.js b/packages/avatar-group/src/vaadin-avatar-group-overlay.js
@@ -46,6 +46,22 @@ class AvatarGroupOverlay extends PositionMixin(
       </div>
     `;
   }
+
+  /**
+   * @protected
+   * @override
+   */
+  _attachOverlay() {
+    this.showPopover();
+  }
+
+  /**
+   * @protected
+   * @override
+   */
+  _detachOverlay() {
+    this.hidePopover();
+  }
 }
 
 defineCustomElement(AvatarGroupOverlay);
diff --git a/packages/avatar-group/src/vaadin-avatar-group.d.ts b/packages/avatar-group/src/vaadin-avatar-group.d.ts
@@ -35,6 +35,8 @@ export { AvatarGroupI18n, AvatarGroupItem, AvatarI18n };
  * Part name   | Description
  * ----------- | ---------------
  * `container` | The container element
+ * `overlay`   | The overflow avatar menu overlay
+ * `content`   | The overflow avatar menu overlay content
  *
  * See the [`<vaadin-avatar>`](#/elements/vaadin-avatar) documentation for the available
  * state attributes and stylable shadow parts of avatar elements.
diff --git a/packages/avatar-group/src/vaadin-avatar-group.js b/packages/avatar-group/src/vaadin-avatar-group.js
@@ -42,6 +42,8 @@ import { AvatarGroupMixin } from './vaadin-avatar-group-mixin.js';
  * Part name   | Description
  * ----------- | ---------------
  * `container` | The container element
+ * `overlay`   | The overflow avatar menu overlay
+ * `content`   | The overflow avatar menu overlay content
  *
  * See the [`<vaadin-avatar>`](#/elements/vaadin-avatar) documentation for the available
  * state attributes and stylable shadow parts of avatar elements.
@@ -81,15 +83,18 @@ class AvatarGroup extends AvatarGroupMixin(ElementMixin(ThemableMixin(PolylitMix
       </div>
       <vaadin-avatar-group-overlay
         id="overlay"
+        popover="manual"
         .owner="${this}"
         .opened="${this._opened}"
         .positionTarget="${this._overflow}"
-        .renderer="${this.__overlayRenderer}"
         no-vertical-overlap
+        exportparts="overlay, content"
         @vaadin-overlay-close="${this._onVaadinOverlayClose}"
         @vaadin-overlay-open="${this._onVaadinOverlayOpen}"
         @opened-changed="${this._onOpenedChanged}"
-      ></vaadin-avatar-group-overlay>
+      >
+        <slot name="overlay"></slot>
+      </vaadin-avatar-group-overlay>
     `;
   }
 
diff --git a/packages/avatar-group/test/avatar-group.test.js b/packages/avatar-group/test/avatar-group.test.js
diff --git a/packages/avatar-group/test/dom/__snapshots__/avatar-group.test.snap.js b/packages/avatar-group/test/dom/__snapshots__/avatar-group.test.snap.js
diff --git a/packages/vaadin-lumo-styles/src/components/avatar-group.css b/packages/vaadin-lumo-styles/src/components/avatar-group.css
