Skip to content

Commit cf8553e

Browse files
thatblindgeyeEric Olkowski
thatblindgeye
and
Eric Olkowski
authored
fix(PageHeader): updated type to ReactNode (#759)
* fix(PageHeader): updated type to ReactNode * Updated to fix lint failures --------- Co-authored-by: Eric Olkowski <[email protected]>
1 parent 382c41e commit cf8553e

File tree

2 files changed

+63
-61
lines changed

2 files changed

+63
-61
lines changed

‎packages/module/src/ContentHeader/ContentHeader.tsx

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { PropsWithChildren, FunctionComponent } from 'react';
1+
import type { PropsWithChildren, FunctionComponent, ReactNode } from 'react';
22
import {
33
Flex,
44
FlexItem,
@@ -9,15 +9,15 @@ import {
99
Button,
1010
ButtonVariant,
1111
ButtonProps,
12-
Divider,
12+
Divider
1313
} from '@patternfly/react-core';
1414
import { ExternalLinkAltIcon } from '@patternfly/react-icons';
1515
import { createUseStyles } from 'react-jss';
1616

1717
/** extends ButtonProps */
18-
export interface PageHeaderLinkProps extends ButtonProps {
18+
export interface PageHeaderLinkProps extends Omit<ButtonProps, 'label'> {
1919
/** Title for the link */
20-
label: string;
20+
label: ReactNode;
2121
/** Indicates if the link points to an external page */
2222
isExternal?: boolean;
2323
}
@@ -43,7 +43,7 @@ export interface ContentHeaderProps {
4343

4444
const useStyles = createUseStyles({
4545
iconMinWidth: {
46-
minWidth: '48px',
46+
minWidth: '48px'
4747
}
4848
});
4949

@@ -52,30 +52,28 @@ export const ContentHeader: FunctionComponent<PropsWithChildren<ContentHeaderPro
5252
subtitle = null,
5353
linkProps,
5454
icon,
55-
label,
55+
label: labelProp,
5656
breadcrumbs = null,
5757
actionMenu,
58-
ouiaId = 'ContentHeader',
58+
ouiaId = 'ContentHeader'
5959
}: ContentHeaderProps) => {
6060
const classes = useStyles();
61-
const { isExternal = false, ...linkRestProps } = linkProps ?? {};
61+
const { isExternal = false, label = String(linkProps?.label), ...linkRestProps } = linkProps ?? {};
6262

6363
return (
6464
<PageSection hasBodyWrapper={false}>
65-
{ breadcrumbs && (
66-
<div className="pf-v6-u-mb-md">
67-
{breadcrumbs}
68-
</div>
69-
)}
65+
{breadcrumbs && <div className="pf-v6-u-mb-md">{breadcrumbs}</div>}
7066
<Flex>
7167
{icon && (
7268
<>
7369
<FlexItem alignSelf={{ default: 'alignSelfCenter' }} className={`${classes.iconMinWidth}`}>
7470
{icon}
7571
</FlexItem>
76-
<Divider orientation={{
77-
default: 'vertical',
78-
}} />
72+
<Divider
73+
orientation={{
74+
default: 'vertical'
75+
}}
76+
/>
7977
</>
8078
)}
8179
<FlexItem flex={{ default: 'flex_1' }}>
@@ -85,27 +83,32 @@ export const ContentHeader: FunctionComponent<PropsWithChildren<ContentHeaderPro
8583
<Content className="pf-v6-u-mb-sm" component="h1" ouiaId={`${ouiaId}-title`}>
8684
{title}
8785
</Content>
88-
) : title}
86+
) : (
87+
title
88+
)}
8989
</SplitItem>
90-
{label && (
91-
<SplitItem>
92-
{label}
93-
</SplitItem>
94-
)}
90+
{labelProp && <SplitItem>{labelProp}</SplitItem>}
9591
<SplitItem isFilled />
96-
{actionMenu && (
97-
<SplitItem>
98-
{actionMenu}
99-
</SplitItem>
100-
)}
92+
{actionMenu && <SplitItem>{actionMenu}</SplitItem>}
10193
</Split>
10294
{typeof subtitle === 'string' ? (
10395
<Content component="p" ouiaId={`${ouiaId}-subtitle`}>
10496
{subtitle}
10597
</Content>
106-
) : subtitle}
98+
) : (
99+
subtitle
100+
)}
107101
{linkProps && (
108-
<Button variant={ButtonVariant.link} component="a" ouiaId={`${ouiaId}-link-button`} isInline icon={isExternal ? <ExternalLinkAltIcon className='pf-v6-u-ml-sm' /> : null} iconPosition="end" {...linkRestProps}>
102+
<Button
103+
variant={ButtonVariant.link}
104+
component="a"
105+
ouiaId={`${ouiaId}-link-button`}
106+
isInline
107+
icon={isExternal ? <ExternalLinkAltIcon className="pf-v6-u-ml-sm" /> : null}
108+
iconPosition="end"
109+
label={label as string}
110+
{...linkRestProps}
111+
>
109112
{linkProps.label}
110113
</Button>
111114
)}

‎packages/module/src/PageHeader/PageHeader.tsx

