Implement error level on client side (#9817)

Add additional class names and style to components and error indicators to distinguish different error levels.

Vaadin 8 implementation of #9816. Cherry picked changes and added compatibility package component changes and tests.

Resolves #3139

7 files changed, 334 insertions, 6 deletions

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 4069415985..8e45fc4afc 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_combobox.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_combobox.scss
@@ -35,6 +35,61 @@
     }
   }
 
+  .#{$primary-stylename}-error-info {
+    .#{$primary-stylename}-input {
+      @include valo-textfield-error-level-info-style;
+    }
+
+    .#{$primary-stylename}-button {
+      color: $v-error-indicator-level-info-color;
+      border-color: $v-error-indicator-level-info-color;
+    }
+  }
+
+  .#{$primary-stylename}-error-warning {
+    .#{$primary-stylename}-input {
+      @include valo-textfield-error-level-warning-style;
+    }
+
+    .#{$primary-stylename}-button {
+      color: $v-error-indicator-level-warning-color;
+      border-color: $v-error-indicator-level-warning-color;
+    }
+  }
+
+  .#{$primary-stylename}-error-error {
+    .#{$primary-stylename}-input {
+      @include valo-textfield-error-level-error-style;
+    }
+
+    .#{$primary-stylename}-button {
+      color: $v-error-indicator-level-error-color;
+      border-color: $v-error-indicator-level-error-color;
+    }
+  }
+
+  .#{$primary-stylename}-error-critical {
+    .#{$primary-stylename}-input {
+      @include valo-textfield-error-level-critical-style;
+    }
+
+    .#{$primary-stylename}-button {
+      color: $v-error-indicator-level-critical-color;
+      border-color: $v-error-indicator-level-critical-color;
+    }
+  }
+
+  .#{$primary-stylename}-error-system {
+    .#{$primary-stylename}-input {
+      @include valo-textfield-error-level-system-style;
+    }
+
+    .#{$primary-stylename}-button {
+      color: $v-error-indicator-level-system-color;
+      border-color: $v-error-indicator-level-system-color;
+    }
+  }
+
   .#{$primary-stylename}-suggestpopup {
     @include valo-combobox-popup-style;
   }
diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_datefield.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_datefield.scss
index bfe1e33743..e92c9ce436 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_datefield.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_datefield.scss
@@ -25,6 +25,61 @@
     }
   }
 
+  .#{$primary-stylename}-error-info {
+    .#{$primary-stylename}-textfield {
+      @include valo-textfield-error-level-info-style;
+    }
+
+    .#{$primary-stylename}-button {
+      color: $v-error-indicator-level-info-color;
+      border-color: $v-error-indicator-level-info-color;
+    }
+  }
+
+  .#{$primary-stylename}-error-warning {
+    .#{$primary-stylename}-textfield {
+      @include valo-textfield-error-level-warning-style;
+    }
+
+    .#{$primary-stylename}-button {
+      color: $v-error-indicator-level-warning-color;
+      border-color: $v-error-indicator-level-warning-color;
+    }
+  }
+
+  .#{$primary-stylename}-error-error {
+    .#{$primary-stylename}-textfield {
+      @include valo-textfield-error-level-error-style;
+    }
+
+    .#{$primary-stylename}-button {
+      color: $v-error-indicator-level-error-color;
+      border-color: $v-error-indicator-level-error-color;
+    }
+  }
+
+  .#{$primary-stylename}-error-critical {
+    .#{$primary-stylename}-textfield {
+      @include valo-textfield-error-level-critical-style;
+    }
+
+    .#{$primary-stylename}-button {
+      color: $v-error-indicator-level-critical-color;
+      border-color: $v-error-indicator-level-critical-color;
+    }
+  }
+
+  .#{$primary-stylename}-error-system {
+    .#{$primary-stylename}-textfield {
+      @include valo-textfield-error-level-system-style;
+    }
+
+    .#{$primary-stylename}-button {
+      color: $v-error-indicator-level-system-color;
+      border-color: $v-error-indicator-level-system-color;
+    }
+  }
+
   // Different widths for different resolutions
   .#{$primary-stylename}-full {
     width: round($v-font-size * 15);
diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_textfield.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_textfield.scss
index 5a62be5dbc..91fad01744 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_textfield.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_textfield.scss
@@ -70,6 +70,25 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
     @include valo-textfield-error-style;
   }
 
