From cde22fd17103628829254d7b206be2b3e93ef59d Mon Sep 17 00:00:00 2001 From: brooke Date: Mon, 13 Oct 2025 12:40:49 -0400 Subject: [PATCH 1/2] update type --- .changeset/fine-phones-marry.md | 5 +++++ charts/chart-card/README.md | 2 +- charts/chart-card/src/ChartCard/ChartCard.types.ts | 2 +- 3 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 .changeset/fine-phones-marry.md diff --git a/.changeset/fine-phones-marry.md b/.changeset/fine-phones-marry.md new file mode 100644 index 0000000000..7c80273a36 --- /dev/null +++ b/.changeset/fine-phones-marry.md @@ -0,0 +1,5 @@ +--- +'@lg-charts/chart-card': minor +--- + +Supports `React.ReactNode` as type for `title` prop diff --git a/charts/chart-card/README.md b/charts/chart-card/README.md index 3a6270763f..bb10b3f400 100644 --- a/charts/chart-card/README.md +++ b/charts/chart-card/README.md @@ -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) => void` | | diff --git a/charts/chart-card/src/ChartCard/ChartCard.types.ts b/charts/chart-card/src/ChartCard/ChartCard.types.ts index 0e703e71c6..e52452074c 100644 --- a/charts/chart-card/src/ChartCard/ChartCard.types.ts +++ b/charts/chart-card/src/ChartCard/ChartCard.types.ts @@ -13,7 +13,7 @@ export interface ChartCardProps /** * The title of the card */ - title: string; + title: React.ReactNode; /** * Defines the default state of the card From 3e99abdde15a679cc0954922eafe0f7ee3099708 Mon Sep 17 00:00:00 2001 From: brooke Date: Mon, 13 Oct 2025 14:40:01 -0400 Subject: [PATCH 2/2] expand scope of solution --- .changeset/light-crabs-stay.md | 5 +++++ charts/core/README.md | 2 +- charts/core/src/ChartHeader/ChartHeader.types.ts | 2 +- 3 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 .changeset/light-crabs-stay.md diff --git a/.changeset/light-crabs-stay.md b/.changeset/light-crabs-stay.md new file mode 100644 index 0000000000..0ffe6bbee2 --- /dev/null +++ b/.changeset/light-crabs-stay.md @@ -0,0 +1,5 @@ +--- +'@lg-charts/core': minor +--- + +Updates `ChartHeader` component's `title` prop to accept a `React.ReactNode` rather than a `string` diff --git a/charts/core/README.md b/charts/core/README.md index 3d35168ca3..b3f3d49f0e 100644 --- a/charts/core/README.md +++ b/charts/core/README.md @@ -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` | | diff --git a/charts/core/src/ChartHeader/ChartHeader.types.ts b/charts/core/src/ChartHeader/ChartHeader.types.ts index f79b4c43c8..112ac3958d 100644 --- a/charts/core/src/ChartHeader/ChartHeader.types.ts +++ b/charts/core/src/ChartHeader/ChartHeader.types.ts @@ -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.