BREAKING CHANGE: Add support for Polymer 2.0 (#2)

- drops support for Polymer 1.8 and lower
salte-io · Aug 13, 2017 · f13df4e · f13df4e
1 parent 78933c3
commit f13df4e
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 60 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
 bower_components/
+bower_components-1.x/
+bower-1.x.json
diff --git a/.travis.yml b/.travis.yml
@@ -3,10 +3,16 @@ node_js: stable
 dist: trusty
 sudo: required
 addons:
+  firefox: latest
+  apt:
+    sources:
+      - google-chrome
+    packages:
+      - google-chrome-stable
   sauce_connect: true
 before_script:
-  - npm install -g bower polylint web-component-tester
-  - bower install
-  - polylint
+  - npm install -g polymer-cli
+  - polymer install --variants
 script:
-  - wct -s 'default'
+  - xvfb-run polymer test
+  - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test -s ''default''; fi'
diff --git a/bower.json b/bower.json
@@ -19,25 +19,53 @@
   "homepage": "https://github.com/salte-io/salte-feedback-dialog",
   "ignore": [],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.4.0",
-    "neon-animation": "PolymerElements/neon-animation#^1.2.4",
-    "iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#^1.0.15",
-    "paper-button": "PolymerElements/paper-button#^1.0.14",
-    "iron-icon": "PolymerElements/iron-icon#^1.0.12",
-    "paper-ripple": "PolymerElements/paper-ripple#^1.0.10",
-    "paper-progress": "PolymerElements/paper-progress#^1.0.11",
-    "paper-icon-button": "PolymerElements/paper-icon-button#^1.1.4",
-    "iron-icons": "PolymerElements/iron-icons#^1.2.0",
-    "iron-image": "PolymerElements/iron-image#^1.2.5",
-    "app-storage": "PolymerElements/app-storage#^0.9.8",
-    "salte-dialog": "salte-io/salte-dialog#^1.0.0",
-    "iron-input": "PolymerElements/iron-input#^1.0.10"
+    "polymer": "Polymer/polymer#1.9 - 2",
+    "neon-animation": "PolymerElements/neon-animation#1 - 2",
+    "iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#1 - 2",
+    "paper-button": "PolymerElements/paper-button#1 - 2",
+    "iron-icon": "PolymerElements/iron-icon#1 - 2",
+    "paper-ripple": "PolymerElements/paper-ripple#1 - 2",
+    "paper-progress": "PolymerElements/paper-progress#1 - 2",
+    "paper-icon-button": "PolymerElements/paper-icon-button#1 - 2",
+    "iron-icons": "PolymerElements/iron-icons#1 - 2",
+    "iron-image": "PolymerElements/iron-image#1 - 2",
+    "app-storage": "PolymerElements/app-storage#1 - 2",
+    "salte-dialog": "salte-io/salte-dialog#1 - 2",
+    "iron-input": "PolymerElements/iron-input#1 - 2"
   },
   "devDependencies": {
-    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
-    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
-    "web-component-tester": "^4.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
-    "paper-toggle-button": "PolymerElements/paper-toggle-button#^1.3.0"
+    "iron-component-page": "PolymerElements/iron-component-page#1 - 2",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#1 - 2",
+    "paper-toggle-button": "PolymerElements/paper-toggle-button#1 - 2",
+    "web-animations-js": "web-animations/web-animations-js#^2.2.0",
+    "web-component-tester": "^6.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
+  },
+  "variants": {
+    "1.x": {
+      "dependencies": {
+        "polymer": "Polymer/polymer#^1.9",
+        "neon-animation": "PolymerElements/neon-animation#^1.0.0",
+        "iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#^1.0.0",
+        "paper-button": "PolymerElements/paper-button#^1.0.0",
+        "iron-icon": "PolymerElements/iron-icon#^1.0.0",
+        "paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
+        "paper-progress": "PolymerElements/paper-progress#^1.0.0",
+        "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
+        "iron-icons": "PolymerElements/iron-icons#^1.0.0",
+        "iron-image": "PolymerElements/iron-image#^1.0.0",
+        "app-storage": "PolymerElements/app-storage#^1.0.0",
+        "salte-dialog": "salte-io/salte-dialog#^1.0.0",
+        "iron-input": "PolymerElements/iron-input#^1.0.0"
+      },
+      "devDependencies": {
+        "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+        "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
+        "paper-toggle-button": "PolymerElements/paper-toggle-button#^1.0.0",
+        "web-animations-js": "web-animations/web-animations-js#^2.2.0",
+        "web-component-tester": "^4.0.0",
+        "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+      }
+    }
   }
 }
diff --git a/demo/salte-feedback-dialog.html b/demo/salte-feedback-dialog.html
@@ -8,61 +8,73 @@
 
     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 
+    <link rel="import" href="../salte-feedback-dialog.html">
+    <link rel="import" href="../../paper-toggle-button/paper-toggle-button.html">
+    <link rel="import" href="../../neon-animation/web-animations.html">
+    <link rel="import" href="../../neon-animation/neon-animations.html">
+
     <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
     <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
-    <link rel="import" href="../../paper-toggle-button/paper-toggle-button.html">
-    <link rel="import" href="../../neon-animation/animations/scale-up-animation.html">
-    <link rel="import" href="../../neon-animation/animations/fade-out-animation.html">
-    <link rel="import" href="../salte-feedback-dialog.html">
 
