Merge branch '2.0-preview'

PolymerElements · May 12, 2017 · 70ce1b4 · 70ce1b4
2 parents 2f27986 + dc237b8
commit 70ce1b4
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 74 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-bower_components
+bower_components*
+bower-*.json
diff --git a/.travis.yml b/.travis.yml
@@ -1,24 +1,27 @@
 language: node_js
 sudo: required
 before_script:
-  - npm install -g bower polylint web-component-tester
-  - bower install
-  - polylint
+  - npm install -g bower polymer-cli@next
+  - polymer install --variants
+  - sudo mv /usr/bin/google-chrome /usr/bin/google-chrome-old
+  - sudo mv /usr/bin/google-chrome-beta /usr/bin/google-chrome
 env:
   global:
     - secure: >-
         Z9YLaTbrBSMCxoeqWI1cK5WFOfA1Cz4rCUhXo4l1WDnQBVcbVEQn6V7BsF9TByrTD4H4f4Gn2SZT8tKA7u5xVZn1I0djzpotogHzqOJ0zQi5krtNczTWIFe3F/fMnNxouAZxvAtkefdH+hXZJHwqlhoHYaoWw6kE7a9EYlV2x48=
     - secure: >-
         Gdkk92VJJPn8uZ3TRvzMd3tI2ilaqxcFePIVtgnMLc0SKUyYGgTmUghPJ1MDGXa152ejN4c9ydTrU68Wka9yAYRirR2K1W/i6ma4Lz7vX077IhufBjfuXMasP3X7OPGJhIdvHINkpEVrySO5kcDVjCXXq91utWv+2pRQSNdjNKQ=
-node_js: '6'
+node_js: stable
 addons:
   firefox: latest
   apt:
     sources:
       - google-chrome
     packages:
-      - google-chrome-stable
+      - google-chrome-beta
 script:
