Ensure popup datefield width setting works in all themes (#10485)

Change-Id: I9f0891fb363e49d59b5ab2b1af53ba4bf9bca21e

WebContent/VAADIN/themes/base/datefield/datefield.scss

@@ -14,7 +14,12 @@
 
 .#{$primaryStyleName}-button {
 	cursor: pointer;
+	vertical-align: top;
+}
+.v-has-width > input.#{$primaryStyleName}-textfield {
+	width: 100%;
 }
+
 .#{$primaryStyleName}-prompt .#{$primaryStyleName}-textfield {
 	color: #999;
 	font-style: italic;
@@ -80,6 +85,11 @@
 .#{$primaryStyleName}-popup {
 	background: #fff;
 }
+.#{$primaryStyleName}-popupcalendar input.#{$primaryStyleName}-textfield {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
 /* Disabled by default
 .#{$primaryStyleName}-error .v-textfield,
 .#{$primaryStyleName}-error .#{$primaryStyleName}-calendarpanel {

WebContent/VAADIN/themes/chameleon/common/common.scss

@@ -4,6 +4,8 @@ $chameleon-app-background: transparent;
 
 $chameleon-font-family: Arial, Helvetica, "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
 $chameleon-font-size: 13px;
+$chameleon-font-size-small: 11.05px;
+$chameleon-font-size-big: 15.6px;
 $chameleon-line-height: 1.4;
 
 

WebContent/VAADIN/themes/chameleon/components/button/button.scss

@@ -79,7 +79,7 @@ div.#{$primaryStyleName}-down .#{$primaryStyleName}-wrap {
  * Big
  ******************************************************************************/
 .#{$primaryStyleName}-big {
-	font-size: 15.6px;
+	font-size: $chameleon-font-size-big;
 	}
 
 
@@ -87,7 +87,7 @@ div.#{$primaryStyleName}-down .#{$primaryStyleName}-wrap {
  * Small
  ******************************************************************************/
 .#{$primaryStyleName}-small {
-	font-size: 11.05px;
+	font-size: $chameleon-font-size-small;
 	font-weight: normal;
 	}
 

WebContent/VAADIN/themes/chameleon/components/datefield/datefield.scss

@@ -1,5 +1,12 @@
 @mixin chameleon-datefield($primaryStyleName : v-datefield) {
 
+$popupdatefield-button-width: 25px;
+$negative-popupdatefield-button-width: -25px;
+
+$popupdatefield-height: 1.7em; 
+$popupdatefield-small-height: 1.6em; 
+$popupdatefield-big-height: 1.9em; 
+
 .#{$primaryStyleName}-button {
 	background: #dadada url(../../img/date-btn.png) repeat-x 50% 0;
 	border: 1px solid gray;
@@ -7,59 +14,56 @@
 	-webkit-border-bottom-right-radius: 3px;
 	-moz-border-radius-topright: 3px;
 	-moz-border-radius-bottomright: 3px;
-	width: 25px;
-	height: 1.2em;
+	width: $popupdatefield-button-width;
+	margin-right: $negative-popupdatefield-button-width;
+	height: $popupdatefield-height; 
 	padding: .2em 0;
-	-webkit-box-sizing: content-box;
-	-moz-box-sizing: content-box;
-	-ms-box-sizing: content-box;
-	box-sizing: content-box;
-	}
-
-.#{$primaryStyleName}-small .#{$primaryStyleName}-button {
-	height: 1.2em;
-	}
-
-.#{$primaryStyleName}-big .#{$primaryStyleName}-button {
-	padding: .3em 0;
-	height: 1.2em;
-	}
-
-.v-ie8 & .#{$primaryStyleName}-button {
-	height: 1.6em;
-	padding: 0;
 	}
 
-.v-ie8 & .#{$primaryStyleName}-big .#{$primaryStyleName}-button {
-	height: 1.8em;
-	}
 
-input.#{$primaryStyleName}-textfield {
+input.#{$primaryStyleName}-textfield[type="text"] {
 	border-right: none;
 	-webkit-border-top-right-radius: 0;
 	-webkit-border-bottom-right-radius: 0;
 	-moz-border-radius-topright: 0;
 	-moz-border-radius-bottomright: 0;
+	height: $popupdatefield-height;
 	}
 
-
 /*******************************************************************************
  * Big
  ******************************************************************************/
-.#{$primaryStyleName}-big .#{$primaryStyleName}-button {
-	width: 32px;
-	background-image: url(../../img/date-btn-big.png);
+.#{$primaryStyleName}-big {
+	.#{$primaryStyleName}-button {
+		padding: .3em 0;
+		height: $popupdatefield-big-height;
+		width: 32px;
+		background-image: url(../../img/date-btn-big.png);
+		font-size: $chameleon-font-size-big;
+	}
+	input.#{$primaryStyleName}-textfield[type="text"] {
+		height: $popupdatefield-big-height;
+		font-size: $chameleon-font-size-big;
 	}
