Various fixes to Valo and ValoThemeTest

Improve textfied, datefield and combobox mixins so that they can be
used with null parameter values. This makes them output less styles and
allows combining multiple styles together (e.g. small + borderless).

Let valo-button-style mixin support padding as a list instead of just a
single number.

Change default calendar event colors to hex values (Vaadin Sass
compiler doesn’t support all color keywords just yet).

Error styles for date field and combo box

Small fix to table to support all border sizes (Java code has a
hard-coded 1px border width). Remove a few unnecessary selectors.

Make tab sheet tab alignment mixin more generic (now allows both right
and center alignment).

Fix framed tab sheet style border (bottom border caused left and right
borders to have a “cropped” angle at the bottom end).

Fix selection overlay item active style color (i.e. white would produce
a pink color). Now a completely desaturated color won’t be saturated.

Change-Id: I0117e20ef0a597de982a4d0c85a3c78fff87eafc

14 files changed, 195 insertions, 57 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss
index edd03e7879..fa973f186b 100644
--- a/WebContent/VAADIN/themes/valo/components/_button.scss
+++ b/WebContent/VAADIN/themes/valo/components/_button.scss
@@ -94,7 +94,11 @@
   @if contains($states, normal) {
     @if $unit-size {
       height: $unit-size;
-      padding: if(type-of($padding) == number, $padding, (0 round($unit-size/2.4) + round($border-radius/3)));
+      @if type-of($padding) == number or type-of($padding) == list {
+        padding: $padding;
+      } @else {
+        padding: 0 round($unit-size/2.4) + round($border-radius/3);
+      }
     }
 
     $_font-color: $font-color or valo-font-color($background-color, 0.9);
@@ -217,13 +221,11 @@
   }
 
   &:active {
+    @include opacity(.7);
+
     &:after {
       background: transparent;
     }
-
-    @if type-of($font-color) == color {
-      color: inherit;
-    }
   }
 }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_calendar.scss b/WebContent/VAADIN/themes/valo/components/_calendar.scss
index 08114d8828..753291eea9 100644
--- a/WebContent/VAADIN/themes/valo/components/_calendar.scss
+++ b/WebContent/VAADIN/themes/valo/components/_calendar.scss
@@ -1,4 +1,4 @@
-$v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateblue !default;
+$v-calendar-event-colors: #00ace0, #2d9f19, #d18100, #ce3812, #2d55cd !default;
 
 
 @mixin valo-calendar-global ($primary-stylename: v-calendar) {
diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss
index 63ddbe98df..e947fc3732 100644
--- a/WebContent/VAADIN/themes/valo/components/_combobox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss
@@ -12,6 +12,17 @@
     }
   }
 
+  .#{$primary-stylename}-error {
+    .#{$primary-stylename}-input {
+      @include valo-textfield-error-style;
+    }
+
+    .#{$primary-stylename}-button {
+      color: $v-error-indicator-color;
+      border-color: $v-error-indicator-color;
+    }
+  }
+
   .#{$primary-stylename}-suggestpopup {
     @include valo-combobox-popup-style($primary-stylename: $primary-stylename);
   }
@@ -196,10 +207,14 @@
   bottom: $border-width;
   width: $unit-size;
   cursor: pointer;
-  border-left: valo-border($color: $background-color, $border: $v-textfield-border, $strength: 0.5);
 
