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

1 files changed, 30 insertions, 10 deletions

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;
+      }
     }
   }