From a2ac5fb74b73111813e2c450425e2f8637808b92 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <git.eric@thatblindgeye.dev>
Date: Thu, 3 Jul 2025 10:48:16 -0400
Subject: [PATCH 1/2] fix(PageHeader): updated type to ReactNode

---
 packages/module/src/ContentHeader/ContentHeader.tsx | 4 ++--
 packages/module/src/PageHeader/PageHeader.tsx       | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/module/src/ContentHeader/ContentHeader.tsx b/packages/module/src/ContentHeader/ContentHeader.tsx
index 2f88e59c..97a3c297 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,
@@ -17,7 +17,7 @@ import { createUseStyles } from 'react-jss';
 /** extends ButtonProps */
 export interface PageHeaderLinkProps extends ButtonProps {
   /** Title for the link */
-  label: string;
+  label: ReactNode;
   /** Indicates if the link points to an external page */
   isExternal?: boolean;
 }
diff --git a/packages/module/src/PageHeader/PageHeader.tsx b/packages/module/src/PageHeader/PageHeader.tsx
index a29e6c42..00883a4e 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,
@@ -18,7 +18,7 @@ import { createUseStyles } from 'react-jss';
 /** extends ButtonProps */
 export interface PageHeaderLinkProps extends ButtonProps {
   /** Title for the link */
-  label: string;
+  label: ReactNode;
   /** Indicates if the link points to an external page */
   isExternal?: boolean;
 }

From 629ac481bffa7432bcfd479af70f4f52af9dda6c Mon Sep 17 00:00:00 2001
From: Eric Olkowski <git.eric@thatblindgeye.dev>
Date: Thu, 3 Jul 2025 11:08:08 -0400
Subject: [PATCH 2/2] Updated to fix lint failures

---
 .../src/ContentHeader/ContentHeader.tsx       | 57 +++++++++---------
 packages/module/src/PageHeader/PageHeader.tsx | 59 +++++++++----------
 2 files changed, 59 insertions(+), 57 deletions(-)

diff --git a/packages/module/src/ContentHeader/ContentHeader.tsx b/packages/module/src/ContentHeader/ContentHeader.tsx
index 97a3c297..32fa9d00 100644
--- a/packages/module/src/ContentHeader/ContentHeader.tsx
+++ b/packages/module/src/ContentHeader/ContentHeader.tsx
@@ -9,13 +9,13 @@ 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<ButtonProps, 'label'> {
   /** Title for the link */
   label: ReactNode;
   /** Indicates if the link points to an external page */
@@ -43,7 +43,7 @@ export interface ContentHeaderProps {
 
 const useStyles = createUseStyles({
   iconMinWidth: {
-    minWidth: '48px',
+    minWidth: '48px'
   }
 });
 
@@ -52,30 +52,28 @@ export const ContentHeader: FunctionComponent<PropsWithChildren<ContentHeaderPro
   subtitle = null,
   linkProps,
   icon,
-  label,
+  label: labelProp,
   breadcrumbs = null,
   actionMenu,
-  ouiaId = 'ContentHeader',
+  ouiaId = 'ContentHeader'
 }: ContentHeaderProps) => {
   const classes = useStyles();
-  const { isExternal = false, ...linkRestProps } = linkProps ?? {};
+  const { isExternal = false, label = String(linkProps?.label), ...linkRestProps } = linkProps ?? {};
 
   return (
     <PageSection hasBodyWrapper={false}>
-      { breadcrumbs && (
-        <div className="pf-v6-u-mb-md">
-          {breadcrumbs}
-        </div>
-      )}
+      {breadcrumbs && <div className="pf-v6-u-mb-md">{breadcrumbs}</div>}
       <Flex>
         {icon && (
           <>
             <FlexItem alignSelf={{ default: 'alignSelfCenter' }} className={`${classes.iconMinWidth}`}>
               {icon}
             </FlexItem>
-            <Divider orientation={{
-              default: 'vertical',
-            }} />
+            <Divider
+              orientation={{
+                default: 'vertical'
+              }}
+            />
           </>
         )}
         <FlexItem flex={{ default: 'flex_1' }}>
@@ -85,27 +83,32 @@ export const ContentHeader: FunctionComponent<PropsWithChildren<ContentHeaderPro
                 <Content className="pf-v6-u-mb-sm" component="h1" ouiaId={`${ouiaId}-title`}>
                   {title}
                 </Content>
-              ) : title}
+              ) : (
+                title
+              )}
             </SplitItem>
-            {label && (
-              <SplitItem>
-                {label}
-              </SplitItem>
-            )}
+            {labelProp && <SplitItem>{labelProp}</SplitItem>}
             <SplitItem isFilled />
