Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Oct 7, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
25b56fb
Fix default style (svg width/height) & css prop on promotions
hschawe Oct 3, 2025
36deb7a
Lint
hschawe Oct 3, 2025
2df2eee
Test fix & change version
hschawe Oct 3, 2025
54c6e45
Merge branch 'main' of github.com:mongodb/leafygreen-ui into pass_pro…
hschawe Oct 6, 2025
59b9292
PR review: position styles according to element responsibility
hschawe Oct 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/curvy-lines-tie.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@lg-chat/message': patch
---

Add `className` prop to `Message.Promotion` for custom styles
4 changes: 2 additions & 2 deletions chat/message/src/MessagePromotion/MessagePromotion.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
},
Expand Down
6 changes: 3 additions & 3 deletions chat/message/src/MessagePromotion/MessagePromotion.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
`;
14 changes: 7 additions & 7 deletions chat/message/src/MessagePromotion/MessagePromotion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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}
<>
{' '}
Expand Down
Loading