fix: avoid overriding custom button content and theme (#3487)

vaadin · Feb 24, 2022 · d62edf8 · d62edf8
1 parent 0b5d624
commit d62edf8
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 9 deletions.
diff --git a/packages/confirm-dialog/src/vaadin-confirm-dialog.d.ts b/packages/confirm-dialog/src/vaadin-confirm-dialog.d.ts
@@ -90,12 +90,14 @@ declare class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(HT
 
   /**
    * Text displayed on confirm-button.
+   * This only affects the default button, custom slotted buttons will not be altered.
    * @attr {string} confirm-text
    */
   confirmText: string;
 
   /**
    * Theme for a confirm-button.
+   * This only affects the default button, custom slotted buttons will not be altered.
    * @attr {string} confirm-theme
    */
   confirmTheme: string;
@@ -113,12 +115,14 @@ declare class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(HT
 
   /**
    * Text displayed on reject-button.
+   * This only affects the default button, custom slotted buttons will not be altered.
    * @attr {string} reject-text
    */
   rejectText: string;
 
   /**
    * Theme for a reject-button.
+   * This only affects the default button, custom slotted buttons will not be altered.
    * @attr {string} reject-theme
    */
   rejectTheme: string;
@@ -130,12 +134,14 @@ declare class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(HT
 
   /**
    * Text displayed on cancel-button.
+   * This only affects the default button, custom slotted buttons will not be altered.
    * @attr {string} cancel-text
    */
   cancelText: string;
 
   /**
    * Theme for a cancel-button.
+   * This only affects the default button, custom slotted buttons will not be altered.
    * @attr {string} cancel-theme
    */
   cancelTheme: string;

diff --git a/packages/confirm-dialog/src/vaadin-confirm-dialog.js b/packages/confirm-dialog/src/vaadin-confirm-dialog.js
@@ -131,6 +131,7 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
 
       /**
        * Text displayed on confirm-button.
+       * This only affects the default button, custom slotted buttons will not be altered.
        * @attr {string} confirm-text
        * @type {string}
        */
@@ -141,6 +142,7 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
 
       /**
        * Theme for a confirm-button.
+       * This only affects the default button, custom slotted buttons will not be altered.
        * @attr {string} confirm-theme
        * @type {string}
        */
@@ -171,6 +173,7 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
 
       /**
        * Text displayed on reject-button.
+       * This only affects the default button, custom slotted buttons will not be altered.
        * @attr {string} reject-text
        * @type {string}
        */
@@ -181,6 +184,7 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
 
       /**
        * Theme for a reject-button.
+       * This only affects the default button, custom slotted buttons will not be altered.
        * @attr {string} reject-theme
        * @type {string}
        */
@@ -201,6 +205,7 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
 
       /**
        * Text displayed on cancel-button.
+       * This only affects the default button, custom slotted buttons will not be altered.
        * @attr {string} cancel-text
        * @type {string}
        */
@@ -211,6 +216,7 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
 
       /**
        * Theme for a cancel-button.
+       * This only affects the default button, custom slotted buttons will not be altered.
        * @attr {string} cancel-theme
        * @type {string}
        */
@@ -305,16 +311,20 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
         const button = document.createElement('vaadin-button');
         button.setAttribute('theme', this.cancelTheme);
         button.textContent = this.cancelText;
+        button._isDefaultButton = true;
         return button;
       },
       'reject-button': () => {
         const button = document.createElement('vaadin-button');
         button.setAttribute('theme', this.rejectTheme);
         button.textContent = this.rejectText;
+        button._isDefaultButton = true;
         return button;
       },
       'confirm-button': () => {
-        return document.createElement('vaadin-button');
+        const button = document.createElement('vaadin-button');
+        button._isDefaultButton = true;
+        return button;
       }
     };
   }
@@ -430,15 +440,17 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
   /** @private */
   __updateCancelButton(button, cancelText, cancelTheme, showCancel) {
     if (button) {
-      button.textContent = cancelText;
-      button.setAttribute('theme', cancelTheme);
+      if (button._isDefaultButton) {
+        button.textContent = cancelText;
+        button.setAttribute('theme', cancelTheme);
+      }
       button.toggleAttribute('hidden', !showCancel);
     }
   }
 
   /** @private */
   __updateConfirmButton(button, confirmText, confirmTheme) {
-    if (button) {
+    if (button && button._isDefaultButton) {
       button.textContent = confirmText;
       button.setAttribute('theme', confirmTheme);
     }
@@ -463,8 +475,10 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
   /** @private */
   __updateRejectButton(button, rejectText, rejectTheme, showReject) {
     if (button) {
-      button.textContent = rejectText;
-      button.setAttribute('theme', rejectTheme);
+      if (button._isDefaultButton) {
+        button.textContent = rejectText;
+        button.setAttribute('theme', rejectTheme);
+      }
       button.toggleAttribute('hidden', !showReject);
     }
   }

diff --git a/packages/confirm-dialog/test/confirm-dialog.test.js b/packages/confirm-dialog/test/confirm-dialog.test.js
@@ -318,9 +318,9 @@ describe('vaadin-confirm-dialog', () => {
     beforeEach(() => {
       confirm = fixtureSync(`
         <vaadin-confirm-dialog>
-          <button slot="confirm-button">Confirm</button>
-          <button slot="cancel-button">Cancel</button>
-          <button slot="reject-button">Reject</button>
+          <button slot="confirm-button" theme="custom-confirm-theme">Custom Confirm</button>
+          <button slot="cancel-button" theme="custom-cancel-theme">Custom Cancel</button>
+          <button slot="reject-button" theme="custom-reject-theme">Custom Reject</button>
         </vaadin-confirm-dialog>
       `);
       overlay = confirm.$.dialog.$.overlay;
@@ -342,6 +342,34 @@ describe('vaadin-confirm-dialog', () => {
       await oneEvent(overlay, 'vaadin-overlay-open');
       expect(spy.calledOnce).to.be.true;
     });
+
+    it('should not override custom button content and theme', async () => {
+      const confirmButton = confirm.querySelector('[slot="confirm-button"]');
+      const cancelButton = confirm.querySelector('[slot="cancel-button"]');
+      const rejectButton = confirm.querySelector('[slot="reject-button"]');
+      confirm.opened = true;
+      await oneEvent(overlay, 'vaadin-overlay-open');
+
+      function verifyButtonsAreNotModified() {
+        expect(confirmButton.textContent).to.equal('Custom Confirm');
+        expect(confirmButton.getAttribute('theme')).to.equal('custom-confirm-theme');
+        expect(cancelButton.textContent).to.equal('Custom Cancel');
+        expect(cancelButton.getAttribute('theme')).to.equal('custom-cancel-theme');
+        expect(rejectButton.textContent).to.equal('Custom Reject');
+        expect(rejectButton.getAttribute('theme')).to.equal('custom-reject-theme');
+      }
+
+      // Using default text and theme values, buttons should not be modified
+      verifyButtonsAreNotModified();
+      // Using custom text and theme values, buttons should not be modified
+      confirm.confirmText = 'Override Confirm Text';
+      confirm.confirmTheme = 'override-confirm-theme';
+      confirm.cancelText = 'Override Cancel Text';
+      confirm.cancelTheme = 'override-cancel-theme';
+      confirm.rejectText = 'Override Reject Text';
+      confirm.rejectTheme = 'override-reject-theme';
+      verifyButtonsAreNotModified();
+    });
   });
 
   describe('events', () => {