From 496d7322d24eb868745a3d606742ddf02f6e19bd Mon Sep 17 00:00:00 2001
From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
Date: Fri, 22 Nov 2024 14:55:06 -0800
Subject: [PATCH] NotificationAlert: Float action to right, make children
 optional (#1110)

Signed-off-by: Daniel Valdivia <hola@danielvaldivia.com>
---
 .../NotificationAlert.types.ts                |  2 +-
 src/components/NotificationAlert/index.tsx    | 20 +++++++++++++++----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/NotificationAlert/NotificationAlert.types.ts b/src/components/NotificationAlert/NotificationAlert.types.ts
index 94ce981d..0a4b6001 100644
--- a/src/components/NotificationAlert/NotificationAlert.types.ts
+++ b/src/components/NotificationAlert/NotificationAlert.types.ts
@@ -29,7 +29,7 @@ export type NotificationVariant =
 
 export interface NotificationAlertBase {
   title?: string;
-  children: ReactNode;
+  children?: ReactNode;
   action?: ReactNode;
   isLoading?: boolean;
   onClose?: () => void; //If not set, we don't show the close button
diff --git a/src/components/NotificationAlert/index.tsx b/src/components/NotificationAlert/index.tsx
index d0e266c7..e671719d 100644
--- a/src/components/NotificationAlert/index.tsx
+++ b/src/components/NotificationAlert/index.tsx
@@ -26,6 +26,7 @@ import InfoIcon from "../../icons/InfoIcon";
 import XIcon from "../../icons/XIcon";
 import { getNotificationAlertStyle } from "./NotificationAlert.styles";
 import { NotificationAlertPrp } from "./NotificationAlert.types";
+import Box from "../Box";
 
 const Index: FC<NotificationAlertPrp & HTMLAttributes<HTMLDivElement>> = ({
   title = "",
@@ -239,8 +240,17 @@ const Index: FC<NotificationAlertPrp & HTMLAttributes<HTMLDivElement>> = ({
             <div className={"fillTitleContent"}>
               {designMode === "banner" ? (
                 <Fragment>
-                  <div className={"content"}>{children}</div>
-                  {action && <div>{action}</div>}
+                  {children && <div className={"content"}>{children}</div>}
+                  <Box
+                    sx={{
+                      flexGrow: 1,
+                    }}
+                  />
+                  {action && (
+                    <div className={"notifAction actionBannerMode"}>
+                      {action}
+                    </div>
+                  )}
                 </Fragment>
               ) : (
                 <div className={"cardTitle"}>{title}</div>
@@ -249,8 +259,10 @@ const Index: FC<NotificationAlertPrp & HTMLAttributes<HTMLDivElement>> = ({
           </div>
           {designMode === "card" && (
             <div className={"cardContent"}>
-              <div className={"content"}>{children}</div>
-              {action && <div className={"actionCardMode"}>{action}</div>}
+              {children && <div className={"content"}>{children}</div>}
+              {action && (
+                <div className={"notifAction actionCardMode"}>{action}</div>
+              )}
             </div>
           )}
         </div>