Skip to content

Updates title prop in Chart Card #3213

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 2 commits into from
Oct 13, 2025
Merged

Updates title prop in Chart Card #3213

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cde22fd
update type
bruugey Oct 13, 2025
3e99abd
expand scope of solution
bruugey Oct 13, 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/fine-phones-marry.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@lg-charts/chart-card': minor
---

Supports `React.ReactNode` as type for `title` prop
5 changes: 5 additions & 0 deletions .changeset/light-crabs-stay.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@lg-charts/core': minor
---

Updates `ChartHeader` component's `title` prop to accept a `React.ReactNode` rather than a `string`
2 changes: 1 addition & 1 deletion charts/chart-card/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ import { Chart } from '@lg-charts/core';

| Name | Description | Type | Default |
| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------- |
| `title` | The title to display in the chart header. | `string` | |
| `title` | The title to display in the chart header. | `React.ReactNode` | |
| `defaultOpen` _(optional)_ | Defines the default state of the card. | `boolean` | `true` |
| `isOpen` _(optional)_ | Forces the card state. | `boolean` | |
| `onToggleButtonClick` _(optional)_ | Callback fired when a user clicks the open/close toggle button. | `(event: MouseEventHandler<HTMLButtonElement>) => void` | |
Expand Down
2 changes: 1 addition & 1 deletion charts/chart-card/src/ChartCard/ChartCard.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export interface ChartCardProps
/**
* The title of the card
*/
title: string;
title: React.ReactNode;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we want to completely open this up to anything, then I think we should probably do the same for an individual ChartHeader https://github.com/mongodb/leafygreen-ui/blob/main/charts/core/src/ChartHeader/ChartHeader.types.ts#L8


/**
* Defines the default state of the card
Expand Down
2 changes: 1 addition & 1 deletion charts/core/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ Component for rendering a header in a chart.

| Name | Description | Type | Default |
| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ------- |
| `title` | The title to display in the chart header. | `string` | |
| `title` | The title to display in the chart header. | `React.ReactNode` | |
| `titleIcon` _(optional)_ | Content rendered immediately right of the title. Useful for quick contextual tooltips or other information concerning the title. | `React.ReactNode` | |
| `showDivider` _(optional)_ | When true, renders a dividing line on top of header. Useful when stacking charts, such as in a `ChartGroup`. | `boolean` | |
| `headerContent` _(optional)_ | Content that will be rendered to the right of the title. Useful for adding components such as `IconButton`'s that control functionality in the chart. | `React.ReactNode` | |
Expand Down
2 changes: 1 addition & 1 deletion charts/core/src/ChartHeader/ChartHeader.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export interface ChartHeaderProps
/**
* The title of the chart
*/
title: string;
title: React.ReactNode;

/**
* Icon to be rendered directly to the right of the title.
Expand Down
Loading