feat: add no-vertical-overlap prop to vaadin-select (#7492)

Add a property to `vaadin-select` called `noVerticalOverlap` which
forwards its value to the same property present in the Overlay, to allow
users to configure whether they want the overlay to overlap the input
container (default) or not.

Part of #5101

packages/select/src/vaadin-lit-select.js

@@ -90,6 +90,7 @@ class Select extends SelectBaseMixin(ElementMixin(ThemableMixin(PolylitMixin(Lit
         .renderer="${this.renderer || this.__defaultRenderer}"
         ?phone="${this._phone}"
         theme="${this._theme}"
+        ?no-vertical-overlap="${this.noVerticalOverlap}"
         @opened-changed="${this._onOpenedChanged}"
         @vaadin-overlay-open="${this._onOverlayOpen}"
       ></vaadin-select-overlay>

packages/select/src/vaadin-select-base-mixin.d.ts

@@ -102,6 +102,14 @@ export declare class SelectBaseMixinClass {
    */
   readonly: boolean;
 
+  /**
+   * Defines whether the overlay should overlap the target element
+   * in the y-axis, or be positioned right above/below it.
+   *
+   * @attr {boolean} no-vertical-overlap
+   */
+  noVerticalOverlap: boolean;
+
   /**
    * Requests an update for the content of the select.
    * While performing the update, it invokes the renderer passed in the `renderer` property.

packages/select/src/vaadin-select-base-mixin.js

@@ -127,6 +127,17 @@ export const SelectBaseMixin = (superClass) =>
           reflectToAttribute: true,
         },
 
+        /**
+         * Defines whether the overlay should overlap the target element
+         * in the y-axis, or be positioned right above/below it.
+         *
+         * @attr {boolean} no-vertical-overlap
+         */
+        noVerticalOverlap: {
+          type: Boolean,
+          value: false,
+        },
+
         /** @private */
         _phone: Boolean,
 

packages/select/src/vaadin-select.js

@@ -184,6 +184,7 @@ class Select extends SelectBaseMixin(ElementMixin(ThemableMixin(PolymerElement))
         with-backdrop="[[_phone]]"
         phone$="[[_phone]]"
         theme$="[[_theme]]"
+        no-vertical-overlap$="[[noVerticalOverlap]]"
         on-vaadin-overlay-open="_onOverlayOpen"
       ></vaadin-select-overlay>
 

packages/select/test/select.common.js

@@ -638,6 +638,35 @@ describe('vaadin-select', () => {
         expect(changeSpy.callCount).to.equal(1);
       });
     });
+
+    describe('no-vertical-overlap', () => {
+      it('should overlap the input by default', async () => {
+        select.opened = true;
+        await nextUpdate(select);
+        const overlayRect = select._overlayElement.getBoundingClientRect();
+        const inputRect = select._inputContainer.getBoundingClientRect();
+        expect(overlayRect.top).to.be.equal(inputRect.top);
+      });
+
+      it('should toggle the `no-vertical-overlap` attribute in the overlay element', async () => {
+        select.noVerticalOverlap = true;
+        await nextUpdate(select);
+        expect(select._overlayElement.hasAttribute('no-vertical-overlap')).to.be.true;
+
+        select.noVerticalOverlap = false;
+        await nextUpdate(select);
+        expect(select._overlayElement.hasAttribute('no-vertical-overlap')).to.be.false;
+      });
+
+      it('should not overlap the input when overlay is opened', async () => {
+        select.noVerticalOverlap = true;
+        select.opened = true;
+        await nextUpdate(select);
+        const overlayRect = select._overlayElement.getBoundingClientRect();
+        const inputRect = select._inputContainer.getBoundingClientRect();
+        expect(overlayRect.top).to.be.equal(inputRect.bottom);
+      });
+    });
   });
 
   describe('with value', () => {

packages/select/theme/lumo/vaadin-select-styles.js

@@ -110,6 +110,14 @@ const selectOverlay = css`
     justify-content: flex-end;
   }
 
+  :host([no-vertical-overlap][top-aligned]) [part='overlay'] {
+    margin-block-start: var(--lumo-space-xs);
+  }
+
+  :host([no-vertical-overlap][bottom-aligned]) [part='overlay'] {
+    margin-block-end: var(--lumo-space-xs);
+  }
+
   :host([theme~='align-left']) {
     text-align: left;
   }