diff --git a/.changeset/nervous-onions-complain.md b/.changeset/nervous-onions-complain.md new file mode 100644 index 0000000000..39fd089222 --- /dev/null +++ b/.changeset/nervous-onions-complain.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Allow passing component for `ContentHeader` description diff --git a/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx b/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx index e2a6e70620..1e8ab5e3ff 100644 --- a/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx +++ b/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx @@ -84,10 +84,30 @@ const ContentHeaderTitle = ({ title, className }: ContentHeaderTitleProps) => ( ); +type ContentHeaderDescriptionProps = { + description?: string; + className?: string; +}; + +const ContentHeaderDescription = ({ + description, + className, +}: ContentHeaderDescriptionProps) => + description ? ( + + {description} + + ) : null; + type ContentHeaderProps = { title?: ContentHeaderTitleProps['title']; titleComponent?: ReactNode; - description?: string; + description?: ContentHeaderDescriptionProps['description']; + descriptionComponent?: ReactNode; textAlign?: 'left' | 'right' | 'center'; }; @@ -104,6 +124,7 @@ export function ContentHeader(props: PropsWithChildren) { title, titleComponent: TitleComponent = undefined, children, + descriptionComponent: DescriptionComponent = undefined, textAlign = 'left', } = props; const classes = useStyles({ textAlign })(); @@ -114,17 +135,22 @@ export function ContentHeader(props: PropsWithChildren) { ); + const renderedDescription = DescriptionComponent ? ( + DescriptionComponent + ) : ( + + ); + return ( <> {renderedTitle} - {description && ( - - {description} - - )} + {renderedDescription} {children}