From b492262d8f60c19d241fba0a1455d338d71a754b Mon Sep 17 00:00:00 2001
From: Victor Bayas <victorsbayas@gmail.com>
Date: Tue, 22 Oct 2024 15:21:09 -0500
Subject: [PATCH] Allow to toggle NotificationAlert text wrap (#1054)

---
 .../NotificationAlert.types.ts                |  1 +
 src/components/NotificationAlert/index.tsx    | 39 ++++++++++++++-----
 src/components/Notifications/index.tsx        |  7 +++-
 3 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/src/components/NotificationAlert/NotificationAlert.types.ts b/src/components/NotificationAlert/NotificationAlert.types.ts
index c41935489..94ce981d1 100644
--- a/src/components/NotificationAlert/NotificationAlert.types.ts
+++ b/src/components/NotificationAlert/NotificationAlert.types.ts
@@ -40,6 +40,7 @@ export interface NotificationAlertConstruct {
   variant?: NotificationVariant;
   shadow?: boolean;
   designMode?: AlertDesignMode;
+  wrapText?: boolean;
   sx?: OverrideTheme;
 }
 
diff --git a/src/components/NotificationAlert/index.tsx b/src/components/NotificationAlert/index.tsx
index faf443e3f..1d3b2a02e 100644
--- a/src/components/NotificationAlert/index.tsx
+++ b/src/components/NotificationAlert/index.tsx
@@ -35,6 +35,7 @@ const Index: FC<NotificationAlertPrp & HTMLAttributes<HTMLDivElement>> = ({
   emphasisMode = "subtle",
   variant = "information",
   shadow = false,
+  wrapText = false,
   isLoading,
   id,
   sx,
@@ -95,6 +96,33 @@ const Index: FC<NotificationAlertPrp & HTMLAttributes<HTMLDivElement>> = ({
     },
   });
 
+  const wrapTextStyles = useMemo(() => {
+    if (wrapText) {
+      return css({
+        "& .alertInitLine": {
+          "& .notificationTitle": {
+            "& .cardTitle": {
+              display: "-webkit-box",
+              WebkitLineClamp: 1,
+              WebkitBoxOrient: "vertical",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+            },
+          },
+          "& .content": {
+            display: "-webkit-box",
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: "vertical",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+          },
+        },
+      });
+    } else {
+      return {};
+    }
+  }, [wrapText]);
+
   const baseStyle = css({
     display: "flex",
     width: "100%",
@@ -176,11 +204,6 @@ const Index: FC<NotificationAlertPrp & HTMLAttributes<HTMLDivElement>> = ({
         overflowWrap: "break-word",
         whiteSpace: "normal",
         minWidth: 0,
-        display: "-webkit-box",
-        WebkitLineClamp: 2,
-        WebkitBoxOrient: "vertical",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
       },
     },
     "& .cardContent": {
@@ -192,11 +215,6 @@ const Index: FC<NotificationAlertPrp & HTMLAttributes<HTMLDivElement>> = ({
         overflowWrap: "break-word",
         whiteSpace: "normal",
         minWidth: 0,
-        display: "-webkit-box",
-        WebkitLineClamp: 2,
-        WebkitBoxOrient: "vertical",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
       },
       "& .actionCardMode": {
         lineHeight: 1,
@@ -214,6 +232,7 @@ const Index: FC<NotificationAlertPrp & HTMLAttributes<HTMLDivElement>> = ({
         baseStyle,
         designMode === "banner" ? bannerStyle : cardStyle,
         overrideThemes,
+        wrapTextStyles,
       ]}
       className={"notification-alert"}
       id={id}
diff --git a/src/components/Notifications/index.tsx b/src/components/Notifications/index.tsx
index 09881b5ba..5ac81a0ef 100644
--- a/src/components/Notifications/index.tsx
+++ b/src/components/Notifications/index.tsx
@@ -78,7 +78,11 @@ const Notifications: React.FC<NotificationsProps> = ({
         return (
           <div css={[notificationsContainerStyles(position)]} key={position}>
             {notifications.map((notification) => {
-              const { children, shadow = true } = notification.options;
+              const {
+                children,
+                wrapText = true,
+                shadow = true,
+              } = notification.options;
 
               const title = children ? notification.message : undefined;
               const content = children || notification.message;
@@ -97,6 +101,7 @@ const Notifications: React.FC<NotificationsProps> = ({
                     onClose={() =>
                       NotificationManager.removeNotification(notification.id)
                     }
+                    wrapText={wrapText}
                     shadow={shadow}
                     {...notification.options}
                   >