diff --git a/packages/module/src/ContentHeader/ContentHeader.tsx b/packages/module/src/ContentHeader/ContentHeader.tsx index 2f88e59c..32fa9d00 100644 --- a/packages/module/src/ContentHeader/ContentHeader.tsx +++ b/packages/module/src/ContentHeader/ContentHeader.tsx @@ -1,4 +1,4 @@ -import type { PropsWithChildren, FunctionComponent } from 'react'; +import type { PropsWithChildren, FunctionComponent, ReactNode } from 'react'; import { Flex, FlexItem, @@ -9,15 +9,15 @@ import { Button, ButtonVariant, ButtonProps, - Divider, + Divider } from '@patternfly/react-core'; import { ExternalLinkAltIcon } from '@patternfly/react-icons'; import { createUseStyles } from 'react-jss'; /** extends ButtonProps */ -export interface PageHeaderLinkProps extends ButtonProps { +export interface PageHeaderLinkProps extends Omit { /** Title for the link */ - label: string; + label: ReactNode; /** Indicates if the link points to an external page */ isExternal?: boolean; } @@ -43,7 +43,7 @@ export interface ContentHeaderProps { const useStyles = createUseStyles({ iconMinWidth: { - minWidth: '48px', + minWidth: '48px' } }); @@ -52,30 +52,28 @@ export const ContentHeader: FunctionComponent { const classes = useStyles(); - const { isExternal = false, ...linkRestProps } = linkProps ?? {}; + const { isExternal = false, label = String(linkProps?.label), ...linkRestProps } = linkProps ?? {}; return ( - { breadcrumbs && ( -
- {breadcrumbs} -
- )} + {breadcrumbs &&
{breadcrumbs}
} {icon && ( <> {icon} - + )} @@ -85,27 +83,32 @@ export const ContentHeader: FunctionComponent {title} - ) : title} + ) : ( + title + )} - {label && ( - - {label} - - )} + {labelProp && {labelProp}} - {actionMenu && ( - - {actionMenu} - - )} + {actionMenu && {actionMenu}} {typeof subtitle === 'string' ? ( {subtitle} - ) : subtitle} + ) : ( + subtitle + )} {linkProps && ( - )} diff --git a/packages/module/src/PageHeader/PageHeader.tsx b/packages/module/src/PageHeader/PageHeader.tsx index a29e6c42..db48362f 100644 --- a/packages/module/src/PageHeader/PageHeader.tsx +++ b/packages/module/src/PageHeader/PageHeader.tsx @@ -1,4 +1,4 @@ -import type { FunctionComponent } from 'react'; +import type { FunctionComponent, ReactNode } from 'react'; import { Button, ButtonProps, @@ -10,15 +10,15 @@ import { PageBreadcrumb, PageSection, Split, - SplitItem, + SplitItem } from '@patternfly/react-core'; import { ExternalLinkAltIcon } from '@patternfly/react-icons'; import { createUseStyles } from 'react-jss'; /** extends ButtonProps */ -export interface PageHeaderLinkProps extends ButtonProps { +export interface PageHeaderLinkProps extends Omit { /** Title for the link */ - label: string; + label: ReactNode; /** Indicates if the link points to an external page */ isExternal?: boolean; } @@ -48,7 +48,7 @@ export interface PageHeaderProps extends React.PropsWithChildren { const useStyles = createUseStyles({ iconMinWidth: { - minWidth: '48px', + minWidth: '48px' } }); @@ -57,7 +57,7 @@ export const PageHeader: FunctionComponent = ({ subtitle, linkProps, icon, - label, + label: labelProp, breadcrumbs = null, actionMenu, ouiaId = 'PageHeader', @@ -65,33 +65,31 @@ export const PageHeader: FunctionComponent = ({ headingClassname = subtitle ? 'pf-v6-u-mb-sm' : '' }: PageHeaderProps) => { const classes = useStyles(); - const { isExternal = false, ...linkRestProps } = linkProps ?? {}; - const showSplitRow = title || label || actionMenu; + const { isExternal = false, label = String(linkProps?.label), ...linkRestProps } = linkProps ?? {}; + const showSplitRow = title || labelProp || actionMenu; const showMainFlex = showSplitRow || subtitle || linkProps; return ( <> - {breadcrumbs && ( - - {breadcrumbs} - - )} + {breadcrumbs && {breadcrumbs}} - {(showMainFlex || icon) && + {(showMainFlex || icon) && ( {icon && ( <> {icon} - + )} - {(showMainFlex) && ( + {showMainFlex && ( - {(showSplitRow) && ( + {showSplitRow && ( {title && ( @@ -100,17 +98,9 @@ export const PageHeader: FunctionComponent = ({ )} - {label && ( - - {label} - - )} + {labelProp && {labelProp}} - {actionMenu && ( - - {actionMenu} - - )} + {actionMenu && {actionMenu}} )} {subtitle && ( @@ -119,18 +109,27 @@ export const PageHeader: FunctionComponent = ({ )} {linkProps && ( - )} )} - } + )} {children} - ) + ); }; export default PageHeader;