Common components inside Table cells render better (Valo)

Add a new size variant “compact” for Textfield, DateField and ComboBox.
Makes the field fit inside the default row height of the table, but
keeps the font size the same as for a normal field. Borderless fields
also now respect the font color of the container (e.g. a selected table
row).

Update test to include common components inside a table.

Change-Id: I88f4d917579c937536dc4c886dc2b7825db01818

7 files changed, 204 insertions, 43 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_checkbox.scss b/WebContent/VAADIN/themes/valo/components/_checkbox.scss
index e74781fc46..9fe360c6ed 100644
--- a/WebContent/VAADIN/themes/valo/components/_checkbox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_checkbox.scss
@@ -44,6 +44,7 @@
 
     label {
       @include valo-tappable;
+      display: inline-block;
     }
   }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss
index 538a5e2694..93cb5393ee 100644
--- a/WebContent/VAADIN/themes/valo/components/_combobox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss
@@ -67,6 +67,11 @@
       }
       .#{$primary-stylename}-button {
         border: none;
+        color: inherit;
+        @include opacity(.5);
+      }
+      &.#{$primary-stylename}-prompt .#{$primary-stylename}-input {
+        @include valo-textfield-prompt-style(transparent);
       }
     }
 
@@ -83,8 +88,12 @@
       font-size: $v-font-size--tiny;
     }
 
+    .#{$primary-stylename}-compact,
     .#{$primary-stylename}-small {
       @include valo-combobox-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal);
+    }
+
+    .#{$primary-stylename}-small {
       font-size: $v-font-size--small;
     }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss
index 8854992032..521d661a3d 100644
--- a/WebContent/VAADIN/themes/valo/components/_datefield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss
@@ -48,6 +48,8 @@
       }
       .#{$primary-stylename}-button {
         border: none;
+        color: inherit;
+        @include opacity(.5);
       }
     }
 
@@ -64,8 +66,12 @@
       font-size: $v-font-size--tiny;
     }
 
+    .#{$primary-stylename}-compact,
     .#{$primary-stylename}-small {
       @include valo-datefield-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal);
+    }
+
+    .#{$primary-stylename}-small {
       font-size: $v-font-size--small;
     }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss
index 2669ac44f6..adac1b90bd 100644
--- a/WebContent/VAADIN/themes/valo/components/_table.scss
+++ b/WebContent/VAADIN/themes/valo/components/_table.scss
@@ -3,7 +3,6 @@ $v-table-border-width: first-number($v-border) !default;
 $v-table-border-color: null !default;
 $v-table-border-radius: 0 !default;
 $v-table-cell-padding-horizontal: round($v-unit-size/3) !default;
-//$v-table-cell-padding-horizontal-edge: round($v-unit-size/2.5) !default;
 $v-table-resizer-width: round($v-unit-size/4.5) !default;
 $v-table-sort-indicator-width: round($v-unit-size/2) !default;
 $v-table-header-font-size: round($v-font-size * 0.86) !default;
@@ -178,14 +177,23 @@ $v-table-background-color: null !default;
 
   .#{$primary-stylename}-cell-wrapper {
     line-height: 1;
-    min-height: $v-table-row-height;
-    $vertical-padding: round(($v-table-row-height - $v-font-size)/2);
-    padding: $vertical-padding $v-table-cell-padding-horizontal;
+    padding: 0 $v-table-cell-padding-horizontal;
     @include box-sizing(border-box);
     margin-right: 0 !important;
 
     > .v-widget {
-      margin: round($vertical-padding / -2) round($v-table-cell-padding-horizontal / -2);
+      // Leave some breathing room around the table cell and the widget
+      margin: round($v-table-cell-padding-horizontal / 4) round($v-table-cell-padding-horizontal / -2);
+
+      &.v-label,
+      &.v-checkbox,
+      &.v-select-optiongroup {
+        margin: 0;
+      }
+      &.v-progressbar {
+        margin-left: 0;
+        margin-right: 0;
+      }
     }
   }
 
@@ -220,7 +228,9 @@ $v-table-background-color: null !default;
 
     @include valo-gradient($v-selection-color);
     background-origin: border-box;
