Add helper text (#41)

* Bump dependencies, update tests

* Add helper-text and update demos

* Update screenshots

* Update broken screenshot

* Update visual tests

bower.json

@@ -30,9 +30,9 @@
     "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-date-picker": "vaadin/vaadin-date-picker#^4.3.0-alpha1",
-    "vaadin-time-picker": "vaadin/vaadin-time-picker#^2.3.0-alpha2",
-    "vaadin-custom-field": "vaadin/vaadin-custom-field#^1.2.0-alpha1"
+    "vaadin-date-picker": "vaadin/vaadin-date-picker#^4.3.0-alpha2",
+    "vaadin-time-picker": "vaadin/vaadin-time-picker#^2.3.0-alpha3",
+    "vaadin-custom-field": "vaadin/vaadin-custom-field#^1.2.0-alpha2"
   },
   "devDependencies": {
     "iron-component-page": "^3.0.0",

demo/date-time-picker-basic-demos.html

@@ -35,6 +35,16 @@ <h3>Disabled and readonly</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="date-time-picker-basic-demos-helper-text">
+      <template preserve-content>
+        <vaadin-date-time-picker label="Appointment time">
+          <span slot="helper">Please consult with customer service before choosing time</span>
+        </vaadin-date-time-picker>
+      </template>
+    </vaadin-demo-snippet>
+
     <h3>Initial position of date picker</h3>
     <vaadin-demo-snippet id="date-time-picker-basic-demos-initial-position">
       <template preserve-content>

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

@@ -22,6 +22,14 @@ <h3>Small text field</h3>
       </template>
     </vaadin-demo-snippet>
 
+    <h3>Helper text position</h3>
+    <vaadin-demo-snippet>
+      <template preserve-content>
+        <vaadin-date-time-picker helper-text="helper text below date time picker"></vaadin-date-time-picker>
+        <vaadin-date-time-picker helper-text="helper text above date time picker" theme="helper-above-field"></vaadin-date-time-picker>
+      </template>
+    </vaadin-demo-snippet>
+
   </template>
   <script>
     class DateTimePickerThemeVariantsDemos extends DemoReadyEventEmitter(DateTimePickerDemo(Polymer.Element)) {

src/vaadin-date-time-picker.html

@@ -63,6 +63,7 @@
         disabled$="[[disabled]]"
         readonly$="[[readonly]]"
         error-message="[[errorMessage]]"
+        helper-text="[[helperText]]"
       >
       <div class="slot-container">
         <slot name="date-picker" id="dateSlot">
@@ -72,6 +73,7 @@
           <vaadin-date-time-picker-time-picker part="time" theme$="[[theme]]"></vaadin-date-time-picker-time-picker>
         </slot>
       </div>
+      <slot name="helper" slot="helper">[[helperText]]</slot>
     </vaadin-date-time-picker-custom-field>
   </template>
 
@@ -275,6 +277,14 @@
               type: String
             },
 
+            /**
+             * String used for the helper text.
+             */
+            helperText: {
+              type: String,
+              value: ''
+            },
+
             /**
              * Specifies the number of valid intervals in a day used for
              * configuring the items displayed in the time selection box.

test/basic.html

@@ -23,6 +23,14 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="dtp-with-slotted-helper">
+    <template>
+      <vaadin-date-time-picker>
+        <div slot="helper">foo</div>
+      </vaadin-date-time-picker>
+    </template>
+  </test-fixture>
+
   <test-fixture id="theme-attribute">
     <template>
       <vaadin-date-time-picker theme="foo"></vaadin-date-time-picker>
@@ -293,6 +301,24 @@
 
     });
 
+    describe('helperText', () => {
+      let dateTimePicker;
+
+      beforeEach(() => dateTimePicker = fixture('default'));
+
+      it('should display the helper text when provided', () => {
+        dateTimePicker.helperText = 'Foo';
+        expect(dateTimePicker.$.customField.helperText).to.equal(dateTimePicker.helperText);
+      });
+
+      it('should display the helper text when slotted helper available', () => {
+        const dateTimePicker = fixture(`dtp-with-slotted-helper`);
+        const evt = new CustomEvent('slotchange');
+        dateTimePicker.shadowRoot.querySelector('[name="helper"]').dispatchEvent(evt);
+        expect(dateTimePicker.$.customField.querySelector('[slot="helper"]').assignedNodes()[0].textContent).to.eql('foo');
+      });
+    });
+
     describe('Theme attribute', () => {
       let dateTimePicker;
       let customField;

test/visual/default.html

@@ -11,11 +11,16 @@
     const dir = window.location.search.replace(/.*dir=(\w+).*/, '$1') || 'ltr';
     document.documentElement.setAttribute('dir', dir);
   </script>
+  <style>
+    vaadin-date-time-picker {
+      text-align: initial;
+    }
+  </style>
 </head>
 
 <body>
 
-  <div id="default-tests" style="padding: 10px; text-align: right; width: 500px">
+  <div id="default-tests" style="padding: 10px; text-align: end; width: 500px">
     Plain
     <vaadin-date-time-picker></vaadin-date-time-picker>
 
@@ -27,6 +32,14 @@
 
     <br>Read-only
     <vaadin-date-time-picker readonly label="Label" value="2019-09-16T15:00"></vaadin-date-time-picker>
+
+    <br>Helper text
+    <vaadin-date-time-picker label="Foo" value="2019-09-16T15:00" helper-text="Bar"></vaadin-date-time-picker>
+
+    <br>Slotted helper
+    <vaadin-date-time-picker>
+      <span slot="helper">Bar</span>
+    </vaadin-date-time-picker>
   </div>
 
 </body>