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/.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/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 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.