Merge pull request #445 from PolymerElements/2.0-preview

port to 2.0

.gitignore

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

.travis.yml

@@ -1,24 +1,29 @@
 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: >-
         Hg2KIEhKqOw0J8ZW2C3Pdgp5N4HD/f9jhdluH0tiYRCU4I/jf5grQuA3ohqsbqnJKV5l06gWVIDCdxBDwDEH0h8v9uUG5z/i2diiuLQc94SLQu8kWKkUPDOx+pUyXmfRKj6KnaRTotTLFrwlyuKDi9OfGjQbLZWTvmJUWoFwh4g=
     - secure: >-
         U6/Hp/V0ezT/yxeP2bv4S99LSLScKEaOfYwQUbe0+v5dPbN5XZaCUS6iSbNP2K8Mtb1UQUEyL8uN6Zn+khFlJ8/KJshppJ6HJi235CykahBhh9/Cv7EapgDUoss14ntE8EKpm6Ijo4LvVyPVmhgqKk9wP5ykDFtvhoKD4C3guVU=
-node_js: '6'
+node_js: stable
 addons:
   firefox: latest
   apt:
     sources:
       - google-chrome
     packages:
-      - google-chrome-stable
+      - google-chrome-beta
+  sauce_connect: true
 script:
-  - xvfb-run wct
-  - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s ''default''; fi'
+  - xvfb-run polymer test -l chrome
+  - xvfb-run polymer test -l firefox
+  - >-
+    if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test -s 'default';
+    fi
 dist: trusty

README.md

@@ -32,7 +32,13 @@ Material design: [Text fields](https://www.google.com/design/spec/components/tex
 ```html
 <paper-input always-float-label label="Floating label"></paper-input>
 <paper-input label="username">
-  <iron-icon icon="mail" prefix></iron-icon>
-  <div suffix>@email.com</div>
+  <iron-icon icon="mail" slot="prefix"></iron-icon>
+  <div slot="suffix">@email.com</div>
 </paper-input>
 ```
+
+### Changes in 2.0
+- Distribution is now done with slots, so things have changed because of that (before: <label>foo</label>, now <label slot="label">foo</label>; same for input, prefix and suffix)
+- Since type extensions are not available, any use of `<input is="iron-input">` has been replaced by `<iron-input><input></iron-input>`. See [iron-input](https://github.com/PolymerElements/iron-input) for more details about that change
+- `prevent-invalid-input` and `allowed-pattern` had to be always used together; deleted `prevent-invalid-input`, so that only `allowed-pattern` is needed
+

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "paper-input",
-  "version": "1.1.24",
+  "version": "2.0.0",
   "description": "Material design text fields",
   "authors": [
     "The Polymer Authors"
@@ -28,24 +28,51 @@
   "homepage": "https://github.com/PolymerElements/paper-input",
   "ignore": [],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.2.0",
-    "iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#^1.0.0",
-    "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
-    "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
-    "iron-input": "PolymerElements/iron-input#^1.0.0",
-    "paper-styles": "PolymerElements/paper-styles#^1.1.4",
-    "iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0"
+    "polymer": "Polymer/polymer#^2.0.0-rc.7",
+    "iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#2.0-preview",
+    "iron-behaviors": "PolymerElements/iron-behaviors#2.0-preview",
+    "iron-input": "PolymerElements/iron-input#2.0-preview",
+    "paper-styles": "PolymerElements/paper-styles#2.0-preview",
+    "iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#2.0-preview",
+    "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#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-icon": "PolymerElements/iron-icon#^1.0.0",
-    "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
-    "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
-    "paper-icon-button": "PolymerElements/paper-icon-button#^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-icon": "PolymerElements/iron-icon#2.0-preview",
+    "iron-icons": "PolymerElements/iron-icons#2.0-preview",
+    "iron-test-helpers": "PolymerElements/iron-test-helpers#2.0-preview",
+    "iron-validator-behavior": "PolymerElements/iron-validator-behavior#2.0-preview",
+    "paper-icon-button": "PolymerElements/paper-icon-button#2.0-preview",
+    "test-fixture": "PolymerElements/test-fixture#^3.0.0-rc.1",
+    "web-component-tester": "Polymer/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",
+        "iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#^1.0.0",
+        "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
+        "iron-input": "PolymerElements/iron-input#^1.0.0",
+        "paper-styles": "PolymerElements/paper-styles#^1.1.4",
+        "iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0",
+        "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.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-icon": "PolymerElements/iron-icon#^1.0.0",
+        "iron-icons": "PolymerElements/iron-icons#^1.0.0",
+        "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
+        "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
+        "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
+        "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+        "web-component-tester": "^4.0.0",
+        "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+      }
+    }
   }
 }

demo/index.html

@@ -22,7 +22,6 @@
   <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
   <link rel="import" href="../../iron-icon/iron-icon.html">
   <link rel="import" href="../../iron-icons/iron-icons.html">