Lines changed: 31 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { FunctionComponent } from 'react';
1+
import type { FunctionComponent, ReactNode } from 'react';
22
import {
33
Button,
44
ButtonProps,
@@ -10,15 +10,15 @@ import {
1010
PageBreadcrumb,
1111
PageSection,
1212
Split,
13-
SplitItem,
13+
SplitItem
1414
} from '@patternfly/react-core';
1515
import { ExternalLinkAltIcon } from '@patternfly/react-icons';
1616
import { createUseStyles } from 'react-jss';
1717

1818
/** extends ButtonProps */
19-
export interface PageHeaderLinkProps extends ButtonProps {
19+
export interface PageHeaderLinkProps extends Omit<ButtonProps, 'label'> {
2020
/** Title for the link */
21-
label: string;
21+
label: ReactNode;
2222
/** Indicates if the link points to an external page */
2323
isExternal?: boolean;
2424
}
@@ -48,7 +48,7 @@ export interface PageHeaderProps extends React.PropsWithChildren {
4848

4949
const useStyles = createUseStyles({
5050
iconMinWidth: {
51-
minWidth: '48px',
51+
minWidth: '48px'
5252
}
5353
});
5454

@@ -57,41 +57,39 @@ export const PageHeader: FunctionComponent<PageHeaderProps> = ({
5757
subtitle,
5858
linkProps,
5959
icon,
60-
label,
60+
label: labelProp,
6161
breadcrumbs = null,
6262
actionMenu,
6363
ouiaId = 'PageHeader',
6464
children = null,
6565
headingClassname = subtitle ? 'pf-v6-u-mb-sm' : ''
6666
}: PageHeaderProps) => {
6767
const classes = useStyles();
68-
const { isExternal = false, ...linkRestProps } = linkProps ?? {};
69-
const showSplitRow = title || label || actionMenu;
68+
const { isExternal = false, label = String(linkProps?.label), ...linkRestProps } = linkProps ?? {};
69+
const showSplitRow = title || labelProp || actionMenu;
7070
const showMainFlex = showSplitRow || subtitle || linkProps;
7171

7272
return (
7373
<>
74-
{breadcrumbs && (
75-
<PageBreadcrumb>
76-
{breadcrumbs}
77-
</PageBreadcrumb>
78-
)}
74+
{breadcrumbs && <PageBreadcrumb>{breadcrumbs}</PageBreadcrumb>}
7975
<PageSection hasBodyWrapper={false}>
80-
{(showMainFlex || icon) &&
76+
{(showMainFlex || icon) && (
8177
<Flex>
8278
{icon && (
8379
<>
8480
<FlexItem alignSelf={{ default: 'alignSelfCenter' }} className={classes.iconMinWidth}>
8581
{icon}
8682
</FlexItem>
87-
<Divider orientation={{
88-
default: 'vertical',
89-
}} />
83+
<Divider
84+
orientation={{
85+
default: 'vertical'
86+
}}
87+
/>
9088
</>
9189
)}
92-
{(showMainFlex) && (
90+
{showMainFlex && (
9391
<FlexItem flex={{ default: 'flex_1' }}>
94-
{(showSplitRow) && (
92+
{showSplitRow && (
9593
<Split hasGutter>
9694
{title && (
9795
<SplitItem>
@@ -100,17 +98,9 @@ export const PageHeader: FunctionComponent<PageHeaderProps> = ({
10098
</Content>
10199
</SplitItem>
102100
)}
103-
{label && (
104-
<SplitItem>
105-
{label}
106-
</SplitItem>
107-
)}
101+
{labelProp && <SplitItem>{labelProp}</SplitItem>}
108102
<SplitItem isFilled />
109-
{actionMenu && (
110-
<SplitItem>
111-
{actionMenu}
112-
</SplitItem>
113-
)}
103+
{actionMenu && <SplitItem>{actionMenu}</SplitItem>}
114104
</Split>
115105
)}
116106
{subtitle && (
@@ -119,18 +109,27 @@ export const PageHeader: FunctionComponent<PageHeaderProps> = ({
119109
</Content>
120110
)}
121111
{linkProps && (
122-
<Button variant={ButtonVariant.link} component="a" ouiaId={`${ouiaId}-link-button`} isInline icon={isExternal ? <ExternalLinkAltIcon className='pf-v6-u-ml-sm' /> : null} iconPosition="end" {...linkRestProps}>
112+
<Button
113+
variant={ButtonVariant.link}
114+
component="a"
115+
ouiaId={`${ouiaId}-link-button`}
116+
isInline
117+
icon={isExternal ? <ExternalLinkAltIcon className="pf-v6-u-ml-sm" /> : null}
118+
iconPosition="end"
119+
label={label as string}
120+
{...linkRestProps}
121+
>
123122
{linkProps.label}
124123
</Button>
125124
)}
126125
</FlexItem>
127126
)}
128127
</Flex>
129-
}
128+
)}
130129
{children}
131130
</PageSection>
132131
</>
133-
)
132+
);
134133
};
135134

136135
export default PageHeader;

0 commit comments

Comments
 (0)