feat: add isToastActive, dismissToast and fix close btn styling

Author: eshankvaish

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.2.32-beta-3",
+    "version": "0.2.32-beta-4",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -20,15 +20,17 @@ export const TOAST_BASE_CONFIG: ToastContainerProps = {
     toastClassName: 'custom-toast',
     bodyClassName: 'custom-toast__body',
     closeButton: ({ closeToast }) => (
-        <Button
-            icon={<ICClose className="fcn-0" />}
-            onClick={closeToast}
-            dataTestId="close-toast"
-            ariaLabel="Close toast"
-            size={ComponentSizeType.xs}
-            variant={ButtonVariantType.text}
-            style={ButtonStyleType.neutral}
-        />
+        <div className="custom-toast__close-btn">
+            <Button
+                icon={<ICClose className="fcn-0" />}
+                onClick={closeToast}
+                dataTestId="close-toast"
+                ariaLabel="Close toast"
+                size={ComponentSizeType.xs}
+                variant={ButtonVariantType.text}
+                style={ButtonStyleType.neutral}
+            />
+        </div>
     ),
 }
 

src/Shared/Services/ToastManager/constants.tsx

@@ -60,4 +60,13 @@
             }
         }
     }
+
+    // Custom styling for close btn
+    &__close-btn {
+        svg {
+            use {
+                fill: var(--N0) !important;
+            }
+        }
+    }
 }

src/Shared/Services/ToastManager/toastManager.scss

@@ -76,6 +76,9 @@ class ToastManager {
         return ToastManager.#instance
     }
 
+    /**
+     * Handler for showing the toast
+     */
     // eslint-disable-next-line class-methods-use-this
     showToast = (
         {
@@ -110,6 +113,16 @@ class ToastManager {
             },
         )
     }
+
+    /**
+     * Handler for dismissing an existing toast
+     */
+    dismissToast = toast.dismiss
+
+    /**
+     * Handler for checking if the toast is active
+     */
+    isToastActive = toast.isActive
 }
 
 export const ToastManagerContainer = () => <ToastContainer {...TOAST_BASE_CONFIG} />