NotificationAlert: Float action to right, make children optional (#1110)

Signed-off-by: Daniel Valdivia <[email protected]>
minio · Nov 22, 2024 · 496d732 · 496d732
1 parent 8a128b4
commit 496d732
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git 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
@@ -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>