Add helper text slot and API (#152)

* Update tests and screenshots

* Add helper-text and update demos

* Bump text-field and update screenshots

* Skip test for safari

bower.json

@@ -31,7 +31,7 @@
     "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.4.1",
     "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.6.0",
     "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.3.2",
-    "vaadin-text-field": "vaadin/vaadin-text-field#^2.7.0-alpha2",
+    "vaadin-text-field": "vaadin/vaadin-text-field#^2.7.0-alpha3",
     "vaadin-combo-box": "vaadin/vaadin-combo-box#^5.3.0-alpha1",
     "vaadin-control-state-mixin": "vaadin/vaadin-control-state-mixin#^2.2.2"
   },

demo/time-picker-basic-demos.html

@@ -54,6 +54,16 @@ <h3>Value Resolution</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="time-picker-basic-demos-helper-text">
+      <template preserve-content>
+        <vaadin-time-picker label="Alarm clock (hh:mm)">
+          <span slot="helper">The alarm will be repeated everyday</span>
+        </vaadin-time-picker>
+      </template>
+    </vaadin-demo-snippet>
+
     <h3>Time Range</h3>
     <p>
       The <code>min</code> and <code>max</code> properties affect the range of times that will be available

demo/time-picker-styling-demos.html

@@ -32,6 +32,14 @@ <h3>Custom Theme Variant</h3>
       </template>
     </vaadin-demo-snippet>
 
+    <h3>Helper text position</h3>
+    <vaadin-demo-snippet id="time-picker-styling-demos-helper-text-positions">
+      <template preserve-content>
+        <vaadin-time-picker helper-text="helper text below time picker"></vaadin-time-picker>
+        <vaadin-time-picker helper-text="helper text above time picker" theme="helper-above-field"></vaadin-time-picker>
+      </template>
+    </vaadin-demo-snippet>
+
   </template>
   <script>
     class TimePickerStylingDemos extends DemoReadyEventEmitter(ElementDemo(Polymer.Element)) {

src/vaadin-time-picker.html

@@ -63,7 +63,9 @@
           aria-label$="[[label]]"
           clear-button-visible="[[clearButtonVisible]]"
           i18n="[[i18n]]"
+          helper-text="[[helperText]]"
           theme$="[[theme]]">
+        <slot name="helper" slot="helper">[[helperText]]</slot>
         <span slot="suffix" part="toggle-button" class="toggle-button" role="button" aria-label$="[[i18n.selector]]"></span>
       </vaadin-time-picker-text-field>
     </vaadin-combo-box-light>
@@ -207,6 +209,14 @@
               type: String
             },
 
+            /**
+             * String used for the helper text.
+             */
+            helperText: {
+              type: String,
+              value: ''
+            },
+
             /**
              * A placeholder string in addition to the label.
              * @type {string}

test/input-test.html

@@ -17,7 +17,22 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="time-picker-with-slotted-helper">
+    <template>
+      <vaadin-time-picker>
+        <div slot="helper">foo</div>
+      </vaadin-time-picker>
+    </template>
+  </test-fixture>
+
   <script>
+    const isSafari = (() => {
+      const uA = navigator.userAgent;
+      const vendor = navigator.vendor;
+      return /iPad|iPhone|iPod/.test(uA) ||
+        /Safari/i.test(uA) && /Apple Computer/.test(vendor) && !/Mobi|Android/i.test(uA);
+    })();
+
     function changeInputValue(el, value) {
       el.value = value;
       el.dispatchEvent(new CustomEvent('change'));
@@ -192,6 +207,13 @@
           });
         });
 
+        // Skipped because of the issue with slots order occuring in https://failing-container.glitch.me.
+        (!isSafari ? it : it.skip)(`should propagate helperText property to text-field`, () => {
+          expect(timePicker.__inputElement.helperText).to.be.empty;
+          timePicker.helperText = 'foo';
+          expect(timePicker.__inputElement.helperText).to.be.equal('foo');
+        });
+
         // they are used in both combo-box-mixin and text-field
         ['disabled', 'readonly'].forEach(prop => {
           ['__inputElement', '__dropdownElement'].forEach(elem => {
@@ -210,6 +232,13 @@
           expect(timePicker.hasAttribute('readonly')).to.be.true;
         });
 
+        it('should display the helper text when slotted helper available', () => {
+          const timePicker = fixture(`time-picker-with-slotted-helper`);
+          const evt = new CustomEvent('slotchange');
+          timePicker.shadowRoot.querySelector('[name="helper"]').dispatchEvent(evt);
+          expect(timePicker.__inputElement.querySelector('[slot="helper"]').assignedNodes()[0].textContent).to.eql('foo');
+        });
+
         describe('aria', () => {
           it('text-field should have the `aria-label` attribute', () => {
             expect(timePicker.__inputElement.hasAttribute('aria-label')).to.be.false;

test/visual/default.html

@@ -30,6 +30,14 @@
 
     <br>Full-width
     <vaadin-time-picker style='width: 300px;'></vaadin-time-picker>
+
+    <br>Helper text
+    <vaadin-time-picker label="Foo" value="12:12" helper-text="Bar"></vaadin-time-picker>
+
+    <br>Slotted helper
+    <vaadin-time-picker>
+      <span slot="helper">Bar</span>
+    </vaadin-time-picker>
   </div>
 
 </body>