fix: do not remove menu item component theme

vaadin · Feb 17, 2022 · 2978a3f · 2978a3f
1 parent c0a5e13
commit 2978a3f
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 10 deletions.
diff --git a/packages/context-menu/src/vaadin-contextmenu-items-mixin.js b/packages/context-menu/src/vaadin-contextmenu-items-mixin.js
@@ -243,9 +243,11 @@ export const ItemsMixin = (superClass) =>
 
     /** @protected */
     _setMenuItemTheme(component, item, hostTheme) {
-      let theme = hostTheme;
+      // Use existing component theme when it is provided
+      let theme = component.getAttribute('theme') || hostTheme;
 
-      // item theme takes precedence over host theme even if it's empty, as long as it's not undefined or null
+      // Item theme takes precedence over host theme / component theme
+      // even if it's empty, as long as it's not undefined or null
       if (item.theme != null) {
         theme = Array.isArray(item.theme) ? item.theme.join(' ') : item.theme;
       }

diff --git a/packages/context-menu/test/items.test.js b/packages/context-menu/test/items.test.js
@@ -495,7 +495,7 @@ describe('items', () => {
     });
   });
 
-  describe('theme propagation', () => {
+  describe.only('theme propagation', () => {
     let subMenu2;
 
     beforeEach(async () => {
@@ -506,24 +506,36 @@ describe('items', () => {
       `);
       rootMenu.openOn = menuOpenEvent;
       target = rootMenu.firstElementChild;
+
+      const itemWithTheme = document.createElement('span');
+      itemWithTheme.textContent = 'Item with theme';
+      itemWithTheme.setAttribute('theme', 'bar');
+
       rootMenu.items = [
         {
           text: 'foo-0',
-          children: [{ text: 'foo-0-0' }, { text: 'foo-0-1', children: [{ text: 'foo-0-1-0' }] }]
+          children: [
+            { text: 'foo-0-0' },
+            {
+              text: 'foo-0-1',
+              children: [{ text: 'foo-0-1-0' }]
+            },
+            { component: itemWithTheme }
+          ]
         },
         { text: 'foo-1' }
       ];
       open();
-      await nextFrame();
+      await nextRender();
       open(menuComponents()[0]);
       subMenu = getSubMenu();
-      await nextFrame();
+      await nextRender();
       open(menuComponents(subMenu)[1]);
       subMenu2 = getSubMenu();
-      await nextFrame();
+      await nextRender();
     });
 
-    it('should propagate theme attribute to the nested elements', () => {
+    it('should propagate host theme attribute to the nested elements', () => {
       [rootMenu, subMenu, subMenu2].forEach((subMenu) => {
         const overlay = subMenu.$.overlay;
         const listBox = overlay.querySelector('vaadin-context-menu-list-box');
@@ -567,7 +579,7 @@ describe('items', () => {
       });
     });
 
-    it('should override the component theme with the item theme', async () => {
+    it('should override the host theme with the item theme', async () => {
       rootMenu.items[1].theme = 'bar-1';
       rootMenu.items[0].children[0].theme = 'bar-0-0';
       await updateItemsAndReopen();
@@ -586,7 +598,7 @@ describe('items', () => {
       expect(subItems[1].getAttribute('theme')).to.equal('foo');
     });
 
-    it('should use the component theme if the item theme is removed', async () => {
+    it('should use the host theme if the item theme is removed', async () => {
       rootMenu.items[1].theme = 'bar-1';
       await updateItemsAndReopen();
 
@@ -622,5 +634,23 @@ describe('items', () => {
       const rootItems = getMenuItems();
       expect(rootItems[1].getAttribute('theme')).to.equal('bar-1 bar-2 bar-3');
     });
+
+    it('should not remove theme provided on the item component', () => {
+      const item = menuComponents(subMenu2)[2];
+      expect(item.getAttribute('theme')).to.equal('bar');
+    });
+
+    it('should override component theme with the item theme', async () => {
+      subMenu.items[2].theme = 'bar-1';
+      subMenu.close();
+      subMenu.items = [...subMenu.items];
+
+      open(menuComponents()[0]);
+      await nextRender(subMenu);
+
+      const item = menuComponents(subMenu2)[2];
+
+      expect(item.getAttribute('theme')).to.equal('bar-1');
+    });
   });
 });