fix(design-system): Messages adjustments (#5015)

Talend · Nov 28, 2023 · 5c5924a · 5c5924a
1 parent b5fc2c3
commit 5c5924a
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 8 deletions.
diff --git a/.changeset/gold-pets-remain.md 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
@@ -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
@@ -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
@@ -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>