-    <style is="custom-style" include="demo-pages-shared-styles">
-    </style>
+    <custom-style>
+      <style is="custom-style" include="demo-pages-shared-styles"></style>
+    </custom-style>
   </head>
   <body>
     <div class="vertical-section-container centered">
       <h3>Displays a feedback dialog</h3>
       <demo-snippet>
-        <template is="dom-bind">
-          <salte-feedback-dialog opened="{{opened}}" modal></salte-feedback-dialog>
-          <!-- Demo Trigger -->
-          <paper-toggle-button checked="{{opened}}">Opened?</paper-toggle-button>
-        </template>
+        <dom-bind>
+          <template is="dom-bind">
+            <salte-feedback-dialog opened="{{opened}}" modal></salte-feedback-dialog>
+            <!-- Demo Trigger -->
+            <paper-toggle-button checked="{{opened}}">Opened?</paper-toggle-button>
+          </template>
+        </dom-bind>
       </demo-snippet>
       <h3>Supports submitting with an email</h3>
       <demo-snippet>
-        <template is="dom-bind">
-          <salte-feedback-dialog allow-email opened="{{opened}}" modal></salte-feedback-dialog>
-          <!-- Demo Trigger -->
-          <paper-toggle-button checked="{{opened}}">Opened?</paper-toggle-button>
-        </template>
+        <dom-bind>
+          <template is="dom-bind">
+            <salte-feedback-dialog allow-email opened="{{opened}}" modal></salte-feedback-dialog>
+            <!-- Demo Trigger -->
+            <paper-toggle-button checked="{{opened}}">Opened?</paper-toggle-button>
+          </template>
+        </dom-bind>
       </demo-snippet>
       <h3>Supports overriding certain slots</h3>
       <demo-snippet>
-        <template is="dom-bind">
-          <salte-feedback-dialog opened="{{opened}}">
-            <span slot="header">Feedback</span>
-            <span slot="cancel">Bail</span>
-            <span slot="submit">Stuffs broke</span>
-          </salte-feedback-dialog>
-          <!-- Demo Trigger -->
-          <paper-toggle-button checked="{{opened}}">Opened?</paper-toggle-button>
-        </template>
+        <dom-bind>
+          <template is="dom-bind">
+            <salte-feedback-dialog opened="{{opened}}">
+              <span slot="header">Feedback</span>
+              <span slot="cancel">Bail</span>
+              <span slot="submit">Stuffs broke</span>
+            </salte-feedback-dialog>
+            <!-- Demo Trigger -->
+            <paper-toggle-button checked="{{opened}}">Opened?</paper-toggle-button>
+          </template>
+        </dom-bind>
       </demo-snippet>
       <h3>Supports being disabled</h3>
       <demo-snippet>
-        <template is="dom-bind">
-          <salte-feedback-dialog opened="{{opened}}" disabled></salte-feedback-dialog>
-          <!-- Demo Trigger -->
-          <paper-toggle-button checked="{{opened}}">Opened?</paper-toggle-button>
-        </template>
+        <dom-bind>
+          <template is="dom-bind">
+            <salte-feedback-dialog opened="{{opened}}" disabled></salte-feedback-dialog>
+            <!-- Demo Trigger -->
+            <paper-toggle-button checked="{{opened}}">Opened?</paper-toggle-button>
+          </template>
+        </dom-bind>
       </demo-snippet>
       <h3>Supports custom animations</h3>
       <demo-snippet>
-        <template is="dom-bind">
-          <salte-feedback-dialog opened="{{opened}}" entry-animation="scale-up-animation" exit-animation="fade-out-animation"></salte-feedback-dialog>
-          <!-- Demo Trigger -->
-          <paper-toggle-button checked="{{opened}}">Opened?</paper-toggle-button>
-        </template>
+        <dom-bind>
+          <template is="dom-bind">
+            <salte-feedback-dialog opened="{{opened}}" entry-animation="scale-up-animation" exit-animation="fade-out-animation"></salte-feedback-dialog>
+            <!-- Demo Trigger -->
+            <paper-toggle-button checked="{{opened}}">Opened?</paper-toggle-button>
+          </template>
+        </dom-bind>
       </demo-snippet>
     </div>
   </body>

diff --git a/demo/salte-image-upload.html b/demo/salte-image-upload.html
@@ -12,8 +12,9 @@
     <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
     <link rel="import" href="../salte-image-upload.html">
 
-    <style is="custom-style" include="demo-pages-shared-styles">
-    </style>
+    <custom-style>
+      <style is="custom-style" include="demo-pages-shared-styles"></style>
+    </custom-style>
   </head>
   <body>
     <div class="vertical-section-container centered">

diff --git a/salte-image-upload.html b/salte-image-upload.html
@@ -52,6 +52,10 @@
         @apply --layout-center-justified;
       }
 
+      /*
+       * NOTE: Safari doesn't refresh properly nested classes
+       * when reading a host attribute
+       */
       :host([loading]) .upload {
         opacity: 0;
       }
@@ -77,7 +81,6 @@
         --paper-progress-height: 10px;
         --paper-progress-container: {
           border-radius: 5px;
-          -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
         };
       }