Add helper-text and update demos

vaadin · May 29, 2020 · 0addb1f · 0addb1f
1 parent 2d195ae
commit 0addb1f
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 0 deletions.
diff --git a/demo/time-picker-basic-demos.html b/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

diff --git a/demo/time-picker-styling-demos.html b/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)) {

diff --git a/src/vaadin-time-picker.html b/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}