-  .v-ie8 & {
-    background-color: $background-color;
+  @if type-of($background-color) == color {
+    border-left: valo-border($color: $background-color, $border: $v-textfield-border, $strength: 0.5);
+    color: mix($background-color, valo-font-color($background-color));
+
+    .v-ie8 & {
+      background-color: $background-color;
+    }
   }
 
   @if $v-border-radius > 0 {
@@ -208,8 +223,8 @@
   }
 
   &:before {
-    @include valo-combobox-button-icon-style($background-color);
-    color: mix($background-color, valo-font-color($background-color));
+    @include valo-combobox-button-icon-style;
+
     @if $v-animations-enabled {
       @include transition(color 140ms);
     }
@@ -221,7 +236,7 @@
     margin-top: -.47em;
   }
 
-  @if $v-hover-styles-enabled {
+  @if $v-hover-styles-enabled and type-of($background-color) == color {
     &:hover:before {
       color: valo-font-color($background-color);
     }
@@ -235,16 +250,17 @@
     bottom: 0;
     left: 0;
     border-radius: inherit;
-    @include valo-button-active-style($background-color);
+    @if type-of($background-color) == color {
+      @include valo-button-active-style($background-color);
+    }
   }
 }
 
 
 
-@mixin valo-combobox-button-icon-style ($background-color) {
+@mixin valo-combobox-button-icon-style {
   font-family: FontAwesome;
   content: "\f078";
-  color: valo-font-color($background-color);
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss
index 58c0f94345..b1f3a78af6 100644
--- a/WebContent/VAADIN/themes/valo/components/_datefield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss
@@ -6,6 +6,17 @@
     @include valo-datefield-style($primary-stylename: $primary-stylename);
   }
 
+  .#{$primary-stylename}-error {
+    .#{$primary-stylename}-textfield {
+      @include valo-textfield-error-style;
+    }
+
+    .#{$primary-stylename}-button {
+      color: $v-error-indicator-color;
+      border-color: $v-error-indicator-color;
+    }
+  }
+
   // Different widths for different resolutions
   .#{$primary-stylename}-full {
     width: round($v-font-size * 15);
@@ -73,7 +84,7 @@
   }
 
   .#{$primary-stylename}-button {
-    @include valo-datefield-button-style($unit-size: $unit-size, $bevel: $bevel, $background-color: $background-color, $border-radius: $border-radius);
+    @include valo-datefield-button-style($unit-size: $unit-size, $bevel: $bevel, $background-color: $background-color, $border-radius: $border-radius, $border: $border);
   }
 
   &.v-disabled {
@@ -106,12 +117,15 @@
 
 
 
-@mixin valo-datefield-button-style ($unit-size: $v-unit-size, $bevel: $v-bevel, $background-color: $v-textfield-background-color, $border-radius: $v-border-radius) {
-  $border-width: first-number($v-textfield-border);
+@mixin valo-datefield-button-style ($unit-size: $v-unit-size, $bevel: $v-bevel, $background-color: $v-textfield-background-color, $border-radius: $v-border-radius, $border: $v-textfield-border) {
+  $border-width: first-number($border) or first-number($v-textfield-border);
   @include valo-tappable;
   -webkit-appearance: none;
   background: transparent;
-  border: none;
+  @if $border {
+    // Only override border if we are actually setting some border
+    border: none;
+  }
   padding: 0;
   position: absolute;
   z-index: 10;
@@ -123,27 +137,30 @@
   text-align: center;
   cursor: pointer;
   font: inherit;
-  border-right: valo-border($color: $background-color, $border: $v-textfield-border, $strength: 0.5);
   outline: none;
   margin: 0;
 
+  @if type-of($background-color) == color {
+    border-right: valo-border($color: $background-color, $border: $v-textfield-border, $strength: 0.5);
+    color: mix($background-color, valo-font-color($background-color));
+
+    &:hover {
+      color: valo-font-color($background-color);
+    }
+  }
+
   @if $border-radius > 0 {
     $br: max(0, $border-radius - $border-width);
     border-radius: $br 0 0 $br;
   }
 
   &:before {
-    @include valo-datefield-button-icon-style($background-color);
-    color: mix($background-color, valo-font-color($background-color));
+    @include valo-datefield-button-icon-style;
     @if $v-animations-enabled {
       @include transition(color 140ms);
     }
   }
 
-  &:hover:before {
-    color: valo-font-color($background-color);
-  }
-
   &:active:after {
     content: "";
     position: absolute;
@@ -151,7 +168,9 @@
     right: 0;
     bottom: 0;
     left: 0;
-    @include valo-button-active-style($background-color);
+    @if type-of($background-color) == color {
+      @include valo-button-active-style($background-color);
+    }
     border-radius: inherit;
   }
 }
@@ -159,10 +178,9 @@
 
 
 
-@mixin valo-datefield-button-icon-style ($background-color) {
+@mixin valo-datefield-button-icon-style {
   font-family: FontAwesome;
   content: "\f073";
-  color: valo-font-color($background-color);
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss
index c952a4bdda..a3af2348e1 100644
--- a/WebContent/VAADIN/themes/valo/components/_table.scss
+++ b/WebContent/VAADIN/themes/valo/components/_table.scss
@@ -29,10 +29,6 @@ $v-table-background-color: null !default;
     float: right;
   }
 
-  .#{$primary-stylename}-cell-wrapper {
-    overflow: hidden;
-  }
-
   .#{$primary-stylename}-caption-container-align-center {
     text-align: center;
   }
@@ -113,6 +109,15 @@ $v-table-background-color: null !default;
 
   .#{$primary-stylename}-footer td {
     border-left: $v-table-border-width solid $border-color;
+    // Hack to overcome fixed "magic number" in VScrollTable.FooterCell (assumes 1px border)
+    @if $v-table-border-width != 1px {
+      display: inline-block;
+      margin-left: ($v-table-border-width - 1px) * -1;
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
   }
 
   .#{$primary-stylename}-footer-container,
@@ -498,15 +503,13 @@ $v-table-background-color: null !default;
 
 
 @mixin valo-table-no-vertical-lines-style ($primary-stylename: v-table) {
-  .#{$primary-stylename}-cell-content,
-  [class*="row"].v-selected .#{$primary-stylename}-cell-content {
+  .#{$primary-stylename}-cell-content {
     border-left: none;
     padding-left: $v-table-border-width;
   }
 
   &.v-treetable {
-    .#{$primary-stylename}-cell-content,
-    [class*="row"].v-selected .#{$primary-stylename}-cell-content {
+    .#{$primary-stylename}-cell-content {
       padding-left: $v-table-cell-padding-horizontal + $v-table-border-width;
     }
   }
