feat: info,success,error,warning,Error,Danger styles for toast NotificationUI

Author: abose

src/styles/brackets.less

@@ -2679,11 +2679,11 @@ label input {
 
 .notification-popup-container {
     border-radius: 3px;
-    background: #005f8f;
+    background: var(--bc-toast-info-bg-color);
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.24);
     padding: 9px 12px 9px 12px;
     font-family: "SourceSansPro", serif;
-    color: #eee;
+    color: black;
     line-height: 1.5;
     margin-top: 7px;
 
@@ -2692,6 +2692,22 @@ label input {
     transform: translateY(-50px);
 }
 
+.notification-popup-container.style-danger {
+    background: var(--bc-toast-danger-bg-color);
+}
+.notification-popup-container.style-error {
+    background: var(--bc-toast-error-bg-color);
+}
+.notification-popup-container.style-info {
+    background: var(--bc-toast-info-bg-color);
+}
+.notification-popup-container.style-success {
+    background: var(--bc-toast-success-bg-color);
+}
+.notification-popup-container.style-warning {
+    background: var(--bc-toast-warning-bg-color);
+}
+
 .notification-popup-container.animateOpen {
     opacity: 1;
     transition: transform 500ms, opacity 500ms;
@@ -2722,7 +2738,6 @@ label input {
 .notification-dialog-title {
     font-size: 16px;
     font-weight: bold;
-    color: #ddd;
 }
 
 .notification-dialog-content strong {

src/styles/brackets_core_ui_variables.css

@@ -0,0 +1,39 @@
+/*
+// Copyright (c) 2021 - present core.ai . All rights reserved.
+// Original work Copyright (c) 2012 - 2021 Adobe Systems Incorporated. All rights reserved.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a
+// copy of this software and associated documentation files (the "Software"),
+// to deal in the Software without restriction, including without limitation
+// the rights to use, copy, modify, merge, publish, distribute, sublicense,
+// and/or sell copies of the Software, and to permit persons to whom the
+// Software is furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+// DEALINGS IN THE SOFTWARE.
+ * Brackets Colors
+ *
+ * These are general purpose colors that can be used in defining
+ * themes or UI elements. you can override these by overriding the :root{} element
+ * with your own variable definitions in the theme css.
+ * All brackets color variable names (that refer to an actual color)
+ * are prefixed with "bc-" for "brackets". This is to avoid confusion
+ * with system and css color names. (We define our own colors because system
+ * colors are ugly.)
+ */
+
+:root {
+  --bc-toast-danger-bg-color: #FF5C33;
+  --bc-toast-error-bg-color: #f74687;
+  --bc-toast-success-bg-color: #82b839;
+  --bc-toast-warning-bg-color: #FFAA00;
+  --bc-toast-info-bg-color: #60A3D9;
+}

src/styles/brackets_core_ui_variables.less

@@ -40,6 +40,13 @@
  * colors are ugly.)
  */
 
+
+@import "./brackets_core_ui_variables.css";
+
+// DEPRECATION WARNING: This file is here for legacy reasons and will be removed as we migrate entirely to css variables
+// this is necessary for extension them-ability.
+// Please use brackets_core_ui_variables.css for defining new style variables
+
 // General
 @bc-bg-highlight:               #e0f0fa;
 @bc-bg-inline-widget:           #e6e9e9;

src/widgets/NotificationUI.js

@@ -71,6 +71,14 @@ define(function (require, exports, module) {
     const NOTIFICATION_TYPE_ARROW = "arrow",
         NOTIFICATION_TYPE_TOAST = "toast";
 
+    const NOTIFICATION_STYLES_CSS_CLASS = {
+        INFO: "style-info",
+        WARNING: "style-warning",
+        SUCCESS: "style-success",
+        ERROR: "style-error",
+        DANGER: "style-danger"
+    };
+
     const CLOSE_REASON ={
         TIMEOUT: 'closeTimeout',
         CLICK_DISMISS: 'clickDismiss',
@@ -305,19 +313,22 @@ define(function (require, exports, module) {
      *
      * @param {string} title The title for the notification.
      * @param {string|Element} template A string template or HTML Element to use as the dialog HTML.
-     * @param {{dismissOnClick, autoCloseTimeS}} [options] optional, supported
+     * @param {{dismissOnClick, autoCloseTimeS, toastStyle}} [options] optional, supported
      *   * options are:
      *   * `autoCloseTimeS` - Time in seconds after which the notification should be auto closed. Default is never.
      *   * `dismissOnClick` - when clicked, the notification is closed. Default is true(dismiss).
+     *   * `toastStyle` - To style the toast notification for error, warning, info etc. Can be
+     *     one of `NotificationUI.NOTIFICATION_STYLES_CSS_CLASS.*` or your own css class name.
      * @return {Notification} Object with a done handler that resolves when the notification closes.
      * @type {function}
      */
     function createToastFromTemplate(title, template, options = {}) {
         options.dismissOnClick = options.dismissOnClick === undefined ? true : options.dismissOnClick;
         notificationWidgetCount++;
         const widgetID = `notification-toast-${notificationWidgetCount}`,
-            $NotificationPopup = $(Mustache.render(ToastPopupHtml,
-                {id: widgetID, title: title}));
+            $NotificationPopup = $(Mustache.render(ToastPopupHtml, {id: widgetID, title: title,
+                containerStyle: NOTIFICATION_STYLES_CSS_CLASS[options.toastStyle]
+                        || options.toastStyle || NOTIFICATION_STYLES_CSS_CLASS.INFO}));
         $NotificationPopup.find(".notification-dialog-content")
             .append($(template));
 
@@ -354,4 +365,5 @@ define(function (require, exports, module) {
     exports.createFromTemplate = createFromTemplate;
     exports.createToastFromTemplate = createToastFromTemplate;
     exports.CLOSE_REASON = CLOSE_REASON;
+    exports.NOTIFICATION_STYLES_CSS_CLASS = NOTIFICATION_STYLES_CSS_CLASS;
 });

src/widgets/html/toast-popup.html

@@ -1,4 +1,4 @@
-<div id="{{id}}" class="notification-popup-container">
+<div id="{{id}}" class="notification-popup-container {{containerStyle}}">
     <div>
         <p class='notification-popup-close-button'>×</p>
     </div>

test/spec/NotificationUI-test.js

@@ -92,5 +92,27 @@ define(function (require, exports, module) {
                 return $("#toast-notification-container").children().length === 0;
             }, "waiting for notification to close");
         });
+
+        async function verifyToast(cssClass) {
+            let notification = NotificationUI.createToastFromTemplate("hello", "world", {
+                toastStyle: cssClass
+            });
+            await awaitsFor(()=>{
+                return $(`#toast-notification-container .${cssClass}`).length === 1;
+            }, "waiting for notification to appear");
+            notification.close("test");
+            await awaitsFor(()=>{
+                return $(`#toast-notification-container .${cssClass}`).length === 0;
+            }, "waiting for notification to close");
+        }
+
+        it("Should style toast notification", async function () {
+            await verifyToast(NotificationUI.NOTIFICATION_STYLES_CSS_CLASS.INFO);
+            await verifyToast(NotificationUI.NOTIFICATION_STYLES_CSS_CLASS.WARNING);
+            await verifyToast(NotificationUI.NOTIFICATION_STYLES_CSS_CLASS.SUCCESS);
+            await verifyToast(NotificationUI.NOTIFICATION_STYLES_CSS_CLASS.ERROR);
+            await verifyToast(NotificationUI.NOTIFICATION_STYLES_CSS_CLASS.DANGER);
+            await verifyToast("custom-class-name");
+        }, 10000);
     });
 });