Add `closable` style to Error Notifications (#8903)

Add an additional stylename `critical-error` that styles the
notification like the Error-type, but without the close button.

Fixes #8296

4 files changed, 26 insertions, 3 deletions

diff --git a/documentation/application/application-notifications.asciidoc b/documentation/application/application-notifications.asciidoc
index a53fb7d7b4..8e0a08e075 100644
--- a/documentation/application/application-notifications.asciidoc
+++ b/documentation/application/application-notifications.asciidoc
@@ -88,9 +88,11 @@ image:img/notification-error.png[width=30%, scaledwidth=50%]
 Error messages are notifications that require the highest user attention, with
 alert colors, and they require the user to click the message to dismiss it. The
 error message box does not itself include an instruction to click the message,
-although the close box in the upper right corner indicates it visually. Unlike
+although the close icon on the right side indicates it visually. Unlike
 with other notifications, the user can not interact with the application while
-the error message is displayed.
+the error message is displayed. If you don't want to show the close icon,
+you can hide by adding the style constant
+[literal]#ValoTheme.NOTIFICATION_CRITICAL_ERROR# to the [classname]#Notification#.
 
 [parameter]#TRAY_NOTIFICATION#::
 image:img/notification-tray.png[width=30%, scaledwidth=50%]
diff --git a/documentation/application/img/notification-error.png b/documentation/application/img/notification-error.png
index 28793c72a3..447a184301 100644
--- a/documentation/application/img/notification-error.png
+++ b/documentation/application/img/notification-error.png
diff --git a/server/src/main/java/com/vaadin/ui/themes/ValoTheme.java b/server/src/main/java/com/vaadin/ui/themes/ValoTheme.java
index 2a6f87a7e1..93235ed00f 100644
--- a/server/src/main/java/com/vaadin/ui/themes/ValoTheme.java
+++ b/server/src/main/java/com/vaadin/ui/themes/ValoTheme.java
@@ -110,6 +110,13 @@ public class ValoTheme {
      */
     public static final String NOTIFICATION_FAILURE = "failure";
 
+    /**
+     * Styles the notification to look like {@link Type#ERROR_MESSAGE}, without
+     * setting the position and delay and without the close button. Can be
+     * combined with any other Notification style.
+     */
+    public static final String NOTIFICATION_CRITICAL_ERROR = "critical-error";
+
     /***************************************************************************
      *
      * Label styles
diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_notification.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_notification.scss
index ee3cf67a7c..93ad0e8821 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_notification.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_notification.scss
@@ -135,6 +135,16 @@ $v-notification-title-color: $v-focus-color !default;
 
   .#{$primary-stylename}.error {
     @include valo-notification-error-style($primary-stylename);
+    @include valo-notification-closable-style;
+    &:after {
+      color: #fff;
+      border-color: #fff;
+      border-color: rgba(255,255,255,.3);
+    }
+    &:active:after {
+      background-color: #fff;
+      color: #000;
+    }
   }
 
 
@@ -151,11 +161,15 @@ $v-notification-title-color: $v-focus-color !default;
       @include valo-notification-small-style($primary-stylename);
     }
 
+    .#{$primary-stylename}.critical-error {
+      @include valo-notification-error-style($primary-stylename);
+    }
+
     .#{$primary-stylename}.closable {
       @include valo-notification-closable-style;
 
       &.dark,
-      &.error,
+      &.critical-error,
       &.system {
         &:after {
           color: #fff;