Suggestion pop-up width API for ComboBox (#19685)

Added API setPopupWidth(String) to ComboBox. The suggestion pop-up now
has three different width modes:

1. Legacy "null"-mode: width is determined by the longest item
caption for each page. This looks & feels like the old implementation.
This is the default mode

2. Relative to the ComboBox. e.g. 100%

3. fixed width using any CSS definition
Change-Id: Id60a6996ee82726196b84d50c2d0d18a6cfb5ebf

6 files changed, 51 insertions, 22 deletions

diff --git a/themes/src/main/themes/VAADIN/themes/base/select/select.scss b/themes/src/main/themes/VAADIN/themes/base/select/select.scss
index 69d3c07272..fc097405b7 100644
--- a/themes/src/main/themes/VAADIN/themes/base/select/select.scss
+++ b/themes/src/main/themes/VAADIN/themes/base/select/select.scss
@@ -104,9 +104,33 @@ $select-button-negative-width : -1em;
 	border-collapse: collapse;
 	border: none;
 	vertical-align:top;
+	display: block;
+	width: 100%;
+
+	// float & clear needs to be set so that IE 8 & 9 displays the elements as block
+	float: left;
+	clear: both;
+
+	& > tbody,
+	& > tbody > tr,
+	& > tbody > tr > td {
+		display: block;
+		width: 100%;
+		// float & clear needs to be set so that IE 8 & 9 displays the elements as block
+		float: left;
+		clear: both;
+		overflow-y: hidden;
+	}
 }
 .v-filterselect-suggestmenu .gwt-MenuItem {
 	white-space: nowrap;
+	padding-left: 1px;
+	padding-right: 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	overflow-x: hidden;
+	text-overflow: ellipsis;
 }
 .v-filterselect-suggestmenu .gwt-MenuItem .v-icon {
 	margin-right: 3px;
diff --git a/themes/src/main/themes/VAADIN/themes/chameleon/common/common.scss b/themes/src/main/themes/VAADIN/themes/chameleon/common/common.scss
index 82e0810bc2..86b65f70fb 100644
--- a/themes/src/main/themes/VAADIN/themes/chameleon/common/common.scss
+++ b/themes/src/main/themes/VAADIN/themes/chameleon/common/common.scss
@@ -126,7 +126,10 @@ $chameleon-line-height: 1.4;
 		-moz-user-select: none;
 		-ms-user-select: none;
 		cursor: default;
-		}
+	    }
+	.v-filterselect-suggestpopup .gwt-MenuItem {
+		padding: 0 .7em;
+	    }
 	
 	.v-contextmenu td.gwt-MenuItem-selected div,
 	.v-filterselect-suggestpopup td.gwt-MenuItem-selected,
diff --git a/themes/src/main/themes/VAADIN/themes/liferay/select/select.scss b/themes/src/main/themes/VAADIN/themes/liferay/select/select.scss
index 5ae302be9a..9d14b02982 100644
--- a/themes/src/main/themes/VAADIN/themes/liferay/select/select.scss
+++ b/themes/src/main/themes/VAADIN/themes/liferay/select/select.scss
@@ -61,18 +61,16 @@ select {
 	background-position: -65px -4px;
 }
 .v-filterselect-suggestmenu .gwt-MenuItem span {
-	display: block;
-	width: 100%;
 	height: 18px;
-	border: 1px solid #fff;
-	border-style: solid none;
-	
 }
 
-.v-filterselect-suggestmenu .gwt-MenuItem-selected span {
-	color: #000;
-	background: #dfe8f6;
-	border-color: #a3bae9;
+.v-filterselect-suggestmenu .gwt-MenuItem {
+	border: 1px solid transparent;
+	&.gwt-MenuItem-selected {
+		background-color: #dfe8f6;
+		border: 1px solid #333;
+		color: #000;
+	}
 }
 
 .v-filterselect-suggestmenu .gwt-MenuItem .v-icon {
diff --git a/themes/src/main/themes/VAADIN/themes/reindeer/select/select.scss b/themes/src/main/themes/VAADIN/themes/reindeer/select/select.scss
index a15ba4ab87..818c33b460 100644
--- a/themes/src/main/themes/VAADIN/themes/reindeer/select/select.scss
+++ b/themes/src/main/themes/VAADIN/themes/reindeer/select/select.scss
@@ -81,7 +81,7 @@ $select-button-negative-width : -25px;
 }
 .#{$primaryStyleName}-suggestmenu .gwt-MenuItem {
 	padding: 1px 8px;
-	height: 16px;
+	min-height: 18px;
 	user-select: none;
 	-moz-user-select: none;
 	-webkit-user-select: none;
diff --git a/themes/src/main/themes/VAADIN/themes/runo/select/select.scss b/themes/src/main/themes/VAADIN/themes/runo/select/select.scss
index 39eb0c9bde..ac8e22b429 100644
--- a/themes/src/main/themes/VAADIN/themes/runo/select/select.scss
+++ b/themes/src/main/themes/VAADIN/themes/runo/select/select.scss
@@ -77,7 +77,7 @@ $select-button-negative-width: -25px;
 .#{$primaryStyleName}-suggestmenu .gwt-MenuItem {
 	padding: 1px 6px;
 	cursor: pointer;
-	height: 18px;
+	min-height: 21px;
 }
 .#{$primaryStyleName}-suggestmenu .gwt-MenuItem .v-icon {
 	margin-right: 3px;
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 d240be56b8..e9056ef17a 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_combobox.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_combobox.scss
@@ -358,26 +358,30 @@
 
   [class$="suggestmenu"] {
     @include valo-selection-overlay-style($animate-in: false, $animate-out: false);
-    @include box-sizing(border-box);
+    @include box-sizing(content-box);
     position: relative;
     z-index: 1;
-
-    &[style*="height"] {
-      @include box-sizing(content-box);
-    }
+    display: block;
   }
 
-   margin-top: ceil($v-unit-size/8) !important;
+  margin-top: ceil($v-unit-size/8) !important;
 
-  table,
-  tbody,
-  tr,
-  td {
+  table, tbody, tr, td {
     display: block;
+    width: 100%;
+    overflow-y: hidden;
+
+    // float & clear needs to be set so that IE 8 & 9 displays the elements as block
+    float: left;
+    clear: both;
   }
 
   .gwt-MenuItem {
     @include valo-selection-item-style;
+    height: $v-selection-item-height;
+    box-sizing: border-box;
+    text-overflow: ellipsis;
+    overflow-x: hidden;
   }
 
   .gwt-MenuItem-selected {