third_party/polymer/v0_8/components-chromium/paper-input/paper-input-container.html - Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed.

Unified Diff: third_party/polymer/v0_8/components-chromium/paper-input/paper-input-container.html

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh Created 5 years, 7 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

« no previous file with comments | « third_party/polymer/v0_8/components-chromium/paper-input/paper-input-char-counter-extracted.js ('k') | third_party/polymer/v0_8/components-chromium/paper-input/paper-input-container-extracted.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: third_party/polymer/v0_8/components-chromium/paper-input/paper-input-container.html

diff --git a/third_party/polymer/v0_8/components-chromium/paper-input/paper-input-container.html b/third_party/polymer/v0_8/components-chromium/paper-input/paper-input-container.html

index bcc929583b970a23385337137eb19a301c7cdcff..82ff08e08c83f0f016c1ee05384efe08fdf05ff8 100644

--- a/third_party/polymer/v0_8/components-chromium/paper-input/paper-input-container.html

+++ b/third_party/polymer/v0_8/components-chromium/paper-input/paper-input-container.html

@@ -9,34 +9,64 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN

--><html><head><link rel="import" href="../polymer/polymer.html">

-<style is="x-style">

+<!--

+`<paper-input-container>` is a container for a `<label>`, an `<input is="iron-input">` or

+`<iron-autogrow-textarea>` and optional add-on elements such as an error message or character

+counter, used to implement Material Design text fields.

- * {

+For example:

- --paper-input-container-font: var(--paper-font-subhead);

- --paper-input-container-floating-label-font: var(--paper-font-caption);

- --paper-input-container-add-on-font: var(--paper-font-caption);

+ <paper-input-container>

+ <label>Your name</label>

+ <input is="iron-input">

+ </paper-input-container>

- --paper-input-container-focus-color: var(--default-primary-color);

- --paper-input-container-color: var(--secondary-text-color);

- --paper-input-container-invalid-color: var(--google-red-500);

- --paper-input-container-input-color: var(--primary-text-color);

+### Listening for input changes

- }

+By default, it listens for changes on the `bind-value` attribute on its children nodes and perform

+tasks such as auto-validating and label styling when the `bind-value` changes. You can configure

+the attribute it listens to with the `attr-for-value` attribute.

-</style>

+### Using a custom input element

-<!--

-`<paper-input-container>` wraps an `<input>` and `<label>` element, decorating

-them following the [Material Design spec](http://www.google.com/design/spec/components/text-fields.html#text-fields-single-line-text-field)

+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.

-For example:

- <paper-input-container>

- <label>email address</label>

- <input type="email">

+ <paper-input-container attr-for-value="ssn-value">

+ <label>Social security number</label>

+ <ssn-input class="paper-input-input"></ssn-input>

</paper-input-container>

+### Validation

+If the `auto-validate` attribute is set, the input container will validate the input and update

+the container styling when the input value changes.

+### Add-ons

+Add-ons are child elements of a `<paper-input-container>` with the `add-on` attribute and

+implements the `Polymer.PaperInputAddonBehavior` behavior. They are notified when the input value

+or validity changes, and may implement functionality such as error messages or character counters.

+They appear at the bottom of the input.

+### Styling

+The following custom properties and mixins are available for styling:

+Custom property | Description | Default

+----------------|-------------|----------

+`--paper-input-container-color` | Label and underline color when the input is not focused | `--secondary-text-color`

+`--paper-input-container-focus-color` | Label and underline color when the input is focused | `--default-primary-color`

+`--paper-input-container-invalid-color` | Label and underline color when the input is focused | `--google-red-500`

+`--paper-input-container-input-color` | Input foreground color | `--primary-text-color`

+`--paper-input-container` | Mixin applied to the container | `{}`

+`--paper-input-container-label` | Mixin applied to the label | `{}`

+`--paper-input-container-input` | Mixin applied to the input | `{}`

+This element is `display:block` by default, but you can set the `inline` attribute to make it

+`display:inline-block`.

-->

</head><body><dom-module id="paper-input-container">

@@ -46,7 +76,11 @@ For example:

display: block;

padding: 8px 0;

- --mixin(--paper-input-container);

+ @apply(--paper-input-container);

+ }

+ :host[inline] {

+ display: inline-block;

}

:host([disabled]) {

@@ -55,7 +89,11 @@ For example:

}

.floated-label-placeholder {

- mixin(--paper-input-container-label-font);

+ @apply(--paper-font-caption);

+ }

+ .underline {

+ position: relative;

}

