Merge f506a1c into ceccc0d

bower.json

@@ -36,7 +36,7 @@
     "polymer": "^2.0.0",
     "vaadin-control-state-mixin": "vaadin/vaadin-control-state-mixin#^2.2.2",
     "vaadin-overlay": "vaadin/vaadin-overlay#^3.5.0",
-    "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-lumo-styles": "vaadin/vaadin-lumo-styles#^1.1.1",
     "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.1.2",

demo/combo-box-basic-demos.html

@@ -23,6 +23,25 @@ <h3>Basic usage</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-combo-box label="Label" helper-text="Helper text"></vaadin-combo-box>
+        <vaadin-combo-box label="Label">
+          <span slot="helper">Helper text</span>
+        </vaadin-combo-box>
+        <script>
+          window.addDemoReadyListener('#helper-text', function(document) {
+            const combos = document.querySelectorAll('vaadin-combo-box');
+            combos.forEach(function(comboBox) {
+              comboBox.items = ['Value', 'Option one', 'Option two'];
+            });
+          });
+        </script>
+      </template>
+    </vaadin-demo-snippet>
+
     <h3>Disabled and read-only</h3>
     <vaadin-demo-snippet id="disabled-and-readonly" when-defined="vaadin-combo-box">
       <template preserve-content>

demo/combo-box-theme-variants-demos.html

@@ -22,6 +22,25 @@ <h3>Text align</h3>
       </template>
     </vaadin-demo-snippet>
 
+    <h3>Helper text position</h3>
+    <vaadin-demo-snippet id="helper-text-positions">
+      <template preserve-content>
+        <h4>Below the field</h4>
+        <vaadin-combo-box label="Name" value="Jose" helper-text="Helper text below"></vaadin-combo-box>
+        <h4>Above the field</h4>
+        <vaadin-combo-box label="Name" value="Jose" helper-text="Helper text above"
+          theme="helper-above-field"></vaadin-combo-box>
+        <script>
+          window.addDemoReadyListener('#helper-text-positions', function(document) {
+            const comboBox = document.querySelectorAll('vaadin-combo-box');
+            comboBox[0].items = ['Left', 'Right', 'Center'];
+            comboBox[1].items = ['Left', 'Right', 'Center'];
+            comboBox[2].items = ['Left', 'Right', 'Center'];
+          });
+        </script>
+      </template>
+    </vaadin-demo-snippet>
+
     <h3>Small size</h3>
     <vaadin-demo-snippet id="small-size" when-defined="vaadin-combo-box">
       <template preserve-content>

src/vaadin-combo-box.html

@@ -48,6 +48,7 @@
         required="[[required]]"
         disabled="[[disabled]]"
         readonly="[[readonly]]"
+        helper-text="[[helperText]]"
         error-message="[[errorMessage]]"
 
         autocapitalize="none"
@@ -61,6 +62,7 @@
         theme$="[[theme]]"
       >
       <slot name="prefix" slot="prefix"></slot>
+      <slot name="helper" slot="helper">[[helperText]]</slot>
 
       <div part="toggle-button" id="toggleButton" slot="suffix" role="button" aria-label="Toggle"></div>
 
@@ -329,6 +331,14 @@
               value: ''
             },
 
+            /**
+             * String used for the helper text.
+             */
+            helperText: {
+              type: String,
+              value: ''
+            },
+
             /** @type {boolean} */
             readonly: {
               type: Boolean,

test/vaadin-combo-box.html

@@ -48,6 +48,14 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="combo-box-with-slotted-helper">
+    <template>
+      <vaadin-combo-box>
+        <div slot="helper">foo</div>
+      </vaadin-combo-box>
+    </template>
+  </test-fixture>
+
   <script>
     describe('Properties', () => {
       let comboBox;
@@ -335,6 +343,20 @@
         });
       });
 
+      describe('helper-text', () => {
+        it('should display the helper text when slotted helper available', () => {
+          const comboBox = fixture(`combo-box-with-slotted-helper`);
+          const evt = new CustomEvent('slotchange');
+          comboBox.shadowRoot.querySelector('[name="helper"]').dispatchEvent(evt);
+          expect(comboBox.inputElement.querySelector('[slot="helper"]').assignedNodes()[0].textContent).to.eql('foo');
+        });
+
+        it('should display the helper text when provided', () => {
+          comboBox.helperText = 'Foo';
+          expect(comboBox.inputElement.helperText).to.equal(comboBox.helperText);
+        });
+      });
+
       describe('focus API', () => {
         it('should not be focused by default', () => {
           expect(comboBox.hasAttribute('focused')).to.be.false;

test/visual/default.html

@@ -27,6 +27,14 @@
 
     <br>Value
     <vaadin-combo-box value="Carbon" items='["Carbon"]'></vaadin-combo-box>
+
+    <br>Helper text
+    <vaadin-combo-box value="Carbon" helper-text="Helper text"></vaadin-combo-box>
+
+    <br>Helper text (slotted)
+    <vaadin-combo-box value="Carbon">
+      <span slot="helper">Helper text</span>
+    </vaadin-combo-box>
   </div>
 
 </body>