+  .#{$primary-stylename}-error-info {
+    @include valo-textfield-error-level-info-style;
+  }
+
+  .#{$primary-stylename}-error-warning {
+    @include valo-textfield-error-level-warning-style;
+  }
+
+  .#{$primary-stylename}-error-error {
+    @include valo-textfield-error-level-error-style;
+  }
+
+  .#{$primary-stylename}-error-critical {
+    @include valo-textfield-error-level-critical-style;
+  }
+
+  .#{$primary-stylename}-error-system {
+    @include valo-textfield-error-level-system-style;
+  }
 
   @if $include-additional-styles {
     .#{$primary-stylename}-borderless {
@@ -319,13 +338,58 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
  *
  * @group textfield
  */
-@mixin valo-textfield-error-style {
-  border-color: $v-error-indicator-color !important;
-  $bg: scale-color($v-error-indicator-color, $lightness: 98%);
+@mixin valo-textfield-error-style($indicator-color: $v-error-indicator-color) {
+  border-color: $indicator-color !important;
+  $bg: scale-color($indicator-color, $lightness: 98%);
   background: $bg;
   color: valo-font-color($bg);
 }
 
+/**
+ * Outputs the styles for a text field error state with error level 'info'.
+ *
+ * @group textfield
+ */
+@mixin valo-textfield-error-level-info-style {
+  @include valo-textfield-error-style($v-error-indicator-level-info-color);
+}
+
+/**
+ * Outputs the styles for a text field error state with error level 'warning'.
+ *
+ * @group textfield
+ */
+@mixin valo-textfield-error-level-warning-style {
+  @include valo-textfield-error-style($v-error-indicator-level-warning-color);
+}
+
+/**
+ * Outputs the styles for a text field error state with error level 'error'.
+ *
+ * @group textfield
+ */
+@mixin valo-textfield-error-level-error-style {
+  @include valo-textfield-error-style($v-error-indicator-level-error-color);
+}
+
+/**
+ * Outputs the styles for a text field error state with error level 'critical'.
+ *
+ * @group textfield
+ */
+@mixin valo-textfield-error-level-critical-style {
+  @include valo-textfield-error-style($v-error-indicator-level-critical-color);
+}
+
+/**
+ * Outputs the styles for a text field error state with error level 'system'.
+ *
+ * @group textfield
+ */
+@mixin valo-textfield-error-level-system-style {
+  @include valo-textfield-error-style($v-error-indicator-level-system-color);
+}
+
 
 /**
  * Outputs the selectors and styles for an inline-icon style for a text field. Included indipendently (i.e. not enclosed with a parent text field selector).
diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_twincolselect.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_twincolselect.scss
index 1d9a7e773e..8d220292e7 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_twincolselect.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_twincolselect.scss
@@ -85,6 +85,40 @@
     }
   }
 
+  .#{$primary-stylename}-error-info {
+    .#{$primary-stylename}-options,
+    .#{$primary-stylename}-selections {
+      @include valo-textfield-error-level-info-style;
+    }
+  }
+
+  .#{$primary-stylename}-error-warning {
+    .#{$primary-stylename}-options,
+    .#{$primary-stylename}-selections {
+      @include valo-textfield-error-level-warning-style;
+    }
+  }
+
+  .#{$primary-stylename}-error-error {
+    .#{$primary-stylename}-options,
+    .#{$primary-stylename}-selections {
+      @include valo-textfield-error-level-error-style;
+    }
+  }
+
+  .#{$primary-stylename}-error-critical {
+    .#{$primary-stylename}-options,
+    .#{$primary-stylename}-selections {
+      @include valo-textfield-error-level-critical-style;
+    }
+  }
+
+  .#{$primary-stylename}-error-system {
+    .#{$primary-stylename}-options,
+    .#{$primary-stylename}-selections {
+      @include valo-textfield-error-level-system-style;
+    }
+  }
 }
 
 
diff --git a/themes/src/main/themes/VAADIN/themes/valo/shared/_global.scss b/themes/src/main/themes/VAADIN/themes/valo/shared/_global.scss
index ecd8e1a59b..99fbd360b1 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/shared/_global.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/shared/_global.scss
@@ -313,6 +313,26 @@ $valo-shared-pathPrefix: null;
     @include valo-error-indicator-style;
   }
 
+  .v-errorindicator-info {
+    @include valo-error-indicator-style($indicator-color: $v-error-indicator-level-info-color);
+  }
+
+  .v-errorindicator-warning {
+    @include valo-error-indicator-style($indicator-color: $v-error-indicator-level-warning-color);
+  }
+
+  .v-errorindicator-error {
+    @include valo-error-indicator-style($indicator-color: $v-error-indicator-level-error-color);
+  }
+
+  .v-errorindicator-critical {
+    @include valo-error-indicator-style($indicator-color: $v-error-indicator-level-critical-color);
+  }
+
+  .v-errorindicator-system {
+    @include valo-error-indicator-style($indicator-color: $v-error-indicator-level-system-color);
+  }
+
   .v-required-field-indicator {
     color: $v-required-field-indicator-color;
     padding: 0 .2em;
@@ -366,8 +386,8 @@ $valo-shared-pathPrefix: null;
  *
  * @requires {mixin} valo-error-indicator-icon-style by default
  */
-@mixin valo-error-indicator-style ($is-pseudo-element: false) {
-  color: $v-error-indicator-color;
+@mixin valo-error-indicator-style ($is-pseudo-element: false, $indicator-color: $v-error-indicator-color) {
+  color: $indicator-color;
   font-weight: 600;
   width: ceil($v-unit-size/2);
   text-align: center;
diff --git a/themes/src/main/themes/VAADIN/themes/valo/shared/_tooltip.scss b/themes/src/main/themes/VAADIN/themes/valo/shared/_tooltip.scss
index cb3824d26f..99c453b16e 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/shared/_tooltip.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/shared/_tooltip.scss
@@ -63,6 +63,46 @@ $v-tooltip-error-message-background-color: #fff !default;
 $v-tooltip-error-message-font-color: $v-error-indicator-color !default;
 
 /**
+ * The font color for error tooltips for level 'info'.
+ *
+ * @type color
+ * @group tooltip
+ */
+$v-tooltip-error-message-level-info-font-color: $v-error-indicator-level-info-color !default;
+
+/**
+ * The font color for error tooltips for level 'warning'.
+ *
+ * @type color
+ * @group tooltip
+ */
+$v-tooltip-error-message-level-warning-font-color: $v-error-indicator-level-warning-color !default;
+
+/**
+ * The font color for error tooltips for level 'error'.
+ *
+ * @type color
+ * @group tooltip
+ */
+$v-tooltip-error-message-level-error-font-color: $v-error-indicator-level-error-color !default;
+
+/**
+ * The font color for error tooltips for level 'critical'.
+ *
+ * @type color
+ * @group tooltip
+ */
+$v-tooltip-error-message-level-critical-font-color: $v-error-indicator-level-critical-color !default;
+
+/**
+ * The font color for error tooltips for level 'system'.
+ *
+ * @type color
+ * @group tooltip
+ */
+$v-tooltip-error-message-level-system-font-color: $v-error-indicator-level-system-color !default;
+
+/**
  * The corner radius for tooltips.
  *
  * @type size
@@ -100,6 +140,26 @@ $v-tooltip-border-radius: $v-border-radius - 1px !default;
       }
     }
 
+    .v-errormessage-info {
+      color: $v-tooltip-error-message-level-info-font-color;
+    }
+
+    .v-errormessage-warning {
+      color: $v-tooltip-error-message-level-warning-font-color;
+    }
+
+    .v-errormessage-error {
+      color: $v-tooltip-error-message-level-error-font-color;
+    }
+
+    .v-errormessage-critical {
+      color: $v-tooltip-error-message-level-critical-font-color;
+    }
+
+    .v-errormessage-system {
+      color: $v-tooltip-error-message-level-system-font-color;
+    }
+
     .v-tooltip-text {
       max-height: 10em;
       overflow: auto;
diff --git a/themes/src/main/themes/VAADIN/themes/valo/shared/_variables.scss b/themes/src/main/themes/VAADIN/themes/valo/shared/_variables.scss
index 3237018087..51f6f73350 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/shared/_variables.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/shared/_variables.scss
@@ -207,13 +207,53 @@ $v-disabled-opacity: 0.5 !default;
 $v-selection-color: $v-focus-color !default;
 
 /**
+ * Color of the component error indication for 'info' error level.
+
+ * @group color
+ * @type color
+ */
+$v-error-indicator-level-info-color: #00a7f5 !default;
+
+/**
+ * Color of the component error indication for 'warning' error level.
+
+ * @group color
+ * @type color
+ */
+$v-error-indicator-level-warning-color: #fc9c00 !default;
+
+/**
+ * Color of the component error indication for 'error' error level.
+
+ * @group color
+ * @type color
+ */
+$v-error-indicator-level-error-color: #ed473b !default;
+
+/**
+ * Color of the component error indication for 'critical' error level.
+
+ * @group color
+ * @type color
+ */
+$v-error-indicator-level-critical-color: #fa007d !default;
+
+/**
+ * Color of the component error indication for 'system' error level.
+
+ * @group color
+ * @type color
+ */
+$v-error-indicator-level-system-color: #bb00ff !default;
+
+/**
  * Color of the component error indicator and other error indications, such as the
  * error style notification.
  *
  * @group color
  * @type color
  */
-$v-error-indicator-color: #ed473b !default;
+$v-error-indicator-color: $v-error-indicator-level-error-color !default;
 
 /**
  * Color of the required indicator in field components.