Skip to content

Commit b6a63ef

Browse files
rebeccaalpertrebeccaalpert
committed
chore(Page): Header, footer, and plain docs should match Core
Assisted-by: Cursor
1 parent 008744f commit b6a63ef

10 files changed

Lines changed: 587 additions & 36 deletions

File tree

‎packages/react-core/src/components/Page/examples/Page.md‎

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -33,18 +33,6 @@ The `<MastheadMain>` component includes the smaller area that typically contains
3333
- 1 or more `<PageSidebarBody>` components inside `<PageSidebar>` for vertical navigation or other sidebar content
3434
- 1 or more `<PageSection>` components
3535

36-
### Page header and footer
37-
38-
To use a page header instead of passing a [masthead](/components/masthead) directly, pass a `<PageHeader>` to the `masthead` property. `<PageHeader>` should only be used to wrap custom header content.
39-
40-
`<PageFooter>` can be passed to the `footer` property, and should be used to wrap custom footer content.
41-
42-
When using a custom `<PageHeader>` and `<PageFooter>`, the `isPlain` flag should be passed to `<Page>`. This will remove styling on the main container, the height constraints on the page wrapper (so it can grow beyond the viewport), and remove the scroll management from the content section so the window will be what scrolls.
43-
44-
```ts file="./PageHeaderAndFooterContent.tsx"
45-
46-
```
47-
4836
### Vertical navigation
4937

5038
To add a vertical sidebar to a `<Page>`, pass a `<PageSidebar>` component into the `sidebar` property. To render navigation in the sidebar, pass a `<PageSidebarBody>` component to `<PageSidebar>`.
@@ -162,3 +150,27 @@ In this example, a scroll event listener on the scroll parent container toggles
162150
```ts file="./PageDynamicStickySection.tsx"
163151

164152
```
153+
154+
### Custom header
155+
156+
To use a page header instead of passing a [masthead](/components/masthead) directly, pass a `<PageHeader>` to the `masthead` property. `<PageHeader>` should only be used to wrap custom header content.
157+
158+
```ts isBeta file="./PageCustomHeader.tsx"
159+
160+
```
161+
162+
### Footer
163+
164+
`<PageFooter>` can be passed to the `footer` property, and should be used to wrap custom footer content.
165+
166+
```ts isBeta file="./PageCustomFooter.tsx"
167+
168+
```
169+
170+
### Plain page
171+
172+
When a page should not have the default content area background or overflow scrolling, pass the `isPlain` property to `<Page>`.
173+
174+
```ts isBeta file="./PagePlain.tsx"
175+
176+
```

‎packages/react-core/src/components/Page/examples/PageCustomFooter.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { useState } from 'react';
2+
import {
3+
Masthead,
4+
MastheadMain,
5+
MastheadToggle,
6+
MastheadBrand,
7+
MastheadLogo,
8+
MastheadContent,
9+
Page,
10+
PageFooter,
11+
PageSection,
12+
PageSidebar,
13+
PageSidebarBody,
14+
PageToggleButton
15+
} from '@patternfly/react-core';
16+
17+
export const PageCustomFooter: React.FunctionComponent = () => {
18+
const [isSidebarOpen, setIsSidebarOpen] = useState(true);
19+
20+
const onSidebarToggle = () => {
21+
setIsSidebarOpen(!isSidebarOpen);
22+
};
23+
24+
const masthead = (
25+
<Masthead>
26+
<MastheadMain>
27+
<MastheadToggle>
28+
<PageToggleButton
29+
aria-label="Global navigation"
30+
isSidebarOpen={isSidebarOpen}
31+
onSidebarToggle={onSidebarToggle}
32+
id="custom-footer-body-nav-toggle"
33+
isHamburgerButton
34+
/>
35+
</MastheadToggle>
36+
<MastheadBrand>
37+
<MastheadLogo href="https://patternfly.org" target="_blank">
38+
Logo
39+
</MastheadLogo>
40+
</MastheadBrand>
41+
</MastheadMain>
42+
<MastheadContent>Content</MastheadContent>
43+
</Masthead>
44+
);
45+
46+
const sidebar = (
47+
<PageSidebar isSidebarOpen={isSidebarOpen} id="custom-footer-vertical-sidebar">
48+
<PageSidebarBody>Navigation</PageSidebarBody>
49+
</PageSidebar>
50+
);
51+
52+
return (
53+
<Page footer={<PageFooter>Page footer</PageFooter>} masthead={masthead} sidebar={sidebar}>
54+
<PageSection aria-labelledby="custom-footer-section">
55+
<h2 id="custom-footer-section">Page content</h2>
56+
</PageSection>
57+
</Page>
58+
);
59+
};

‎packages/react-core/src/components/Page/examples/PageCustomHeader.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Page, PageHeader, PageSection, PageSidebar, PageSidebarBody } from '@patternfly/react-core';
2+
3+
export const PageCustomHeader: React.FunctionComponent = () => {
4+
const sidebar = (
5+
<PageSidebar isSidebarOpen id="custom-header-vertical-sidebar">
6+
<PageSidebarBody>Navigation</PageSidebarBody>
7+
</PageSidebar>
8+
);
9+
10+
return (
11+
<Page masthead={<PageHeader>Custom page header</PageHeader>} sidebar={sidebar}>
12+
<PageSection aria-labelledby="custom-header-section">
13+
<h2 id="custom-header-section">Page content</h2>
14+
</PageSection>
15+
</Page>
16+
);
17+
};