+}
 
 
 /*******************************************************************************
  * Small
  ******************************************************************************/
-.#{$primaryStyleName}-small .#{$primaryStyleName}-button {
-	width: 19px;
-	background-position: 50% -2px;
+.#{$primaryStyleName}-small {
+	.#{$primaryStyleName}-button {
+		height: $popupdatefield-small-height;
+		width: 19px;
+		background-position: 50% -2px;
+		font-size: $chameleon-font-size-small;
 	}
-
+	input.#{$primaryStyleName}-textfield[type="text"] {
+		height: $popupdatefield-small-height;
+		font-size: $chameleon-font-size-small;
+	}
+	
+}
 
 /*******************************************************************************
  * Calendar panel
@@ -73,11 +77,11 @@ input.#{$primaryStyleName}-textfield {
 	}
 
 .#{$primaryStyleName}-month .#{$primaryStyleName}-textfield {
-	width: 6em;
+	width: 6.4em;
 	}
 
 .#{$primaryStyleName}-year .#{$primaryStyleName}-textfield {
-	width: 4em;
+	width: 4.4em;
 	}
 
 .#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-prevmonth,
@@ -108,21 +112,22 @@ span.#{$primaryStyleName}-calendarpanel-month {
 	}
 
 .#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-month {
-	width: 5em;
+	width: 5.4em;
 	}
 
 .#{$primaryStyleName}-month .#{$primaryStyleName}-calendarpanel-month,
 .#{$primaryStyleName}-day .#{$primaryStyleName}-calendarpanel-month,
 .#{$primaryStyleName}-full .#{$primaryStyleName}-calendarpanel-month {
-	width: 9em;
+	width: 9.4em;
 	}
 
 .#{$primaryStyleName}-popupcalendar {
 	min-width: 0;
-	}
+	padding-right: $popupdatefield-button-width;
+}
 
 .#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel {
-	width: 8em;
+	width: 8.4em;
 	}
 
 td.#{$primaryStyleName}-calendarpanel-prevyear {

WebContent/VAADIN/themes/chameleon/components/label/label.scss

@@ -44,7 +44,7 @@
  * Big
  ******************************************************************************/
 .#{$primaryStyleName}-big {
-	font-size: 15.6px;
+	font-size: $chameleon-font-size-big;
 	}
 
 
@@ -63,7 +63,7 @@
  * Tiny
  ******************************************************************************/
 .#{$primaryStyleName}-tiny {
-	font-size: 11.05px;
+	font-size: $chameleon-font-size-small;
 	line-height: 1.2;
 	opacity: .7;
 	filter: alpha(opacity=70);

WebContent/VAADIN/themes/chameleon/components/selects/selects.scss

@@ -53,7 +53,7 @@
 }	
 
 &.v-app .#{$primaryStyleName}-suggestpopup-small td {
-	font-size: 11.05px;
+	font-size: $chameleon-font-size-small;
 	}
 
 &.v-app .#{$primaryStyleName}-suggestpopup-big td {
@@ -138,7 +138,7 @@
 	}
 
 .v-select-big .v-select-select {
-	font-size: 15.6px;
+	font-size: $chameleon-font-size-big;
 	}
 
 

WebContent/VAADIN/themes/chameleon/components/table/table.scss

@@ -106,7 +106,7 @@ div.#{$primaryStyleName}-focus-slot-right {
  ******************************************************************************/
 .#{$primaryStyleName}-small .#{$primaryStyleName}-caption-container,
 .#{$primaryStyleName}-small .#{$primaryStyleName}-body {
-	font-size: 11.05px;
+	font-size: $chameleon-font-size-small;
 	}
 
 .#{$primaryStyleName}-small .#{$primaryStyleName}-resizer, 
@@ -124,7 +124,7 @@ div.#{$primaryStyleName}-focus-slot-right {
  ******************************************************************************/
 .#{$primaryStyleName}-big .#{$primaryStyleName}-caption-container,
 .#{$primaryStyleName}-big .#{$primaryStyleName}-body {
-	font-size: 15.6px;
+	font-size: $chameleon-font-size-big;
 	}
 
 .#{$primaryStyleName}-big .#{$primaryStyleName}-caption-container {

WebContent/VAADIN/themes/chameleon/components/textfield/textfield.scss

@@ -71,22 +71,17 @@ textarea.v-textarea-readonly {
  ******************************************************************************/
 &.v-app input.#{$primaryStyleName}-small,
 &.v-app textarea.v-textarea-small,
-.v-datefield-small .v-datefield-textfield,
-.v-datefield-small .v-datefield-button,
 .v-filterselect-small .v-filterselect-input {
-	font-size: 11.05px;
+	font-size: $chameleon-font-size-small;
 	}
 
-
 /*******************************************************************************
  * Big (and big search)
  ******************************************************************************/
 &.v-app input.#{$primaryStyleName}-big,
 &.v-app textarea.v-textarea-big,
-.v-datefield-big .v-datefield-textfield,
-.v-datefield-big .v-datefield-button,
 .v-filterselect-big .v-filterselect-input {
-	font-size: 15.6px;
+	font-size: $chameleon-font-size-big;
 	}
 
 input.#{$primaryStyleName}-big[type=text],

WebContent/VAADIN/themes/reindeer/datefield/datefield.scss

@@ -233,9 +233,6 @@ td.#{$primaryStyleName}-calendarpanel-nextyear {
 .v-op & .#{$primaryStyleName}-popup {
 	background: rgba(255,255,255,.95);
 }
