refactor!: move crud confirm dialogs to light DOM (#9783)

Author: sissbruecker

packages/crud/src/vaadin-crud-mixin.js

@@ -416,6 +416,9 @@ export const CrudMixin = (superClass) =>
       );
 
       this.addController(this.__focusRestorationController);
+
+      this._confirmCancelDialog = this.querySelector('vaadin-confirm-dialog[slot="confirm-cancel"]');
+      this._confirmDeleteDialog = this.querySelector('vaadin-confirm-dialog[slot="confirm-delete"]');
     }
 
     /**
@@ -786,7 +789,7 @@ export const CrudMixin = (superClass) =>
         this.__isDirty && // Form change has been made
         this.editedItem !== item // Item is different
       ) {
-        this.$.confirmCancel.opened = true;
+        this._confirmCancelDialog.opened = true;
         this.addEventListener(
           'cancel',
           (event) => {
@@ -986,7 +989,7 @@ export const CrudMixin = (superClass) =>
     /** @private */
     __cancel() {
       if (this.__isDirty) {
-        this.$.confirmCancel.opened = true;
+        this._confirmCancelDialog.opened = true;
       } else {
         this.__confirmCancel();
       }
@@ -1003,7 +1006,7 @@ export const CrudMixin = (superClass) =>
 
     /** @private */
     __delete() {
-      this.$.confirmDelete.opened = true;
+      this._confirmDeleteDialog.opened = true;
     }
 
     /** @private */

packages/crud/src/vaadin-crud.js

@@ -13,7 +13,7 @@ import '@vaadin/confirm-dialog/src/vaadin-confirm-dialog.js';
 import './vaadin-crud-dialog.js';
 import './vaadin-crud-grid.js';
 import './vaadin-crud-form.js';
-import { html, LitElement } from 'lit';
+import { html, LitElement, render } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
@@ -172,6 +172,14 @@ import { CrudMixin } from './vaadin-crud-mixin.js';
  * @mixes CrudMixin
  */
 class Crud extends CrudMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
+  static get is() {
+    return 'vaadin-crud';
+  }
+
+  static get cvdlName() {
+    return 'vaadin-crud';
+  }
+
   static get styles() {
     return crudStyles;
   }
@@ -222,38 +230,54 @@ class Crud extends CrudMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjecti
         @opened-changed="${this.__onDialogOpened}"
       ></vaadin-crud-dialog>
 
-      <vaadin-confirm-dialog
-        theme="${ifDefined(this._theme)}"
-        id="confirmCancel"
-        @confirm="${this.__confirmCancel}"
-        cancel-button-visible
-        .confirmText="${this.__effectiveI18n.confirm.cancel.button.confirm}"
-        .cancelText="${this.__effectiveI18n.confirm.cancel.button.dismiss}"
-        .header="${this.__effectiveI18n.confirm.cancel.title}"
-        .message="${this.__effectiveI18n.confirm.cancel.content}"
-        confirm-theme="primary"
-      ></vaadin-confirm-dialog>
+      <slot name="confirm-cancel"></slot>
 
-      <vaadin-confirm-dialog
-        theme="${ifDefined(this._theme)}"
-        id="confirmDelete"
-        @confirm="${this.__confirmDelete}"
-        cancel-button-visible
-        .confirmText="${this.__effectiveI18n.confirm.delete.button.confirm}"
-        .cancelText="${this.__effectiveI18n.confirm.delete.button.dismiss}"
-        .header="${this.__effectiveI18n.confirm.delete.title}"
-        .message="${this.__effectiveI18n.confirm.delete.content}"
-        confirm-theme="primary error"
-      ></vaadin-confirm-dialog>
+      <slot name="confirm-delete"></slot>
     `;
   }
 
-  static get is() {
-    return 'vaadin-crud';
+  /**
+   * Override update to render slotted overlays into light DOM after rendering shadow DOM.
+   * @param changedProperties
+   * @protected
+   */
+  update(changedProperties) {
+    super.update(changedProperties);
+
+    this.__renderSlottedOverlays();
   }
 
-  static get cvdlName() {
-    return 'vaadin-crud';
+  /** @private */
+  __renderSlottedOverlays() {
+    render(
+      html`
+        <vaadin-confirm-dialog
+          theme="${ifDefined(this._theme)}"
+          slot="confirm-cancel"
+          @confirm="${this.__confirmCancel}"
+          cancel-button-visible
+          .confirmText="${this.__effectiveI18n.confirm.cancel.button.confirm}"
+          .cancelText="${this.__effectiveI18n.confirm.cancel.button.dismiss}"
+          .header="${this.__effectiveI18n.confirm.cancel.title}"
+          .message="${this.__effectiveI18n.confirm.cancel.content}"
+          confirm-theme="primary"
+        ></vaadin-confirm-dialog>
+
+        <vaadin-confirm-dialog
+          theme="${ifDefined(this._theme)}"
+          slot="confirm-delete"
+          @confirm="${this.__confirmDelete}"
+          cancel-button-visible
+          .confirmText="${this.__effectiveI18n.confirm.delete.button.confirm}"
+          .cancelText="${this.__effectiveI18n.confirm.delete.button.dismiss}"
+          .header="${this.__effectiveI18n.confirm.delete.title}"
+          .message="${this.__effectiveI18n.confirm.delete.content}"
+          confirm-theme="primary error"
+        ></vaadin-confirm-dialog>
+      `,
+      this,
+      { host: this },
+    );
   }
 }
 

packages/crud/test/a11y.test.js

@@ -26,7 +26,7 @@ describe('a11y', () => {
           form = crud.querySelector('vaadin-crud-form');
           newButton = crud.querySelector('[slot=new-button]');
           saveButton = crud.querySelector('[slot=save-button]');
-          cancelButton = crud.querySelector('[slot=cancel-button]');
+          cancelButton = crud.querySelector(':scope > [slot=cancel-button]');
           editButtons = crud.querySelectorAll('vaadin-crud-edit');
         });
 
@@ -81,7 +81,7 @@ describe('a11y', () => {
           form = crud.querySelector('vaadin-crud-form');
           newButton = crud.querySelector('[slot=new-button]');
           saveButton = crud.querySelector('[slot=save-button]');
-          cancelButton = crud.querySelector('[slot=cancel-button]');
+          cancelButton = crud.querySelector(':scope > [slot=cancel-button]');
           editButtons = crud.querySelectorAll('vaadin-crud-edit');
         });
 

packages/crud/test/crud-buttons.test.js

@@ -35,7 +35,7 @@ describe('crud buttons', () => {
         crud.items = [{ foo: 'bar' }];
         await nextRender();
         saveButton = crud.querySelector('[slot=save-button]');
-        cancelButton = crud.querySelector('[slot=cancel-button]');
+        cancelButton = crud.querySelector(':scope > [slot=cancel-button]');
         deleteButton = crud.querySelector('[slot=delete-button]');
       });
 
@@ -74,7 +74,7 @@ describe('crud buttons', () => {
         let confirmDeleteDialog, confirmDeleteOverlay;
 
         beforeEach(() => {
-          confirmDeleteDialog = crud.$.confirmDelete;
+          confirmDeleteDialog = crud._confirmDeleteDialog;
           confirmDeleteOverlay = confirmDeleteDialog.$.overlay;
         });
 
@@ -171,7 +171,7 @@ describe('crud buttons', () => {
           let confirmCancelOverlay;
 
           beforeEach(() => {
-            confirmCancelDialog = crud.$.confirmCancel;
+            confirmCancelDialog = crud._confirmCancelDialog;
             confirmCancelOverlay = confirmCancelDialog.$.overlay;
           });
 
@@ -316,7 +316,7 @@ describe('crud buttons', () => {
           let confirmDeleteOverlay;
 
           beforeEach(() => {
-            confirmDeleteDialog = crud.$.confirmDelete;
+            confirmDeleteDialog = crud._confirmDeleteDialog;
             confirmDeleteOverlay = confirmDeleteDialog.$.overlay;
           });
 
@@ -417,7 +417,7 @@ describe('crud buttons', () => {
           beforeEach(async () => {
             crud.editorPosition = 'bottom';
             crud.editOnClick = true;
-            confirmCancelDialog = crud.$.confirmCancel;
+            confirmCancelDialog = crud._confirmCancelDialog;
             confirmCancelOverlay = confirmCancelDialog.$.overlay;
             await nextRender();
             flushGrid(crud._grid);
@@ -660,7 +660,7 @@ describe('crud buttons', () => {
           let confirmDeleteOverlay;
 
           beforeEach(() => {
-            confirmDeleteDialog = crud.$.confirmDelete;
+            confirmDeleteDialog = crud._confirmDeleteDialog;
             confirmDeleteOverlay = confirmDeleteDialog.$.overlay;
           });
 
@@ -951,7 +951,7 @@ describe('crud buttons', () => {
     });
 
     it('should not create default cancel-button', () => {
-      expect(crud.querySelector('[slot="cancel-button"]')).to.be.null;
+      expect(crud.querySelector(':scope > [slot="cancel-button"]')).to.be.null;
     });
 
     it('should not create default delete-button', () => {

packages/crud/test/crud-editor.test.js

@@ -27,7 +27,7 @@ describe('crud editor', () => {
     beforeEach(async () => {
       crud = fixtureSync('<vaadin-crud style="width: 300px;"></vaadin-crud>');
       crud.items = [{ foo: 'bar' }];
-      header = crud.querySelector('[slot=header]');
+      header = crud.querySelector(':scope > [slot=header]');
       await nextRender();
     });
 
@@ -77,7 +77,7 @@ describe('crud editor', () => {
         dialog = crud.$.dialog;
         overlay = dialog.$.overlay;
         form = crud.querySelector('[slot=form]');
-        btnCancel = crud.querySelector('[slot="cancel-button"]');
+        btnCancel = crud.querySelector(':scope > [slot="cancel-button"]');
       });
 
       it(`should move ${type} form to dialog content with default editorPosition`, async () => {
@@ -158,7 +158,7 @@ describe('crud editor', () => {
         await nextRender();
 
         // Get the elementFromPoint of the editor header
-        const header = crud.querySelector('[slot=header]');
+        const header = crud.querySelector(':scope > [slot=header]');
         const headerRect = header.getBoundingClientRect();
         const x = headerRect.left + headerRect.width / 2;
         const y = headerRect.top + headerRect.height / 2;

packages/crud/test/crud.test.js

@@ -80,8 +80,8 @@ describe('crud', () => {
         crud._form,
         crud.$.dialog,
         crud.$.dialog.$.overlay,
-        crud.$.confirmCancel,
-        crud.$.confirmDelete,
+        crud._confirmCancelDialog,
+        crud._confirmDeleteDialog,
       ].forEach((e) => expect(e.getAttribute('theme')).to.be.match(/foo/u));
     });
   });
@@ -509,7 +509,7 @@ describe('crud', () => {
       crud.items = [{ foo: 'bar' }, { foo: 'baz' }];
       await nextRender();
       flushGrid(crud._grid);
-      confirmCancelDialog = crud.$.confirmCancel;
+      confirmCancelDialog = crud._confirmCancelDialog;
       confirmCancelOverlay = confirmCancelDialog.$.overlay;
     });