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

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%]

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

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;