-.v-has-width > input.#{$primaryStyleName}-textfield {
-	width: 100%;
-}
 .#{$primaryStyleName}-year > .#{$primaryStyleName}-textfield {
 	width: 4.5em;
 }
@@ -255,9 +252,6 @@ td.#{$primaryStyleName}-calendarpanel-nextyear {
 	-webkit-border-top-right-radius: 0;
 	-webkit-border-bottom-right-radius: 0;
 	height: 23px;
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
 }
 .#{$primaryStyleName}.v-readonly input.#{$primaryStyleName}-textfield {
 	border-right-width: 1px;

WebContent/VAADIN/themes/runo/datefield/datefield.scss

@@ -1,19 +1,28 @@
 @mixin runo-datefield($primaryStyleName : v-datefield) {
 
+$popupdatefield-button-width: 22px;
+$negative-popupdatefield-button-width: -22px;
+
 .#{$primaryStyleName} input.v-textfield,
 .#{$primaryStyleName} input.v-textfield[type=text] {
-	height: 18px;
+	height: 22px; // 18px height + 2*2px padding
+	
 }
 .#{$primaryStyleName}-button {
 	font-size:13px;
-	width: 22px;
+	width: $popupdatefield-button-width;
+	margin-right: $negative-popupdatefield-button-width;
 	height: 24px;
 	padding: 0;
 	overflow: hidden;
 	border: none;
 	background: transparent url(img/open-button.png) no-repeat right 0;
-	vertical-align: top;
 }
+.#{$primaryStyleName}-popupcalendar {
+	min-width: 0;
+	padding-right: $popupdatefield-button-width;
+}
+
 .#{$primaryStyleName}-popup {
 	font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif;
 	color: #464f52;

uitest/src/com/vaadin/tests/components/uitest/components/DatesCssTest.java

@@ -6,12 +6,12 @@ import java.util.GregorianCalendar;
 import com.vaadin.tests.components.uitest.TestSampler;
 import com.vaadin.ui.Component;
 import com.vaadin.ui.DateField;
-import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.GridLayout;
 import com.vaadin.ui.InlineDateField;
 import com.vaadin.ui.PopupDateField;
 import com.vaadin.ui.themes.ChameleonTheme;
 
-public class DatesCssTest extends HorizontalLayout {
+public class DatesCssTest extends GridLayout {
 
     private TestSampler parent;
     private int debugIdCounter = 0;
@@ -19,13 +19,14 @@ public class DatesCssTest extends HorizontalLayout {
     private Calendar cal = new GregorianCalendar(2012, 8, 11, 18, 00, 00);
 
     public DatesCssTest(TestSampler parent) {
+        super(5, 2);
         this.parent = parent;
         setSpacing(true);
         setWidth("100%");
 
-        createDateFieldWith(null, null);
-        createDateFieldWith("Small", ChameleonTheme.DATEFIELD_SMALL);
-        createDateFieldWith("Big", ChameleonTheme.DATEFIELD_BIG);
+        createDateFieldWith(null, null, null);
+        createDateFieldWith("Small", ChameleonTheme.DATEFIELD_SMALL, null);
+        createDateFieldWith("Big", ChameleonTheme.DATEFIELD_BIG, null);
 
         DateField df = new PopupDateField("Popup date field");
         df.setId("datefield" + debugIdCounter++);
@@ -36,9 +37,16 @@ public class DatesCssTest extends HorizontalLayout {
         df.setId("datefield" + debugIdCounter++);
         df.setValue(cal.getTime());
         addComponent(df);
+
+        createDateFieldWith(null, null, "130px");
+        createDateFieldWith("Small 130px", ChameleonTheme.DATEFIELD_SMALL,
+                "130px");
+        createDateFieldWith("Big 130px", ChameleonTheme.DATEFIELD_BIG, "130px");
+
     }
 
-    private void createDateFieldWith(String caption, String primaryStyleName) {
+    private void createDateFieldWith(String caption, String primaryStyleName,
+            String width) {
         DateField df = new DateField("Date field");
         df.setId("datefield" + debugIdCounter++);
         df.setValue(cal.getTime());
@@ -50,6 +58,9 @@ public class DatesCssTest extends HorizontalLayout {
         if (primaryStyleName != null) {
             df.addStyleName(primaryStyleName);
         }
+        if (width != null) {
+            df.setWidth(width);
+        }
 
         addComponent(df);