-    color: valo-font-color($v-selection-color, 0.9);
+    $font-color: valo-font-color($v-selection-color, 0.9);
+    color: $font-color;
+    text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-color);
 
     + .v-selected {
       $gradient-end: first(last(valo-gradient-color-stops($v-selection-color)));
@@ -501,7 +511,7 @@ $v-table-background-color: null !default;
 
     .#{$primary-stylename}-compact,
     .#{$primary-stylename}-small {
-      @include valo-table-spacing-style($row-height: round($v-table-row-height * $v-scaling-factor--small), $cell-padding-horizontal: round($v-table-cell-padding-horizontal / 2));
+      @include valo-table-spacing-style($row-height: $v-unit-size--small, $cell-padding-horizontal: round($v-table-cell-padding-horizontal / 2));
     }
 
     .#{$primary-stylename}-small {
@@ -640,11 +650,21 @@ $v-table-background-color: null !default;
   }
 
   .#{$primary-stylename}-cell-wrapper {
-    padding: $vertical-padding $cell-padding-horizontal;
-    min-height: $row-height;
+    padding-left: $cell-padding-horizontal;
+    padding-right: $cell-padding-horizontal;
 
     > .v-widget {
-      margin: round($vertical-padding / -2) round($cell-padding-horizontal / -2);
+      margin: round($cell-padding-horizontal / 4) round($cell-padding-horizontal / -2);
+
+      &.v-label,
+      &.v-checkbox,
+      &.v-select-optiongroup {
+        margin: 0;
+      }
+      &.v-progressbar {
+        margin-left: 0;
+        margin-right: 0;
+      }
     }
   }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss
index 0b4fa50fb2..85e2487bc1 100644
--- a/WebContent/VAADIN/themes/valo/components/_textfield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss
@@ -35,8 +35,12 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
       font-size: $v-font-size--tiny;
     }
 
+    .#{$primary-stylename}-compact,
     .#{$primary-stylename}-small {
       @include valo-textfield-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
+    }
+
+    .#{$primary-stylename}-small {
       font-size: $v-font-size--small;
     }
 
@@ -52,6 +56,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
     @include valo-textfield-inline-icon($stylenames: inline-icon);
     @include valo-textfield-inline-icon($stylenames: inline-icon tiny, $unit-size: $v-unit-size--tiny, $font-size: $v-font-size--tiny);
+    @include valo-textfield-inline-icon($stylenames: inline-icon compact, $unit-size: $v-unit-size--small);
     @include valo-textfield-inline-icon($stylenames: inline-icon small, $unit-size: $v-unit-size--small, $font-size: $v-font-size--small);
     @include valo-textfield-inline-icon($stylenames: inline-icon large, $unit-size: $v-unit-size--large, $font-size: $v-font-size--large);
     @include valo-textfield-inline-icon($stylenames: inline-icon huge, $unit-size: $v-unit-size--huge, $font-size: $v-font-size--huge);