-            {actionMenu && (
-              <SplitItem>
-                {actionMenu}
-              </SplitItem>
-            )}
+            {actionMenu && <SplitItem>{actionMenu}</SplitItem>}
           </Split>
           {typeof subtitle === 'string' ? (
             <Content component="p" ouiaId={`${ouiaId}-subtitle`}>
               {subtitle}
             </Content>
-          ) : subtitle}
+          ) : (
+            subtitle
+          )}
           {linkProps && (
-            <Button variant={ButtonVariant.link} component="a" ouiaId={`${ouiaId}-link-button`} isInline icon={isExternal ? <ExternalLinkAltIcon className='pf-v6-u-ml-sm' /> : null} iconPosition="end" {...linkRestProps}>
+            <Button
+              variant={ButtonVariant.link}
+              component="a"
+              ouiaId={`${ouiaId}-link-button`}
+              isInline
+              icon={isExternal ? <ExternalLinkAltIcon className="pf-v6-u-ml-sm" /> : null}
+              iconPosition="end"
+              label={label as string}
+              {...linkRestProps}
+            >
               {linkProps.label}
             </Button>
           )}
diff --git a/packages/module/src/PageHeader/PageHeader.tsx b/packages/module/src/PageHeader/PageHeader.tsx
index 00883a4e..db48362f 100644
--- a/packages/module/src/PageHeader/PageHeader.tsx
+++ b/packages/module/src/PageHeader/PageHeader.tsx
@@ -10,13 +10,13 @@ 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<ButtonProps, 'label'> {
   /** Title for the link */
   label: ReactNode;
   /** Indicates if the link points to an external page */
@@ -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<PageHeaderProps> = ({
   subtitle,
   linkProps,
   icon,
-  label,
+  label: labelProp,
   breadcrumbs = null,
   actionMenu,
   ouiaId = 'PageHeader',
@@ -65,33 +65,31 @@ export const PageHeader: FunctionComponent<PageHeaderProps> = ({
   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 && (
-        <PageBreadcrumb>
-          {breadcrumbs}
-        </PageBreadcrumb>
-      )}
+      {breadcrumbs && <PageBreadcrumb>{breadcrumbs}</PageBreadcrumb>}
       <PageSection hasBodyWrapper={false}>
-        {(showMainFlex || icon) &&
+        {(showMainFlex || icon) && (
           <Flex>
             {icon && (
               <>
                 <FlexItem alignSelf={{ default: 'alignSelfCenter' }} className={classes.iconMinWidth}>
                   {icon}
                 </FlexItem>
-                <Divider orientation={{
-                  default: 'vertical',
-                }} />
+                <Divider
+                  orientation={{
+                    default: 'vertical'
+                  }}
+                />
               </>
             )}
-            {(showMainFlex) && (
+            {showMainFlex && (
               <FlexItem flex={{ default: 'flex_1' }}>
-                {(showSplitRow) && (
+                {showSplitRow && (
                   <Split hasGutter>
                     {title && (
                       <SplitItem>
@@ -100,17 +98,9 @@ export const PageHeader: FunctionComponent<PageHeaderProps> = ({
                         </Content>
                       </SplitItem>
                     )}
-                    {label && (
-                      <SplitItem>
-                        {label}
-                      </SplitItem>
-                    )}
+                    {labelProp && <SplitItem>{labelProp}</SplitItem>}
                     <SplitItem isFilled />
-                    {actionMenu && (
-                      <SplitItem>
-                        {actionMenu}
-                      </SplitItem>
-                    )}
+                    {actionMenu && <SplitItem>{actionMenu}</SplitItem>}
                   </Split>
                 )}
                 {subtitle && (
@@ -119,18 +109,27 @@ export const PageHeader: FunctionComponent<PageHeaderProps> = ({
                   </Content>
                 )}
                 {linkProps && (
-                  <Button variant={ButtonVariant.link} component="a" ouiaId={`${ouiaId}-link-button`} isInline icon={isExternal ? <ExternalLinkAltIcon className='pf-v6-u-ml-sm' /> : null} iconPosition="end" {...linkRestProps}>
+                  <Button
+                    variant={ButtonVariant.link}
+                    component="a"
+                    ouiaId={`${ouiaId}-link-button`}
+                    isInline
+                    icon={isExternal ? <ExternalLinkAltIcon className="pf-v6-u-ml-sm" /> : null}
+                    iconPosition="end"
+                    label={label as string}
+                    {...linkRestProps}
+                  >
                     {linkProps.label}
                   </Button>
                 )}
               </FlexItem>
             )}
           </Flex>
-        }
+        )}
         {children}
       </PageSection>
     </>
-  )
+  );
 };
 
 export default PageHeader;