diff --git a/.changeset/curvy-lines-tie.md b/.changeset/curvy-lines-tie.md new file mode 100644 index 0000000000..362045c351 --- /dev/null +++ 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 index 3b20c58b0b..14dae517c5 100644 --- a/chat/message/src/MessagePromotion/MessagePromotion.stories.tsx +++ b/chat/message/src/MessagePromotion/MessagePromotion.stories.tsx @@ -13,8 +13,8 @@ const meta: StoryMetaType = { 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 index 4bdb5513ae..4d74ade708 100644 --- 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 index efb88cabc9..cf8b7b34cd 100644 --- 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 ( -
-
- - - -
- +
+ + + + {promotionText} <> {' '}