{action && }
- {additionalIconAction && }
+ {additionalIconAction && (
+
+
+
+ )}
{additionalDropdownActions && (
-
- {}}>
- {t('ADDITIONAL_ACTIONS', 'Additional actions')}
-
-
+
+
+ {}}>
+ {t('ADDITIONAL_ACTIONS', 'Additional actions')}
+
+
+
)}
diff --git a/packages/design-system/src/components/Message/Primitive/MessageStyles.module.scss b/packages/design-system/src/components/Message/Primitive/MessageStyles.module.scss
index 69f4694ae20..e6cfdf67008 100644
--- a/packages/design-system/src/components/Message/Primitive/MessageStyles.module.scss
+++ b/packages/design-system/src/components/Message/Primitive/MessageStyles.module.scss
@@ -6,6 +6,7 @@
border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;
background-color: tokens.$coral-color-neutral-background;
height: 100%;
+ width: 100%;
border-top-left-radius: tokens.$coral-radius-s;
border-bottom-left-radius: tokens.$coral-radius-s;
@@ -23,6 +24,10 @@
}
}
+ &__actions {
+ margin-left: auto;
+ }
+
&__description {
font: tokens.$coral-paragraph-m;
color: tokens.$coral-color-neutral-text-weak;
diff --git a/packages/design-system/src/stories/messaging/Message.stories.tsx b/packages/design-system/src/stories/messaging/Message.stories.tsx
index 47e3e78bfa0..1f84b2c2575 100644
--- a/packages/design-system/src/stories/messaging/Message.stories.tsx
+++ b/packages/design-system/src/stories/messaging/Message.stories.tsx
@@ -43,7 +43,11 @@ export const DefaultMessageDemo = () => (
titleInfo="1 minute ago"
description="There is an issue with the component configuration"
link={{ href: 'https://talend.com', children: 'Learn more' }}
- action={{ children: 'See', onClick: action('action clicked') }}
+ additionalIconAction={{
+ children: 'Dismiss',
+ onClick: action('dismiss clicked'),
+ icon: 'trash',
+ }}
>