@@ -514,8 +517,7 @@ $v-table-background-color: null !default;
 
 
 @mixin valo-table-no-horizontal-lines-style ($primary-stylename: v-table) {
-  .#{$primary-stylename}-cell-content,
-  [class*="row"].v-selected .#{$primary-stylename}-cell-content {
+  .#{$primary-stylename}-cell-content {
     border-top: none;
     border-bottom: none;
   }
diff --git a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
index 32b06a06cc..3b7687bc8d 100644
--- a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
+++ b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
@@ -369,7 +369,8 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
     .#{$primary-stylename}-tabitem-selected .v-caption {
       background: $v-panel-background-color;
       border-color: first-color(valo-border($strength: 0.5));
-      border-bottom: first-number($v-border) solid transparent;
+      border-bottom: none;
+      padding-bottom: first-number($v-border);
     }
 
     .v-caption-closable {
@@ -422,9 +423,9 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
 
 
-@mixin valo-tabsheet-centered-tabs-style ($primary-stylename: v-tabsheet) {
+@mixin valo-tabsheet-align-tabs-style ($primary-stylename: v-tabsheet, $align: center) {
   > .#{$primary-stylename}-tabcontainer {
-    text-align: center;
+    text-align: $align;
   }
 }
 
@@ -462,6 +463,10 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
       line-height: 1.2;
     }
 
+    .#{$primary-stylename}-tabitem-selected .v-caption {
+      padding-bottom: round($v-unit-size/6) + first-number($v-border);
+    }
+
     .v-icon {
       display: block;
 
diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss
index e6514f9ec6..63e924921a 100644
--- a/WebContent/VAADIN/themes/valo/components/_textfield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss
@@ -70,8 +70,11 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
       @include valo-gradient($color: $background-color, $gradient: $gradient)
     }
 
