Skip to content

Commit

Permalink
Merge 68cdb00 into cd9a87f
Browse files Browse the repository at this point in the history
  • Loading branch information
platosha committed Sep 5, 2018
2 parents cd9a87f + 68cdb00 commit b1656da
Show file tree
Hide file tree
Showing 11 changed files with 198 additions and 12 deletions.
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
25 changes: 25 additions & 0 deletions demo/date-picker-styling-demos.html
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand Down
10 changes: 10 additions & 0 deletions demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
23 changes: 20 additions & 3 deletions src/vaadin-date-picker-light.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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]]"
Expand All @@ -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>
Expand Down Expand Up @@ -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';
}
Expand Down
9 changes: 7 additions & 2 deletions src/vaadin-date-picker-overlay-content.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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';
Expand Down
24 changes: 20 additions & 4 deletions src/vaadin-date-picker.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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
Expand All @@ -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';
Expand Down
49 changes: 49 additions & 0 deletions test/basic.html
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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>
Expand Down
49 changes: 49 additions & 0 deletions test/custom-input.html
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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>
Expand Down
7 changes: 7 additions & 0 deletions test/visual/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
7 changes: 6 additions & 1 deletion test/visual/dropdown.html
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -71,4 +76,4 @@
}
</script>

</body>
</body>
5 changes: 4 additions & 1 deletion test/visual/test.js
Original file line number Diff line number Diff line change
@@ -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) {
Expand Down

0 comments on commit b1656da

Please sign in to comment.