Merge 2dfeb0b into 8e9010a

README.md

@@ -23,6 +23,7 @@
     <link rel="import" href="vaadin-text-field.html">
     <link rel="import" href="vaadin-password-field.html">
     <link rel="import" href="vaadin-text-area.html">
+    <link rel="import" href="vaadin-email-field.html">
     <next-code-block></next-code-block>
   </template>
 </custom-element-demo>
@@ -32,6 +33,7 @@
 <vaadin-text-field label="Username"></vaadin-text-field>
 <vaadin-password-field label="Password"></vaadin-password-field>
 <vaadin-text-area label="Description"></vaadin-text-area>
+<vaadin-email-field label="Email"></vaadin-email-field>
 ```
 
 [<img src="https://raw.githubusercontent.com/vaadin/vaadin-text-field/master/screenshot.png" width="710" alt="Screenshot of vaadin-text-field">](https://vaadin.com/components/vaadin-text-field)
@@ -82,23 +84,27 @@ To use the Material theme, import the correspondent file from the `theme/materia
 
 - The components with the Lumo theme:
 
-  `theme/lumo/vaadin-text-field.html`  
-  `theme/lumo/vaadin-text-area.html`  
+  `theme/lumo/vaadin-text-field.html`
+  `theme/lumo/vaadin-text-area.html`
   `theme/lumo/vaadin-password-field.html`
+  `theme/lumo/vaadin-email-field.html`
 
 - The components with the Material theme:
 
-  `theme/material/vaadin-text-field.html`  
-  `theme/material/vaadin-text-area.html`  
+  `theme/material/vaadin-text-field.html`
+  `theme/material/vaadin-text-area.html`
   `theme/material/vaadin-password-field.html`
+  `theme/material/vaadin-email-field.html`
 
-- Aliases for `theme/lumo/vaadin-text-field.html`  
-  `theme/lumo/vaadin-text-area.html`  
-  `theme/lumo/vaadin-password-field.html`:
+- Aliases for `theme/lumo/vaadin-text-field.html`
+  `theme/lumo/vaadin-text-area.html`
+  `theme/lumo/vaadin-password-field.html`
+  `theme/lumo/vaadin-email-field.html`:
 
-  `vaadin-text-field.html`  
-  `vaadin-text-area.html`  
+  `vaadin-text-field.html`
+  `vaadin-text-area.html`
   `vaadin-password-field.html`
+  `vaadin-email-field.html`
 
 
 ## Running demos and tests in browser

bower.json

@@ -9,9 +9,11 @@
     "vaadin-text-field.html",
     "vaadin-password-field.html",
     "vaadin-text-area.html",
+    "vaadin-email-field.html",
     "theme/material/vaadin-password-field.html",
     "theme/material/vaadin-text-area.html",
-    "theme/material/vaadin-text-field.html"
+    "theme/material/vaadin-text-field.html",
+    "theme/material/vaadin-email.field.html"
   ],
   "keywords": [
     "Vaadin",

demo/demos.json

@@ -51,6 +51,16 @@
         "image": ""
       }
     },