-    color: valo-font-color($background-color);
-    box-shadow: valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient);
+    @if $background-color {
+      color: valo-font-color($background-color);
+      box-shadow: valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient);
+    }
+
 
     @if $v-animations-enabled {
       @include transition(box-shadow 180ms, border 180ms);
@@ -163,6 +166,11 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
   border-radius: 0;
   background: $background-color;
   box-shadow: none;
+  @if $background-color == transparent {
+    color: inherit;
+  } @else if type-of($background-color) == color {
+    color: valo-font-color($background-color);
+  }
 
   &:focus {
     box-shadow: none;
@@ -173,7 +181,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
 
 @mixin valo-textfield-error-style {
-  border-color: $v-error-indicator-color;
+  border-color: $v-error-indicator-color !important;
   $bg: scale-color($v-error-indicator-color, $lightness: 98%);
   background: $bg;
   color: valo-font-color($bg);
diff --git a/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss b/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss
index 704b6c8469..4adaf9a2a9 100644
--- a/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss
+++ b/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss
@@ -106,7 +106,11 @@
   }
 
   .v-tabsheet-centered-tabs {
-    @include valo-tabsheet-centered-tabs-style;
+    @include valo-tabsheet-align-tabs-style($align: center);
+  }
+
+  .v-tabsheet-right-aligned-tabs {
+    @include valo-tabsheet-align-tabs-style($align: right);
   }
 
   .v-tabsheet-padded-tabbar {
@@ -148,12 +152,12 @@
   }
 
   .v-textfield-small {
-    @include valo-textfield-style($unit-size: $v-unit-size--small);
+    @include valo-textfield-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
     font-size: $v-font-size--small;
   }
 
   .v-textfield-large {
-    @include valo-textfield-style($unit-size: $v-unit-size--large);
+    @include valo-textfield-style($unit-size: $v-unit-size--large, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
     font-size: $v-font-size--large;
   }
 
@@ -162,12 +166,12 @@
   @include valo-textfield-inline-icon($stylenames: inline-icon large, $unit-size: $v-unit-size--large, $font-size: $v-font-size--large);
 
   .v-textarea-small {
-    @include valo-textarea-style($unit-size: $v-unit-size--small);
+    @include valo-textarea-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null);
     font-size: $v-font-size--small;
   }
 
   .v-textarea-large {
-    @include valo-textarea-style($unit-size: $v-unit-size--large);
+    @include valo-textarea-style($unit-size: $v-unit-size--large, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null);
     font-size: $v-font-size--large;
   }
 
@@ -186,22 +190,22 @@
   }
 
   .v-filterselect-small {
-    @include valo-combobox-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null);
+    @include valo-combobox-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null);
     font-size: $v-font-size--small;
   }
 
   .v-filterselect-large {
-    @include valo-combobox-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null);
+    @include valo-combobox-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null);
     font-size: $v-font-size--large;
   }
 
   .v-datefield-small {
-    @include valo-datefield-style($unit-size: $v-unit-size--small);
+    @include valo-datefield-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $border: null, $background-color: null);
     font-size: $v-font-size--small;
   }
 
   .v-datefield-large {
-    @include valo-datefield-style($unit-size: $v-unit-size--large);
+    @include valo-datefield-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $border: null, $background-color: null);
     font-size: $v-font-size--large;
   }
 
diff --git a/WebContent/VAADIN/themes/valo/shared/_overlay.scss b/WebContent/VAADIN/themes/valo/shared/_overlay.scss
index 53b7586ce4..0675b70f4e 100644
--- a/WebContent/VAADIN/themes/valo/shared/_overlay.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_overlay.scss
@@ -162,7 +162,8 @@ $v-selection-item-selection-color: $v-selection-color !default;
     right: 0;
     bottom: 0;
     left: 0;
-    background: scale-color($v-selection-item-selection-color, $lightness: -30%, $saturation: 50%);
+    $sat: if(saturation($v-selection-item-selection-color) > 0, 50%, 0%);
+    background: scale-color($v-selection-item-selection-color, $lightness: -30%, $saturation: $sat);
     @include opacity(.15);
     pointer-events: none;
     border-radius: inherit;
diff --git a/uitest/src/com/vaadin/tests/themes/valo/ComboBoxes.java b/uitest/src/com/vaadin/tests/themes/valo/ComboBoxes.java
index f96584f855..cafdfe37e0 100644
--- a/uitest/src/com/vaadin/tests/themes/valo/ComboBoxes.java
+++ b/uitest/src/com/vaadin/tests/themes/valo/ComboBoxes.java
@@ -19,6 +19,7 @@ import com.vaadin.data.Container;
 import com.vaadin.navigator.View;
 import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
 import com.vaadin.server.ThemeResource;
