From 25b56fb9f4119dc26187b0bd50797e84f7868e47 Mon Sep 17 00:00:00 2001 From: Helen Schawe Date: Fri, 3 Oct 2025 13:51:35 -0500 Subject: [PATCH 1/4] Fix default style (svg width/height) & css prop on promotions --- .../MessagePromotion/MessagePromotion.styles.ts | 7 +++++-- .../src/MessagePromotion/MessagePromotion.tsx | 12 ++++++------ .../MessagePromotions.stories.tsx | 17 +++++++++++++++-- 3 files changed, 26 insertions(+), 10 deletions(-) diff --git a/chat/message/src/MessagePromotion/MessagePromotion.styles.ts b/chat/message/src/MessagePromotion/MessagePromotion.styles.ts index 4bdb5513ae..27740699c9 100644 --- a/chat/message/src/MessagePromotion/MessagePromotion.styles.ts +++ b/chat/message/src/MessagePromotion/MessagePromotion.styles.ts @@ -9,6 +9,9 @@ export const promotionContainerStyles = css` flex-direction: row; align-items: center; gap: 0px ${spacing[200]}px; + & div { + box-sizing: border-box; + } `; export const badgeStyles = css` @@ -16,6 +19,6 @@ export const badgeStyles = css` flex-direction: row; justify-content: center; - width: ${BADGE_WIDTH}px; - height: ${BADGE_HEIGHT}px; + 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..a39ab18ba5 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,17 +24,16 @@ export function MessagePromotion({ promotionUrl, onPromotionLinkClick, darkMode: darkModeProp, + className, ...rest }: MessagePromotionProps) { const { darkMode } = useDarkMode(darkModeProp); return ( -
-
- - - -
+
+ + + {promotionText} <> diff --git a/chat/message/src/MessagePromotion/MessagePromotions.stories.tsx b/chat/message/src/MessagePromotion/MessagePromotions.stories.tsx index a8f60daeba..dea05dfc49 100644 --- a/chat/message/src/MessagePromotion/MessagePromotions.stories.tsx +++ b/chat/message/src/MessagePromotion/MessagePromotions.stories.tsx @@ -2,6 +2,9 @@ import React from 'react'; import { storybookArgTypes, StoryMetaType } from '@lg-tools/storybook-utils'; import { StoryFn } from '@storybook/react'; +import { css } from '@leafygreen-ui/emotion'; +import { palette } from '@leafygreen-ui/palette'; + import { MessagePromotion, MessagePromotionProps } from '.'; const meta: StoryMetaType = { @@ -13,10 +16,20 @@ 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'], + className: [ + css` + gap: 20px; + & div { + background-color: ${palette.blue.dark2}; + border-color: white; + color: ${palette.blue.light2}; + } + `, + undefined] }, }, }, From 36deb7a7452a0068aca98dfbcb3f99ed2021ef3b Mon Sep 17 00:00:00 2001 From: Helen Schawe Date: Fri, 3 Oct 2025 14:04:19 -0500 Subject: [PATCH 2/4] Lint --- .../MessagePromotions.stories.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/chat/message/src/MessagePromotion/MessagePromotions.stories.tsx b/chat/message/src/MessagePromotion/MessagePromotions.stories.tsx index dea05dfc49..625f5de1c4 100644 --- a/chat/message/src/MessagePromotion/MessagePromotions.stories.tsx +++ b/chat/message/src/MessagePromotion/MessagePromotions.stories.tsx @@ -23,13 +23,14 @@ const meta: StoryMetaType = { className: [ css` gap: 20px; - & div { - background-color: ${palette.blue.dark2}; - border-color: white; - color: ${palette.blue.light2}; - } - `, - undefined] + & div { + background-color: ${palette.blue.dark2}; + border-color: white; + color: ${palette.blue.light2}; + } + `, + undefined, + ], }, }, }, From 2df2eee6a1f4dc205bf1f49709a042feeac25e60 Mon Sep 17 00:00:00 2001 From: Helen Schawe Date: Fri, 3 Oct 2025 14:14:11 -0500 Subject: [PATCH 3/4] Test fix & change version --- .changeset/curvy-lines-tie.md | 5 +++++ .../src/MessagePromotion/MessagePromotions.stories.tsx | 1 + 2 files changed, 6 insertions(+) create mode 100644 .changeset/curvy-lines-tie.md diff --git a/.changeset/curvy-lines-tie.md b/.changeset/curvy-lines-tie.md new file mode 100644 index 0000000000..073f2dcaa4 --- /dev/null +++ b/.changeset/curvy-lines-tie.md @@ -0,0 +1,5 @@ +--- +'@lg-chat/message': minor +--- + +Add `className` prop to `Message.Promotion` for custom styles diff --git a/chat/message/src/MessagePromotion/MessagePromotions.stories.tsx b/chat/message/src/MessagePromotion/MessagePromotions.stories.tsx index 625f5de1c4..6fb4e69090 100644 --- a/chat/message/src/MessagePromotion/MessagePromotions.stories.tsx +++ b/chat/message/src/MessagePromotion/MessagePromotions.stories.tsx @@ -22,6 +22,7 @@ const meta: StoryMetaType = { promotionUrl: ['https://learn.mongodb.com/skills'], className: [ css` + box-sizing: content-box; gap: 20px; & div { background-color: ${palette.blue.dark2}; From 59b9292ed13a86418945bc0c165a55ba91902c19 Mon Sep 17 00:00:00 2001 From: Helen Schawe Date: Mon, 6 Oct 2025 17:06:18 -0500 Subject: [PATCH 4/4] PR review: position styles according to element responsibility --- .changeset/curvy-lines-tie.md | 2 +- .../MessagePromotion/MessagePromotion.stories.tsx | 15 --------------- .../MessagePromotion/MessagePromotion.styles.ts | 5 +---- .../src/MessagePromotion/MessagePromotion.tsx | 4 ++-- 4 files changed, 4 insertions(+), 22 deletions(-) diff --git a/.changeset/curvy-lines-tie.md b/.changeset/curvy-lines-tie.md index 073f2dcaa4..362045c351 100644 --- a/.changeset/curvy-lines-tie.md +++ b/.changeset/curvy-lines-tie.md @@ -1,5 +1,5 @@ --- -'@lg-chat/message': minor +'@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 3c2d6aa8d5..14dae517c5 100644 --- a/chat/message/src/MessagePromotion/MessagePromotion.stories.tsx +++ b/chat/message/src/MessagePromotion/MessagePromotion.stories.tsx @@ -2,9 +2,6 @@ import React from 'react'; import { storybookArgTypes, StoryMetaType } from '@lg-tools/storybook-utils'; import { StoryFn } from '@storybook/react'; -import { css } from '@leafygreen-ui/emotion'; -import { palette } from '@leafygreen-ui/palette'; - import { MessagePromotion, MessagePromotionProps } from '.'; const meta: StoryMetaType = { @@ -20,18 +17,6 @@ const meta: StoryMetaType = { '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'], - className: [ - css` - box-sizing: content-box; - gap: 20px; - & div { - background-color: ${palette.blue.dark2}; - border-color: white; - color: ${palette.blue.light2}; - } - `, - undefined, - ], }, }, }, diff --git a/chat/message/src/MessagePromotion/MessagePromotion.styles.ts b/chat/message/src/MessagePromotion/MessagePromotion.styles.ts index 27740699c9..4d74ade708 100644 --- a/chat/message/src/MessagePromotion/MessagePromotion.styles.ts +++ b/chat/message/src/MessagePromotion/MessagePromotion.styles.ts @@ -9,16 +9,13 @@ export const promotionContainerStyles = css` flex-direction: row; align-items: center; gap: 0px ${spacing[200]}px; - & div { - box-sizing: border-box; - } `; export const badgeStyles = css` display: flex; flex-direction: row; justify-content: center; - + 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 a39ab18ba5..cf8b7b34cd 100644 --- a/chat/message/src/MessagePromotion/MessagePromotion.tsx +++ b/chat/message/src/MessagePromotion/MessagePromotion.tsx @@ -30,11 +30,11 @@ export function MessagePromotion({ const { darkMode } = useDarkMode(darkModeProp); return ( -
+
- + {promotionText} <> {' '}