Propagate theme attribute

src/vaadin-context-menu-overlay.html

@@ -73,6 +73,10 @@
           };
         }
 
+        static get observers() {
+          return ['_themeChanged(theme)'];
+        }
+
         ready() {
           super.ready();
 
@@ -95,6 +99,10 @@
           return this.content.querySelector(':not(style):not(slot)');
         }
 
+        _themeChanged(theme) {
+          this.close();
+        }
+
         getBoundaries() {
           // Measure actual overlay and content sizes
           const overlayRect = this.getBoundingClientRect();

src/vaadin-context-menu.html

@@ -248,6 +248,8 @@
        *
        * Note: the `theme` attribute value set on `<vaadin-context-menu>` is
        * propagated to the internal `<vaadin-context-menu-overlay>` component.
+       * In case of using nested menu items, the `theme` attribute is also propagated
+       * to internal `vaadin-context-menu-list-box` and `vaadin-context-menu-item`'s.
        *
        * @memberof Vaadin
        * @mixes Vaadin.ElementMixin

src/vaadin-contextmenu-items-mixin.html

@@ -156,6 +156,13 @@
       // Store the reference to align based on parent overlay coordinates
       subMenu.$.overlay._setParentOverlay(parent);
 
+      // Set theme attribute from parent element
+      if (parent.theme) {
+        subMenu.setAttribute('theme', parent.theme);
+      } else {
+        subMenu.removeAttribute('theme');
+      }
+
       let x;
       content.style.minWidth = '';
       if (document.documentElement.clientWidth - itemRect.right > itemRect.width) {
@@ -200,6 +207,7 @@
           component.setAttribute('role', 'separator');
         }
         component.classList.add('vaadin-menu-item');
+        this.theme && component.setAttribute('theme', this.theme);
 
         component._item = item;
 
@@ -241,6 +249,7 @@
         `;
         Polymer.flush();
         const listBox = root.querySelector('vaadin-context-menu-list-box');
+        this.theme && listBox.setAttribute('theme', this.theme);
         listBox.classList.add('vaadin-menu-list-box');
         requestAnimationFrame(() => listBox.setAttribute('role', 'menu'));
         const subMenu = root.querySelector('vaadin-context-menu');
@@ -323,6 +332,13 @@
         menu.$.overlay.addEventListener(openEvent, openSubMenu);
         menu.$.overlay.addEventListener('keydown', e =>
           (e.keyCode === 39 || e.keyCode === 13 || e.keyCode === 32) && openSubMenu(e));
+      } else {
+        const listBox = root.querySelector('vaadin-context-menu-list-box');
+        if (this.theme) {
+          listBox.setAttribute('theme', this.theme);
+        } else {
+          listBox.removeAttribute('theme');
+        }
       }
     }
 

test/items.html

@@ -20,6 +20,14 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="theme">
+    <template>
+      <vaadin-context-menu theme="foo">
+        <button id="target"></button>
+      </vaadin-context-menu>
+    </template>
+  </test-fixture>
+
   <script>
     const MOBILE = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
     const OPENEVENT = MOBILE ? 'touchstart' : 'mouseover';
@@ -482,6 +490,86 @@
           });
         }
       });
+
+      describe('theme propagation', () => {
+        let subMenu2;
+
+        beforeEach(done => {
+          rootMenu = fixture('theme');
+          rootMenu.openOn = OPENEVENT;
+          target = rootMenu.firstElementChild;
+          rootMenu.items = [
+            {text: 'foo-0', children:
+              [
+                {text: 'foo-0-0'},
+                {text: 'foo-0-1', children: [
+                  {text: 'foo-0-1-0'}
+                ]},
+              ]
+            },
+            {text: 'foo-1'}
+          ];
+          open();
+          flush(() => {
+            open(menuComponents()[0]);
+            subMenu = getSubMenu();
+            flush(() => {
+              open(menuComponents(subMenu)[1]);
+              subMenu2 = getSubMenu();
+              flush(done);
+            });
+          });
+        });
+
+        it('should propagate theme attribute to the nested elements', () => {
+          [rootMenu, subMenu, subMenu2].forEach(subMenu => {
+            const overlay = subMenu.$.overlay;
+            const listBox = overlay.querySelector('vaadin-context-menu-list-box');
+            const items = Array.from(listBox.querySelectorAll('vaadin-context-menu-item'));
+
+            expect(overlay.getAttribute('theme')).to.equal('foo');
+            expect(listBox.getAttribute('theme')).to.equal('foo');
+
+            const itemsThemeEqualsFoo = items.filter(item => item.getAttribute('theme') !== 'foo').length === 0;
+            expect(itemsThemeEqualsFoo).to.be.true;
+          });
+        });
+
+        it('should close the menu and submenu on theme changed', () => {
+          rootMenu.setAttribute('theme', 'bar');
+          expect(rootMenu.opened).to.be.false;
+          expect(subMenu.opened).to.be.false;
+          expect(subMenu2.opened).to.be.false;
+        });
+
+        it('should remove theme attribute from the nested elements', async() => {
+          rootMenu.removeAttribute('theme');
+
+          // Should wait until submenus will be opened again.
+          await new Promise(resolve => {
+            open();
+            flush(() => {
+              open(menuComponents()[0]);
+              flush(() => {
+                open(menuComponents(subMenu)[1]);
+                flush(resolve);
+              });
+            });
+          });
+
+          [rootMenu, subMenu, subMenu2].forEach(subMenu => {
+            const overlay = subMenu.$.overlay;
+            const listBox = overlay.querySelector('vaadin-context-menu-list-box');
+            const items = Array.from(listBox.querySelectorAll('vaadin-context-menu-item'));
+
+            expect(overlay.hasAttribute('theme')).to.be.false;
+            expect(listBox.hasAttribute('theme')).to.be.false;
+
+            const itemsDoNotHaveTheme = items.filter(item => item.hasAttribute('theme')).length === 0;
+            expect(itemsDoNotHaveTheme).to.be.true;
+          });
+        });
+      });
     });
   </script>
 </body>