<gaia-input> element extracted from <gaia-input-form>.

chrome/browser/resources/chromeos/login/gaia_input.html

Index: chrome/browser/resources/chromeos/login/gaia_input.html
diff --git a/chrome/browser/resources/chromeos/login/gaia_input.html b/chrome/browser/resources/chromeos/login/gaia_input.html
new file mode 100644
index 0000000000000000000000000000000000000000..ec4a1b24311cf908a0fe411a0dd76e3bd642fcac
--- /dev/null
+++ b/chrome/browser/resources/chromeos/login/gaia_input.html
@@ -0,0 +1,46 @@
+<link rel="import" href="chrome://resources/polymer/core-input/core-input.html">
+<link rel="import" href="chrome://resources/polymer/paper-input/paper-input-decorator.html">
+<link rel="import" href="chrome://resources/polymer/polymer/layout.html">
+<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
+
+<!--
+  Material desing input field, that supports different input types and email

[Nikita (slow), 2015/05/07 09:44:12]

nit: Mention that this element matches GAIA input element style.

[dzhioev (left Google), 2015/05/07 22:21:27]

Done.

+  validation.
+
+  Examples:
+    <gaia-input value="Simple text input" required></gaia-input>
+    <gaia-input type="email" domain="example.com"></gaia-input>
+
+  Attributes:
+    'label' - same as <paper-input>'s 'label'.
+    'value' - same as <input>'s 'value'.
+    'type' - same as <input>'s 'type'.
+    'domain' - optional attribute for email input. The domain is displayed in
+               the end of input field, if user is not provided any.
+    'error' - error message displayed in case if 'isInvalid' is true.
+    'isInvalid' - whether input data is invalid. Note: it is not changed
+                  automatically. Can be changed manually or with checkValidity()
+                  method.
+    'requiered' - whether empty field is invalid.

[Nikita (slow), 2015/05/07 09:44:13]

required 

[dzhioev (left Google), 2015/05/07 22:21:27]

Done.

+
+  Methods:
+    'focus'         - focuses input field.
+    'checkValidity' - returns current validity state of the input form. Updates
+                      'isInvalid' at the end.
+-->
+<polymer-element name="gaia-input"
+                 attributes="label value type domain required error isInvalid">

[Nikita (slow), 2015/05/07 09:44:12]

nit: 4 spaces indent

[dzhioev (left Google), 2015/05/07 22:21:26]

Done.

+  <template>
+    <link rel="stylesheet" href="gaia_input.css">
+    <paper-input-decorator id="decorator" error="{{error}}"
+                           label="{{label}}" on-tap="{{onTap}}"

[Nikita (slow), 2015/05/07 09:44:13]

nit: 4 spaces indent

[dzhioev (left Google), 2015/05/07 22:21:27]

Done.

+                           isInvalid="{{isInvalid}}" floatingLabel autoValidate>
+      <div id="container" horizontal layout>
+        <input id="input" is="core-input" on-keydown="{{onKeyDown}}"
+            value="{{value}}" required?="{{required}}" flex>
+        <span id="domainLabel">{{domain}}</span>
+      </div>
+    </paper-input-decorator>
+  </template>
+</polymer-element>
+