feat: add support for slotted header and footer content (#10624)

Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-authored-by: Sascha Ißbrücker <sissbruecker@vaadin.com>

Author: 3 people

packages/dialog/src/vaadin-dialog-overlay-mixin.js

@@ -3,6 +3,7 @@
  * Copyright (c) 2017 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
 import { setOverlayStateAttribute } from '@vaadin/overlay/src/vaadin-overlay-utils.js';
 
@@ -90,6 +91,19 @@ export const DialogOverlayMixin = (superClass) =>
       this.shadowRoot.addEventListener('slotchange', () => {
         this.__updateOverflow();
       });
+
+      // Observe header-content and footer slots for dynamic content
+      const headerSlot = this.shadowRoot.querySelector('slot[name="header-content"]');
+      this.__headerSlotObserver = new SlotObserver(headerSlot, ({ currentNodes }) => {
+        setOverlayStateAttribute(this, 'has-header', currentNodes.length > 0);
+        this.__updateOverflow();
+      });
+
+      const footerSlot = this.shadowRoot.querySelector('slot[name="footer"]');
+      this.__footerSlotObserver = new SlotObserver(footerSlot, ({ currentNodes }) => {
+        setOverlayStateAttribute(this, 'has-footer', currentNodes.length > 0);
+        this.__updateOverflow();
+      });
     }
 
     /** @private */
@@ -132,17 +146,12 @@ export const DialogOverlayMixin = (superClass) =>
       const openedChanged = this._oldOpenedFooterHeader !== opened;
       this._oldOpenedFooterHeader = opened;
 
-      // Set attributes here to update styles before detecting content overflow
-      setOverlayStateAttribute(this, 'has-header', !!headerRenderer);
-      setOverlayStateAttribute(this, 'has-footer', !!footerRenderer);
-
       if (headerRendererChanged) {
         if (headerRenderer) {
           this.headerContainer = this.__initContainer(this.headerContainer, 'header-content');
         } else if (this.headerContainer) {
           this.headerContainer.remove();
           this.headerContainer = null;
-          this.__updateOverflow();
         }
       }
 
@@ -152,7 +161,6 @@ export const DialogOverlayMixin = (superClass) =>
         } else if (this.footerContainer) {
           this.footerContainer.remove();
           this.footerContainer = null;
-          this.__updateOverflow();
         }
       }
 

packages/dialog/test/dom/dialog.test.js

@@ -37,15 +37,15 @@ describe('vaadin-dialog', () => {
       dialog.headerRenderer = (root) => {
         root.textContent = 'Header';
       };
-      await nextUpdate(dialog);
+      await nextRender();
       await expect(dialog).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
     });
 
     it('footerRenderer', async () => {
       dialog.footerRenderer = (root) => {
         root.textContent = 'Footer';
       };
-      await nextUpdate(dialog);
+      await nextRender();
       await expect(dialog).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
     });
   });

packages/dialog/test/header-footer.test.js

@@ -207,7 +207,7 @@ describe('header/footer feature', () => {
       await nextRender();
 
       dialog.headerRenderer = null;
-      await nextUpdate(dialog);
+      await nextRender();
       expect(dialog.hasAttribute('has-header')).to.be.not.ok;
       expect(overlay.hasAttribute('has-header')).to.be.not.ok;
     });
@@ -293,7 +293,7 @@ describe('header/footer feature', () => {
       await nextRender();
 
       dialog.footerRenderer = null;
-      await nextUpdate(dialog);
+      await nextRender();
       expect(dialog.hasAttribute('has-footer')).to.be.not.ok;
       expect(overlay.hasAttribute('has-footer')).to.be.not.ok;
     });
@@ -447,7 +447,7 @@ describe('header/footer feature', () => {
       expect(getComputedStyle(headerPart).display).to.not.be.equal('none');
 
       dialog.headerTitle = null;
-      await nextUpdate(dialog);
+      await nextRender();
       expect(getComputedStyle(headerPart).display).to.not.be.equal('none');
     });
 
@@ -462,7 +462,7 @@ describe('header/footer feature', () => {
       expect(getComputedStyle(headerPart).display).to.not.be.equal('none');
 
       dialog.headerRenderer = null;
-      await nextUpdate(dialog);
+      await nextRender();
       expect(getComputedStyle(headerPart).display).to.not.be.equal('none');
     });
 
@@ -478,7 +478,7 @@ describe('header/footer feature', () => {
 
       dialog.headerTitle = null;
       dialog.headerRenderer = null;
-      await nextUpdate(dialog);
+      await nextRender();
       expect(getComputedStyle(headerPart).display).to.be.equal('none');
     });
   });
@@ -536,3 +536,107 @@ describe('renderer set before attach', () => {
     expect(spy.calledOnce).to.be.true;
   });
 });
