Merge branch 'master' into fix/152-selectedItems-avoid-new-array

PolymerElements · May 13, 2017 · 7aee6b4 · 7aee6b4
2 parents 1750695 + a36ffa7
commit 7aee6b4
Show file tree

Hide file tree

Showing 18 changed files with 583 additions and 309 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
-bower_components
+bower_components*
+bower-*.json
 .DS_Store
diff --git a/.travis.yml b/.travis.yml
@@ -1,16 +1,15 @@
 language: node_js
 sudo: required
 before_script:
-  - npm install -g bower polylint web-component-tester
-  - bower install
-  - polylint
+  - npm install -g polymer-cli
+  - polymer install --variants
 env:
   global:
     - secure: >-
         SFfLw5U6C/7UFRyt/ho5AXNnf8E1d7bY6V9lPT2UnHjkNl4NldWyJEkBeaFTERChKmrYBNk33g748OGohL8snCRXCPxM9A/OKRWEGSFIvPmgLs8mkpbNodUAcpL6dbDLlZgcVDHXCn1uvVQgOgzg64FWW5ozphxD4u/nl5nA7aY=
     - secure: >-
         a6YFcuIvE3PJ9C0F7cimJ/R8EGlKy2rlg7Re2ezpL85f4++cYnYBUrNnbwj+BNp5F9IXZxvD6T+kNr+1BJtqILFf54W5baBgB5PVCSt7dry+lrcRUf5yTIRl0yJ+73UJrEWR2UOXaXlGzbQ56k2TWAbnzVbq2jik1vdgSnxbjLE=
-node_js: '6'
+node_js: stable
 addons:
   firefox: latest
   apt:
@@ -19,6 +18,8 @@ addons:
     packages:
       - google-chrome-stable
 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,23 +1,9 @@