‎packages/react-core/src/components/Page/examples/PageHeaderAndFooterContent.tsx‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎packages/react-core/src/components/Page/examples/PagePlain.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { useState } from 'react';
2+
import {
3+
Masthead,
4+
MastheadMain,
5+
MastheadToggle,
6+
MastheadBrand,
7+
MastheadLogo,
8+
MastheadContent,
9+
Page,
10+
PageSection,
11+
PageSidebar,
12+
PageSidebarBody,
13+
PageToggleButton
14+
} from '@patternfly/react-core';
15+
16+
export const PagePlain: React.FunctionComponent = () => {
17+
const [isSidebarOpen, setIsSidebarOpen] = useState(true);
18+
19+
const onSidebarToggle = () => {
20+
setIsSidebarOpen(!isSidebarOpen);
21+
};
22+
23+
const masthead = (
24+
<Masthead>
25+
<MastheadMain>
26+
<MastheadToggle>
27+
<PageToggleButton
28+
aria-label="Global navigation"
29+
isSidebarOpen={isSidebarOpen}
30+
onSidebarToggle={onSidebarToggle}
31+
id="plain-page-body-nav-toggle"
32+
isHamburgerButton
33+
/>
34+
</MastheadToggle>
35+
<MastheadBrand>
36+
<MastheadLogo href="https://patternfly.org" target="_blank">
37+
Logo
38+
</MastheadLogo>
39+
</MastheadBrand>
40+
</MastheadMain>
41+
<MastheadContent>Content</MastheadContent>
42+
</Masthead>
43+
);
44+
45+
const sidebar = (
46+
<PageSidebar isSidebarOpen={isSidebarOpen} id="plain-page-vertical-sidebar">
47+
<PageSidebarBody>Navigation</PageSidebarBody>
48+
</PageSidebar>
49+
);
50+
51+
return (
52+
<Page isPlain masthead={masthead} sidebar={sidebar}>
53+
<PageSection aria-labelledby="plain-page-section">
54+
<p>Page content</p>
55+
</PageSection>
56+
</Page>
57+
);
58+
};

‎packages/react-core/src/demos/CardView/CardView.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ section: patterns
66
import { Fragment, useState } from 'react';
77
import RhUiTrashFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-trash-fill-icon';
88
import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
9-
import pfIcon from '../assets/pf-logo-small.svg';
9+
import pfIcon from '@patternfly/react-core/src/demos/assets/PF-IconLogo.svg';
1010
import activeMQIcon from '../assets/activemq-core_200x150.png';
1111
import avroIcon from '../assets/camel-avro_200x150.png';
1212
import dropBoxIcon from '../assets/camel-dropbox_200x150.png';

‎packages/react-core/src/demos/CardView/examples/CardView.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ import {
3636
} from '@patternfly/react-core';
3737
import RhUiTrashFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-trash-fill-icon';
3838
import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
39-
import pfIcon from './assets/pf-logo-small.svg';
39+
import pfIcon from '@patternfly/react-core/src/demos/assets/PF-IconLogo.svg';
4040
import activeMQIcon from './assets/activemq-core_200x150.png';
4141
import avroIcon from './assets/camel-avro_200x150.png';
4242
import dropBoxIcon from './assets/camel-dropbox_200x150.png';

‎packages/react-core/src/demos/Page.md‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,27 @@ import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.sv
1212
import RhUiMenuBarsIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-menu-bars-icon';
1313
import LightbulbIcon from '@patternfly/react-icons/dist/esm/icons/lightbulb-icon';
1414
import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
15-
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
15+
import RhUiContainerIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-icon';
1616
import RhUiCloudFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-fill-icon';
17+
import RhUiPortIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-port-icon';
18+
import RhUiAutomationIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-automation-icon';
19+
import RhUiConnectedIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-connected-icon';
20+
import RhUiArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-right-icon';
21+
import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
22+
import RhUiTrashFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-trash-fill-icon';
23+
import RhUiThumbnailViewSmallFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-thumbnail-view-small-fill-icon';
1724
import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
18-
import pfIconLogo from '@patternfly/react-core/src/demos/assets/PF-IconLogo-color.svg';
25+
import pfIcon from '@patternfly/react-core/src/demos/assets/PF-IconLogo.svg';
26+
import activeMQIcon from '@patternfly/react-core/src/demos/assets/activemq-core_200x150.png';
27+
import avroIcon from '@patternfly/react-core/src/demos/assets/camel-avro_200x150.png';
28+
import dropBoxIcon from '@patternfly/react-core/src/demos/assets/camel-dropbox_200x150.png';
29+
import infinispanIcon from '@patternfly/react-core/src/demos/assets/camel-infinispan_200x150.png';
30+
import saxonIcon from '@patternfly/react-core/src/demos/assets/camel-saxon_200x150.png';
31+
import sparkIcon from '@patternfly/react-core/src/demos/assets/camel-spark_200x150.png';
32+
import swaggerIcon from '@patternfly/react-core/src/demos/assets/camel-swagger-java_200x150.png';
33+
import azureIcon from '@patternfly/react-core/src/demos/assets/FuseConnector_Icons_AzureServices.png';
34+
import restIcon from '@patternfly/react-core/src/demos/assets/FuseConnector_Icons_REST.png';
35+
import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
1936

2037
- All examples set the `isManagedSidebar` prop on the Page component to have the sidebar automatically close for smaller screen widths. You can also manually control this behavior by not adding the `isManagedSidebar` prop and instead:
2138
1. Add an onNavToggle callback to PageHeader
@@ -50,3 +67,9 @@ When adding a context selector/perspective switcher in a `PageSidebar`, you must
5067
```ts file='./examples/Page/PageContextSelector.tsx' isFullscreen
5168

5269
```
70+
71+
### Plain
72+
73+
```ts file='./examples/Page/PagePlain.tsx' isFullscreen
74+
75+
```

0 commit comments

Comments
 (0)