From 5c5924af7df64532df42962aa1b319f846794c93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Romain?= <sromain@talend.com>
Date: Tue, 28 Nov 2023 16:56:47 +0100
Subject: [PATCH] fix(design-system): Messages adjustments (#5015)

---
 .changeset/gold-pets-remain.md                 |  5 +++++
 .../Message/Primitive/MessagePrimitive.tsx     | 18 ++++++++++++------
 .../Primitive/MessageStyles.module.scss        |  5 +++++
 .../src/stories/messaging/Message.stories.tsx  | 15 +++++++++++++--
 4 files changed, 35 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/gold-pets-remain.md

diff --git a/.changeset/gold-pets-remain.md b/.changeset/gold-pets-remain.md
new file mode 100644
index 00000000000..18bfcafb9bd
--- /dev/null
+++ b/.changeset/gold-pets-remain.md
@@ -0,0 +1,5 @@
+---
+'@talend/design-system': patch
+---
+
+fix: Messages adjustments
diff --git a/packages/design-system/src/components/Message/Primitive/MessagePrimitive.tsx b/packages/design-system/src/components/Message/Primitive/MessagePrimitive.tsx
index 6e782e9e336..59be82206bf 100644
--- a/packages/design-system/src/components/Message/Primitive/MessagePrimitive.tsx
+++ b/packages/design-system/src/components/Message/Primitive/MessagePrimitive.tsx
@@ -102,13 +102,19 @@ export const MessagePrimitive = forwardRef(
 					{children}
 					<StackHorizontal gap={0} isFullWidth align="center" justify="spaceBetween">
 						{action && <ButtonTertiary {...action} />}
-						{additionalIconAction && <ButtonIcon {...additionalIconAction} size="XS" />}
+						{additionalIconAction && (
+							<div className={styles.message__actions}>
+								<ButtonIcon {...additionalIconAction} size="XS" />
+							</div>
+						)}
 						{additionalDropdownActions && (
-							<Dropdown {...additionalDropdownActions}>
-								<ButtonIcon size="XS" icon="dots-vertical" onClick={() => {}}>
-									{t('ADDITIONAL_ACTIONS', 'Additional actions')}
-								</ButtonIcon>
-							</Dropdown>
+							<div className={styles.message__actions}>
+								<Dropdown {...additionalDropdownActions}>
+									<ButtonIcon size="XS" icon="dots-vertical" onClick={() => {}}>
+										{t('ADDITIONAL_ACTIONS', 'Additional actions')}
+									</ButtonIcon>
+								</Dropdown>
+							</div>
 						)}
 					</StackHorizontal>
 				</StackVertical>
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',
+			}}
 		>
 			<StackHorizontal gap="S">
 				<TagDestructive>Error</TagDestructive> <TagDefault>Default</TagDefault>
@@ -53,7 +57,14 @@ export const DefaultMessageDemo = () => (
 			title="Type incompatibilities"
 			description="Maybe resolve this issue before doing anything else"
 			link={{ href: 'https://talend.com', children: 'Learn more' }}
-			action={{ children: 'See', onClick: action('action clicked') }}
+			additionalDropdownActions={{
+				'aria-label': 'Additional actions',
+				items: [
+					{ label: 'Select all', type: 'button', onClick: action('select all clicked') },
+					{ label: 'Dismiss', type: 'button', onClick: action('dismiss clicked') },
+					{ label: 'Delete', type: 'button', onClick: action('delete clicked') },
+				],
+			}}
 		>
 			<StackHorizontal gap="S">
 				<TagWarning>Bindings</TagWarning> <TagDefault>Default</TagDefault>