Allow to toggle NotificationAlert text wrap (#1054)

minio · Oct 22, 2024 · b492262 · b492262
1 parent 860db19
commit b492262
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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}
                   >