refactor!: update user-tags overlay to use native popover (#9820)

Author: web-padawan

packages/field-highlighter/src/styles/vaadin-user-tags-overlay-core-styles.js

@@ -15,7 +15,7 @@ const userTagsOverlay = css`
     overflow: visible;
   }
 
-  ::slotted([part='tags']) {
+  [part='content'] {
     display: flex;
     flex-direction: column;
     align-items: flex-start;

packages/field-highlighter/src/vaadin-user-tags-overlay.js

@@ -45,6 +45,22 @@ class UserTagsOverlay extends PositionMixin(
       </div>
     `;
   }
+
+  /**
+   * @protected
+   * @override
+   */
+  _attachOverlay() {
+    this.showPopover();
+  }
+
+  /**
+   * @protected
+   * @override
+   */
+  _detachOverlay() {
+    this.hidePopover();
+  }
 }
 
 defineCustomElement(UserTagsOverlay);

packages/field-highlighter/src/vaadin-user-tags.js

@@ -46,11 +46,15 @@ export class UserTags extends PolylitMixin(LitElement) {
     return html`
       <vaadin-user-tags-overlay
         id="overlay"
+        popover="manual"
+        exportparts="overlay:user-tags-overlay, content:user-tags-content"
         modeless
         .opened="${this.opened}"
         no-vertical-overlap
         @vaadin-overlay-open="${this._onOverlayOpen}"
-      ></vaadin-user-tags-overlay>
+      >
+        <slot></slot>
+      </vaadin-user-tags-overlay>
     `;
   }
 
@@ -137,7 +141,8 @@ export class UserTags extends PolylitMixin(LitElement) {
 
   /** @protected */
   get wrapper() {
-    return this.$.overlay.querySelector('[part="tags"]');
+    // Used by Collaboration Kit util
+    return this;
   }
 
   /** @protected */
@@ -162,15 +167,8 @@ export class UserTags extends PolylitMixin(LitElement) {
   ready() {
     super.ready();
 
-    this.$.overlay.renderer = (root) => {
-      if (!root.firstChild) {
-        const tags = document.createElement('div');
-        tags.setAttribute('part', 'tags');
-        root.appendChild(tags);
-      }
-    };
-
-    this.$.overlay.requestContentUpdate();
+    // Export user tags overlay parts for styling
+    this.setAttribute('exportparts', 'user-tags-overlay, user-tags-content');
   }
 
   /** @private */
@@ -222,14 +220,15 @@ export class UserTags extends PolylitMixin(LitElement) {
 
   createUserTag(user) {
     const tag = document.createElement('vaadin-user-tag');
+    tag.setAttribute('part', 'user-tag');
     tag.name = user.name;
     tag.uid = user.id;
     tag.colorIndex = user.colorIndex;
     return tag;
   }
 
   getTagForUser(user) {
-    return Array.from(this.wrapper.children).find((tag) => tag.uid === user.id);
+    return Array.from(this.children).find((tag) => tag.uid === user.id);
   }
 
   getChangedTags(addedUsers, removedUsers) {
@@ -239,21 +238,19 @@ export class UserTags extends PolylitMixin(LitElement) {
   }
 
   applyTagsStart({ added, removed }) {
-    const wrapper = this.wrapper;
     removed.forEach((tag) => {
       if (tag) {
         tag.classList.add('removing');
         tag.classList.remove('show');
       }
     });
-    added.forEach((tag) => wrapper.insertBefore(tag, wrapper.firstChild));
+    added.forEach((tag) => this.insertBefore(tag, this.firstChild));
   }
 
   applyTagsEnd({ added, removed }) {
-    const wrapper = this.wrapper;
     removed.forEach((tag) => {
-      if (tag && tag.parentNode === wrapper) {
-        wrapper.removeChild(tag);
+      if (tag && tag.parentNode === this) {
+        this.removeChild(tag);
       }
     });
     added.forEach((tag) => tag && tag.classList.add('show'));
@@ -329,7 +326,7 @@ export class UserTags extends PolylitMixin(LitElement) {
   /** @private */
   _onOverlayOpen() {
     // Animate all tags except removing ones
-    Array.from(this.wrapper.children).forEach((tag) => {
+    Array.from(this.children).forEach((tag) => {
       if (!tag.classList.contains('removing')) {
         tag.classList.add('show');
       }
@@ -338,17 +335,16 @@ export class UserTags extends PolylitMixin(LitElement) {
 
   flashTags(added) {
     this.flashing = true;
-    const wrapper = this.wrapper;
 
     // Hide existing tags
-    const hidden = Array.from(wrapper.children);
+    const hidden = Array.from(this.children);
     hidden.forEach((tag) => {
       tag.style.display = 'none';
     });
 
     // Render new tags
     added.forEach((tag) => {
-      wrapper.insertBefore(tag, wrapper.firstChild);
+      this.insertBefore(tag, this.firstChild);
     });
 
     this.flashPromise = new Promise((resolve) => {

packages/field-highlighter/test/user-tags.test.js

@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { fixtureSync, nextFrame, oneEvent } from '@vaadin/testing-helpers';
+import { fixtureSync, nextFrame, nextRender, oneEvent } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import './test-styles.test.js';
 import '@vaadin/text-field/src/vaadin-text-field.js';
@@ -20,8 +20,7 @@ describe('user-tags', () => {
   let wrapper;
 
   const getTags = () => {
-    const { overlay } = wrapper.$;
-    return overlay.querySelectorAll('vaadin-user-tag');
+    return wrapper.querySelectorAll('vaadin-user-tag');
   };
 
   const addUser = (user) => {
@@ -60,10 +59,13 @@ describe('user-tags', () => {
     it('should replace user tags when replacing users', async () => {
       setUsers([user1, user2]);
       await wrapper.flashPromise;
+      expect(getTags()).to.have.lengthOf(2);
+
+      await nextRender();
+
       setUsers([user3]);
       await wrapper.flashPromise;
-      const tags = getTags();
-      expect(tags).to.have.lengthOf(1);
+      expect(getTags()).to.have.lengthOf(1);
     });
   });
 
@@ -308,4 +310,32 @@ describe('user-tags', () => {
       });
     });
   });
+
+  describe('exportparts', () => {
+    let overlay;
+
+    beforeEach(() => {
+      field = fixtureSync(`<vaadin-text-field></vaadin-text-field>`);
+      FieldHighlighter.init(field);
+      wrapper = field.shadowRoot.querySelector('vaadin-user-tags');
+      overlay = wrapper.$.overlay;
+    });
+
+    it('should export all overlay parts for styling', () => {
+      const overlayParts = [...overlay.shadowRoot.querySelectorAll('[part]')].map((el) => el.getAttribute('part'));
+      const overlayExportParts = overlay.getAttribute('exportparts').split(', ');
+      const hostExportParts = wrapper.getAttribute('exportparts').split(', ');
+
+      overlayParts.forEach((part) => {
+        expect(overlayExportParts).to.include(`${part}:user-tags-${part}`);
+        expect(hostExportParts).to.include(`user-tags-${part}`);
+      });
+    });
+
+    it('should set part="user-tag" on the user tag elements', () => {
+      getTags().forEach((tag) => {
+        expect(tag.getAttribute('part')).to.equal('user-tag');
+      });
+    });
+  });
 });

packages/vaadin-lumo-styles/src/components/user-tags-overlay.css

@@ -15,21 +15,18 @@
     will-change: opacity, transform;
   }
 
-  ::slotted([part='tags']) {
+  [part='content'] {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    padding: 0;
   }
 
   :host([dir='rtl']) [part='overlay'] {
     left: auto;
     right: -4px;
   }
 
-  [part='content'] {
-    padding: 0;
-  }
-
   :host([opening]),
   :host([closing]) {
     animation: 0.14s user-tags-overlay-dummy-animation;