fix: update selected item styles to not limit height (#3548) (#3564)

* fix: reset height to make custom items fit * fix: set correct slotted item height Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
vaadin · Mar 14, 2022 · c1c2da0 · c1c2da0
1 parent a13ce11
commit c1c2da0
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 2 deletions.
diff --git a/packages/select/src/vaadin-select-value-button.js b/packages/select/src/vaadin-select-value-button.js
@@ -13,6 +13,7 @@ registerStyles(
       margin: 0;
       min-width: 0;
       width: 0;
+      height: auto;
     }
 
     ::slotted(:not([slot])) {
@@ -23,7 +24,7 @@ registerStyles(
 
     /* placeholder styles */
     ::slotted(:not([slot]):not([selected])) {
-      line-height: normal;
+      line-height: 1;
     }
 
     /* TODO: unsupported selector */

diff --git a/packages/select/test/visual/lumo/screenshots/select/baseline/placeholder.png b/packages/select/test/visual/lumo/screenshots/select/baseline/placeholder.png
diff --git a/packages/select/test/visual/lumo/screenshots/select/baseline/value-custom.png b/packages/select/test/visual/lumo/screenshots/select/baseline/value-custom.png
diff --git a/packages/select/test/visual/lumo/select.test.js b/packages/select/test/visual/lumo/select.test.js
@@ -79,6 +79,24 @@ describe('select', () => {
     await visualDiff(div, 'value-overflow');
   });
 
+  it('value-custom', async () => {
+    element.renderer = (root) => {
+      root.innerHTML = `
+        <vaadin-list-box>
+          <vaadin-item value="custom">
+            <div>
+              Line 1
+              <br>
+              Line 2
+            </div>
+          </vaadin-item>
+        </vaadin-list-box>
+      `;
+    };
+    element.value = 'custom';
+    await visualDiff(div, 'value-custom');
+  });
+
   it('required', async () => {
     element.label = 'Label';
     element.required = true;

diff --git a/packages/select/theme/lumo/vaadin-select-styles.js b/packages/select/theme/lumo/vaadin-select-styles.js
@@ -45,6 +45,7 @@ const select = css`
 
   :host([theme~='small']) [part='input-field'] ::slotted([slot='value']) {
     --lumo-button-size: var(--lumo-size-s);
+    --_lumo-selected-item-padding: 0;
   }
 `;
 
@@ -54,8 +55,8 @@ registerStyles(
   'vaadin-select-value-button',
   css`
     :host {
-      min-height: var(--lumo-size-m);
       padding: 0 0.25em;
+      --_lumo-selected-item-padding: 0.5em;
     }
 
     :host::before,
@@ -67,6 +68,12 @@ registerStyles(
       box-shadow: none;
     }
 
+    ::slotted(:not([slot])) {
+      min-height: var(--lumo-button-size);
+      padding-top: var(--_lumo-selected-item-padding);
+      padding-bottom: var(--_lumo-selected-item-padding);
+    }
+
     ::slotted(:not([slot]):hover) {
       background-color: transparent;
     }