From 221815ab1d5ef743b991aad6caefe8815722f040 Mon Sep 17 00:00:00 2001 From: Zecat Date: Mon, 9 Jan 2017 02:45:31 +0100 Subject: [PATCH 1/6] v2.0-beta.5 Updated dependencies for Hybrid mode Changed content to slot and @apply(--mixin) to @apply --mixin Updated bower.json Upgrading to Hybrid mode Upgrading to Hybrid mode --- README.md | 2 +- bower.json | 80 ++++++++++++++++++++++++----------- demo/index.html | 2 +- paper-step.html | 16 ++++--- paper-stepper.html | 32 ++++++++------ step-horizontal-label.html | 24 +++++------ step-label-shared-styles.html | 8 ++-- step-vertical.html | 28 ++++++------ 8 files changed, 116 insertions(+), 76 deletions(-) diff --git a/README.md b/README.md index b6be8da..9de7122 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ See [component page](http://zecat.github.io/paper-stepper) ## installation -`bower install -S Zecat/paper-stepper` +`bower install -S Zecat/paper-stepper#v2.0-beta.5` ## Basic use diff --git a/bower.json b/bower.json index 91ffc70..7d20303 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "paper-stepper", - "version": "2.0-beta.4", + "version": "2.0-beta.5", "authors": [ "Zecat " ], @@ -18,31 +18,63 @@ "/test/" ], "dependencies": { - "polymer": "Polymer/polymer#^1.2.0", - "paper-button": "PolymerElements/paper-button#^1.0.11", - "iron-icons": "PolymerElements/iron-icons#^1.1.3", - "paper-styles": "PolymerElements/paper-styles#^1.1.4", - "paper-ripple": "PolymerElements/paper-ripple#^1.0.5", - "iron-selector": "PolymerElements/iron-selector#^1.3.0", - "iron-icon": "PolymerElements/iron-icon#^1.0.8", - "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.3.1", - "neon-animation": "PolymerElements/neon-animation#^1.1.1", - "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.5", - "iron-collapse": "PolymerElements/iron-collapse#^1.2.0" + "polymer": "Polymer/polymer#1.9 - 2", + "paper-button": "PolymerElements/paper-button#1 - 2", + "iron-icons": "PolymerElements/iron-icons#1 - 2", + "paper-styles": "PolymerElements/paper-styles#1 - 2", + "paper-ripple": "PolymerElements/paper-ripple#1 - 2", + "iron-selector": "PolymerElements/iron-selector#1 - 2", + "iron-icon": "PolymerElements/iron-icon#1 - 2", + "iron-flex-layout": "PolymerElements/iron-flex-layout#1 - 2", + "neon-animation": "PolymerElements/neon-animation#1 - 2", + "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#1 - 2", + "iron-collapse": "PolymerElements/iron-collapse#1 - 2" }, "devDependencies": { - "paper-input": "PolymerElements/paper-input#^1.1.10", - "paper-material": "PolymerElements/paper-material#^1.0.6", - "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", - "web-component-tester": "*", - "iron-form": "PolymerElements/iron-form#^1.0.16", - "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.2.2", - "paper-toggle-button": "PolymerElements/paper-toggle-button#^1.2.0", - "app-layout": "PolymerElements/app-layout#^0.10.2", - "paper-menu": "PolymerElements/paper-menu#^1.2.2", + "paper-input": "PolymerElements/paper-input#1 - 2", + "paper-material": "PolymerElements/paper-material#1 - 2", + "iron-component-page": "PolymerElements/iron-component-page#1 - 2", + "web-component-tester": "^6.0.0", + "iron-form": "PolymerElements/iron-form#1 - 2", + "iron-demo-helpers": "PolymerElements/iron-demo-helpers#1 - 2", + "paper-toggle-button": "PolymerElements/paper-toggle-button#1 - 2", + "app-layout": "PolymerElements/app-layout#1 - 2", + "paper-menu": "PolymerElements/paper-menu#1 - 2", "iron-scroll-spy": "Zecat/iron-scroll-spy#^2.1.0", - "paper-item": "PolymerElements/paper-item#^1.2.1", - "paper-toast": "PolymerElements/paper-toast#^1.3.0", - "paper-checkbox": "PolymerElements/paper-checkbox#^1.4.0" + "paper-item": "PolymerElements/paper-item#1 - 2", + "paper-toast": "PolymerElements/paper-toast#1 - 2", + "paper-checkbox": "PolymerElements/paper-checkbox#1 - 2" + }, + "variants": { + "1.x": { + "dependencies": { + "polymer": "Polymer/polymer#^1.9.0", + "paper-button": "PolymerElements/paper-button#^1.0.11", + "iron-icons": "PolymerElements/iron-icons#^1.1.3", + "paper-styles": "PolymerElements/paper-styles#^1.1.4", + "paper-ripple": "PolymerElements/paper-ripple#^1.0.5", + "iron-selector": "PolymerElements/iron-selector#^1.3.0", + "iron-icon": "PolymerElements/iron-icon#^1.0.8", + "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.3.1", + "neon-animation": "PolymerElements/neon-animation#^1.1.1", + "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.5", + "iron-collapse": "PolymerElements/iron-collapse#^1.2.0" + }, + "devDependencies": { + "paper-input": "PolymerElements/paper-input#^1.1.10", + "paper-material": "PolymerElements/paper-material#^1.0.6", + "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", + "web-component-tester": "*", + "iron-form": "PolymerElements/iron-form#^1.0.16", + "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.2.2", + "paper-toggle-button": "PolymerElements/paper-toggle-button#^1.2.0", + "app-layout": "PolymerElements/app-layout#^0.10.2", + "paper-menu": "PolymerElements/paper-menu#^1.2.2", + "iron-scroll-spy": "Zecat/iron-scroll-spy#^2.1.0", + "paper-item": "PolymerElements/paper-item#^1.2.1", + "paper-toast": "PolymerElements/paper-toast#^1.3.0", + "paper-checkbox": "PolymerElements/paper-checkbox#^1.4.0" + } + } } } diff --git a/demo/index.html b/demo/index.html index 547a107..70ce329 100644 --- a/demo/index.html +++ b/demo/index.html @@ -158,7 +158,7 @@

Description

Paper-stepper is an element made with Polymer with respect to the material specifications.

Steppers display progress through a sequence by breaking it up into multiple logical and numbered steps. They may also be used for navigation.

Spec recommendation: Avoid using steppers to break up sections in a short form, or multiple times on one page and don’t embed steppers within steppers.

-

Start using now bower install -S Zecat/paper-stepper

+

Start using now bower install -S Zecat/paper-stepper#v2.0-beta.5

Note, it is still a beta release, attributes and methods might change suddenly.

diff --git a/paper-step.html b/paper-step.html index c78cf4d..6bdf29d 100644 --- a/paper-step.html +++ b/paper-step.html @@ -23,8 +23,8 @@ } :host(:not([vertical])) { overflow: hidden; - @apply(--layout); - @apply(--layout-flex); + @apply --layout; + @apply --layout-flex; } :host(:not([vertical]):hover){ overflow: visible; @@ -41,8 +41,8 @@ } #contentWrapper { padding: 24px 24px 0 24px; - @apply(--layout-scroll); - @apply(--layout-fit); + @apply --layout-scroll; + @apply --layout-fit; pointer-events: auto; } :host(:focus:not([opened]):not([saved])) step-horizontal-label ::content #badge { @@ -357,7 +357,9 @@ _updateSlideshowViewportTop: function(optional, _alternativeLabel, vertical) { if (!vertical) { this.async(function() { - this.$$('#slideshowViewport').style.top = this.clientHeight+'px'; + var el = this.$$('#slideshowViewport'); + if (!el) return; + el.style.top = this.clientHeight+'px'; this.fire('step-horizontal-label-resize'); }) } @@ -396,8 +398,8 @@ _verticalChange: function(vertical) { this.async(function() { - // move or create the content tag - Polymer.dom(this.$$(vertical ? '#verticalStepLabel' : '#contentWrapper')).appendChild(this.$$('content') || this.create('content')); + // move or create the slot tag + Polymer.dom(this.$$(vertical ? '#verticalStepLabel' : '#contentWrapper')).appendChild(this.$$('slot') || this.create('slot')); // reset the ripple this._ripple = false; this._rippleContainer = vertical ? this.$$('#verticalStepLabel').$.label : this.$$('#horizontalStepLabel').$.label; diff --git a/paper-stepper.html b/paper-stepper.html index 5504009..9bcd0af 100644 --- a/paper-stepper.html +++ b/paper-stepper.html @@ -106,8 +106,8 @@ :host { display: block; box-sizing: border-box; - @apply(--layout-vertical); - @apply(--shadow-elevation-2dp); + @apply --layout-vertical; + @apply --shadow-elevation-2dp; background: white; border-radius: 1px; } @@ -120,7 +120,7 @@ :host([vertical]) { padding: 4px 0; - @apply(--layout-scroll); + @apply --layout-scroll; max-height: var(--paper-stepper-vertical-max-height); } :host(:not([vertical])) { @@ -131,7 +131,7 @@ transition: max-height var(--paper-stepper-horizontal-opening-transition-duration, 300ms), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); } :host(:not([vertical]):not([opened]):not(.collapsing)) { - @apply(--shadow-none); + @apply --shadow-none; } :host(:not([vertical])[opened]) { max-height: var(--paper-stepper-horizontal-opened-height, 450px); @@ -140,19 +140,19 @@ height: var(--paper-stepper-horizontal-opened-height, 450px); } :host(:not([vertical])) #content-wrapper { - @apply(--shadow-elevation-2dp); - @apply(--layout-horizontal); - @apply(--layout-flex-none); - @apply(--layout-justified); + @apply --shadow-elevation-2dp; + @apply --layout-horizontal; + @apply --layout-flex-none; + @apply --layout-justified; background: var(--paper-stepper-horizontal-label-wrapper-background, --primary-background-color); border-radius: 1px; overflow: hidden; } .flex { - @apply(--layout-flex); + @apply --layout-flex; } #buttonsWrapper { - @apply(--layout-horizontal); + @apply --layout-horizontal; margin: 0 24px 24px 24px; overflow: hidden; } @@ -175,7 +175,7 @@
- +
@@ -497,8 +497,12 @@ _updateStepperClosedMaxHeight: function() { this.debounce('updateStepperClosedMaxHeight', function() { - this.customStyle['--label-wrapper-height'] = this.$$('#content-wrapper').clientHeight + 'px'; - this.updateStyles('--label-wrapper-height'); + if (Polymer.Element) { + this.updateStyles({ '--label-wrapper-height': this.$$('#content-wrapper').clientHeight + 'px' }); + } else { + this.customStyle['--label-wrapper-height'] = this.$$('#content-wrapper').clientHeight + 'px'; + this.updateStyles('--label-wrapper-height'); + } }); }, @@ -614,10 +618,12 @@ }, _forwardCanSkip: function(_canSkip, selectedItem) { + if (!selectedItem) return; selectedItem._set_canSkip(_canSkip); }, _forwardHasBackStep: function(_hasBackStep, selectedItem) { + if (!selectedItem) return; selectedItem._set_hasBackStep(_hasBackStep); }, diff --git a/step-horizontal-label.html b/step-horizontal-label.html index 16eee7c..9d85dce 100644 --- a/step-horizontal-label.html +++ b/step-horizontal-label.html @@ -15,10 +15,10 @@ overflow: hidden; } :host([alternative-label]) { - @apply(--layout); + @apply --layout; } #textWrapper { - @apply(--layout-vertical); + @apply --layout-vertical; padding-right: 8px; overflow: hidden; } @@ -36,8 +36,8 @@ z-index: 1; } :host(:not([alternative-label])) #label { - @apply(--layout-horizontal); - @apply(--layout-center); + @apply --layout-horizontal; + @apply --layout-center; height: 72px; } :host(.firstStep:not([alternative-label])) #badge { @@ -53,7 +53,7 @@ height: 1px; min-width: 16px; background: var(--paper-step-connector-line-color, --divider-color); - @apply(--layout-flex); + @apply --layout-flex; content: ''; } :host([alternative-label].first-step) #badgeWrapper::before, @@ -62,22 +62,22 @@ } :host([alternative-label]) #textWrapper{ padding: 0 16px; - @apply(--layout-vertical); - @apply(--layout-center); + @apply --layout-vertical; + @apply --layout-center; } :host([alternative-label]) #textLabel, :host([alternative-label]) #optional{ text-align: center; - @apply(--layout-self-stretch); + @apply --layout-self-stretch; } :host([alternative-label]) #label{ - @apply(--layout-vertical); - @apply(--layout-self-stretch); + @apply --layout-vertical; + @apply --layout-self-stretch; padding: 24px 0; width: 100%; } :host([alternative-label]) #badgeWrapper { - @apply(--layout-horizontal); - @apply(--layout-center); + @apply --layout-horizontal; + @apply --layout-center; padding-bottom: 16px; } :host(.first-step:not([alternative-label])) #label { diff --git a/step-label-shared-styles.html b/step-label-shared-styles.html index c73239a..bb4ea11 100644 --- a/step-label-shared-styles.html +++ b/step-label-shared-styles.html @@ -10,8 +10,8 @@ :host { display: block; box-sizing: border-box; - @apply(--paper-font-common-base); - @apply(--layout-flex); + @apply --paper-font-common-base; + @apply --layout-flex; } #textWrapper { color: var(--paper-step-disabled-label-text-color, --paper-grey-400); @@ -50,8 +50,8 @@ border-radius: 50%; color: var(--paper-step-badge-color, --dark-theme-text-color); font-size: 12px; - @apply(--layout); - @apply(--layout-center-center); + @apply --layout; + @apply --layout-center-center; } #badge iron-icon { --iron-icon-height: var(--paper-step-badge-icon-width, 16px); diff --git a/step-vertical.html b/step-vertical.html index 2e937ca..8acf3e8 100644 --- a/step-vertical.html +++ b/step-vertical.html @@ -15,7 +15,7 @@ diff --git a/step-vertical.html b/step-vertical.html index 95d1998..059cc0f 100644 --- a/step-vertical.html +++ b/step-vertical.html @@ -34,7 +34,7 @@ } #contentConnectorLine { width: 1px; - background: var(--divider-color, --paper-grey-300); + background: var(--divider-color, var(--paper-grey-300)); margin-left: 36px; margin-right: 24px; } @@ -64,8 +64,8 @@ margin-left: 0; } #continueButton { - background: var(--paper-vertical-step-continue-button-background, --primary-color); - color: var(--paper-vertical-step-continue-button-color, --dark-theme-text-color); + background: var(--paper-vertical-step-continue-button-background, var(--primary-color)); + color: var(--paper-vertical-step-continue-button-color, var(--dark-theme-text-color); } /** * Label @@ -84,7 +84,7 @@ } #beforeConnectorLine, #afterConnectorLine { width: 1px; - background: var(--paper-step-connector-line-color, --divider-color); + background: var(--paper-step-connector-line-color, var(--divider-color)); } #beforeConnectorLine { height: 10px;