Work for #7035: fix error notification without buttons (#7384)

src/common-styles/sv-save-data.scss

@@ -56,11 +56,14 @@
   opacity: 1;
 }
 
+.sv-save-data_root.sv-save-data_root--with-buttons {
+  padding: calcSize(2) calcSize(2) calcSize(2) calcSize(6);
+}
+
 .sv-save-data_root.sv-save-data_error {
   background-color: $red;
   color: $background;
   font-weight: 600;
-  padding: calcSize(2) calcSize(2) calcSize(2) calcSize(6);
   gap: calcSize(6);
 }
 

src/defaultCss/cssmodern.ts

@@ -421,6 +421,7 @@ export var modernCss = {
   },
   saveData: {
     root: "sv-save-data_root",
+    rootWithButtons: "sv-save-data_root--with-buttons",
     info: "sv-save-data_info",
     error: "sv-save-data_error",
     success: "sv-save-data_success",

src/defaultCss/cssstandard.ts

@@ -356,6 +356,7 @@ export var defaultStandardCss = {
   },
   saveData: {
     root: "sv-save-data_root",
+    rootWithButtons: "sv-save-data_root--with-buttons",
     info: "sv-save-data_info",
     error: "sv-save-data_error",
     success: "sv-save-data_success",

src/defaultCss/defaultV2Css.ts

@@ -630,6 +630,7 @@ export var defaultV2Css = {
   },
   saveData: {
     root: "sv-save-data_root",
+    rootWithButtons: "sv-save-data_root--with-buttons",
     info: "sv-save-data_info",
     error: "sv-save-data_error",
     success: "sv-save-data_success",

src/notifier.ts

@@ -5,6 +5,16 @@ import { CssClassBuilder } from "./utils/cssClassBuilder";
 import { ActionContainer } from "./actions/container";
 import { IAction } from "./actions/action";
 
+interface INotifierCssClasses {
+  root: string;
+  rootWithButtons: string;
+  info: string;
+  error: string;
+  success: string;
+  button: string;
+  shown: string;
+}
+
 export class Notifier extends Base {
   @property({ defaultValue: false }) active: boolean;
   @property({ defaultValue: false }) isDisplayed: boolean;
@@ -16,7 +26,7 @@ export class Notifier extends Base {
   public actionBar: ActionContainer;
   public showActions: boolean = true;
 
-  constructor(private cssClasses: { root: string, info: string, error: string, success: string, button: string, shown: string }) {
+  constructor(private cssClasses: INotifierCssClasses) {
     super();
     this.actionBar = new ActionContainer();
     this.actionBar.updateCallback = (isResetInitialized: boolean) => {
@@ -28,6 +38,7 @@ export class Notifier extends Base {
   getCssClass(type: string): string {
     return new CssClassBuilder()
       .append(this.cssClasses.root)
+      .append(this.cssClasses.rootWithButtons, this.actionBar.visibleActions.length > 0)
       .append(this.cssClasses.info, type !== "error" && type !== "success")
       .append(this.cssClasses.error, type === "error")
       .append(this.cssClasses.success, type === "success")

tests/notifier_tests.ts

@@ -6,6 +6,7 @@ export default QUnit.module("Notifier model");
 
 const testCssClasses = {
   root: "alert",
+  rootWithButtons: "alert--with-buttons",
   info: "alert-info",
   error: "alert-error",
   success: "alert-success",
@@ -100,4 +101,15 @@ QUnit.test("message box visibility", function (assert) {
       }, 1);
     }, settings.notifications.lifetime + 2);
   }, 1);
+});
+
+QUnit.test("message box check getCssClass method", function (assert) {
+  const notifier = new Notifier(testCssClasses);
+  notifier.addAction(<IAction>{ id: "test", title: "Test" }, "error");
+  notifier.showActions = true;
+  notifier.updateActionsVisibility("error");
+  assert.equal(notifier.getCssClass("error"), "alert alert--with-buttons alert-error");
+  notifier.showActions = false;
+  notifier.updateActionsVisibility("error");
+  assert.equal(notifier.getCssClass("error"), "alert alert-error");
 });

visualRegressionTests/tests/defaultV2/survey.ts

@@ -824,6 +824,8 @@ frameworks.forEach(framework => {
       await setData({ nps_score: 4 });
       await t.click("input[value=\"Complete\"]");
       await takeElementScreenshot("save-data-error.png", Selector(".sv-save-data_root.sv-save-data_error"), t, comparer);
+      await ClientFunction(() => { (window as any).survey.notify("An error occurred and we could not save the results.", "error", false); })();
+      await takeElementScreenshot("save-data-error-without-button.png", Selector(".sv-save-data_root.sv-save-data_error"), t, comparer);
       await ClientFunction(() => { (<any>window).Survey.settings.notifications.lifetime = 2000; })();
     });
   });