+import com.vaadin.server.UserError;
 import com.vaadin.ui.Button;
 import com.vaadin.ui.ComboBox;
 import com.vaadin.ui.CssLayout;
@@ -88,6 +89,27 @@ public class ComboBoxes extends VerticalLayout implements View {
         combo.select("Option One");
         row.addComponent(combo);
 
+        combo = new ComboBox("Error");
+        combo.setInputPrompt("You can type here");
+        combo.addItem("Option One");
+        combo.addItem("Option Two");
+        combo.addItem("Option Three");
+        combo.setNullSelectionAllowed(false);
+        combo.select("Option One");
+        combo.setComponentError(new UserError("Fix it, now!"));
+        row.addComponent(combo);
+
+        combo = new ComboBox("Error, borderless");
+        combo.setInputPrompt("You can type here");
+        combo.addItem("Option One");
+        combo.addItem("Option Two");
+        combo.addItem("Option Three");
+        combo.setNullSelectionAllowed(false);
+        combo.select("Option One");
+        combo.setComponentError(new UserError("Fix it, now!"));
+        combo.addStyleName("borderless");
+        row.addComponent(combo);
+
         combo = new ComboBox("Disabled");
         combo.setInputPrompt("You can't type here");
         combo.addItem("Option One");
diff --git a/uitest/src/com/vaadin/tests/themes/valo/DateFields.java b/uitest/src/com/vaadin/tests/themes/valo/DateFields.java
index 5ea4a32fd2..ae520e07c2 100644
--- a/uitest/src/com/vaadin/tests/themes/valo/DateFields.java
+++ b/uitest/src/com/vaadin/tests/themes/valo/DateFields.java
@@ -20,6 +20,7 @@ import java.util.Locale;
 
 import com.vaadin.navigator.View;
 import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
+import com.vaadin.server.UserError;
 import com.vaadin.shared.ui.datefield.Resolution;
 import com.vaadin.ui.Button;
 import com.vaadin.ui.Button.ClickEvent;
@@ -48,6 +49,17 @@ public class DateFields extends VerticalLayout implements View {
         date.setValue(new Date());
         row.addComponent(date);
 
+        date = new DateField("Error");
+        date.setValue(new Date());
+        date.setComponentError(new UserError("Fix it, now!"));
+        row.addComponent(date);
+
+        date = new DateField("Error, borderless");
+        date.setValue(new Date());
+        date.setComponentError(new UserError("Fix it, now!"));
+        date.addStyleName("borderless");
+        row.addComponent(date);
+
         CssLayout group = new CssLayout();
         group.setCaption("Grouped with a Button");
         group.addStyleName("v-component-group");
diff --git a/uitest/src/com/vaadin/tests/themes/valo/Tables.java b/uitest/src/com/vaadin/tests/themes/valo/Tables.java
index aff8b93079..6aa02a7f74 100644
--- a/uitest/src/com/vaadin/tests/themes/valo/Tables.java
+++ b/uitest/src/com/vaadin/tests/themes/valo/Tables.java
@@ -24,14 +24,17 @@ import com.vaadin.event.dd.acceptcriteria.AcceptAll;
 import com.vaadin.event.dd.acceptcriteria.AcceptCriterion;
 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.HorizontalLayout;
 import com.vaadin.ui.Label;
 import com.vaadin.ui.Notification;
 import com.vaadin.ui.Table;
 import com.vaadin.ui.Table.Align;
+import com.vaadin.ui.Table.ColumnGenerator;
 import com.vaadin.ui.Table.RowHeaderMode;
 import com.vaadin.ui.Table.TableDragMode;
+import com.vaadin.ui.TextField;
 import com.vaadin.ui.TreeTable;
 import com.vaadin.ui.VerticalLayout;
 
@@ -154,6 +157,33 @@ public class Tables extends VerticalLayout implements View {
                 Align.RIGHT);
         table.setColumnAlignment(ValoThemeTest.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.setFooterVisible(footer);
         if (footer) {
             table.setColumnFooter(ValoThemeTest.CAPTION_PROPERTY, "caption");
diff --git a/uitest/src/com/vaadin/tests/themes/valo/Tabsheets.java b/uitest/src/com/vaadin/tests/themes/valo/Tabsheets.java
index e070af9b95..24a249d90e 100644
--- a/uitest/src/com/vaadin/tests/themes/valo/Tabsheets.java
+++ b/uitest/src/com/vaadin/tests/themes/valo/Tabsheets.java
@@ -61,7 +61,7 @@ public class Tabsheets extends VerticalLayout implements View {
         icon.setImmediate(true);
         wrap.addComponent(icon);
 
-        final CheckBox disable = new CheckBox("Disable Tabs");
+        final CheckBox disable = new CheckBox("Disable tabs");
         disable.setImmediate(true);
         wrap.addComponent(disable);
 
@@ -79,10 +79,14 @@ public class Tabsheets extends VerticalLayout implements View {
         framed.setImmediate(true);
         wrap.addComponent(framed);
 
-        final CheckBox centered = new CheckBox("Centered Tabs");
+        final CheckBox centered = new CheckBox("Centered tabs");
         centered.setImmediate(true);
         wrap.addComponent(centered);
 
+        final CheckBox rightAlign = new CheckBox("Right-aligned tabs");
+        rightAlign.setImmediate(true);
+        wrap.addComponent(rightAlign);
+
         final CheckBox equal = new CheckBox("Equal-width tabs");
         equal.setImmediate(true);
         wrap.addComponent(equal);
@@ -108,6 +112,7 @@ public class Tabsheets extends VerticalLayout implements View {
             public void valueChange(ValueChangeEvent event) {
                 String style = framed.getValue() ? "framed " : "";
                 style += centered.getValue() ? " centered-tabs" : "";
+                style += rightAlign.getValue() ? " right-aligned-tabs" : "";
                 style += equal.getValue() ? " equal-width-tabs" : "";
                 style += padded.getValue() ? " padded-tabbar" : "";
                 style += compact.getValue() ? " compact-tabbar" : "";
@@ -131,6 +136,7 @@ public class Tabsheets extends VerticalLayout implements View {
         disable.addValueChangeListener(update);
         framed.addValueChangeListener(update);
         centered.addValueChangeListener(update);
+        rightAlign.addValueChangeListener(update);
         equal.addValueChangeListener(update);
         padded.addValueChangeListener(update);
         compact.addValueChangeListener(update);
diff --git a/uitest/src/com/vaadin/tests/themes/valo/TextFields.java b/uitest/src/com/vaadin/tests/themes/valo/TextFields.java
index b65433f0db..cbe7a8a0b3 100644
--- a/uitest/src/com/vaadin/tests/themes/valo/TextFields.java
+++ b/uitest/src/com/vaadin/tests/themes/valo/TextFields.java
@@ -18,6 +18,7 @@ package com.vaadin.tests.themes.valo;
 import com.vaadin.navigator.View;
 import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
 import com.vaadin.server.FontAwesome;
+import com.vaadin.server.UserError;
 import com.vaadin.ui.Button;
 import com.vaadin.ui.CssLayout;
 import com.vaadin.ui.HorizontalLayout;
@@ -61,6 +62,17 @@ public class TextFields extends VerticalLayout implements View {
         tf.addStyleName("color3");
         row.addComponent(tf);
 
+        tf = new TextField("Error");
+        tf.setValue("Something’s wrong");
+        tf.setComponentError(new UserError("Fix it, now!"));
+        row.addComponent(tf);
+
+        tf = new TextField("Error, borderless");
+        tf.setValue("Something’s wrong");
+        tf.setComponentError(new UserError("Fix it, now!"));
+        tf.addStyleName("borderless");
+        row.addComponent(tf);
+
         tf = new TextField("Read-only");
         tf.setInputPrompt("Nationality");
         tf.setValue("Finnish");