-  <link rel="import" href="../../iron-input/iron-input.html">
   <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
   <link rel="import" href="../../paper-styles/color.html">
   <link rel="import" href="../paper-input-container.html">
@@ -31,57 +30,56 @@
   <link rel="import" href="../paper-textarea.html">
   <link rel="import" href="ssn-input.html">
 
-  <style is="custom-style" include="demo-pages-shared-styles">
-    paper-input {
-      display: block;
-    }
-
-    demo-snippet.horizontal {
-      --demo-snippet-demo: {
-        @apply(--layout-horizontal);
-        @apply(--layout-justified);
-        @apply(--layout-wrap);
+  <custom-style>
+    <style is="custom-style" include="demo-pages-shared-styles">
+      paper-input {
+        display: block;
       }
-    }
-    demo-snippet.horizontal paper-input {
-      display: inline-block;
-    }
 
-    button {
-      width: 70px;
-    }
+      button {
+        width: 70px;
+      }
 
-    #inputForValidation {
-      display: inline-block;
-      width: calc(100% - 75px);
-    }
+      paper-icon-button {
+        color: var(--paper-red-300);
+        --paper-icon-button-ink-color: var(--paper-red-a100);
+        width: 23px; /* 15px + 2*4px for padding */
+        height: 23px;
+        padding: 0px 4px;
+      }
 
-    .vertical-section-container {
-      max-width: 600px;
-    }
+      iron-icon {
+        padding-right: 5px;
+      }
 
-    paper-icon-button {
-      color: var(--paper-red-300);
-      --paper-icon-button-ink-color: var(--paper-red-a100);
-      width: 23px; /* 15px + 2*4px for padding */
-      height: 23px;
-      padding: 0px 4px;
-    }
+      #inputForValidation {
+        display: inline-block;
+        width: calc(100% - 75px);
+      }
 
-    iron-icon {
-      padding-right: 5px;
-    }
-  </style>
+      demo-snippet.horizontal {
+        --demo-snippet-demo: {
+          @apply --layout-horizontal;
+          @apply --layout-justified;
+          @apply --layout-wrap;
+        }
+      }
+      demo-snippet.horizontal paper-input {
+        display: inline-block;
+      }
+    </style>
+  </custom-style>
 </head>
 <body unresolved>
   <div class="vertical-section-container centered">
     <h3>Inputs can have different types, and be disabled</h3>
     <demo-snippet>
       <template>
         <paper-input label="text input"></paper-input>
+        <paper-input label="text input" value="pre-filled"></paper-input>
         <paper-textarea label="autoresizing textarea input"></paper-textarea>
         <paper-input label="password input" type="password"></paper-input>
-        <paper-input label="disabled input" disabled></paper-input>
+        <paper-input label="disabled input" disabled value="batman"></paper-input>
       </template>
     </demo-snippet>
 
@@ -108,8 +106,10 @@ <h3>Inputs can validate automatically or on demand, and can have custom error me
       <template>
         <paper-input label="this input requires some text" required auto-validate error-message="needs some text!"></paper-input>
         <paper-input label="this input requires letters only" auto-validate pattern="[a-zA-Z]*" error-message="letters only!"></paper-input>
+        <paper-input label="this input requires letters only" auto-validate pattern="[a-zA-Z]*" error-message="letters only!" value="pre-filled 123"></paper-input>
         <paper-input label="this input will only let you type letters" auto-validate allowed-pattern="[a-zA-Z]"></paper-input>
         <paper-input id="inputForValidation" required label="this input is manually validated" pattern="[a-zA-Z]*" error-message="letters only!"></paper-input>
+
         <button onclick="validate()">Validate!</button>
       </template>
     </demo-snippet>
@@ -118,12 +118,13 @@ <h3>Inputs can have prefixes and suffixes</h3>
     <demo-snippet class="horizontal">
       <template>
         <paper-input label="total" type="number">
-          <div prefix>$</div>
+          <div slot="prefix">$</div>
         </paper-input>
+
         <paper-input label="username" id="inputWithButton">
-          <iron-icon icon="mail" prefix></iron-icon>
-          <div suffix>@email.com</div>
-          <paper-icon-button suffix onclick="clearInput()"
+          <iron-icon icon="mail" slot="prefix"></iron-icon>
+          <div slot="suffix">@email.com</div>
+          <paper-icon-button slot="suffix" onclick="clearInput()"
               icon="clear" alt="clear" title="clear">
           </paper-icon-button>
         </paper-input>
@@ -134,9 +135,9 @@ <h3>Inputs can have custom logic</h3>
     <demo-snippet>
       <template>
         <paper-input-container always-float-label auto-validate attr-for-value="value">
-          <label>Social Security Number</label>
-          <ssn-input class="paper-input-input"></ssn-input>
-          <paper-input-error>SSN invalid!</paper-input-error>
+          <label slot="label">Social Security Number</label>
+          <ssn-input class="paper-input-input" slot="input"></ssn-input>
+          <paper-input-error slot="add-on">SSN invalid!</paper-input-error>
         </paper-input-container>
       </template>
     </demo-snippet>