Propagate theme attribute to nested overlays, list-boxes and items, a…

…dd tests
vaadin · May 15, 2019 · 283a888 · 283a888
1 parent d67b28b
commit 283a888
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 1 deletion.
diff --git a/src/vaadin-context-menu-overlay.html b/src/vaadin-context-menu-overlay.html
@@ -69,6 +69,12 @@
             parentOverlay: {
               type: Object,
               readOnly: true
+            },
+
+            theme: {
+              type: String,
+              reflectToAttribute: true,
+              observer: '_themeChanged'
             }
           };
         }
@@ -90,6 +96,31 @@
           });
         }
 
+        _themeChanged(theme) {
+          const childContextMenu = this.querySelector('vaadin-context-menu');
+          const childListBox = this.querySelector('vaadin-context-menu-list-box');
+
+          if (childListBox) {
+            if (theme && theme !== '') {
+              childListBox.setAttribute('theme', theme);
+              Array.from(childListBox.querySelectorAll('vaadin-context-menu-item'))
+                .forEach(item => item.setAttribute('theme', theme));
+            } else {
+              childListBox.removeAttribute('theme');
+              Array.from(childListBox.querySelectorAll('vaadin-context-menu-item'))
+                .forEach(item => item.removeAttribute('theme'));
+            }
+          }
+
+          if (childContextMenu) {
+            if (theme && theme !== '') {
+              childContextMenu.setAttribute('theme', theme);
+            } else {
+              childContextMenu.removeAttribute('theme');
+            }
+          }
+        }
+
         getBoundaries() {
           // Measure actual overlay and content sizes
           const overlayRect = this.getBoundingClientRect();

diff --git a/src/vaadin-context-menu.html b/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

diff --git a/src/vaadin-contextmenu-items-mixin.html b/src/vaadin-contextmenu-items-mixin.html
@@ -156,6 +156,12 @@
       // Store the reference to align based on parent overlay coordinates
       subMenu.$.overlay._setParentOverlay(parent);
 
+      // Set theme attribute from parent element
+      const parentTheme = parent.getAttribute('theme');
+      if (parentTheme && parentTheme !== '') {
+        subMenu.setAttribute('theme', parentTheme);
+      }
+
       let x;
       content.style.minWidth = '';
       if (document.documentElement.clientWidth - itemRect.right > itemRect.width) {
@@ -200,6 +206,7 @@
           component.setAttribute('role', 'separator');
         }
         component.classList.add('vaadin-menu-item');
+        component.setAttribute('theme', this.theme);
 
         component._item = item;
 
@@ -236,7 +243,7 @@
     __initMenu(root, menu) {
       if (!root.firstElementChild) {
         root.innerHTML = `
-          <vaadin-context-menu-list-box></vaadin-context-menu-list-box>
+          <vaadin-context-menu-list-box theme="${this.theme}"></vaadin-context-menu-list-box>
           <vaadin-context-menu hidden></vaadin-context-menu>
         `;
         Polymer.flush();

diff --git a/test/items.html b/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';
@@ -414,6 +422,97 @@
           expect(menuComponents()[0].getAttribute('aria-expanded')).to.equal('false');
         });
       });
+
+      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);
+            });
+          });
+        });
+
+        function themeAttributeEquals(theme, el, overlay = false, listBox = false, items = false) {
+          const elOverlay = el.$.overlay;
+          const elListBox = elOverlay.querySelector('vaadin-context-menu-list-box');
+          const elItems = Array.from(elListBox.querySelectorAll('vaadin-context-menu-item'));
+
+          if (overlay) {
+            return elOverlay.getAttribute('theme') === theme;
+          } else if (listBox) {
+            return elListBox.getAttribute('theme') === theme;
+          } else if (items) {
+            return elItems.filter(item => item.getAttribute('theme') !== theme).length === 0;
+          }
+
+          return el.getAttribute('theme') === theme;
+        }
+
+        ['propagate', 'remove'].forEach(condition => {
+          const theme = condition === 'remove' ? null : 'foo';
+
+          it(`should ${condition} theme attribute ${condition === 'remove' ? 'from' : 'to'} the nested context-menus`, () => {
+            if (condition === 'remove') {
+              rootMenu.removeAttribute('theme');
+            }
+
+            expect(themeAttributeEquals(theme, rootMenu)).to.be.true;
+            expect(themeAttributeEquals(theme, subMenu)).to.be.true;
+            expect(themeAttributeEquals(theme, subMenu2)).to.be.true;
+          });
+
+          it(`should ${condition} theme attribute ${condition === 'remove' ? 'from' : 'to'} the nested overlays`, () => {
+            if (condition === 'remove') {
+              rootMenu.removeAttribute('theme');
+            }
+
+            expect(themeAttributeEquals(theme, rootMenu, true)).to.be.true;
+            expect(themeAttributeEquals(theme, subMenu, true)).to.be.true;
+            expect(themeAttributeEquals(theme, subMenu2, true)).to.be.true;
+          });
+
+          it(`should ${condition} theme attribute ${condition === 'remove' ? 'from' : 'to'} the nested list-boxes`, () => {
+            if (condition === 'remove') {
+              rootMenu.removeAttribute('theme');
+            }
+
+            expect(themeAttributeEquals(theme, rootMenu, false, true)).to.be.true;
+            expect(themeAttributeEquals(theme, subMenu, false, true)).to.be.true;
+            expect(themeAttributeEquals(theme, subMenu2, false, true)).to.be.true;
+          });
+
+          it(`should ${condition} theme attribute ${condition === 'remove' ? 'from' : 'to'} the items`, () => {
+            if (condition === 'remove') {
+              rootMenu.removeAttribute('theme');
+            }
+
+            expect(themeAttributeEquals(theme, rootMenu, false, false, true)).to.be.true;
+            expect(themeAttributeEquals(theme, subMenu, false, false, true)).to.be.true;
+            expect(themeAttributeEquals(theme, subMenu2, false, false, true)).to.be.true;
+          });
+        });
+      });
     });
   </script>
 </body>