Merge pull request #1 from IBMResearch/2.0-preview

Migrate to hybrid element

.gitignore

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

.travis.yml

@@ -1,24 +1,25 @@
-sudo: required
-dist: trusty
 language: node_js
-node_js:
-  - '6'
+dist: trusty
+sudo: required
+node_js: stable
+cache:
+  directories:
+    - node_modules
 addons:
-  firefox: '46.0'
+  firefox: latest
   apt:
     sources:
-    - google-chrome
+      - google-chrome
     packages:
-    - google-chrome-stable
+      - google-chrome-stable
 cache:
   directories:
     - node_modules
 install:
-  - npm install -g web-component-tester
-  - npm install -g bower
+  - npm install -g polymer-cli
   - npm install -g eslint eslint-plugin-html eslint-config-ibmresearch
-  - bower install
+  - polymer install --variants
 before_script:
-  - eslint . --ext js,html
+  - eslint . --ext js,html --ignore-path .gitignore
 script:
-  - xvfb-run wct
+  - xvfb-run polymer test

README.md

@@ -1,5 +1,5 @@
-[![Build status][travis-image]][travis-url]
-[![Published on webcomponents.org][webcomponents-image]][webcomponents-url]
+[![Build status](https://travis-ci.org/IBMResearch/ibm-tabs.svg?branch=master)](https://travis-ci.org/IBMResearch/ibm-tabs)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/IBMResearch/ibm-tabs)
 
 ## \<ibm-tabs\>
 
@@ -26,7 +26,8 @@ Example:
 </ibm-tabs>
 ```
 
-[travis-image]: https://travis-ci.org/IBMResearch/ibm-tabs.svg?branch=master
-[travis-url]: https://travis-ci.org/IBMResearch/ibm-tabs
-[webcomponents-image]: https://img.shields.io/badge/webcomponents.org-published-blue.svg
-[webcomponents-url]: https://beta.webcomponents.org/element/IBMResearch/ibm-tabs
+### Notable breaking changes between 1.x and 2.x (hybrid):
+
+IronSelectableBehavior and IronMultiSelectableBehavior, which are used by
+ibm-tabs, introduce multiple breaking changes. Please see the README for those
+behaviors for more detail.

bower.json

@@ -17,16 +17,32 @@
   },
   "main": "ibm-tabs.html",
   "dependencies": {
-    "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
-    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.3.0",
-    "iron-menu-behavior": "PolymerElements/iron-menu-behavior#^1.2.0",
-    "polymer": "Polymer/polymer#^1.6.0"
+    "iron-behaviors": "PolymerElements/iron-behaviors#1 - 2",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#1 - 2",
+    "iron-menu-behavior": "PolymerElements/iron-menu-behavior#1 - 2",
+    "polymer": "Polymer/polymer#1.9 - 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"
+    "iron-component-page": "PolymerElements/iron-component-page#1 - 2",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#1 - 2",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
+  },
+  "variants": {
+    "1.x": {
+      "dependencies": {
+        "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
+        "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.3.0",
+        "iron-menu-behavior": "PolymerElements/iron-menu-behavior#^1.2.0",
+        "polymer": "Polymer/polymer#^1.9.0"
+      },
+      "devDependencies": {
+        "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+        "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
+        "web-component-tester": "Polymer/web-component-tester#^4.0.0",
+        "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+      }
+    }
   },
   "private": true
 }

demo/index.html

@@ -20,11 +20,13 @@
     <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
     <link rel="import" href="../ibm-tabs.html">
 
-    <style is="custom-style" include="demo-pages-shared-styles">
-      .note {
-        margin-top: 0;
-      }
-    </style>
+    <custom-style>
+      <style is="custom-style" include="demo-pages-shared-styles">
+        .note {
+          margin-top: 0;
+        }
+      </style>
+    </custom-style>
   </head>
   <body>
     <div class="vertical-section-container centered">

ibm-tab.html

@@ -81,7 +81,7 @@
       }
     </style>
 
-    <content></content>
+    <slot></slot>
   </template>
   <script>
     Polymer({

ibm-tabs.html

@@ -71,15 +71,15 @@
         overflow: auto;
       }
 
-      ::content > * {
+      :host ::slotted(*) {
         margin-left: 25px;
       }
 
-      ::content > *:first-of-type {
+      :host ::slotted(*:first-of-type) {
         margin-left: 0;
       }
 
-      ::content > a {
+      :host ::slotted(a) {
         @apply --layout-inline;
 
         text-decoration: none;
@@ -88,7 +88,7 @@
       }
     </style>
 
-    <content></content>
+    <slot></slot>
   </template>
   <script>
     Polymer({

test/index.html

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