@@ -158,7 +163,10 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
 
 @mixin valo-textfield-prompt-style ($background-color: $v-textfield-background-color) {
-  @if type-of($background-color) == color {
+  @if $background-color ==  transparent {
+    color: inherit;
+    @include opacity(.5);
+  } @else if type-of($background-color) == color {
     $font-color: valo-font-color($background-color);
     $font-color: mix($background-color, $font-color);
     @if is-dark-color($background-color) and saturation($background-color) > 50% {
@@ -205,15 +213,20 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
   border-radius: 0;
   background: $background-color;
   @include box-shadow(none);
-  @if $background-color == transparent {
-    color: inherit;
-  } @else if type-of($background-color) == color {
-    color: valo-font-color($background-color);
+
+  $font-color: inherit;
+  @if $background-color != transparent and type-of($background-color) == color {
+    $font-color: valo-font-color($background-color);
   }
+  color: $font-color;
 
   &:focus {
     @include box-shadow(none);
   }
+
+  &[class*="prompt"] {
+    @include valo-textfield-prompt-style($background-color);
+  }
 }
 
 
diff --git a/uitest/src/com/vaadin/tests/themes/valo/Tables.java b/uitest/src/com/vaadin/tests/themes/valo/Tables.java
index 62ef67f9f3..fb6638ee7d 100644
--- a/uitest/src/com/vaadin/tests/themes/valo/Tables.java
+++ b/uitest/src/com/vaadin/tests/themes/valo/Tables.java
@@ -26,9 +26,14 @@ import com.vaadin.navigator.View;
 import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
 import com.vaadin.ui.Button;
 import com.vaadin.ui.CheckBox;
+import com.vaadin.ui.ComboBox;
+import com.vaadin.ui.DateField;
 import com.vaadin.ui.HorizontalLayout;
 import com.vaadin.ui.Label;
 import com.vaadin.ui.Notification;
+import com.vaadin.ui.OptionGroup;
+import com.vaadin.ui.ProgressBar;
+import com.vaadin.ui.Slider;
 import com.vaadin.ui.Table;
 import com.vaadin.ui.Table.Align;
 import com.vaadin.ui.Table.ColumnGenerator;
@@ -56,8 +61,9 @@ public class Tables extends VerticalLayout implements View {
     CheckBox compact = new CheckBox("Compact");
     CheckBox small = new CheckBox("Small");
     CheckBox rowIndex = new CheckBox("Row index", false);
-    CheckBox rowIcon = new CheckBox("Row icon", true);
+    CheckBox rowIcon = new CheckBox("Row icon", false);
     CheckBox rowCaption = new CheckBox("Row caption", false);
+    CheckBox componentsInCells = new CheckBox("Components in Cells", false);
 
     Table table;
 
@@ -76,7 +82,7 @@ public class Tables extends VerticalLayout implements View {
 
         wrap.addComponents(hierarchical, footer, sized, expandRatios, stripes,
                 verticalLines, horizontalLines, borderless, headers, compact,
-                small, rowIndex, rowCaption, rowIcon);
+                small, rowIndex, rowCaption, rowIcon, componentsInCells);
 
         ValueChangeListener update = new ValueChangeListener() {
             @Override
@@ -105,7 +111,7 @@ public class Tables extends VerticalLayout implements View {
                         borderless.getValue(), headers.getValue(),
                         compact.getValue(), small.getValue(),
                         rowIndex.getValue(), rowCaption.getValue(),
-                        rowIcon.getValue());
+                        rowIcon.getValue(), componentsInCells.getValue());
             }
         };
 
@@ -123,6 +129,7 @@ public class Tables extends VerticalLayout implements View {
         rowIndex.addValueChangeListener(update);
         rowCaption.addValueChangeListener(update);
         rowIcon.addValueChangeListener(update);
+        componentsInCells.addValueChangeListener(update);
 
         footer.setValue(false);
 
@@ -132,7 +139,7 @@ public class Tables extends VerticalLayout implements View {
             boolean expandRatios, boolean stripes, boolean verticalLines,
             boolean horizontalLines, boolean borderless, boolean headers,
             boolean compact, boolean small, boolean rowIndex,
-            boolean rowCaption, boolean rowIcon) {
+            boolean rowCaption, boolean rowIcon, boolean componentsInRows) {
         table.setSelectable(true);
         table.setMultiSelect(true);
         table.setSortEnabled(true);
@@ -156,32 +163,137 @@ public class Tables extends VerticalLayout implements View {
         table.setColumnAlignment(ValoThemeUI.INDEX_PROPERTY, Align.CENTER);
 
         table.removeContainerProperty("textfield");
-        table.addContainerProperty("textfield", TextField.class, null);
-
         table.removeGeneratedColumn("textfield");
-        table.addGeneratedColumn("textfield", new ColumnGenerator() {
-            @Override
-            public Object generateCell(Table source, Object itemId,
-                    Object columnId) {
-                TextField tf = new TextField();
-                tf.setInputPrompt("Type here…");
-                return tf;
-            }
-        });
-
         table.removeContainerProperty("button");
-        table.addContainerProperty("button", Button.class, null);
-
         table.removeGeneratedColumn("button");
-        table.addGeneratedColumn("button", new ColumnGenerator() {
-            @Override
-            public Object generateCell(Table source, Object itemId,
-                    Object columnId) {
-                Button b = new Button("Button");
-                return b;
-            }
-        });
-
+        table.removeContainerProperty("label");
+        table.removeGeneratedColumn("label");
+        table.removeContainerProperty("checkbox");
+        table.removeGeneratedColumn("checkbox");
+        table.removeContainerProperty("datefield");
+        table.removeGeneratedColumn("datefield");
+        table.removeContainerProperty("combobox");
+        table.removeGeneratedColumn("combobox");
+        table.removeContainerProperty("optiongroup");
+        table.removeGeneratedColumn("optiongroup");
+        table.removeContainerProperty("slider");
+        table.removeGeneratedColumn("slider");
+        table.removeContainerProperty("progress");
+        table.removeGeneratedColumn("progress");
+
+        if (componentsInRows) {
+            table.addContainerProperty("textfield", TextField.class, null);
+            table.addGeneratedColumn("textfield", new ColumnGenerator() {
+                @Override
+                public Object generateCell(Table source, Object itemId,
+                        Object columnId) {
+                    TextField tf = new TextField();
+                    tf.setInputPrompt("Type here…");
+                    // tf.addStyleName("compact");
+                    if ((Integer) itemId % 2 == 0) {
+                        tf.addStyleName("borderless");
+                    }
+                    return tf;
+                }
+            });
+
+            table.addContainerProperty("datefield", TextField.class, null);
+            table.addGeneratedColumn("datefield", new ColumnGenerator() {
+                @Override
+                public Object generateCell(Table source, Object itemId,
+                        Object columnId) {
+                    DateField tf = new DateField();
+                    tf.addStyleName("compact");
+                    if ((Integer) itemId % 2 == 0) {
+                        tf.addStyleName("borderless");
+                    }
+                    return tf;
+                }
+            });
+
+            table.addContainerProperty("combobox", TextField.class, null);
+            table.addGeneratedColumn("combobox", new ColumnGenerator() {
+                @Override
+                public Object generateCell(Table source, Object itemId,
+                        Object columnId) {
+                    ComboBox tf = new ComboBox();
+                    tf.setInputPrompt("Select");
+                    tf.addStyleName("compact");
+                    if ((Integer) itemId % 2 == 0) {
+                        tf.addStyleName("borderless");
+                    }
+                    return tf;
+                }
+            });
+
+            table.addContainerProperty("button", Button.class, null);
+            table.addGeneratedColumn("button", new ColumnGenerator() {
+                @Override
+                public Object generateCell(Table source, Object itemId,
+                        Object columnId) {
+                    Button b = new Button("Button");
+                    b.addStyleName("small");
+                    return b;
+                }
+            });
+
+            table.addContainerProperty("label", TextField.class, null);
+            table.addGeneratedColumn("label", new ColumnGenerator() {
+                @Override
+                public Object generateCell(Table source, Object itemId,
+                        Object columnId) {
+                    Label label = new Label("Label component");
+                    label.setSizeUndefined();
+                    label.addStyleName("bold");
+                    return label;
+                }
+            });
+
+            table.addContainerProperty("checkbox", TextField.class, null);
+            table.addGeneratedColumn("checkbox", new ColumnGenerator() {
+                @Override
+                public Object generateCell(Table source, Object itemId,
+                        Object columnId) {
+                    CheckBox cb = new CheckBox(null, true);
+                    return cb;
+                }
+            });
+
+            table.addContainerProperty("optiongroup", TextField.class, null);
+            table.addGeneratedColumn("optiongroup", new ColumnGenerator() {
+                @Override
+                public Object generateCell(Table source, Object itemId,
+                        Object columnId) {
+                    OptionGroup op = new OptionGroup();
+                    op.addItem("Male");
+                    op.addItem("Female");
+                    op.addStyleName("horizontal");
+                    return op;
+                }
+            });
+
+            table.addContainerProperty("slider", TextField.class, null);
+            table.addGeneratedColumn("slider", new ColumnGenerator() {
+                @Override
+                public Object generateCell(Table source, Object itemId,
+                        Object columnId) {
+                    Slider s = new Slider();
+                    s.setValue(30.0);
+                    return s;
+                }
+            });
+
+            table.addContainerProperty("progress", TextField.class, null);
+            table.addGeneratedColumn("progress", new ColumnGenerator() {
+                @Override
+                public Object generateCell(Table source, Object itemId,
+                        Object columnId) {
+                    ProgressBar bar = new ProgressBar();
+                    bar.setValue(0.7f);
+                    return bar;
+                }
+            });
+        }
         table.setFooterVisible(footer);
         if (footer) {
             table.setColumnFooter(ValoThemeUI.CAPTION_PROPERTY, "caption");
diff --git a/uitest/src/com/vaadin/tests/themes/valo/ValoMiscTests.java b/uitest/src/com/vaadin/tests/themes/valo/ValoMiscTests.java
index 1676d121af..b59c500d28 100644
--- a/uitest/src/com/vaadin/tests/themes/valo/ValoMiscTests.java
+++ b/uitest/src/com/vaadin/tests/themes/valo/ValoMiscTests.java
@@ -72,7 +72,7 @@ public class ValoMiscTests extends UI {
         table.setWidth("100%");
         table.setContainerDataSource(ValoThemeUI.generateContainer(200, true));
         Tables.configure(table, true, false, false, true, true, true, false,
-                true, false, false, false, false, false);
+                true, false, false, false, false, false, false);
         layout.addComponent(table);
 
     }