Fix position of font icons in ComboBox (#9638)

Fixes #9637

4 files changed, 55 insertions, 0 deletions

diff --git a/tests/screenshots b/tests/screenshots
-Subproject 21ea7e4a0bf740bb34ef5916caf0473c12825a5
+Subproject 7d70f6d3fa34ae6fdbfb874994f24ba08abfe13
diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_combobox.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_combobox.scss
index b81b44eb9a..e7f837d4c8 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_combobox.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_combobox.scss
@@ -161,6 +161,12 @@
     width: $unit-size;
     line-height: 1;
     padding-top: .12em;
+
+    $padding-width: ceil($unit-size/6);
+    @if $border-radius {
+      $padding-width: $padding-width + ceil($border-radius/3);
+    }
+    margin-left: $padding-width;
   }
 
   &[class*="prompt"] > [class*="input"] {
diff --git a/uitest/src/main/java/com/vaadin/tests/components/combobox/ComboBoxVaadinIcons.java b/uitest/src/main/java/com/vaadin/tests/components/combobox/ComboBoxVaadinIcons.java
new file mode 100644
index 0000000000..c35aa2a06a
--- /dev/null
+++ b/uitest/src/main/java/com/vaadin/tests/components/combobox/ComboBoxVaadinIcons.java
@@ -0,0 +1,26 @@
+package com.vaadin.tests.components.combobox;
+
+import java.util.Arrays;
+
+import com.vaadin.annotations.Widgetset;
+import com.vaadin.icons.VaadinIcons;
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.ui.ComboBox;
+
+@Widgetset("com.vaadin.DefaultWidgetSet")
+public class ComboBoxVaadinIcons extends AbstractTestUI {
+
+    public static final VaadinIcons[] icons = new VaadinIcons[] {
+            VaadinIcons.AMBULANCE, VaadinIcons.PAPERPLANE,
+            VaadinIcons.AIRPLANE };
+
+    @Override
+    protected void setup(VaadinRequest request) {
+        ComboBox<String> comboBox = new ComboBox<>();
+        comboBox.setItems(Arrays.stream(icons).map(VaadinIcons::name));
+        comboBox.setItemIconGenerator(VaadinIcons::valueOf);
+        addComponent(comboBox);
+    }
+
+}
diff --git a/uitest/src/test/java/com/vaadin/tests/components/combobox/ComboBoxVaadinIconsTest.java b/uitest/src/test/java/com/vaadin/tests/components/combobox/ComboBoxVaadinIconsTest.java
new file mode 100644
index 0000000000..0e71475d9f
--- /dev/null
+++ b/uitest/src/test/java/com/vaadin/tests/components/combobox/ComboBoxVaadinIconsTest.java
@@ -0,0 +1,23 @@
+package com.vaadin.tests.components.combobox;
+
+import java.io.IOException;
+
+import org.junit.Test;
+import org.openqa.selenium.Keys;
+
+import com.vaadin.testbench.elements.ComboBoxElement;
+import com.vaadin.tests.tb3.MultiBrowserTest;
+
+public class ComboBoxVaadinIconsTest extends MultiBrowserTest {
+
+    @Test
+    public void testComboBoxIconRendering() throws IOException {
+        openTestURL();
+        ComboBoxElement comboBox = $(ComboBoxElement.class).first();
+        comboBox.openPopup();
+        compareScreen(comboBox.getSuggestionPopup(), "popup");
+        comboBox.sendKeys(Keys.ARROW_DOWN, Keys.ARROW_DOWN, Keys.ENTER);
+        compareScreen(comboBox, "paperplane");
+    }
+
+}