fix: font-color for children element in Messages component (#5150)

* fix: font-color for children element in Messages component * update Message snapshot
Talend · Jan 30, 2024 · 7b7d7bb · 7b7d7bb
1 parent 1964aac
commit 7b7d7bb
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 6 deletions.
diff --git a/.changeset/mean-fireants-sip.md b/.changeset/mean-fireants-sip.md
@@ -0,0 +1,5 @@
+---
+'@talend/design-system': patch
+---
+
+fix(Messages): set a default font-color for children element
diff --git a/packages/design-system/src/components/Message/Primitive/MessagePrimitive.tsx b/packages/design-system/src/components/Message/Primitive/MessagePrimitive.tsx
@@ -99,7 +99,7 @@ export const MessagePrimitive = forwardRef(
 					) : null}
 					<p className={styles.message__description}>{description}</p>
 					{link && <Link {...link} />}
-					{children}
+					{children ? <div className={styles.message__children}>{children}</div> : null}
 					<StackHorizontal gap={0} isFullWidth align="center" justify="spaceBetween">
 						{action && <ButtonTertiary {...action} />}
 						{additionalIconAction && (

diff --git a/packages/design-system/src/components/Message/Primitive/MessageStyles.module.scss b/packages/design-system/src/components/Message/Primitive/MessageStyles.module.scss
@@ -5,12 +5,17 @@
 	border-radius: tokens.$coral-radius-s;
 	border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;
 	background-color: tokens.$coral-color-neutral-background;
+	color: tokens.$coral-color-neutral-text-weak;
 	height: 100%;
 	width: 100%;
 
 	border-top-left-radius: tokens.$coral-radius-s;
 	border-bottom-left-radius: tokens.$coral-radius-s;
-	border-left: 0.375rem solid tokens.$coral-color-neutral-border-hover;
+	border-left: 0.6rem solid tokens.$coral-color-neutral-border-hover;
+
+	&__children {
+		text-wrap: pretty;
+	}
 
 	&__title {
 		font: tokens.$coral-heading-m;

diff --git a/packages/design-system/src/components/Message/__snapshots__/Message.test.tsx.snap b/packages/design-system/src/components/Message/__snapshots__/Message.test.tsx.snap
@@ -50,7 +50,11 @@ exports[`Message should render a11y html 1`] = `
           </svg>
         </span>
       </a>
-      Success
+      <div
+        class="theme-message__children"
+      >
+        Success
+      </div>
       <div
         class="theme-stack theme-justify-space-between theme-align-center theme-nowrap theme-row theme-block theme-fullWidth theme-gap-x-0 theme-gap-y-0"
       >
@@ -116,7 +120,11 @@ exports[`Message should render a11y html 1`] = `
           </svg>
         </span>
       </a>
-      Destructive
+      <div
+        class="theme-message__children"
+      >
+        Destructive
+      </div>
       <div
         class="theme-stack theme-justify-space-between theme-align-center theme-nowrap theme-row theme-block theme-fullWidth theme-gap-x-0 theme-gap-y-0"
       >
@@ -182,7 +190,11 @@ exports[`Message should render a11y html 1`] = `
           </svg>
         </span>
       </a>
-      Warning
+      <div
+        class="theme-message__children"
+      >
+        Warning
+      </div>
       <div
         class="theme-stack theme-justify-space-between theme-align-center theme-nowrap theme-row theme-block theme-fullWidth theme-gap-x-0 theme-gap-y-0"
       >
@@ -248,7 +260,11 @@ exports[`Message should render a11y html 1`] = `
           </svg>
         </span>
       </a>
-      Information
+      <div
+        class="theme-message__children"
+      >
+        Information
+      </div>
       <div
         class="theme-stack theme-justify-space-between theme-align-center theme-nowrap theme-row theme-block theme-fullWidth theme-gap-x-0 theme-gap-y-0"
       >