From 50ba92ae4be69317247f6140e9b05332329b1492 Mon Sep 17 00:00:00 2001 From: Stephen Lee Date: Wed, 5 Nov 2025 18:00:17 -0800 Subject: [PATCH 1/3] refactor(rich-links): refactor darkmode propagation and update some colors --- chat/rich-links/src/RichLink/RichLink.tsx | 42 ++++++++++--------- .../RichLinkBadge/RichLinkBadge.styles.ts | 8 ++-- 2 files changed, 26 insertions(+), 24 deletions(-) diff --git a/chat/rich-links/src/RichLink/RichLink.tsx b/chat/rich-links/src/RichLink/RichLink.tsx index d1552c65cc..62932d677d 100644 --- a/chat/rich-links/src/RichLink/RichLink.tsx +++ b/chat/rich-links/src/RichLink/RichLink.tsx @@ -2,7 +2,9 @@ import React, { forwardRef } from 'react'; import { Card } from '@leafygreen-ui/card'; import { cx } from '@leafygreen-ui/emotion'; -import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; +import LeafyGreenProvider, { + useDarkMode, +} from '@leafygreen-ui/leafygreen-provider'; import { PolymorphicAs } from '@leafygreen-ui/polymorphic'; import { Body } from '@leafygreen-ui/typography'; @@ -52,25 +54,25 @@ export const RichLink = forwardRef( : {}; return ( - onLinkClick?.(props)} - > - - {children} - - {showBadge ? ( - - ) : null} - + + onLinkClick?.(props)} + > + + {children} + + {showBadge ? ( + + ) : null} + + ); }, ); diff --git a/chat/rich-links/src/RichLink/RichLinkBadge/RichLinkBadge.styles.ts b/chat/rich-links/src/RichLink/RichLinkBadge/RichLinkBadge.styles.ts index e93c81c5bb..95ffd444fc 100644 --- a/chat/rich-links/src/RichLink/RichLinkBadge/RichLinkBadge.styles.ts +++ b/chat/rich-links/src/RichLink/RichLinkBadge/RichLinkBadge.styles.ts @@ -22,12 +22,12 @@ export const badgeVariants: Record< > = { [Theme.Dark]: { [RichLinkBadgeColors.Gray]: css` - background-color: ${palette.gray.dark1}; + background-color: ${palette.gray.dark2}; & svg { - color: ${palette.gray.light3}; + color: ${palette.gray.light1}; } & p { - color: ${palette.gray.light3}; + color: ${palette.gray.light2}; } `, [RichLinkBadgeColors.Blue]: css` @@ -92,7 +92,7 @@ export const badgeVariants: Record< color: ${palette.blue.dark2}; } & p { - color: ${palette.blue.dark1}; + color: ${palette.blue.dark3}; } `, [RichLinkBadgeColors.Green]: css` From 098a37a2aa1eb79752ab55dd07e67f36fb4b4099 Mon Sep 17 00:00:00 2001 From: Stephen Lee Date: Wed, 5 Nov 2025 18:00:40 -0800 Subject: [PATCH 2/3] test(rich-links): enable darkmode in rich-links stories --- chat/rich-links/src/RichLink/RichLink.stories.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/chat/rich-links/src/RichLink/RichLink.stories.tsx b/chat/rich-links/src/RichLink/RichLink.stories.tsx index bb8682e6b3..bdeed9f0a2 100644 --- a/chat/rich-links/src/RichLink/RichLink.stories.tsx +++ b/chat/rich-links/src/RichLink/RichLink.stories.tsx @@ -1,11 +1,26 @@ import React from 'react'; +import { storybookArgTypes } from '@lg-tools/storybook-utils'; import { StoryFn } from '@storybook/react'; +import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider'; + import { RichLink } from '.'; export default { title: 'Composition/Chat/RichLink', component: RichLink, + argTypes: { + darkMode: storybookArgTypes.darkMode, + }, + decorators: [ + (Story: StoryFn, context) => { + return ( + + + + ); + }, + ], }; const Template: StoryFn = props => ( From 842d6bd1ae96ff864f3475bfe2184c5d7d8914be Mon Sep 17 00:00:00 2001 From: Stephen Lee Date: Wed, 5 Nov 2025 18:01:11 -0800 Subject: [PATCH 3/3] chore: changesets --- .changeset/kind-goats-pump.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/kind-goats-pump.md diff --git a/.changeset/kind-goats-pump.md b/.changeset/kind-goats-pump.md new file mode 100644 index 0000000000..e29d97f4e8 --- /dev/null +++ b/.changeset/kind-goats-pump.md @@ -0,0 +1,6 @@ +--- +'@lg-chat/rich-links': patch +'@lg-chat/message': patch +--- + +[LG-5684](https://jira.mongodb.org/browse/LG-5684): update colors used for `RichLinkBadge` component which is used in `Message.Links`