refactor!: use header and footer in confirm-dialog (#3673)

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

@@ -15,42 +15,35 @@ registerStyles(
       --_vaadin-confirm-dialog-content-height: auto;
     }
 
-    [part='content'] {
+    [part='overlay'] {
       width: var(--_vaadin-confirm-dialog-content-width);
-      display: flex;
-      flex-direction: column;
       height: var(--_vaadin-confirm-dialog-content-height);
-      box-sizing: content-box;
     }
 
-    [part='message'] {
-      margin-bottom: auto;
+    /* Override display: contents */
+    :host([has-header]) ::slotted([slot='header']) {
+      display: block;
+    }
+
+    /* Make buttons clickable */
+    [part='footer'] > * {
+      pointer-events: all;
     }
   `,
   { moduleId: 'vaadin-confirm-dialog-overlay-styles' }
 );
 
 let memoizedTemplate;
 
-const dialogTemplate = html`
-  <div part="header">
-    <slot name="header"></slot>
+const footerTemplate = html`
+  <div part="cancel-button">
+    <slot name="cancel-button"></slot>
   </div>
-
-  <div part="message">
-    <slot></slot>
+  <div part="reject-button">
+    <slot name="reject-button"></slot>
   </div>
-
-  <div part="footer">
-    <div part="cancel-button">
-      <slot name="cancel-button"></slot>
-    </div>
-    <div part="reject-button">
-      <slot name="reject-button"></slot>
-    </div>
-    <div part="confirm-button">
-      <slot name="confirm-button"></slot>
-    </div>
+  <div part="confirm-button">
+    <slot name="confirm-button"></slot>
   </div>
 `;
 
@@ -67,10 +60,28 @@ class ConfirmDialogOverlay extends DialogOverlay {
   static get template() {
     if (!memoizedTemplate) {
       memoizedTemplate = super.template.cloneNode(true);
+
+      // Replace two header slots with a single one
+      const headerPart = memoizedTemplate.content.querySelector('[part="header"]');
+      headerPart.innerHTML = '';
+      const headerSlot = document.createElement('slot');
+      headerSlot.setAttribute('name', 'header');
+      headerPart.appendChild(headerSlot);
+
+      // Place default slot inside a "message" part
       const contentPart = memoizedTemplate.content.querySelector('[part="content"]');
       const defaultSlot = contentPart.querySelector('slot:not([name])');
-      contentPart.removeChild(defaultSlot);
-      contentPart.appendChild(dialogTemplate.content.cloneNode(true));
+      const messagePart = document.createElement('div');
+      messagePart.setAttribute('part', 'message');
+      contentPart.appendChild(messagePart);
+      messagePart.appendChild(defaultSlot);
+
+      // Replace footer slot with button named slots
+      const footerPart = memoizedTemplate.content.querySelector('[part="footer"]');
+      footerPart.setAttribute('role', 'toolbar');
+      const footerSlot = footerPart.querySelector('slot');
+      footerPart.removeChild(footerSlot);
+      footerPart.appendChild(footerTemplate.content.cloneNode(true));
     }
     return memoizedTemplate;
   }
@@ -86,6 +97,18 @@ class ConfirmDialogOverlay extends DialogOverlay {
 
     this.dispatchEvent(new CustomEvent('vaadin-confirm-dialog-close'));
   }
+
+  /**
+   * @protected
+   * @override
+   */
+  _headerFooterRendererChange(headerRenderer, footerRenderer, opened) {
+    super._headerFooterRendererChange(headerRenderer, footerRenderer, opened);
+
+    // ConfirmDialog has header and footer but does not use renderers
+    this.setAttribute('has-header', '');
+    this.setAttribute('has-footer', '');
+  }
 }
 
 customElements.define(ConfirmDialogOverlay.is, ConfirmDialogOverlay);

packages/confirm-dialog/test/confirm-dialog.test.js

@@ -474,14 +474,14 @@ describe('vaadin-confirm-dialog', () => {
       it('should update width after opening the dialog', () => {
         confirm._setWidth('300px');
         expect(spy.calledWith('width', '300px')).to.be.true;
-        expect(getComputedStyle(overlay.$.content).width).to.be.equal('300px');
+        expect(getComputedStyle(overlay.$.overlay).width).to.be.equal('300px');
       });
 
       it('should update height after opening the dialog', () => {
         confirm._setHeight('500px');
         expect(spy.calledWith('height', '500px')).to.be.true;
         expect(spy.calledWith('height', '500px')).to.be.true;
-        expect(getComputedStyle(overlay.$.content).height).to.equal('500px');
+        expect(getComputedStyle(overlay.$.overlay).height).to.equal('500px');
       });
     });
 
@@ -503,7 +503,7 @@ describe('vaadin-confirm-dialog', () => {
         confirm.opened = true;
         await oneEvent(overlay, 'vaadin-overlay-open');
         expect(spy.calledWith('width', '200px')).to.be.true;
-        expect(getComputedStyle(overlay.$.content).width).to.be.equal('200px');
+        expect(getComputedStyle(overlay.$.overlay).width).to.be.equal('200px');
       });
 
       it('should update height after opening the dialog', async () => {
@@ -513,7 +513,7 @@ describe('vaadin-confirm-dialog', () => {
         confirm.opened = true;
         await oneEvent(overlay, 'vaadin-overlay-open');
         expect(spy.calledWith('height', '500px')).to.be.true;
-        expect(getComputedStyle(overlay.$.content).height).to.equal('500px');
+        expect(getComputedStyle(overlay.$.overlay).height).to.equal('500px');
       });
     });
   });

packages/confirm-dialog/theme/lumo/vaadin-confirm-dialog-styles.js

@@ -5,8 +5,10 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 registerStyles(
   'vaadin-confirm-dialog-overlay',
   css`
-    [part='header'] ::slotted(h3) {
+    :host([has-header]) [part='header'] ::slotted(h3) {
       margin-top: 0 !important;
+      margin-bottom: 0 !important;
+      margin-inline-start: calc(var(--lumo-space-l) - var(--lumo-space-m));
     }
 
     [part='message'] {
@@ -15,23 +17,6 @@ registerStyles(
       max-width: 100%;
     }
 
-    [part='footer'] {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: flex-end;
-      margin: calc(var(--lumo-space-l) * -1);
-      margin-top: var(--lumo-space-l);
-      padding: 0 var(--lumo-space-l);
-      background-color: var(--lumo-contrast-5pct);
-      border-bottom-left-radius: var(--lumo-border-radius-l);
-      border-bottom-right-radius: var(--lumo-border-radius-l);
-    }
-
-    [part='footer'] > * {
-      margin-top: var(--lumo-space-s);
-      margin-bottom: var(--lumo-space-s);
-    }
-
     ::slotted([slot$='button'][theme~='tertiary']) {
       padding-left: var(--lumo-space-s);
       padding-right: var(--lumo-space-s);
@@ -42,55 +27,17 @@ registerStyles(
     }
 
     @media (max-width: 360px) {
-      [part='footer'] {
+      :host([has-footer]) [part='footer'] {
         flex-direction: column-reverse;
-      }
-
-      [part='footer'] div {
-        margin: var(--lumo-space-xs) calc(var(--lumo-space-l) / -2) calc(var(--lumo-space-xs) * -1);
+        align-items: stretch;
+        padding: var(--lumo-space-s) var(--lumo-space-l);
+        gap: var(--lumo-space-s);
       }
 
       ::slotted([slot$='button']) {
         width: 100%;
-        margin-top: var(--lumo-space-xs);
-        margin-bottom: var(--lumo-space-xs);
+        margin: 0;
       }
-
-      [part='confirm-button'] {
-        margin-top: var(--lumo-space-s);
-      }
-
-      [part='cancel-button'] {
-        margin-bottom: var(--lumo-space-s);
-      }
-    }
-
-    /* LTR styles */
-    :host(:not([dir='rtl'])) [part='cancel-button'] {
-      margin-left: calc(var(--lumo-space-s) * -1);
-    }
-
-    :host(:not([dir='rtl'])) [part='confirm-button'] {
-      margin-right: calc(var(--lumo-space-s) * -1);
-      margin-left: var(--lumo-space-s);
-    }
-
-    :host(:not([dir='rtl'])) [part='reject-button'] {
-      margin-left: var(--lumo-space-s);
-    }
-
-    /* RTL styles */
-    :host([dir='rtl']) [part='cancel-button'] {
-      margin-right: calc(var(--lumo-space-s) * -1);
-    }
-
-    :host([dir='rtl']) [part='confirm-button'] {
-      margin-right: var(--lumo-space-s);
-      margin-left: calc(var(--lumo-space-s) * -1);
-    }
-
-    :host([dir='rtl']) [part='reject-button'] {
-      margin-right: var(--lumo-space-s);
     }
   `,
   { moduleId: 'lumo-confirm-dialog-overlay' }

packages/confirm-dialog/theme/material/vaadin-confirm-dialog-styles.js

@@ -9,65 +9,26 @@ registerStyles(
     }
 
     [part='content'] {
-      padding: 8px 24px;
       min-width: 0;
     }
 
     [part='header'] ::slotted(h3) {
-      margin-top: 0.75em !important;
+      margin-top: 0 !important;
+      margin-bottom: 0 !important;
+      margin-inline-start: 8px;
     }
 
     [part='message'] {
       width: 25em;
       max-width: 100%;
-      margin-right: 24px;
-    }
-
-    [part='footer'] {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: flex-end;
-      margin-top: 28px;
-      margin-right: -16px;
-    }
-
-    /* LTR styles */
-    :host(:not([dir='rtl'])) ::slotted([slot$='button']:not([slot^='confirm'])) {
-      margin-right: 8px;
-    }
-
-    /* RTL styles */
-    :host([dir='rtl']) [part='message'] {
-      margin-left: 24px;
-      margin-right: 0;
-    }
-
-    :host([dir='rtl']) [part='footer'] {
-      margin-left: -16px;
-      margin-right: 0;
-    }
-
-    :host([dir='rtl']) ::slotted([slot$='button']:not([slot^='confirm'])) {
-      margin-left: 8px;
+      margin-inline-end: 24px;
     }
 
     @media (max-width: 360px) {
       [part='footer'] {
         flex-direction: column-reverse;
         align-items: flex-end;
       }
-
-      ::slotted([slot$='button']:not([slot^='confirm'])) {
-        margin-top: 8px;
-      }
-
-      :host(:not([dir='rtl'])) ::slotted([slot$='button']:not([slot^='confirm'])) {
-        margin-right: 0;
-      }
-
-      :host([dir='rtl']) ::slotted([slot$='button']:not([slot^='confirm'])) {
-        margin-left: 0;
-      }
     }
   `,
   { moduleId: 'material-confirm-dialog-overlay' }