+
+describe('slotted header content', () => {
+  let dialog, overlay;
+
+  beforeEach(async () => {
+    dialog = fixtureSync('<vaadin-dialog></vaadin-dialog>');
+    await nextRender();
+    overlay = dialog.$.overlay;
+  });
+
+  afterEach(async () => {
+    dialog.opened = false;
+    await nextRender();
+  });
+
+  it('should not have [has-header] attribute when no header content is slotted', async () => {
+    dialog.opened = true;
+    await nextRender();
+    expect(dialog.hasAttribute('has-header')).to.be.false;
+    expect(overlay.hasAttribute('has-header')).to.be.false;
+  });
+
+  it('should set [has-header] attribute when header content is slotted', async () => {
+    const header = document.createElement('div');
+    header.setAttribute('slot', 'header-content');
+    header.textContent = 'Header Content';
+    dialog.appendChild(header);
+
+    dialog.opened = true;
+    await nextRender();
+
+    expect(dialog.hasAttribute('has-header')).to.be.true;
+    expect(overlay.hasAttribute('has-header')).to.be.true;
+  });
+
+  it('should remove [has-header] attribute when slotted header content is removed', async () => {
+    const header = document.createElement('div');
+    header.setAttribute('slot', 'header-content');
+    header.textContent = 'Header Content';
+    dialog.appendChild(header);
+
+    dialog.opened = true;
+    await nextRender();
+    expect(overlay.hasAttribute('has-header')).to.be.true;
+
+    header.remove();
+    await nextRender();
+
+    expect(dialog.hasAttribute('has-header')).to.be.false;
+    expect(overlay.hasAttribute('has-header')).to.be.false;
+  });
+});
+
+describe('slotted footer content', () => {
+  let dialog, overlay;
+
+  beforeEach(async () => {
+    dialog = fixtureSync('<vaadin-dialog></vaadin-dialog>');
+    await nextRender();
+    overlay = dialog.$.overlay;
+  });
+
+  afterEach(async () => {
+    dialog.opened = false;
+    await nextRender();
+  });
+
+  it('should not have [has-footer] attribute when no footer content is slotted', async () => {
+    dialog.opened = true;
+    await nextRender();
+    expect(dialog.hasAttribute('has-footer')).to.be.false;
+    expect(overlay.hasAttribute('has-footer')).to.be.false;
+  });
+
+  it('should set [has-footer] attribute when footer content is slotted', async () => {
+    const footer = document.createElement('div');
+    footer.setAttribute('slot', 'footer');
+    footer.textContent = 'Footer Content';
+    dialog.appendChild(footer);
+
+    dialog.opened = true;
+    await nextRender();
+
+    expect(dialog.hasAttribute('has-footer')).to.be.true;
+    expect(overlay.hasAttribute('has-footer')).to.be.true;
+  });
+
+  it('should remove [has-footer] attribute when slotted footer content is removed', async () => {
+    const footer = document.createElement('div');
+    footer.setAttribute('slot', 'footer');
+    footer.textContent = 'Footer Content';
+    dialog.appendChild(footer);
+
+    dialog.opened = true;
+    await nextRender();
+    expect(overlay.hasAttribute('has-footer')).to.be.true;
+
+    footer.remove();
+    await nextRender();
+
+    expect(dialog.hasAttribute('has-footer')).to.be.false;
+    expect(overlay.hasAttribute('has-footer')).to.be.false;
+  });
+});

packages/dialog/test/overflow.test.js

@@ -120,7 +120,7 @@ describe('overflow', () => {
         expect(overlay.hasAttribute('overflow')).to.be.true;
 
         dialog.headerRenderer = null;
-        await nextUpdate(dialog);
+        await nextRender();
         expect(dialog.hasAttribute('overflow')).to.be.false;
         expect(overlay.hasAttribute('overflow')).to.be.false;
       });
@@ -133,7 +133,7 @@ describe('overflow', () => {
         expect(overlay.hasAttribute('overflow')).to.be.true;
 
         dialog.footerRenderer = null;
-        await nextUpdate(dialog);
+        await nextRender();
         expect(dialog.hasAttribute('overflow')).to.be.false;
         expect(overlay.hasAttribute('overflow')).to.be.false;
       });
@@ -182,7 +182,7 @@ describe('overflow', () => {
         dialog.headerRenderer = null;
         dialog.footerRenderer = null;
         dialog.headerTitle = null;
-        await nextUpdate(dialog);
+        await nextRender();
         expect(dialog.hasAttribute('overflow')).to.be.false;
         expect(overlay.hasAttribute('overflow')).to.be.false;
       });

packages/dialog/test/visual/base/dialog.test.js

@@ -83,4 +83,51 @@ describe('dialog', () => {
     await nextUpdate(element);
     await visualDiff(div, 'content-no-padding-theme');
   });
+
+  describe('slotted content', () => {
+    it('slotted header', async () => {
+      const header = document.createElement('div');
+      header.setAttribute('slot', 'header-content');
+      header.textContent = 'Slotted Header';
+      element.appendChild(header);
+      await nextUpdate(element);
+      await visualDiff(div, 'slotted-header');
+    });
+
+    it('slotted footer', async () => {
+      const footer = document.createElement('div');
+      footer.setAttribute('slot', 'footer');
+      footer.textContent = 'Slotted Footer';
+      element.appendChild(footer);
+      await nextUpdate(element);
+      await visualDiff(div, 'slotted-footer');
+    });
+
+    it('slotted header and footer', async () => {
+      const header = document.createElement('div');
+      header.setAttribute('slot', 'header-content');
+      header.textContent = 'Slotted Header';
+      element.appendChild(header);
+
+      const footer = document.createElement('div');
+      footer.setAttribute('slot', 'footer');
+      footer.textContent = 'Slotted Footer';
+      element.appendChild(footer);
+
+      await nextUpdate(element);
+      await visualDiff(div, 'slotted-header-footer');
+    });
+
+    it('title with slotted header', async () => {
+      element.headerTitle = 'Dialog Title';
+
+      const header = document.createElement('div');
+      header.setAttribute('slot', 'header-content');
+      header.textContent = 'Close';
+      element.appendChild(header);
+
+      await nextUpdate(element);
+      await visualDiff(div, 'title-slotted-header');
+    });
+  });
 });