Merge pull request #161 from vaadin/feature/propagate-theme

Propagate theme attribute to internal components
vaadin · Sep 5, 2018 · 8a55fe5 · 8a55fe5
2 parents fba3509 + e330a1b
commit 8a55fe5
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 5 deletions.
diff --git a/bower.json b/bower.json
@@ -29,7 +29,7 @@
     "polymer": "^2.0.0",
     "iron-media-query": "^2.0.0",
     "vaadin-control-state-mixin": "vaadin/vaadin-control-state-mixin#^2.1.1",
-    "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.2.1",
+    "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.3.2",
     "vaadin-text-field": "vaadin/vaadin-text-field#^2.1.1",
     "vaadin-overlay": "vaadin/vaadin-overlay#^3.2.0-alpha2",
     "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.1.0",

diff --git a/demo/dropdown-menu-styling-demos.html b/demo/dropdown-menu-styling-demos.html
@@ -55,6 +55,39 @@ <h3>Customizing the Template Content</h3>
       </template>
     </vaadin-demo-snippet>
 
+    <h3>Custom Theme Variant</h3>
+    <vaadin-demo-snippet id="dropdown-menu-custom-theme-variant">
+      <template preserve-content>
+        <dom-module id="custom-dropdown-menu" theme-for="vaadin-text-field vaadin-item">
+          <template>
+            <style>
+              :host([theme~="custom"]) {
+                font-family: monospace;
+              }
+            </style>
+          </template>
+        </dom-module>
+        <dom-module id="custom-dropdown-menu-overlay" theme-for="vaadin-text-field vaadin-dropdown-menu-overlay">
+          <template>
+            <style>
+              :host([theme~="custom"]) [part~="overlay"] {
+                background: linear-gradient(hsla(214, 61%, 25%, 0.05), hsla(214, 61%, 25%, 0.05)) #fff;
+              }
+            </style>
+          </template>
+        </dom-module>
+        <vaadin-dropdown-menu label="Name" theme="custom">
+          <template>
+            <vaadin-list-box>
+              <vaadin-item theme="custom">Jose</vaadin-item>
+              <vaadin-item theme="custom">Manolo</vaadin-item>
+              <vaadin-item theme="custom">Pedro</vaadin-item>
+            </vaadin-list-box>
+          </template>
+        </vaadin-dropdown-menu>
+      </template>
+    </vaadin-demo-snippet>
+
   </template>
   <script>
     class DropdownMenuStylingDemos extends DemoReadyEventEmitter(DropdownMenuDemo(Polymer.Element)) {

diff --git a/demo/index.html b/demo/index.html
@@ -27,6 +27,25 @@
 </head>
 
 <body>
+  <dom-module id="custom-dropdown-menu" theme-for="vaadin-text-field vaadin-item">
+    <template>
+      <style>
+        :host([theme~="custom"]) {
+          font-family: monospace;
+        }
+      </style>
+    </template>
+  </dom-module>
+  <dom-module id="custom-dropdown-menu-overlay" theme-for="vaadin-text-field vaadin-dropdown-menu-overlay">
+    <template>
+      <style>
+        :host([theme~="custom"]) [part~="overlay"] {
+          background: linear-gradient(hsla(214, 61%, 25%, 0.05), hsla(214, 61%, 25%, 0.05)) #fff;
+        }
+      </style>
+    </template>
+  </dom-module>
+
   <vaadin-component-demo config-src="demos.json"></vaadin-component-demo>
 </body>
 </html>
diff --git a/src/vaadin-dropdown-menu.html b/src/vaadin-dropdown-menu.html
@@ -7,6 +7,7 @@
 <link rel="import" href="../../polymer/polymer-element.html">
 <link rel="import" href="../../polymer/lib/elements/custom-style.html">
 <link rel="import" href="../../vaadin-themable-mixin/vaadin-themable-mixin.html">
+<link rel="import" href="../../vaadin-themable-mixin/vaadin-theme-property-mixin.html">
 <link rel="import" href="../../vaadin-control-state-mixin/vaadin-control-state-mixin.html">
 <link rel="import" href="../../iron-resizable-behavior/iron-resizable-behavior.html">
 <link rel="import" href="../../iron-media-query/iron-media-query.html">
@@ -57,17 +58,23 @@
         invalid="[[invalid]]"
         error-message="[[errorMessage]]"
         readonly$="[[readonly]]"
+        theme$="[[theme]]"
       >
       <slot name="prefix" slot="prefix"></slot>
       <div part="value"></div>
       <div part="toggle-button" slot="suffix" role="button" aria-label="Toggle"></div>
     </vaadin-dropdown-menu-text-field>
-    <vaadin-dropdown-menu-overlay opened="{{opened}}" with-backdrop="[[_phone]]" phone$="[[_phone]]"></vaadin-dropdown-menu-overlay>
+    <vaadin-dropdown-menu-overlay
+      opened="{{opened}}"
+      with-backdrop="[[_phone]]"
+      phone$="[[_phone]]"
+      theme$="[[theme]]"
+    ></vaadin-dropdown-menu-overlay>
 
     <iron-media-query
       query="[[_phoneMediaQuery]]"
-      query-matches="{{_phone}}">
-    </iron-media-query>
+      query-matches="{{_phone}}"
+    ></iron-media-query>
   </template>
 
   <script>
@@ -152,17 +159,28 @@
        *
        * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
        *
+       * In addition to `<vaadin-dropdown-menu>` itself, the following internal
+       * components are themable:
+       *
+       * - `<vaadin-dropdown-menu-text-field>`
+       * - `<vaadin-dropdown-menu-overlay>`
+       *
+       * Note: the `theme` attribute value set on `<vaadin-dropdown-menu>` is
+       * propagated to the internal themable components listed above.
+       *
        * @memberof Vaadin
        * @mixes Vaadin.ElementMixin
        * @mixes Vaadin.ControlStateMixin
        * @mixes Vaadin.ThemableMixin
+       * @mixes Vaadin.ThemePropertyMixin
        * @demo demo/index.html
        */
       class DropdownMenuElement extends
         Vaadin.ElementMixin(
           Vaadin.ControlStateMixin(
             Vaadin.ThemableMixin(
-              Polymer.mixinBehaviors(Polymer.IronResizableBehavior, Polymer.Element)))) {
+              Vaadin.ThemePropertyMixin(
+                Polymer.mixinBehaviors(Polymer.IronResizableBehavior, Polymer.Element))))) {
 
         static get is() {
           return 'vaadin-dropdown-menu';

diff --git a/test/dropdown-menu-test.html b/test/dropdown-menu-test.html
@@ -131,6 +131,12 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="theme">
+    <template>
+      <vaadin-dropdown-menu theme="foo"></vaadin-dropdown-menu>
+    </template>
+  </test-fixture>
+
   <script>
     function arrowUp(target) {
       MockInteractions.keyDownOn(target, 38, [], 'ArrowUp');
@@ -800,5 +806,19 @@
         });
       });
     });
+
+    describe('vaadin-dropdown-menu theme attribute', () => {
+      let dropdown;
+
+      beforeEach(() => dropdown = fixture('theme'));
+
+      it('should propagate theme attribute to field', () => {
+        expect(dropdown._inputElement.getAttribute('theme')).to.equal('foo');
+      });
+
+      it('should propagate theme attribute to overlay', () => {
+        expect(dropdown._overlayElement.getAttribute('theme')).to.equal('foo');
+      });
+    });
   </script>
 </body>