+    {
+      "name": "Email Field",
+      "url": "email-field-demos",
+      "src": "email-field-demos.html",
+      "meta": {
+        "title": "Vaadin Email Field Examples",
+        "description": "",
+        "image": ""
+      }
+    },
     {
       "name": "Text Area",
       "url": "text-area-demos",

demo/email-field-demos.html

@@ -0,0 +1,27 @@
+<dom-module id="email-field-demos">
+  <template>
+    <style include="vaadin-component-demo-shared-styles">
+      :host {
+        display: block;
+      }
+    </style>
+
+    <p>The <code>&lt;vaadin-email-field&gt;</code> element has all the same features as the <code>&lt;vaadin-text-field&gt;</code> element plus the predefined pattern specified in <a href="https://www.w3.org/TR/2012/WD-html-markup-20120320/input.email.html">W3C</a>.</p>
+
+    <h3>Email Field</h3>
+    <vaadin-demo-snippet id="email-field-demos-basic-email-field">
+      <template preserve-content>
+        <vaadin-email-field label="Email" name="email" error-message="Please enter a valid email address" clear-button-visible></vaadin-email-field>
+      </template>
+    </vaadin-demo-snippet>
+
+  </template>
+  <script>
+    class EmailFieldDemos extends DemoReadyEventEmitter(TextFieldDemo(Polymer.Element)) {
+      static get is() {
+        return 'email-field-demos';
+      }
+    }
+    customElements.define(EmailFieldDemos.is, EmailFieldDemos);
+  </script>
+</dom-module>

demo/index.html

@@ -15,6 +15,7 @@
 
   <link rel="import" href="../vaadin-text-field.html">
   <link rel="import" href="../vaadin-password-field.html">
+  <link rel="import" href="../vaadin-email-field.html">
   <link rel="import" href="../vaadin-text-area.html">
   <link rel="import" href="../../iron-form/iron-form.html">
   <link rel="import" href="../../vaadin-lumo-styles/icons.html">

src/vaadin-email-field.html

@@ -0,0 +1,56 @@
+<!--
+@license
+Copyright (c) 2018 Vaadin Ltd.
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+-->
+
+<link rel="import" href="../../polymer/polymer-element.html">
+<link rel="import" href="../../polymer/lib/elements/custom-style.html">
+<link rel="import" href="vaadin-text-field.html">
+
+<script>
+  (function() {
+    /**
+     * `<vaadin-email-field>` is a Web Component for email field control in forms.
+     *
+     * ```html
+     * <vaadin-email-field label="Email">
+     * </vaadin-email-field>
+     * ```
+     *
+     * ### Styling
+     *
+     * See vaadin-text-field.html for the styling documentation
+     *
+     * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
+     *
+     * @memberof Vaadin
+     * @extends Vaadin.TextFieldElement
+     * @demo demo/index.html
+     */
+    class EmailFieldElement extends Vaadin.TextFieldElement {
+      static get is() {
+        return 'vaadin-email-field';
+      }
+
+      static get version() {
+        return '2.3.0-alpha3';
+      }
+
+      ready() {
+        super.ready();
+        this.focusElement.type = 'email';
+        this.focusElement.autocapitalize = 'off';
+        this.pattern = '^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$';
+      }
+    }
+
+    customElements.define(EmailFieldElement.is, EmailFieldElement);
+
+    /**
+     * @namespace Vaadin
+     */
+    window.Vaadin = window.Vaadin || {};
+    Vaadin.EmailFieldElement = EmailFieldElement;
+  })();
+</script>

test/email-field.html

@@ -0,0 +1,85 @@
+<!doctype html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>vaadin-email-field tests</title>
+
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="../vaadin-email-field.html">
+
+</head>
+
+<body>
+  <test-fixture id="default">
+    <template>
+      <vaadin-email-field></vaadin-email-field>
+    </template>
+  </test-fixture>
+
+  <script>
+    const validAddresses = [
+      'email@example.com',
+      'firstname.lastname@example.com',
+      'email@subdomain.example.com',
+      'firstname+lastname@example.com',
+      'email@123.123.123.123',
+      '1234567890@example.com',
+      'email@example-one.com',
+      '_______@example.com',
+      'email@example.name',
+      'email@example.museum',
+      'email@example.co.jp',
+      'firstname-lastname@example.com',
+      'email@example'
+    ];
+
+    const invalidAdresses = [
+      'plainaddress',
+      '#@%^%#$@#$@#.com',
+      '@example.com',
+      'Joe Smith <email@example.com>',
+      'email.example.com',
+      'email@example@example.com',
+      'あいうえお@example.com',
+      'email@example.com (Joe Smith)',
+      'email@example..com'
+    ];
+
+    describe('email-field', () => {
+      let emailField, input;
+
+      beforeEach(() => {
+        emailField = fixture('default');
+        input = emailField.focusElement;
+      });
+
+      it('should have [type=email]', () => {
+        expect(input.type).to.equal('email');
+      });
+
+      describe('validation', () => {
+        describe('valid email addresses', () => {
+          validAddresses.map(address => {
+            it(address, () => {
+              emailField.value = address;
+              emailField.validate();
+              expect(emailField.invalid).to.be.false;
+            });
+          });
+        });
+
+        describe('invalid email addresses', () => {
+          invalidAdresses.map(address => {
+            it(address, () => {
+              emailField.value = address;
+              emailField.validate();
+              expect(emailField.invalid).to.be.true;
+            });
+          });
+        });
+      });
+    });
+  </script>
+</body>

test/test-suites.js

@@ -4,5 +4,6 @@ window.VaadinTextFieldSuites = [
   'password-field.html',
   'validation.html',
   'accessibility.html',
-  'custom-input.html'
+  'custom-input.html',
+  'email-field.html'
 ];

theme/lumo/vaadin-email-field.html

@@ -0,0 +1,2 @@
+<link rel="import" href="vaadin-text-field.html">
+<link rel="import" href="../../src/vaadin-email-field.html">

theme/material/vaadin-email-field.html

@@ -0,0 +1,2 @@
+<link rel="import" href="vaadin-text-field.html">
+<link rel="import" href="../../src/vaadin-email-field.html">

vaadin-directory-description.md

@@ -13,4 +13,5 @@
 <vaadin-text-field label="Username"></vaadin-text-field>
 <vaadin-password-field label="Password"></vaadin-password-field>
 <vaadin-text-area label="Description"></vaadin-text-area>
+<vaadin-email-field label="Email"></vaadin-email-field>
 ```

vaadin-email-field.html

@@ -0,0 +1 @@
+<link rel="import" href="theme/lumo/vaadin-email-field.html">