.focused-line {

@@ -66,7 +104,7 @@ For example:

-webkit-transform: scale3d(0,1,1);

transform: scale3d(0,1,1);

- background: var(--paper-input-container-focus-color);

+ background: var(--paper-input-container-focus-color, --default-primary-color);

}

.is-highlighted .focused-line {

@@ -75,31 +113,35 @@ For example:

-webkit-transition: -webkit-transform 0.25s;

transition: transform 0.25s;

- mixin(--paper-transition-easing);

+ @apply(--paper-transition-easing);

}

.is-invalid .focused-line {

- background: var(--paper-input-container-invalid-color);

+ background: var(--paper-input-container-invalid-color, --google-red-500);

-webkit-transform: none;

transform: none;

-webkit-transition: -webkit-transform 0.25s;

transition: transform 0.25s;

- mixin(--paper-transition-easing);

+ @apply(--paper-transition-easing);

}

.unfocused-line {

height: 1px;

- background: var(--paper-input-container-color);

+ background: var(--paper-input-container-color, --secondary-text-color);

}

:host([disabled]) .unfocused-line {

border-bottom: 1px dashed;

- border-color: var(--paper-input-container-color);

+ border-color: var(--paper-input-container-color, --secondary-text-color);

background: transparent;

}

+ .input-content {

+ position: relative;

+ }

.input-content ::content label,

.input-content ::content .paper-input-label {

position: absolute;

@@ -107,11 +149,10 @@ For example:

right: 0;

left: 0;

font: inherit;

- color: var(--paper-input-container-color);

- mixin(--paper-input-container-font);

+ color: var(--paper-input-container-color, --secondary-text-color);

- mixin(--paper-input-container-label);

+ @apply(--paper-font-subhead);

+ @apply(--paper-input-container-label);

}

.input-content.label-is-floating ::content label,

@@ -123,17 +164,17 @@ For example:

-webkit-transition: -webkit-transform 0.25s;

transition: transform 0.25s;

- mixin(--paper-transition-easing);

+ @apply(--paper-transition-easing);

}

.input-content.label-is-highlighted ::content label,

.input-content.label-is-highlighted ::content .paper-input-label {

- color: var(--paper-input-container-focus-color);

+ color: var(--paper-input-container-focus-color, --default-primary-color);

}

.input-content.is-invalid ::content label,

.input-content.is-invalid ::content .paper-input-label {

- color: var(--paper-input-container-invalid-color);

+ color: var(--paper-input-container-invalid-color, --google-red-500);

}

.input-content.label-is-hidden ::content label,

@@ -143,24 +184,24 @@ For example:

.input-content ::content input,

.input-content ::content textarea,

+ .input-content ::content iron-autogrow-textarea,

.input-content ::content .paper-input-input {

position: relative; /* to make a stacking context */

outline: none;

- color: var(--paper-input-container-input-color);

- mixin(--paper-input-container-floating-label-font);

- }

- .input-content ::content input,

- .input-content ::content textarea {

+ box-shadow: none;

padding: 0;

width: 100%;

background: transparent;

border: none;

+ color: var(--paper-input-container-input-color, --primary-text-color);

- mixin(--paper-input-container-font);

+ @apply(--paper-font-subhead);

+ @apply(--paper-input-container-input);

+ }

- mixin(--paper-input-container-input);

+ /* Firefox sets a min-width on the input, which can cause layout issues */

+ .input-content ::content input {

+ min-width: 0;

}

.input-content ::content textarea {

@@ -168,36 +209,31 @@ For example:

}

.add-on-content.is-invalid ::content * {

- color: var(--paper-input-container-invalid-color);

+ color: var(--paper-input-container-invalid-color, --google-red-500);

}

.add-on-content.is-highlighted ::content * {

- color: var(--paper-input-container-focus-color);

- }

- .input-content,

- .underline {

- position: relative;

+ color: var(--paper-input-container-focus-color, --default-primary-color);

}

</style>

- <template is="x-if" if="[[!noLabelFloat]]">

+ <template is="dom-if" if="[[!noLabelFloat]]">

</template>

- <div class$="[[_computeInputContentClass(noLabelFloat,focused,_inputHasContent,_inputIsInvalid)]]">

+ <div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]">

</div>

- <div class$="[[_computeUnderlineClass(focused,_inputIsInvalid)]]">

+ <div class$="[[_computeUnderlineClass(focused,invalid)]]">

</div>

- <div class$="[[_computeAddOnContentClass(focused,_inputIsInvalid)]]">

+ <div class$="[[_computeAddOnContentClass(focused,invalid)]]">

</div>