feat: add clear-button-visible API from <vaadin-text-field> (#107)

bower.json

@@ -31,8 +31,8 @@
     "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.1.1",
     "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.2.0",
     "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.2.0",
-    "vaadin-text-field": "vaadin/vaadin-text-field#^2.1.1",
-    "vaadin-combo-box": "vaadin/vaadin-combo-box#^4.2.0",
+    "vaadin-text-field": "vaadin/vaadin-text-field#^2.3.0",
+    "vaadin-combo-box": "vaadin/vaadin-combo-box#^5.0.0",
     "vaadin-control-state-mixin": "vaadin/vaadin-control-state-mixin#^2.1.1"
   },
   "devDependencies": {

demo/time-picker-basic-demos.html

@@ -36,6 +36,16 @@ <h3>Time Range</h3>
       </template>
     </vaadin-demo-snippet>
 
+    <h3>Clear Button</h3>
+
+    <p>Use the <code>clear-button-visible</code> attribute to display the clear button of an individual time-picker.</p>
+
+    <vaadin-demo-snippet id="time-picker-basic-demos-clear-button">
+      <template preserve-content>
+        <vaadin-time-picker label="Time" value="10:10" clear-button-visible></vaadin-time-picker>
+      </template>
+    </vaadin-demo-snippet>
+
   </template>
   <script>
     class TimePickerBasicDemos extends DemoReadyEventEmitter(ElementDemo(Polymer.Element)) {

src/vaadin-time-picker.html

@@ -60,6 +60,7 @@
           min$="[[min]]"
           max$="[[max]]"
           aria-label$="[[label]]"
+          clear-button-visible="[[clearButtonVisible]]"
           theme$="[[theme]]">
         <span slot="suffix" part="toggle-button" role="button" aria-label$="[[i18n.selector]]"></span>
       </vaadin-time-picker-text-field>
@@ -276,6 +277,14 @@
               observer: '__stepChanged'
             },
 
+            /**
+             * Set to true to display the clear icon which clears the input.
+             */
+            clearButtonVisible: {
+              type: Boolean,
+              value: false
+            },
+
             __dropdownItems: {
               type: Array
             },

test/input-test.html

@@ -222,6 +222,31 @@
         });
       });
 
+      describe('clear-button-visible', () => {
+        let textField, clearButton;
+
+        beforeEach(() => {
+          textField = timePicker.__inputElement;
+          clearButton = textField.$.clearButton;
+        });
+
+        it('should propagate clear-button-visible attribute to text-field', () => {
+          timePicker.clearButtonVisible = true;
+          expect(textField).to.have.property('clearButtonVisible', true);
+        });
+
+        it('should not show clear button when disabled', () => {
+          timePicker.clearButtonVisible = true;
+          timePicker.disabled = true;
+          expect(getComputedStyle(clearButton).display).to.equal('none');
+        });
+
+        it('should not show clear button when read-only', () => {
+          timePicker.clearButtonVisible = true;
+          timePicker.readonly = true;
+          expect(getComputedStyle(clearButton).display).to.equal('none');
+        });
+      });
     });
   </script>
 </body>