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'); + }); }); });