diff --git a/packages/module/src/PageHeader/PageHeader.tsx b/packages/module/src/PageHeader/PageHeader.tsx index afdc8ccf..b29397e3 100644 --- a/packages/module/src/PageHeader/PageHeader.tsx +++ b/packages/module/src/PageHeader/PageHeader.tsx @@ -1,15 +1,16 @@ import React from 'react'; import { + Button, + ButtonProps, + ButtonVariant, + Content, + Divider, Flex, FlexItem, + PageBreadcrumb, + PageSection, Split, SplitItem, - Content, - PageSection, - Button, - ButtonVariant, - ButtonProps, - Divider, } from '@patternfly/react-core'; import { ExternalLinkAltIcon } from '@patternfly/react-icons'; import { createUseStyles } from 'react-jss'; @@ -24,9 +25,9 @@ export interface PageHeaderLinkProps extends ButtonProps { export interface PageHeaderProps extends React.PropsWithChildren { /** Title for page header */ - title: React.ReactNode; + title?: React.ReactNode; /** Subtitle for page header */ - subtitle: React.ReactNode; + subtitle?: React.ReactNode; /** Optional link below subtitle */ linkProps?: PageHeaderLinkProps; /** Optional icon for page header (appears to the left of the page header's title with a divider) */ @@ -62,56 +63,71 @@ export const PageHeader: React.FunctionComponent = ({ }: PageHeaderProps) => { const classes = useStyles(); const { isExternal = false, ...linkRestProps } = linkProps ?? {}; + const showSplitRow = title || label || actionMenu; + const showMainFlex = showSplitRow || subtitle || linkProps; return ( - - { breadcrumbs && ( -
+ <> + {breadcrumbs && ( + {breadcrumbs} -
+ )} - - {icon && ( - <> - - {icon} - - - - )} - - - - - {title} - - - {label && ( - - {label} - + + {(showMainFlex || icon) && + + {icon && ( + <> + + {icon} + + + )} - - {actionMenu && ( - - {actionMenu} - + {(showMainFlex) && ( + + {(showSplitRow) && ( + + {title && ( + + + {title} + + + )} + {label && ( + + {label} + + )} + + {actionMenu && ( + + {actionMenu} + + )} + + )} + {subtitle && ( + + {subtitle} + + )} + {linkProps && ( + + )} + )} - - - {subtitle} - - {linkProps && ( - - )} - - - {children} -
- )}; + + } + {children} + + + ) +}; export default PageHeader;