fix: do not override theme attribute set on slotted buttons (#7215) (#…

…7218) Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
vaadin · Mar 15, 2024 · e400872 · e400872
1 parent b6f98ee
commit e400872
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 1 deletion.
diff --git 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
@@ -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');
+      });
     });
   });