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> = ({ emphasisMode = "subtle", variant = "information", shadow = false, + wrapText = false, isLoading, id, sx, @@ -95,6 +96,33 @@ const Index: FC> = ({ }, }); + 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> = ({ 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> = ({ 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> = ({ 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 = ({ return (
{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 = ({ onClose={() => NotificationManager.removeNotification(notification.id) } + wrapText={wrapText} shadow={shadow} {...notification.options} >