Merge pull request #119 from PolymerElements/ixes

add prefix/suffix content selectors

Author: notwaldorf

bower.json

@@ -40,6 +40,8 @@
     "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
     "test-fixture": "PolymerElements/test-fixture#^1.0.0",
     "web-component-tester": "*",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+    "iron-icon": "PolymerElements/iron-icon#^1.0.0",
+    "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"
   }
 }

demo/index.html

@@ -25,15 +25,30 @@
   <link rel="import" href="../paper-input-char-counter.html">
   <link rel="import" href="../paper-textarea.html">
   <link rel="import" href="../../iron-input/iron-input.html">
+  <link rel="import" href="../../iron-icon/iron-icon.html">
+  <link rel="import" href="../../iron-icons/iron-icons.html">
+  <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
   <link rel="import" href="ssn-input.html">
 
-  <link rel="stylesheet" href="../../paper-styles/paper-styles.html">
+  <link rel="stylesheet" href="../../paper-styles/color.html">
   <link rel="import" href="../../paper-styles/demo-pages.html">
 
-  <style>
+  <style is="custom-style">
     body {
       padding: 40px;
     }
+
+    paper-input.short {
+      width: 200px;
+    }
+
+    paper-icon-button {
+      color: var(--paper-red-300);
+      --paper-icon-button-ink-color: var(--paper-red-a100);
+      --iron-icon-width: 15px;
+      --iron-icon-height: 15px;
+      padding: 0px 4px;
+    }
   </style>
 
 </head>
@@ -78,6 +93,24 @@ <h4>Character counter</h4>
       <paper-textarea label="text area with rows and max-rows" rows="3" max-rows="4"><paper-textarea>
     </div>
 
+    <h4>Prefixes and Suffixes</h4>
+    <div class="vertical-section">
+      <paper-input class="short" label="total" type="number">
+        <div prefix>$</div>
+      </paper-input>
+
+      <paper-input class="short" label="username">
+        <div suffix>@email.com</div>
+      </paper-input>
+
+      <paper-input class="short" label="icons and buttons" id="inputWithButton">
+        <iron-icon icon="search" prefix></iron-icon>
+        <paper-icon-button suffix onclick="clearInput()"
+            icon="clear" alt="clear" title="clear" tabindex="0">
+        </paper-icon-button>
+      </paper-input>
+    </div>
+
     <h4>Complex inputs</h4>
     <div class="vertical-section">
       <template is="dom-bind">
@@ -93,6 +126,10 @@ <h4>Complex inputs</h4>
     function validate() {
       document.getElementById('inputForValidation').validate();
     }
+
+    function clearInput() {
+      document.getElementById('inputWithButton').value = '';
+    }
   </script>
 </body>
 </html>

paper-input-container.html

@@ -34,7 +34,7 @@
 You can use a custom input element in a `<paper-input-container>`, for example to implement a
 compound input field like a social security number input. The custom input element should have the
 `paper-input-input` class, have a `notify:true` value property and optionally implements
-`Polymer.IronValidatableBehavior` if it is validatble.
+`Polymer.IronValidatableBehavior` if it is validatable.
 
     <paper-input-container attr-for-value="ssn-value">
       <label>Social security number</label>
@@ -53,6 +53,17 @@
 or validity changes, and may implement functionality such as error messages or character counters.
 They appear at the bottom of the input.
 
+### Prefixes and suffixes
+These are child elements of a `<paper-input-container>` with the `prefix`
+or `suffix` attribute, and are displayed inline with the input, before or after.
+
+    <paper-input-container>
+      <div prefix>$</div>
+      <label>Total</label>
+      <input is="iron-input">
+      <paper-icon-button suffix icon="clear"></paper-icon-button>
+    </paper-input-container>
+
 ### Styling
 
 The following custom properties and mixins are available for styling:
@@ -150,8 +161,14 @@
       @apply(--paper-input-container-underline-disabled);
     }
 
+    .label-and-input-container {
+      @apply(--layout-flex);
+      @apply(--layout-relative);
+    }
+
     .input-content {
       position: relative;
+      @apply(--layout-horizontal);
     }
 
     .input-content ::content label,
@@ -213,6 +230,12 @@
       @apply(--paper-input-container-input);
     }
 
+    ::content [prefix],
+    ::content [suffix] {
+      @apply(--paper-font-subhead);
+      @apply(--paper-input-container-input);
+    }
+
     /* Firefox sets a min-width on the input, which can cause layout issues */
     .input-content ::content input {
       min-width: 0;
@@ -239,7 +262,11 @@
     </template>
 
     <div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]">
-      <content select=":not([add-on])"></content>
+      <content select="[prefix]" id="prefix"></content>
+      <div class="label-and-input-container">
+        <content select=":not([add-on]):not([prefix]):not([suffix])"></content>
+      </div>
+      <content select="[suffix]"></content>
     </div>
 
     <div class$="[[_computeUnderlineClass(focused,invalid)]]">
@@ -476,13 +503,25 @@
     _computeInputContentClass: function(noLabelFloat, alwaysFloatLabel, focused, invalid, _inputHasContent) {
       var cls = 'input-content';
       if (!noLabelFloat) {
+        var label = this.querySelector('label');
+
         if (alwaysFloatLabel || _inputHasContent) {
           cls += ' label-is-floating';
           if (invalid) {
             cls += ' is-invalid';
           } else if (focused) {
             cls += " label-is-highlighted";
           }
+          // The label might have a horizontal offset if a prefix element exists
+          // which needs to be undone when displayed as a floating label.
+          if (this.$.prefix && label && label.offsetParent) {
+           label.style.left = -label.offsetParent.offsetLeft + 'px';
+          }
+        } else {
+          // When the label is not floating, it should overlap the input element.
+          if (label) {
+            label.style.left = 0;
+          }
         }
       } else {
         if (_inputHasContent) {

paper-input.html

@@ -25,6 +25,16 @@
     <paper-input error-message="Invalid input!" label="Input label"></paper-input>
     <paper-input char-counter label="Input label"></paper-input>
 
+It can also include custom prefix or suffix elements, which are displayed
+before or after the text input itself. In order for an element to be
+considered as a prefix, it must have the `prefix` attribute (and similarly
+for `suffix`).
+
+    <paper-input label="total">
+      <div prefix>$</div>
+      <paper-icon-button suffix icon="clear"></paper-icon-button>
+    </paper-input>
+
 See `Polymer.PaperInputBehavior` for more API docs.
 
 ### Styling
@@ -68,6 +78,8 @@
 
     <paper-input-container no-label-float="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">
 
+      <content select="[prefix]"></content>
+
       <label hidden$="[[!label]]">[[label]]</label>
 
       <input is="iron-input" id="input"
@@ -95,6 +107,8 @@
         autocapitalize$="[[autocapitalize]]"
         autocorrect$="[[autocorrect]]">
 
+      <content select="[suffix]"></content>
+
       <template is="dom-if" if="[[errorMessage]]">
         <paper-input-error>[[errorMessage]]</paper-input-error>
       </template>