-  - xvfb-run wct
-  - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s ''default''; fi'
+  - xvfb-run polymer test
+  - >-
+    if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test -s 'default';
+    fi
 dist: trusty
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 [![Build status](https://travis-ci.org/PolymerElements/paper-toggle-button.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-toggle-button)
 
-##&lt;paper-toggle-button&gt;
+## &lt;paper-toggle-button&gt;
 
 Material design: [Switch](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-switch)
 

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "paper-toggle-button",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "description": "A material design toggle button control",
   "authors": [
     "The Polymer Authors"
@@ -18,21 +18,38 @@
   },
   "license": "http://polymer.github.io/LICENSE.txt",
   "homepage": "https://github.com/PolymerElements/paper-toggle-button",
+  "main": "paper-toggle-button.html",
   "ignore": [],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.1.0",
-    "iron-checked-element-behavior": "PolymerElements/iron-checked-element-behavior#^1.0.0",
-    "paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
-    "paper-styles": "PolymerElements/paper-styles#^1.1.0"
+    "polymer": "Polymer/polymer#^2.0.0-rc.1",
+    "iron-checked-element-behavior": "PolymerElements/iron-checked-element-behavior#2.0-preview",
+    "paper-behaviors": "PolymerElements/paper-behaviors#2.0-preview",
+    "paper-styles": "PolymerElements/paper-styles#2.0-preview"
   },
   "devDependencies": {
-    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
-    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
-    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
-    "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
-    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
-    "web-component-tester": "^4.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+    "iron-component-page": "PolymerElements/iron-component-page#2.0-preview",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#2.0-preview",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#2.0-preview",
+    "iron-test-helpers": "PolymerElements/iron-test-helpers#2.0-preview",
+    "web-component-tester": "^6.0.0-prerelease.6",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.1"
   },
-  "main": "paper-toggle-button.html"
+  "variants": {
+    "1.x": {
+      "dependencies": {
+        "polymer": "Polymer/polymer#^1.1.0",
+        "iron-checked-element-behavior": "PolymerElements/iron-checked-element-behavior#^1.0.0",
+        "paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
+        "paper-styles": "PolymerElements/paper-styles#^1.1.0"
+      },
+      "devDependencies": {
+        "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+        "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
+        "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
+        "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
+        "web-component-tester": "^4.0.0",
+        "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+      }
+    }
+  }
 }
diff --git a/demo/index.html b/demo/index.html
@@ -22,19 +22,21 @@
     <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
     <link rel="import" href="../../paper-styles/demo-pages.html">
     <link rel="import" href="../paper-toggle-button.html">
-
-    <style is="custom-style" include="demo-pages-shared-styles">
-      .vertical-section-container {
-        max-width: 500px;
-      }
-
-      paper-toggle-button {
-        margin-left: 10px;
-        margin-right: 10px;
-      }
-    </style>
   </head>
   <body unresolved>
+    <custom-style>
+      <style is="custom-style" include="demo-pages-shared-styles">
+        .vertical-section-container {
+          max-width: 500px;
+        }
+
+        paper-toggle-button {
+          margin-left: 10px;
+          margin-right: 10px;
+        }
+      </style>
+    </custom-style>
+
     <div class="vertical-section-container centered">
       <h3>Toggle buttons can be checked and disabled</h3>
       <demo-snippet class="centered-demo">
@@ -56,24 +58,26 @@ <h3>Toggle buttons can hide the ripple effect using the <i>noink</i> attribute</
     <h3>Toggle buttons can be styled using custom properties</h3>
       <demo-snippet class="centered-demo">
         <template>
-          <style is="custom-style">
-            paper-toggle-button.green {
-              --paper-toggle-button-checked-bar-color:  var(--paper-green-500);
-              --paper-toggle-button-checked-button-color:  var(--paper-green-500);
-              --paper-toggle-button-checked-ink-color: var(--paper-green-500);
-              --paper-toggle-button-unchecked-bar-color:  var(--paper-teal-500);
-              --paper-toggle-button-unchecked-button-color:  var(--paper-teal-500);
-              --paper-toggle-button-unchecked-ink-color: var(--paper-teal-500);
-            }
-            paper-toggle-button.pink {
-              --paper-toggle-button-checked-bar-color:  var(--paper-pink-500);
-              --paper-toggle-button-checked-button-color:  var(--paper-pink-500);
-              --paper-toggle-button-checked-ink-color: var(--paper-pink-500);
-              --paper-toggle-button-unchecked-bar-color:  var(--paper-indigo-900);
-              --paper-toggle-button-unchecked-button-color:  var(--paper-indigo-900);
-              --paper-toggle-button-unchecked-ink-color: var(--paper-indigo-900);
-            }
-          </style>
+          <custom-style>
+            <style is="custom-style">
+              paper-toggle-button.green {
+                --paper-toggle-button-checked-bar-color:  var(--paper-green-500);
+                --paper-toggle-button-checked-button-color:  var(--paper-green-500);
+                --paper-toggle-button-checked-ink-color: var(--paper-green-500);
+                --paper-toggle-button-unchecked-bar-color:  var(--paper-teal-500);
+                --paper-toggle-button-unchecked-button-color:  var(--paper-teal-500);
+                --paper-toggle-button-unchecked-ink-color: var(--paper-teal-500);
+              }
+              paper-toggle-button.pink {
+                --paper-toggle-button-checked-bar-color:  var(--paper-pink-500);
+                --paper-toggle-button-checked-button-color:  var(--paper-pink-500);
+                --paper-toggle-button-checked-ink-color: var(--paper-pink-500);
+                --paper-toggle-button-unchecked-bar-color:  var(--paper-indigo-900);
+                --paper-toggle-button-unchecked-button-color:  var(--paper-indigo-900);
+                --paper-toggle-button-unchecked-ink-color: var(--paper-indigo-900);
+              }
+            </style>
+          </custom-style>
 
           <paper-toggle-button class="green">Toggle</paper-toggle-button>
           <paper-toggle-button checked class="pink">Toggle</paper-toggle-button>

diff --git a/paper-toggle-button.html b/paper-toggle-button.html
@@ -63,9 +63,9 @@
     <style>
       :host {
         display: inline-block;
-        @apply(--layout-horizontal);
-        @apply(--layout-center);
-        @apply(--paper-font-common-base);
+        @apply --layout-horizontal;
+        @apply --layout-center;
+        @apply --paper-font-common-base;
       }
 
       :host([disabled]) {
@@ -86,7 +86,7 @@
         transition: background-color linear .08s;
         background-color: var(--paper-toggle-button-unchecked-bar-color, #000000);
 
-        @apply(--paper-toggle-button-unchecked-bar);
+        @apply --paper-toggle-button-unchecked-bar;
       }
 
       .toggle-button {
@@ -100,9 +100,9 @@
         transition: -webkit-transform linear .08s, background-color linear .08s;
         transition: transform linear .08s, background-color linear .08s;
         will-change: transform;
-        background-color: var(--paper-toggle-button-unchecked-button-color, --paper-grey-50);
+        background-color: var(--paper-toggle-button-unchecked-button-color, var(--paper-grey-50));
 
-        @apply(--paper-toggle-button-unchecked-button);
+        @apply --paper-toggle-button-unchecked-button;
       }
 
       .toggle-button.dragging {
@@ -112,9 +112,9 @@
 
       :host([checked]:not([disabled])) .toggle-bar {
         opacity: 0.5;
-        background-color: var(--paper-toggle-button-checked-bar-color, --primary-color);
+        background-color: var(--paper-toggle-button-checked-bar-color, var(--primary-color));
 
-        @apply(--paper-toggle-button-checked-bar);
+        @apply --paper-toggle-button-checked-bar;
       }
 
       :host([disabled]) .toggle-bar {
@@ -128,9 +128,9 @@
       }
 
       :host([checked]:not([disabled])) .toggle-button {
-        background-color: var(--paper-toggle-button-checked-button-color, --primary-color);
+        background-color: var(--paper-toggle-button-checked-button-color, var(--primary-color));
 
-        @apply(--paper-toggle-button-checked-button);
+        @apply --paper-toggle-button-checked-button;
       }
 
       :host([disabled]) .toggle-button {
@@ -148,15 +148,15 @@
         height: 48px;
         opacity: 0.5;
         pointer-events: none;
-        color: var(--paper-toggle-button-unchecked-ink-color, --primary-text-color);
+        color: var(--paper-toggle-button-unchecked-ink-color, var(--primary-text-color));
 
-        @apply(--paper-toggle-button-unchecked-ink);
+        @apply --paper-toggle-button-unchecked-ink;
       }
 
       :host([checked]) .toggle-ink {
-        color: var(--paper-toggle-button-checked-ink-color, --primary-color);
+        color: var(--paper-toggle-button-checked-ink-color, var(--primary-color));
 
-        @apply(--paper-toggle-button-checked-ink);
+        @apply --paper-toggle-button-checked-ink;
       }
 
       .toggle-container {
@@ -175,20 +175,20 @@
         vertical-align: middle;
         padding-left: var(--paper-toggle-button-label-spacing, 8px);
         pointer-events: none;
-        color: var(--paper-toggle-button-label-color, --primary-text-color);
+        color: var(--paper-toggle-button-label-color, var(--primary-text-color));
       }
 
       /* invalid state */
       :host([invalid]) .toggle-bar {
-        background-color: var(--paper-toggle-button-invalid-bar-color, --error-color);
+        background-color: var(--paper-toggle-button-invalid-bar-color, var(--error-color));
       }
 
       :host([invalid]) .toggle-button {
-        background-color: var(--paper-toggle-button-invalid-button-color, --error-color);
+        background-color: var(--paper-toggle-button-invalid-button-color, var(--error-color));
       }
 
       :host([invalid]) .toggle-ink {
-        color: var(--paper-toggle-button-invalid-ink-color, --error-color);
+        color: var(--paper-toggle-button-invalid-ink-color, var(--error-color));
       }
     </style>
 
@@ -197,7 +197,7 @@
       <div id="toggleButton" class="toggle-button"></div>
     </div>
 
-    <div class="toggle-label"><content></content></div>
+    <div class="toggle-label"><slot></slot></div>
 
   </template>
 
@@ -234,7 +234,7 @@
 
       attached: function() {
         Polymer.RenderStatus.afterNextRender(this, function() {
-          this.setScrollDirection('y');
+          Polymer.Gestures.setTouchAction(this, 'pan-y');
         });
       },
 

diff --git a/test/basic.html b/test/basic.html
@@ -40,7 +40,7 @@
         });
 
         test('set scroll direction', function(done) {
-          flush(function() {
+          Polymer.RenderStatus.afterNextRender(b1, function() {
             assert.equal(b1.__polymerGesturesTouchAction, 'pan-y');
             done();
           });

diff --git a/test/index.html b/test/index.html
@@ -15,8 +15,8 @@
   <body>
     <script>
       WCT.loadSuites([
-        'basic.html',
-        'basic.html?dom=shadow'
+        'basic.html?dom=shadow',
+        'basic.html?wc-shadydom=true&wc-ce=true'
       ]);
     </script>