Merge pull request #18 from PolymerElements/2.0-preview

2.0 preview

Author: notwaldorf

.gitignore

@@ -1 +1,2 @@
-bower_components
+bower_components*
+bower-*.json

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "paper-swatch-picker",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "description": "A color picker element using all the Material Design colours",
   "authors": [
     "The Polymer Authors"
@@ -20,20 +20,42 @@
   "license": "http://polymer.github.io/LICENSE.txt",
   "homepage": "https://github.com/PolymerElements/paper-swatch-picker",
   "dependencies": {
-    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
-    "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^1.0.0",
-    "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
-    "paper-item": "PolymerElements/paper-item#^1.0.0",
-    "paper-listbox": "PolymerElements/paper-listbox#^1.1.1",
-    "paper-menu-button": "PolymerElements/paper-menu-button#^1.0.0",
-    "polymer": "Polymer/polymer#^1.1.0"
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#2.0-preview",
+    "iron-iconset-svg": "PolymerElements/iron-iconset-svg#2.0-preview",
+    "paper-icon-button": "PolymerElements/paper-icon-button#2.0-preview",
+    "paper-item": "PolymerElements/paper-item#2.0-preview",
+    "paper-listbox": "PolymerElements/paper-listbox#2.0-preview",
+    "paper-menu-button": "PolymerElements/paper-menu-button#2.0-preview",
+    "polymer": "Polymer/polymer#^2.0.0-rc.7"
   },
   "devDependencies": {
-    "iron-component-page": "PolymerElements/iron-component-page#^1.1.0",
-    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.1.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-test-helpers": "PolymerElements/iron-test-helpers#2.0-preview",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0-prerelease.6",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.1",
+    "web-animations-js": "web-animations/web-animations-js#^2.2"
+  },
+  "variants": {
+    "1.x": {
+      "dependencies": {
+        "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
+        "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^1.0.0",
+        "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
+        "paper-item": "PolymerElements/paper-item#^1.0.0",
+        "paper-listbox": "PolymerElements/paper-listbox#^1.1.1",
+        "paper-menu-button": "PolymerElements/paper-menu-button#^1.0.0",
+        "polymer": "Polymer/polymer#^1.1.0"
+      },
+      "devDependencies": {
+        "iron-component-page": "PolymerElements/iron-component-page#^1.1.0",
+        "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.1.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",
+        "web-animations-js": "web-animations/web-animations-js#^2.2"
+      }
+    }
   }
 }

demo/index.html

@@ -22,11 +22,16 @@
     <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
     <link rel="import" href="../paper-swatch-picker.html">
 
-    <style is="custom-style" include="demo-pages-shared-styles">
-      paper-swatch-picker {
-        margin: 0 10px;
-      }
-    </style>
+    <!-- Ensure Web Animations polyfill is loaded since neon-animation 2.0 doesn't import it -->
+    <link rel="import" href="../../neon-animation/web-animations.html">
+
+    <custom-style>
+      <style is="custom-style" include="demo-pages-shared-styles">
+        paper-swatch-picker {
+          margin: 0 10px;
+        }
+      </style>
+    </custom-style>
   </head>
   <body unresolved>
     <div class="vertical-section-container centered">
@@ -50,12 +55,14 @@ <h3>The palette used by the color picker can be configured</h3>
       <h3>The picker can be styled using custom properties</h3>
       <demo-snippet class="centered-demo">
         <template>
-          <style is="custom-style">
-            paper-swatch-picker.fancy {
-              --paper-swatch-picker-color-size: 10px;
-              --paper-swatch-picker-icon-size: 40px;
-            }
-          </style>
+          <custom-style>
+            <style is="custom-style">
+              paper-swatch-picker.fancy {
+                --paper-swatch-picker-color-size: 10px;
+                --paper-swatch-picker-icon-size: 40px;
+              }
+            </style>
+          </custom-style>
           <paper-swatch-picker class="fancy"></paper-swatch-picker>
         </template>
       </demo-snippet>

paper-swatch-picker.html

@@ -118,10 +118,11 @@
       <paper-icon-button
           id="iconButton"
           icon="swatch:format-color-fill"
-          class="dropdown-trigger" alt="color picker"
+          slot="dropdown-trigger" class="dropdown-trigger"
+          alt="color picker"
           noink$="[[noink]]">
       </paper-icon-button>
-      <paper-listbox class="dropdown-content" id="container">
+      <paper-listbox slot="dropdown-content" class="dropdown-content" id="container">
         <template is="dom-repeat" items="{{colorList}}">
           <paper-item class="color">{{item}}</paper-item>
         </template>

test/basic.html

@@ -22,11 +22,13 @@
   <link rel="import" href="../paper-swatch-picker.html">
 </head>
 <body>
-  <style is="custom-style">
-    paper-swatch-picker.custom {
-      --paper-swatch-picker-color-size: 10px;
-    }
-  </style>
+  <custom-style>
+    <style is="custom-style">
+      paper-swatch-picker.custom {
+        --paper-swatch-picker-color-size: 10px;
+      }
+    </style>
+  </custom-style>
 
   <test-fixture id="basic">
     <template>

test/index.html

@@ -17,7 +17,7 @@
 <body>
   <script>
     WCT.loadSuites([
-      'basic.html',
+      'basic.html?wc-ce=true&wc-shadydom=true',
       'basic.html?dom=shadow'
     ]);
   </script>