[LG-5664] feat(title-bar): add compact variant support#3275
Merged
Conversation
stephl3
requested review from
TheSonOfThomp,
adamrasheed and
Copilot
and removed request for
a team
🦋 Changeset detectedLatest commit: 41c879c The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR adds compact variant support to the TitleBar component to support different chat UI layouts. The component now reads the variant from useLeafyGreenChatContext and conditionally renders elements based on whether the variant is compact or spacious, while maintaining backward compatibility with the existing spacious variant.
- Adds compact variant that hides Avatar and close button while centering the title
- Adds deprecation warnings for spacious-only props when used with compact variant
- Updates styling to use new token system instead of direct palette references
Reviewed Changes
Copilot reviewed 11 out of 12 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| chat/title-bar/tsconfig.json | Adds leafygreen-chat-provider dependency and removes unused palette dependency |
| chat/title-bar/src/index.ts | Updates exports to include new type definitions |
| chat/title-bar/src/TitleBar/index.tsx | Removes internal index file as exports are moved to main index |
| chat/title-bar/src/TitleBar.types.ts | Adds deprecation warnings and reorders props for compact variant support |
| chat/title-bar/src/TitleBar.tsx | Implements compact variant logic with conditional rendering and deprecation warnings |
| chat/title-bar/src/TitleBar.styles.ts | Updates styling to use tokens instead of palette and refactors theme handling |
| chat/title-bar/src/TitleBar.stories.tsx | Adds comprehensive stories for both variants with proper testing setup |
| chat/title-bar/src/TitleBar.spec.tsx | Adds complete test coverage for both compact and spacious variants |
| chat/title-bar/package.json | Updates dependencies to include chat provider and remove palette |
| chat/title-bar/README.md | Updates documentation with examples for both variants |
| .changeset/tasty-schools-wear.md | Documents the feature addition for release notes |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
adamrasheed
approved these changes
Nov 3, 2025
Collaborator
adamrasheed
left a comment
adamrasheed
left a comment
There was a problem hiding this comment.
LGTM! Just a few nits
| title: 'LeafyGreen Chat', | ||
| variant: Variant.Spacious, | ||
| // eslint-disable-next-line no-console | ||
| onClose: () => console.log('Close clicked'), |
Collaborator
There was a problem hiding this comment.
Any reason we don't use storybook actions in our stories?
https://storybook.js.org/docs/essentials/actions
Collaborator
Author
There was a problem hiding this comment.
No specific reason other than we just haven't adopted it more broadly. Definitely something we could do
| export const getTitleBarStyles = ({ | ||
| className, | ||
| theme, | ||
| }: { | ||
| theme: Theme; | ||
| className?: string; | ||
| }) => { | ||
| return cx(baseStyles, themeStyles[theme], className); | ||
| return cx(getBaseTitleBarStyles(theme), className); |
Collaborator
There was a problem hiding this comment.
I like this pattern. We should definitely include it in the patterns best practices doc you're working on :)
| const { variant } = useLeafyGreenChatContext(); | ||
| const isCompact = variant === Variant.Compact; | ||
|
|
||
| if (isCompact && (alignProp !== Align.Center || iconSlot || onClose)) { |
Collaborator
There was a problem hiding this comment.
nit: can we move this conditional logic up into a variable in line 40?. Maybe call it shouldWarn?
Collaborator
Author
There was a problem hiding this comment.
Going to leave these as-is for now but will keep that in mind. These will be removed next week with this ticket: https://jira.mongodb.org/browse/LG-5575
| @@ -38,13 +54,15 @@ export const TitleBar = forwardRef( | |||
| ref={ref} | |||
| > | |||
| <div className={getContentContainerStyles({ align })}> | |||
| <Avatar variant={ChatAvatarVariant.Mongo} sizeOverride={24} /> | |||
| {!isCompact && ( | |||
Collaborator
There was a problem hiding this comment.
nit: not a fan of negative/falsy variable names. Should we move this to a const and call is shouldShowAvatar?
| <Body> | ||
| <strong>{title}</strong> | ||
| </Body> | ||
| {badgeText && <Badge variant="blue">{badgeText}</Badge>} | ||
| </div> | ||
| {!!onClose && ( | ||
| {!isCompact && !!onClose && ( |
Collaborator
There was a problem hiding this comment.
nit: same. Move to a constant
stephl3
force-pushed
the
steph/chat-compact-title-bar
branch
2 times, most recently
from
32eee06 to
130d80a
Compare
stephl3
force-pushed
the
steph/chat-compact-title-bar
branch
2 times, most recently
from
8c14328 to
edc8ad0
Compare
stephl3
force-pushed
the
steph/chat-compact-title-bar
branch
from
1463b12 to
3cc2aac
Compare
stephl3
force-pushed
the
steph/chat-compact-title-bar
branch
from
3cc2aac to
41c879c
Compare
Contributor
|
Size Change: +1.95 kB (+0.11%) Total Size: 1.8 MB
ℹ️ View Unchanged
|
Contributor
|
Coverage after merging steph/chat-compact-title-bar into main will be
Coverage Report
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TheSonOfThomp
added a commit
that referenced
this pull request
Nov 7, 2025
commit 5cf8c9b Merge: 75bd398 616cfb0 Author: Adam Thompson <adam.thompson@mongodb.com> Date: Fri Nov 7 15:40:20 2025 -0500 Merge branch 'main' into at/wizard-integration commit 616cfb0 Author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri Nov 7 18:49:16 2025 +0000 Version Packages (#3288) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> commit dca8419 Author: Nima Taheri <nima.taheri@mongodb.com> Date: Fri Nov 7 09:04:10 2025 -0800 LG-5588 more chart customization points (#3274) * feat: more chart customization points * docs: add changelog * feat: apply review feedbacks * feat: move common x/y axis properties into a separate file * fix: lint errors * fix: correct props dependency * fixup! fix: lint errors * feat: process review feedback * feat: apply Stephen's feedback * types: export bar-hover-behavior type * more PR review feedback * fix export issue commit 8976ab2 Author: Stephen Lee <stephen.lee@mongodb.com> Date: Fri Nov 7 07:39:33 2025 -0800 [LG-5439] feat: ChatLayout integration branch (#3289) * feat(chat-layout): new @lg-chat/chat-layout package with ChatLayout and ChatLayoutContext (#3251) * [LG-5645] feat(chat-layout): implement ChatMain component (#3252) * feat(chat-layout): implement ChatMain component * refactor(chat-layout): remove PropsWithChildren * [LG-5646] feat(chat-layout): implement ChatSideNav component with Header and Content subcomponents (#3271) * chore(chat-layout): add deps for ChatSideNav * feat(chat-layout): implement ChatSideNav and subcomponents * test(chat-layout): update stories * docs(chat-layout): README * fix(chat-layout): apply focus styles on :focus-visible * refactor(chat-layout): PR feedback * refactor(chat-layout): ChatSideNav only renders header and content * [LG-5649] feat(chat-layout): add SideNavItem subcomponent (#3273) * chore(chat-layout): add LG palette dep * feat(chat-layout): implement ChatSideNavItem subcomponent * test(chat-layout): update stories * docs(chat-layout): README * fix(chat-layout): add missing polymorphic dep * fix(chat-layout): ChatSideNavItem default is div * style(chat-layout): use constant for side nav item height * [LG-5650] feat(chat-layout): add hover expand and collapse functionality (#3278) * feat(chat-layout): add header to ChatSideNavContent * fix(input-bar): rm redundant z-index and increase disclaimer text spacing * chore(input-bar): changeset * chore(chat-layout): rm icon-button dependency * feat(chat-layout): enhance ChatLayout with side nav hover state and transition effects * test(chat-layout): update stories * docs(chat-layout): README * refactor(input-bar): revert gap changes * refactor(chat-layout): expose shouldRenderExpanded from context and fix overflow * fix(chat-layout): peer dep and init changeset commit 68b59a0 Author: Stephen Lee <stephen.lee@mongodb.com> Date: Thu Nov 6 20:18:38 2025 -0800 [LG-5687] fix(message-prompts): update border color (#3282) * style(message-prompts): update border-color * test(message-prompts): fix darkmode propagation * chore(message-prompts): changeset commit eb4ff15 Author: Stephen Lee <stephen.lee@mongodb.com> Date: Thu Nov 6 16:29:28 2025 -0800 refactor(feature-walls): darkMode propagation (#3287) * refactor(feature-walls): darkMode propagation * fix(feature-walls): drop unused imports commit 5008087 Author: Stephen Lee <stephen.lee@mongodb.com> Date: Thu Nov 6 15:33:37 2025 -0800 [LG-5684] fix(rich-links): update colors for RichLinkBadge component (#3283) * refactor(rich-links): refactor darkmode propagation and update some colors * test(rich-links): enable darkmode in rich-links stories * chore: changesets commit 1d63f1f Author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu Nov 6 19:39:48 2025 +0000 Version Packages (#3276) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> commit 6494d15 Author: Brooke Scarlett Yalof <brooke.yalof@mongodb.com> Date: Thu Nov 6 12:17:17 2025 -0500 LG-5656: Remove support for refEl property (#3270) * remove support for refEl property * Update clean-news-lay.md commit af60a2d Author: Stephen Lee <stephen.lee@mongodb.com> Date: Thu Nov 6 07:58:22 2025 -0800 [LG-5664] feat(title-bar): add compact variant support (#3275) * refactor(title-bar): reorg file structure and export Align * refactor(title-bar): styles and install lg chat provider peer dep * feat(title-bar): compact variant * test(title-bar): update stories * docs(title-bar): readme * chore(title-bar): changeset * chore(title-bar): copilot feedback * feat(chat-window): enable compact TitleBar in ChatWindow * fix: chat builds commit 45fb29a Author: Adam Rasheed <adam.rasheed@mongodb.com> Date: Wed Nov 5 09:33:54 2025 -0800 [LG-5681] chore: Update PeerDependencies (#3279) * [LG-5681] chore: Update PeerDependencies * cleanup
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
✍️ Proposed changes
Adds compact variant support to the
TitleBarcomponent, matching the pattern used by theMessagecomponent. The TitleBar now reads the variant fromuseLeafyGreenChatContextand conditionally renders the Avatar and IconButton based on the variant. In the compact variant, the Avatar and close button are hidden, and the title is always center-aligned. Spacious-only props (align,iconSlot, andonClose) are now deprecated and trigger console warnings when used with the compact variant.🎟️ Jira ticket: LG-5664
✅ Checklist
pnpm changesetand documented my changes🧪 How to test changes
Compact variant behavior:
LeafyGreenChatProviderwithvariant={Variant.Compact}onCloseis providedalignpropalign,iconSlot, oronCloseprops are providedSpacious variant behavior:
LeafyGreenChatProviderwithvariant={Variant.Spacious}onCloseis providedalignprop controls title alignment (center/left)iconSlotis providedBadge rendering:
badgeTextis providedStories: