Merge 68cdb00 into cd9a87f

vaadin · Sep 5, 2018 · b1656da · b1656da
2 parents cd9a87f + 68cdb00
commit b1656da
Show file tree

Hide file tree

Showing 11 changed files with 198 additions and 12 deletions.
diff --git a/bower.json b/bower.json
@@ -40,7 +40,7 @@
     "polymer": "^2.0",
     "vaadin-button": "vaadin/vaadin-button#^2.1.0-beta2",
     "vaadin-text-field": "vaadin/vaadin-text-field#^2.1.0-beta2",
-    "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.2.1",
+    "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.3.2",
     "vaadin-control-state-mixin": "vaadin/vaadin-control-state-mixin#^2.1.1",
     "vaadin-overlay": "vaadin/vaadin-overlay#^3.1.0-beta2",
     "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.1.0-beta1",

diff --git a/demo/date-picker-styling-demos.html b/demo/date-picker-styling-demos.html
@@ -49,6 +49,31 @@ <h3>Custom Inputs</h3>
       </template>
     </vaadin-demo-snippet>
 
+
+    <h3>Small Text Field</h3>
+    <vaadin-demo-snippet id="date-picker-styling-demos-small-text-field">
+      <template preserve-content>
+        <vaadin-date-picker theme="small" label="Select date"></vaadin-date-picker>
+      </template>
+    </vaadin-demo-snippet>
+
+
+    <h3>Custom Theme Variant</h3>
+    <vaadin-demo-snippet id="date-picker-styling-demos-small-text-field">
+      <template preserve-content>
+        <dom-module id="custom-date-picker" theme-for="vaadin-text-field vaadin-date-picker-overlay-content">
+          <template>
+            <style>
+              :host([theme~="custom"]) {
+                font-family: monospace;
+              }
+            </style>
+          </template>
+        </dom-module>
+        <vaadin-date-picker theme="custom" label="Select date"></vaadin-date-picker>
+      </template>
+    </vaadin-demo-snippet>
+
   </template>
   <script>
     class DatePickerStylingDemos extends DemoReadyEventEmitter(DatePickerDemo(Polymer.Element)) {

diff --git a/demo/index.html b/demo/index.html
@@ -29,6 +29,16 @@
 </head>
 
 <body>
+  <dom-module id="custom-font" theme-for="vaadin-text-field vaadin-date-picker-overlay-content">
+    <template>
+      <style>
+        :host([theme~="custom"]) {
+          font-family: monospace;
+        }
+      </style>
+    </template>
+  </dom-module>
+
   <vaadin-component-demo config-src="demos.json"></vaadin-component-demo>
 </body>
 </html>
diff --git a/src/vaadin-date-picker-light.html b/src/vaadin-date-picker-light.html
@@ -7,6 +7,7 @@
 <link rel="import" href="../../polymer/polymer-element.html">
 <link rel="import" href="../../iron-media-query/iron-media-query.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-date-picker-overlay.html">
 <link rel="import" href="vaadin-date-picker-overlay-content.html">
 <link rel="import" href="vaadin-date-picker-mixin.html">
@@ -30,7 +31,8 @@
         opened="{{opened}}"
         fullscreen$="[[_fullscreen]]"
         on-vaadin-overlay-open="_onOverlayOpened"
-        on-vaadin-overlay-close="_onOverlayClosed">
+        on-vaadin-overlay-close="_onOverlayClosed"
+        theme$="[[theme]]">
       <template>
         <vaadin-date-picker-overlay-content
           id="overlay-content" i18n="[[i18n]]"
@@ -44,7 +46,8 @@
           max-date="[[_maxDate]]"
           on-date-tap="_close"
           role="dialog"
-          part="overlay-content">
+          part="overlay-content"
+          theme$="[[theme]]">
         </vaadin-date-picker-overlay-content>
       </template>
     </vaadin-date-picker-overlay>
@@ -94,11 +97,25 @@
        *
        * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
        *
+       * In addition to `<vaadin-date-picker-light>` itself, the following
+       * internal components are themable:
+       *
+       * - `<vaadin-date-picker-overlay>`
+       * - `<vaadin-date-picker-overlay-content>`
+       * - `<vaadin-month-calendar>`
+       *
+       * Note: the `theme` attribute value set on `<vaadin-date-picker-light>`
+       * is propagated to the internal themable components listed above.
+       *
        * @memberof Vaadin
        * @mixes Vaadin.ThemableMixin
+       * @mixes Vaadin.ThemePropertyMixin
        * @mixes Vaadin.DatePickerMixin
        */
-      class DatePickerLightElement extends Vaadin.ThemableMixin(Vaadin.DatePickerMixin(Polymer.Element)) {
+      class DatePickerLightElement extends
+        Vaadin.ThemableMixin(
+          Vaadin.ThemePropertyMixin(
+            Vaadin.DatePickerMixin(Polymer.Element))) {
         static get is() {
           return 'vaadin-date-picker-light';
         }

diff --git a/src/vaadin-date-picker-overlay-content.html b/src/vaadin-date-picker-overlay-content.html
@@ -11,6 +11,7 @@
 <link rel="import" href="../../iron-a11y-announcer/iron-a11y-announcer.html">
 <link rel="import" href="../../vaadin-button/src/vaadin-button.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-month-calendar.html">
 <link rel="import" href="vaadin-infinite-scroller.html">
 <link rel="import" href="vaadin-date-picker-helper.html">
@@ -200,7 +201,8 @@
             min-date="[[minDate]]"
             max-date="[[maxDate]]"
             focused$="[[_focused]]"
-            part="month">
+            part="month"
+            theme$="[[theme]]">
           </vaadin-month-calendar>
         </template>
       </vaadin-infinite-scroller>
@@ -231,7 +233,10 @@
        * @memberof Vaadin
        * @private
        */
-      class DatePickerOverlayContentElement extends Vaadin.ThemableMixin(Polymer.GestureEventListeners(Polymer.Element)) {
+      class DatePickerOverlayContentElement extends
+        Vaadin.ThemableMixin(
+          Vaadin.ThemePropertyMixin(
+            Polymer.GestureEventListeners(Polymer.Element))) {
 
         static get is() {
           return 'vaadin-date-picker-overlay-content';

diff --git a/src/vaadin-date-picker.html b/src/vaadin-date-picker.html
@@ -8,6 +8,7 @@
 <link rel="import" href="../../polymer/lib/mixins/gesture-event-listeners.html">
 <link rel="import" href="../../iron-media-query/iron-media-query.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="vaadin-date-picker-overlay.html">
 <link rel="import" href="vaadin-date-picker-overlay-content.html">
@@ -71,6 +72,7 @@
         error-message="[[errorMessage]]"
         aria-label$="[[label]]"
         part="text-field"
+        theme$="[[theme]]"
       >
       <slot name="prefix" slot="prefix"></slot>
       <div part="clear-button" slot="suffix" on-touchend="_clearTouchend" on-click="_clear" role="button" aria-label$="[[i18n.clear]]"></div>
@@ -79,9 +81,9 @@
 
     <vaadin-date-picker-overlay
         id="overlay"
-        fullscreen$=[[_fullscreen]]
         opened="{{opened}}"
         fullscreen$="[[_fullscreen]]"
+        theme$="[[theme]]"
         on-vaadin-overlay-open="_onOverlayOpened"
         on-vaadin-overlay-close="_onOverlayClosed">
       <template>
@@ -97,7 +99,8 @@
             max-date="[[_maxDate]]"
             role="dialog"
             on-date-tap="_close"
-            part="overlay-content">
+            part="overlay-content"
+            theme$="[[theme]]">
         </vaadin-date-picker-overlay-content>
       </template>
     </vaadin-date-picker-overlay>
@@ -171,10 +174,22 @@
        * If you want to replace the default input field with a custom implementation, you should use the
        * [`<vaadin-date-picker-light>`](#vaadin-date-picker-light) element.
        *
+       * In addition to `<vaadin-date-picker>` itself, the following internal
+       * components are themable:
+       *
+       * - `<vaadin-text-field>`
+       * - `<vaadin-date-picker-overlay>`
+       * - `<vaadin-date-picker-overlay-content>`
+       * - `<vaadin-month-calendar>`
+       *
+       * Note: the `theme` attribute value set on `<vaadin-date-picker>` is
+       * propagated to the internal themable components listed above.
+       *
        * @memberof Vaadin
        * @mixes Vaadin.ElementMixin
        * @mixes Vaadin.ControlStateMixin
        * @mixes Vaadin.ThemableMixin
+       * @mixes Vaadin.ThemePropertyMixin
        * @mixes Vaadin.DatePickerMixin
        * @mixes Polymer.GestureEventListeners
        * @demo demo/index.html
@@ -183,8 +198,9 @@
         Vaadin.ElementMixin(
           Vaadin.ControlStateMixin(
             Vaadin.ThemableMixin(
-              Vaadin.DatePickerMixin(
-                Polymer.GestureEventListeners(Polymer.Element))))) {
+              Vaadin.ThemePropertyMixin(
+                Vaadin.DatePickerMixin(
+                  Polymer.GestureEventListeners(Polymer.Element)))))) {
 
         static get is() {
           return 'vaadin-date-picker';

diff --git a/test/basic.html b/test/basic.html
@@ -44,6 +44,12 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="datepicker-theme">
+    <template>
+      <vaadin-date-picker theme="foo"></vaadin-date-picker>
+    </template>
+  </test-fixture>
+
   <script>
     describe('Basic features', () => {
       var datepicker, clearButton, toggleButton, overlayContent;
@@ -654,6 +660,49 @@
         });
       });
     });
+
+    describe('Basic features theme attribute', () => {
+      let datepicker;
+
+      beforeEach(() => datepicker = fixture('datepicker-theme'));
+
+      it('should propagate theme attribute to text-field', () => {
+        expect(datepicker._inputElement.getAttribute('theme')).to.equal('foo');
+      });
+
+      it('should propagate theme attribute to overlay', () => {
+        expect(datepicker.$.overlay.getAttribute('theme')).to.equal('foo');
+      });
+
+      it('should propagate theme attribute to overlay content', () => {
+        datepicker.open();
+        const overlayContent = datepicker.$.overlay.content
+          .querySelector('#overlay-content');
+        expect(overlayContent.getAttribute('theme')).to.equal('foo');
+      });
+
+      describe('in content', () => {
+        let overlayContent;
+
+        beforeEach(done => {
+          overlayContent = datepicker.$.overlay.content
+            .querySelector('#overlay-content');
+          overlayContent.$.yearScroller.bufferSize = 0;
+          overlayContent.$.monthScroller.bufferSize = 1;
+          open(datepicker, () => {
+            overlayContent.$.yearScroller._finishInit();
+            overlayContent.$.monthScroller._finishInit();
+            done();
+          });
+        });
+
+        it('should propagate theme attribute to month calendar', () => {
+          const monthCalendar = overlayContent.$.monthScroller
+            .querySelector('vaadin-month-calendar');
+          expect(monthCalendar.getAttribute('theme')).to.equal('foo');
+        });
+      });
+    });
   </script>
 
 </body>

diff --git a/test/custom-input.html b/test/custom-input.html
@@ -24,6 +24,16 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="custom-input-datepicker-theme">
+    <template>
+      <vaadin-date-picker-light theme="foo">
+        <iron-input>
+          <input>
+        </iron-input>
+      </vaadin-date-picker-light>
+    </template>
+  </test-fixture>
+
   <script>
     describe('custom input', () => {
       let datepicker;
@@ -59,6 +69,45 @@
         expect(overlayContent.showWeekNumbers).to.equal(true);
       });
     });
+
+    describe('custom input theme attribute', () => {
+      let datepicker;
+
+      beforeEach(() => datepicker = fixture('custom-input-datepicker-theme'));
+
+      it('should propagate theme attribute to overlay', () => {
+        expect(datepicker.$.overlay.getAttribute('theme')).to.equal('foo');
+      });
+
+      it('should propagate theme attribute to overlay content', () => {
+        datepicker.open();
+        const overlayContent = datepicker.$.overlay.content
+          .querySelector('#overlay-content');
+        expect(overlayContent.getAttribute('theme')).to.equal('foo');
+      });
+
+      describe('in content', () => {
+        let overlayContent;
+
+        beforeEach(done => {
+          overlayContent = datepicker.$.overlay.content
+            .querySelector('#overlay-content');
+          overlayContent.$.yearScroller.bufferSize = 0;
+          overlayContent.$.monthScroller.bufferSize = 1;
+          open(datepicker, () => {
+            overlayContent.$.yearScroller._finishInit();
+            overlayContent.$.monthScroller._finishInit();
+            done();
+          });
+        });
+
+        it('should propagate theme attribute to month calendar', () => {
+          const monthCalendar = overlayContent.$.monthScroller
+            .querySelector('vaadin-month-calendar');
+          expect(monthCalendar.getAttribute('theme')).to.equal('foo');
+        });
+      });
+    });
   </script>
 
 </body>

diff --git a/test/visual/default.html b/test/visual/default.html
@@ -7,6 +7,13 @@
   <script>
     const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
     document.write(`<link rel="import" href="../../theme/${theme}/vaadin-date-picker.html">`);
+
+    window.addEventListener('WebComponentsReady', function() {
+      setTimeout(function() {
+        window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
+        window.webComponentsAreReady = true; // Checked in gemini before capture callback
+      });
+    });
   </script>
 </head>
 

diff --git a/test/visual/dropdown.html b/test/visual/dropdown.html
@@ -60,6 +60,11 @@
           e.target.blur();
         });
       });
+
+      setTimeout(function() {
+        window.ShadyDOM && window.ShadyDOM.flush(); // Force DOM composition
+        window.webComponentsAreReady = true; // Checked in gemini before capture callback
+      });
     });
 
     function closeDatePickers() {
@@ -71,4 +76,4 @@
     }
   </script>
 
-</body>
+</body>
diff --git a/test/visual/test.js b/test/visual/test.js
@@ -1,6 +1,9 @@
 gemini.suite('vaadin-date-picker', function(rootSuite) {
   function wait(actions, find) {
-    actions.wait(5000);
+    return actions
+      .waitForJSCondition(function(window) {
+        return window.webComponentsAreReady;
+      }, 60000);
   }
 
   function goToAboutBlank(actions, find) {