Fix default style (svg width/height) & css prop on promotions (#3185)

hschawe · web-flow · commit fedb362b1c81 · 2025-10-07T02:18:17.000Z
* Fix default style (svg width/height) &amp; css prop on promotions

* Lint

* Test fix &amp; change version

* PR review: position styles according to element responsibility
diff --git a/.changeset/curvy-lines-tie.md b/.changeset/curvy-lines-tie.md
@@ -0,0 +1,5 @@
+---
+'@lg-chat/message': patch
+---
+
+Add `className` prop to `Message.Promotion` for custom styles
diff --git a/chat/message/src/MessagePromotion/MessagePromotion.stories.tsx b/chat/message/src/MessagePromotion/MessagePromotion.stories.tsx
@@ -13,8 +13,8 @@ const meta: StoryMetaType<typeof MessagePromotion> = {
       combineArgs: {
         darkMode: [false, true],
         promotionText: [
-          'Challenge your knowledge by earning the Advanced Schema Design skill!',
-          'Challenge your knowledge by earning the Advanced Schema Design skill! This is a really really really really really really really really really really really really really really really really really  really really really really really really really really long copy text to test how the component handles long text content.',
+          'Challenge your knowledge and earn the Schema Design badge!',
+          'Challenge your knowledge by earning the Advanced Schema Design skill! This is a really really really really really really really really really long copy text to test how the component handles multiline text content.',
         ],
         promotionUrl: ['https://learn.mongodb.com/skills'],
       },
diff --git a/chat/message/src/MessagePromotion/MessagePromotion.styles.ts b/chat/message/src/MessagePromotion/MessagePromotion.styles.ts
@@ -15,7 +15,7 @@ export const badgeStyles = css`
   display: flex;
   flex-direction: row;
   justify-content: center;
-
-  width: ${BADGE_WIDTH}px;
-  height: ${BADGE_HEIGHT}px;
+  box-sizing: border-box;
+  min-width: ${BADGE_WIDTH}px;
+  min-height: ${BADGE_HEIGHT}px;
 `;
diff --git a/chat/message/src/MessagePromotion/MessagePromotion.tsx b/chat/message/src/MessagePromotion/MessagePromotion.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import Badge, { Variant } from '@leafygreen-ui/badge';
+import { cx } from '@leafygreen-ui/emotion';
 import Icon from '@leafygreen-ui/icon';
 import LeafyGreenProvider, {
   useDarkMode,
@@ -23,18 +24,17 @@ export function MessagePromotion({
   promotionUrl,
   onPromotionLinkClick,
   darkMode: darkModeProp,
+  className,
   ...rest
 }: MessagePromotionProps) {
   const { darkMode } = useDarkMode(darkModeProp);
   return (
     <LeafyGreenProvider darkMode={darkMode}>
-      <div className={promotionContainerStyles}>
-        <div>
-          <Badge variant={Variant.Green} className={badgeStyles}>
-            <Icon glyph="Award" />
-          </Badge>
-        </div>
-        <Body as="span" {...rest}>
+      <div className={cx(promotionContainerStyles, className)} {...rest}>
+        <Badge variant={Variant.Green} className={badgeStyles}>
+          <Icon glyph="Award" />
+        </Badge>
+        <Body as="span">
           {promotionText}
           <>
             {' '}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@lg-chat/message': patch
 +---
++
 +Add `className` prop to `Message.Promotion` for custom styles