[FIX] Text overflow on Alerts

CHANGELOG.md

@@ -12,6 +12,12 @@
 
 ### Dependency updates
 
+## [18.2.3] - 2022-12-16
+
+### Fixed
+
+- `Alert`: Break long words to prevent text overflow ([@JorenSaeyTL](https://github.com/JorenSaeyTL)) in ([#2496](https://github.com/teamleadercrm/ui/pull/2496))
+
 ## [18.2.2] - 2022-12-16
 
 ### Fixed

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@teamleader/ui",
   "description": "Teamleader UI library",
-  "version": "18.2.2",
+  "version": "18.2.3",
   "author": "Teamleader <[email protected]>",
   "bugs": {
     "url": "https://github.com/teamleadercrm/ui/issues"

src/components/alert/Alert.tsx

@@ -7,6 +7,7 @@ import { Illustration60X60Error, Illustration60X60Info } from '@teamleader/ui-il
 import { DialogBaseProps } from '../dialog/DialogBase';
 import { ButtonProps } from '../button/Button';
 import { GenericComponent } from '../../@types/types';
+import theme from './theme.css';
 
 type Action = Omit<ButtonProps, 'fullWidth' | 'marginTop'>;
 
@@ -39,9 +40,11 @@ const Alert: GenericComponent<AlertProps> = ({
         <Box marginBottom={3} marginTop={2}>
           {type === 'confirm' ? <Illustration60X60Info /> : <Illustration60X60Error />}
         </Box>
-        <Heading3 color="teal">{title}</Heading3>
+        <Heading3 className={theme['break-word']} color="teal">
+          {title}
+        </Heading3>
         {body && (
-          <TextBody color="teal" marginTop={2}>
+          <TextBody className={theme['break-word']} color="teal" marginTop={2}>
             {body}
           </TextBody>
         )}

src/components/alert/__tests__/__snapshots__/Alert.spec.tsx.snap

@@ -48,13 +48,13 @@ exports[`Component - Alert renders 1`] = `
                 </svg>
               </div>
               <h3
-                class="box heading heading-3 darkest teal"
+                class="box heading heading-3 darkest teal break-word"
                 data-teamleader-ui="heading"
               >
                 Alert title
               </h3>
               <p
-                class="box margin-top-2 text text-body darkest teal"
+                class="box margin-top-2 text text-body darkest teal break-word"
                 data-teamleader-ui="text"
               >
                 I am the alert body text

src/components/alert/theme.css

@@ -0,0 +1,3 @@
+.break-word {
+  word-break: break-word;
+}