From 7408134f214b4a805787c5c7b4acb722100f738e Mon Sep 17 00:00:00 2001
From: web-padawan <iamkulykov@gmail.com>
Date: Fri, 15 Mar 2024 11:12:28 +0200
Subject: [PATCH] fix: do not override theme attribute set on slotted buttons

---
 packages/crud/src/vaadin-crud-controllers.js |  3 +-
 packages/crud/test/crud-buttons.test.js      | 76 ++++++++++++++++++++
 2 files changed, 78 insertions(+), 1 deletion(-)

diff --git a/packages/crud/src/vaadin-crud-controllers.js b/packages/crud/src/vaadin-crud-controllers.js
index 2492c96818..4ee96949dc 100644
--- a/packages/crud/src/vaadin-crud-controllers.js
+++ b/packages/crud/src/vaadin-crud-controllers.js
@@ -41,7 +41,8 @@ export class ButtonSlotController extends SlotController {
       this.defaultNode = node;
     }
 
-    if (node === this.defaultNode) {
+    // Respect default theme attribute set by the Flow counterpart
+    if (node === this.defaultNode && !node.hasAttribute('theme')) {
       node.setAttribute('theme', this.theme);
     }
 
diff --git a/packages/crud/test/crud-buttons.test.js b/packages/crud/test/crud-buttons.test.js
index 14b04d0735..57da4eda17 100644
--- a/packages/crud/test/crud-buttons.test.js
+++ b/packages/crud/test/crud-buttons.test.js
@@ -738,6 +738,25 @@ describe('crud buttons', () => {
 
         expect(button.textContent).to.equal('Add user');
       });
+
+      it('should set theme attribute of the new item button when marked as a default', async () => {
+        button._isDefault = true;
+
+        crud.appendChild(button);
+        await nextRender();
+
+        expect(button.getAttribute('theme')).to.equal('primary');
+      });
+
+      it('should not change theme attribute of the new item button when marked as a default', async () => {
+        button._isDefault = true;
+        button.setAttribute('theme', 'primary success');
+
+        crud.appendChild(button);
+        await nextRender();
+
+        expect(button.getAttribute('theme')).to.equal('primary success');
+      });
     });
 
     describe('delete', () => {
@@ -774,6 +793,25 @@ describe('crud buttons', () => {
 
         expect(button.textContent).to.equal('Drop user');
       });
+
+      it('should set theme attribute of the delete button when marked as a default', async () => {
+        button._isDefault = true;
+
+        crud.appendChild(button);
+        await nextRender();
+
+        expect(button.getAttribute('theme')).to.equal('tertiary error');
+      });
+
+      it('should not change theme attribute of the delete button when marked as a default', async () => {
+        button._isDefault = true;
+        button.setAttribute('theme', 'tertiary contrast');
+
+        crud.appendChild(button);
+        await nextRender();
+
+        expect(button.getAttribute('theme')).to.equal('tertiary contrast');
+      });
     });
 
     describe('save', () => {
@@ -810,6 +848,25 @@ describe('crud buttons', () => {
 
         expect(button.textContent).to.equal('Save user');
       });
+
+      it('should set theme attribute of the save button when marked as a default', async () => {
+        button._isDefault = true;
+
+        crud.appendChild(button);
+        await nextRender();
+
+        expect(button.getAttribute('theme')).to.equal('primary');
+      });
+
+      it('should not change theme attribute of the save button when marked as a default', async () => {
+        button._isDefault = true;
+        button.setAttribute('theme', 'primary contrast');
+
+        crud.appendChild(button);
+        await nextRender();
+
+        expect(button.getAttribute('theme')).to.equal('primary contrast');
+      });
     });
 
     describe('cancel', () => {
@@ -846,6 +903,25 @@ describe('crud buttons', () => {
 
         expect(button.textContent).to.equal('Discard');
       });
+
+      it('should set theme attribute of the cancel button when marked as a default', async () => {
+        button._isDefault = true;
+
+        crud.appendChild(button);
+        await nextRender();
+
+        expect(button.getAttribute('theme')).to.equal('tertiary');
+      });
+
+      it('should not change theme attribute of the cancel button when marked as a default', async () => {
+        button._isDefault = true;
+        button.setAttribute('theme', 'tertiary contrast');
+
+        crud.appendChild(button);
+        await nextRender();
+
+        expect(button.getAttribute('theme')).to.equal('tertiary contrast');
+      });
     });
   });