Merge pull request #1439 from dhis2/LIBS-253

fix(alertbar): address long texts
dhis2 · Dec 11, 2023 · 684e041 · 684e041
2 parents b861993 + 566f310
commit 684e041
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/components/alert/src/alert-bar/action.js b/components/alert/src/alert-bar/action.js
@@ -16,6 +16,7 @@ class Action extends Component {
                     span {
                         margin-right: ${spacers.dp12};
                         text-decoration: underline;
+                        white-space: nowrap;
                     }
                     span:hover {
                         cursor: pointer;

diff --git a/components/alert/src/alert-bar/alert-bar.stories.js b/components/alert/src/alert-bar/alert-bar.stories.js
@@ -147,6 +147,21 @@ export const WithActions = () => (
 )
 WithActions.storyName = 'With actions'
 
+export const WithActionsAndInsufficientSpace = () => (
+    <AlertBar
+        permanent
+        actions={[
+            { label: 'Long action 1', onClick: () => {} },
+            { label: 'Long action 2', onClick: () => {} },
+        ]}
+    >
+        Some text, a pretty normal amount, that conflicts with pretty long
+        actions
+    </AlertBar>
+)
+WithActionsAndInsufficientSpace.storyName =
+    'With actions and insufficient space'
+
 export const Icons = () => (
     <React.Fragment>
         <AlertBar permanent>Default icon</AlertBar>