fix(select): option position when no label is set (#1251)

* fix(select): option position when no label is set * update ui test * update ui test * update snapshot Co-authored-by: yinonov <yinon@hotmail.com>
Vonage · Mar 9, 2022 · f3aee57 · f3aee57
1 parent bd24e3d
commit f3aee57
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 1 deletion.
diff --git a/components/select/src/vwc-select.scss b/components/select/src/vwc-select.scss
@@ -218,3 +218,11 @@ vwc-notched-outline {
 		display: block;
 	}
 }
+
+
+//no label default height
+:host(:not([dense])) {
+	.mdc-select--no-label .mdc-select__selected-text {
+		padding-top: 8px;
+	}
+}
diff --git a/ui-tests/snapshots/vwc-select.png b/ui-tests/snapshots/vwc-select.png
diff --git a/ui-tests/tests/vwc-select/index.js b/ui-tests/tests/vwc-select/index.js
@@ -53,6 +53,56 @@ export async function createElementVariations(wrapper) {
   </vwc-list-item>
 </vwc-select>
 <hr>
+<div>
+	<vwc-select helper="select with no label">
+  <vwc-list-item
+    mwc-list-item=""
+    tabindex="0"
+    aria-disabled="false"
+    role="option"
+    aria-selected="true"
+    selected=""
+    activated=""
+  >First option</vwc-list-item>
+  <vwc-list-item
+    value="0"
+    mwc-list-item=""
+    tabindex="-1"
+    aria-disabled="false"
+    role="option"
+  >
+    Item 0
+  </vwc-list-item>
+  <vwc-list-item
+    value="1"
+    mwc-list-item=""
+    tabindex="-1"
+    aria-disabled="false"
+    role="option"
+  >
+    Item 1
+  </vwc-list-item>
+  <vwc-list-item
+    value="2"
+    mwc-list-item=""
+    tabindex="-1"
+    aria-disabled="false"
+    role="option"
+  >
+    Item 2
+  </vwc-list-item>
+  <vwc-list-item
+    value="3"
+    mwc-list-item=""
+    tabindex="-1"
+    aria-disabled="false"
+    role="option"
+  >
+    Item 3
+  </vwc-list-item>
+</vwc-select>
+</div>
+<hr>
 <div style="background-color: rebeccapurple">
 	<vwc-select label="VWC Select" helper="Helper Text" dense>
   <vwc-list-item
@@ -100,7 +150,7 @@ export async function createElementVariations(wrapper) {
   >
     Item 3
   </vwc-list-item>
-</vwc-select de>
+</vwc-select>
 </div>
 <hr>
 <div style="display: flex; align-items: flex-start;">