-
-<!---
-
-This README is automatically generated from the comments in these files:
-iron-multi-selectable.html  iron-selectable.html  iron-selector.html
-
-Edit those files, and our readme bot will duplicate them over here!
-Edit this file, and the bot will squash your changes :)
-
-The bot does some handling of markdown. Please file a bug if it does the wrong
-thing! https://github.com/PolymerLabs/tedium/issues
-
--->
-
 [![Build status](https://travis-ci.org/PolymerElements/iron-selector.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-selector)
 
 _[Demo and API docs](https://elements.polymer-project.org/elements/iron-selector)_
 
 
-##&lt;iron-selector&gt;
+## &lt;iron-selector&gt;
 
   `iron-selector` is an element which can be used to manage a list of elements
   that can be selected.  Tapping on the item will make the item selected.  The `selected` indicates
@@ -84,8 +70,32 @@ _[Demo and API docs](https://elements.polymer-project.org/elements/iron-selector
   </iron-selector>
 ```
 
+### Notable breaking changes between 1.x and 2.x (hybrid):
+
+#### IronSelectableBehavior
+
+- IronSelectableBehavior no longer updates its list of items synchronously
+  when it is connected to avoid triggering a situation introduced in the
+  Custom Elements v1 spec that might cause custom element reactions to be
+  called later than expected.
+
+  If you are using an element with IronSelectableBehavior and ...
+  1. are reading or writing properties of the element that depend on its
+     items (`items`, `selectedItems`, etc.)
+  1. are performing these accesses after the element is created or connected
+    (attached) either **synchronously** or **after a timeout**
 
+  ... you should wait for the element to dispatch an `iron-items-changed`
+  event instead.
+- `Polymer.dom.flush()` no longer triggers the observer used by
+  IronSelectableBehavior to watch for changes to its items. You can call
+  `forceSynchronousItemUpdate` instead or, preferably, listen for the
+  `iron-items-changed` event.
 
-<!-- No docs for Polymer.IronMultiSelectableBehavior found. -->
+#### IronMultiSelectableBehavior
 
-<!-- No docs for Polymer.IronSelectableBehavior found. -->
+- All breaking changes to IronSelectableBehavior listed above apply to
+  IronMultiSelectableBehavior.
+- `selectedValues` and `selectedItems` now have empty arrays as default
+  values. This may cause bindings or observers of these properties to
+  trigger at start up when they previously had not.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "iron-selector",
-  "version": "1.5.3",
+  "version": "2.0.0",
   "description": "Manages a set of elements that can be selected",
   "private": true,
   "license": "http://polymer.github.io/LICENSE.txt",
@@ -25,14 +25,29 @@
   "homepage": "https://github.com/PolymerElements/iron-selector",
   "ignore": [],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.2.0"
+    "polymer": "Polymer/polymer#^2.0.0-rc.1"
   },
   "devDependencies": {
-    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
-    "iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
-    "paper-styles": "PolymerElements/paper-styles#^1.0.4",
-    "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",
+    "paper-styles": "PolymerElements/paper-styles#2.0-preview",
+    "web-component-tester": "^6.0.0-prerelease.6",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.1"
+  },
+  "variants": {
+    "1.x": {
+      "dependencies": {
+        "polymer": "Polymer/polymer#^1.2.0"
+      },
+      "devDependencies": {
+        "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+        "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.2.5",
+        "iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
+        "paper-styles": "PolymerElements/paper-styles#^1.0.4",
+        "web-component-tester": "^4.0.0",
+        "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+      }
+    }
   }
 }
diff --git a/demo/index.html b/demo/index.html
@@ -19,82 +19,85 @@
 
     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 
-    <link rel="import" href="../../paper-styles/demo-pages.html">
     <link rel="import" href="../iron-selector.html">
-
-    <style is="custom-style">
-
-      iron-selector > * {
-        padding: 8px;
-      }
-
-      .horizontal-section {
-        padding: 0;
-      }
-
-      .iron-selected {
-        background-color: var(--google-blue-500);
-        color: white;
-      }
-
-    </style>
+    <link rel="import" href="../../paper-styles/color.html">
+    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
 
   </head>
   <body unresolved>
-
-    <div class="horizontal center-justified layout">
-      <div>
-        <h3>Basic</h3>
-        <div class="horizontal-section">
-          <iron-selector selected="0">
+    <custom-style>
+      <style is="custom-style" include="demo-pages-shared-styles">
+        iron-selector > * {
+          padding: 8px;
+        }
+
+        .iron-selected {
+          background-color: var(--google-blue-500);
+          color: white;
+        }
+      </style>
+    </custom-style>
+
+    <div class="vertical-section-container centered">
+      <h3>Basic</h3>
+      <demo-snippet>
+        <template>
+          <iron-selector selected="3">
             <div>Item 0</div>
             <div>Item 1</div>
             <div>Item 2</div>
             <div>Item 3</div>
             <div>Item 4</div>
           </iron-selector>
-        </div>
-      </div>
+        </template>
+      </demo-snippet>
 
-      <div>
-        <h3>Multi-select</h3>
-        <div class="horizontal-section">
+      <h3>Use <code>multi</code> to enable multiple selection.</h3>
+      <demo-snippet>
+        <template>
           <iron-selector multi selected-values='[0,2]'>
             <div>Item 0</div>
             <div>Item 1</div>
             <div>Item 2</div>
             <div>Item 3</div>
             <div>Item 4</div>
           </iron-selector>
-        </div>
-      </div>
-
-      <div>
-        <h3>Example with attr-for-selected</h3>
-        <div class="horizontal-section">
-          <iron-selector selected="foo" attr-for-selected="name">
+        </template>
+      </demo-snippet>
+
+      <h3>
+        Use <code>attr-for-selected</code> to specify the attribute of the
+        selectable elements containing the selection key.
+      </h3>
+      <demo-snippet>
+        <template>
+          <iron-selector selected="bar" attr-for-selected="name">
             <div name="foo">Foo</div>
             <div name="bar">Bar</div>
             <div name="baz">Baz</div>
             <div name="qux">Qux</div>
             <div name="quux">Quux</div>
           </iron-selector>
-        </div>
-      </div>
-
-      <div>
-        <h3>Example with fallback-selection</h3>
-        <div class="horizontal-section">
-          <iron-selector selected="non-existing" attr-for-selected="name" fallback-selection="default">
+        </template>
+      </demo-snippet>
+
+      <h3>
+        Use <code>fallback-selection</code> to provide an option to be selected
+        when all options are deselected or all selected options are invalid.
+      </h3>
+      <demo-snippet>
+        <template>
+          <iron-selector multi selected="an-unknown-key" attr-for-selected="name" fallback-selection="default">
             <div name="foo">Foo</div>
             <div name="bar">Bar</div>
             <div name="baz">Baz</div>
             <div name="qux">Qux</div>
             <div name="quux">Quux</div>
             <div name="default">Default</div>
           </iron-selector>
-        </div>
-      </div>
+        </template>
+      </demo-snippet>
     </div>
 
   </body>

diff --git a/iron-multi-selectable.html b/iron-multi-selectable.html
@@ -12,7 +12,9 @@
 <link rel="import" href="iron-selectable.html">
 
 <script>
-  /** @polymerBehavior Polymer.IronMultiSelectableBehavior */
+  /**
+   * @polymerBehavior Polymer.IronMultiSelectableBehavior
+   */
   Polymer.IronMultiSelectableBehaviorImpl = {
     properties: {
 
@@ -31,7 +33,10 @@
        */
       selectedValues: {
         type: Array,
-        notify: true
+        notify: true,
+        value: function() {
+          return [];
+        }
       },
 
       /**
@@ -40,10 +45,10 @@
       selectedItems: {
         type: Array,
         readOnly: true,
+        notify: true,
         value: function() {
           return [];
-        },
-        notify: true
+        }
       },
 
     },
@@ -61,20 +66,18 @@
      */
     select: function(value) {
       if (this.multi) {
-        if (this.selectedValues) {
-          this._toggleSelected(value);
-        } else {
-          this.selectedValues = [value];
-        }
+        this._toggleSelected(value);
       } else {
         this.selected = value;
       }
     },
 
     multiChanged: function(multi) {
       this._selection.multi = multi;
+      this._updateSelected();
     },
 
+    // UNUSED, FOR API COMPATIBILITY
     get _shouldUpdateSelection() {
       return this.selected != null ||
         (this.selectedValues != null && this.selectedValues.length);
@@ -83,7 +86,7 @@
     _updateAttrForSelected: function() {
       if (!this.multi) {
         Polymer.IronSelectableBehavior._updateAttrForSelected.apply(this);
-      } else if (this._shouldUpdateSelection) {
+      } else if (this.selectedItems && this.selectedItems.length > 0) {
         this.selectedValues = this.selectedItems.map(function(selectedItem) {
           return this._indexToValue(this.indexOf(selectedItem));
         }, this).filter(function(unfilteredValue) {
@@ -101,23 +104,26 @@
     },
 
     _selectMulti: function(values) {
-      if (values) {
-        var selectedItems = this._valuesToItems(values);
-        // clear all but the current selected items
-        this._selection.clear(selectedItems);
-        // select only those not selected yet
-        for (var i = 0; i < selectedItems.length; i++) {
-          this._selection.setItemSelected(selectedItems[i], true);
-        }
-        // Check for items, since this array is populated only when attached
-        if (this.fallbackSelection && this.items.length && !this._selection.get().length) {
-          var fallback = this._valueToItem(this.fallbackSelection);
-          if (fallback) {
-            this.selectedValues = [this.fallbackSelection];
-          }
+      values = values || [];
+
+      var selectedItems = (this._valuesToItems(values) || []).filter(function(item) {
+        return item !== null && item !== undefined;
+      });
+
+      // clear all but the current selected items
+      this._selection.clear(selectedItems);
+
+      // select only those not selected yet
+      for (var i = 0; i < selectedItems.length; i++) {
+        this._selection.setItemSelected(selectedItems[i], true);
+      }
+
+      // Check for items, since this array is populated only when attached
+      if (this.fallbackSelection && !this._selection.get().length) {
+        var fallback = this._valueToItem(this.fallbackSelection);
+        if (fallback) {
+          this.select(this.fallbackSelection);
         }
-      } else {
-        this._selection.clear();
       }
     },
 
@@ -130,7 +136,7 @@
         }
       } else {
         this._setSelectedItems(isSelected ? [item] : []);
-        this._setSelectedItem(isSelected ? item : undefined);
+        this._setSelectedItem(isSelected ? item : null);
       }
     },