Add helper text slot and API (#728)

* Update tests to include helper-text

* Add helper text and update demos

* Update screenshots

* Remove style attributes as those are not used

* Update test wording

* Use precision in the tests

* Fix visual tests

* Update screenshots and bump text-field

* Update test

bower.json

@@ -38,7 +38,7 @@
     "iron-resizable-behavior": "^2.0.0",
     "polymer": "^2.0.0",
     "vaadin-button": "vaadin/vaadin-button#^2.4.0-alpha1",
-    "vaadin-text-field": "vaadin/vaadin-text-field#^2.7.0-alpha1",
+    "vaadin-text-field": "vaadin/vaadin-text-field#^2.7.0-alpha3",
     "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.6.1",
     "vaadin-control-state-mixin": "vaadin/vaadin-control-state-mixin#^2.2.2",
     "vaadin-overlay": "vaadin/vaadin-overlay#^3.5.0",

demo/date-picker-basic-demos.html

@@ -30,6 +30,16 @@ <h3>Clear button</h3>
       </template>
     </vaadin-demo-snippet>
 
+    <h3>Helper text</h3>
+    <p>Use the <code>helper-text</code> attribute or add content to the <code>helper</code> slot to set helper content.</p>
+    <vaadin-demo-snippet id="helper-text">
+      <template preserve-content>
+        <vaadin-date-picker label="Event date">
+          <span slot="helper">International date format</span>
+        </vaadin-date-picker>
+      </template>
+    </vaadin-demo-snippet>
+
     <h3>Value change event</h3>
     <vaadin-demo-snippet id="value-change-event" when-defined="vaadin-date-picker">
       <template preserve-content>

demo/date-picker-theme-variants-demos.html

@@ -22,6 +22,13 @@ <h3>Small text field</h3>
       </template>
     </vaadin-demo-snippet>
 
+    <h3>Helper text position</h3>
+    <vaadin-demo-snippet id="helper-text-positions">
+      <template preserve-content>
+        <vaadin-date-picker helper-text="helper text below date picker"></vaadin-date-picker>
+        <vaadin-date-picker helper-text="helper text above date picker" theme="helper-above-field"></vaadin-date-picker>
+      </template>
+    </vaadin-demo-snippet>
 
   </template>
   <script>

src/vaadin-date-picker.html

@@ -53,9 +53,11 @@
         clear-button-visible="[[clearButtonVisible]]"
         aria-label$="[[label]]"
         part="text-field"
+        helper-text="[[helperText]]"
         theme$="[[theme]]"
       >
       <slot name="prefix" slot="prefix"></slot>
+      <slot name="helper" slot="helper">[[helperText]]</slot>
       <div part="toggle-button" slot="suffix" on-tap="_toggle" role="button" aria-label$="[[i18n.calendar]]" aria-expanded$="[[_getAriaExpanded(opened)]]"></div>
     </vaadin-date-picker-text-field>
 
@@ -219,6 +221,14 @@
              */
             placeholder: String,
 
+            /**
+             * String used for the helper text.
+             */
+            helperText: {
+              type: String,
+              value: ''
+            },
+
             /**
              * Set to true to make this element read-only.
              * @type {boolean}

test/basic.html

@@ -50,6 +50,14 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="datepicker-with-slotted-helper">
+    <template>
+      <vaadin-date-picker>
+        <div slot="helper">foo</div>
+      </vaadin-date-picker>
+    </template>
+  </test-fixture>
+
   <script>
     describe('Basic features', () => {
       var datepicker, toggleButton;
@@ -655,6 +663,18 @@
           expect(textfield).to.have.property('clearButtonVisible', true);
         });
       });
+
+      it('should display the helper text when slotted helper available', () => {
+        const datepicker = fixture(`datepicker-with-slotted-helper`);
+        const evt = new CustomEvent('slotchange');
+        datepicker.shadowRoot.querySelector('[name="helper"]').dispatchEvent(evt);
+        expect(datepicker._inputElement.querySelector('[slot="helper"]').assignedNodes()[0].textContent).to.eql('foo');
+      });
+
+      it('should display the helper text when provided', () => {
+        datepicker.helperText = 'Foo';
+        expect(datepicker._inputElement.helperText).to.equal(datepicker.helperText);
+      });
     });
 
     describe('with clear-button-visible', () => {

test/visual/default.html

@@ -41,6 +41,14 @@
     <br>Clear button visible
     <vaadin-date-picker clear-button-visible></vaadin-date-picker>
     <vaadin-date-picker clear-button-visible value="1991-12-20"></vaadin-date-picker>
+
+    <br>Helper text
+    <vaadin-date-picker label="Foo" value="1991-12-20" helper-text="Bar"></vaadin-date-picker>
+
+    <br>Slotted helper
+    <vaadin-date-picker>
+      <span slot="helper">Bar</span>
+    </vaadin-date-picker>
   </div>
 
 </body>