Skip to content

Commit ca2e7f5

Browse files
rebeccaalpertrebeccaalpert
committed
chore(Page): Header, footer, and plain docs should match Core
1 parent 008744f commit ca2e7f5

8 files changed

Lines changed: 585 additions & 33 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/Page.md‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,28 @@ 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 ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/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';
1825
import pfIconLogo from '@patternfly/react-core/src/demos/assets/PF-IconLogo-color.svg';
26+
import pfIcon from '@patternfly/react-core/src/demos/assets/pf-logo-small.svg';
27+
import activeMQIcon from '@patternfly/react-core/src/demos/assets/activemq-core_200x150.png';
28+
import avroIcon from '@patternfly/react-core/src/demos/assets/camel-avro_200x150.png';
29+
import dropBoxIcon from '@patternfly/react-core/src/demos/assets/camel-dropbox_200x150.png';
30+
import infinispanIcon from '@patternfly/react-core/src/demos/assets/camel-infinispan_200x150.png';
31+
import saxonIcon from '@patternfly/react-core/src/demos/assets/camel-saxon_200x150.png';
32+
import sparkIcon from '@patternfly/react-core/src/demos/assets/camel-spark_200x150.png';
33+
import swaggerIcon from '@patternfly/react-core/src/demos/assets/camel-swagger-java_200x150.png';
34+
import azureIcon from '@patternfly/react-core/src/demos/assets/FuseConnector_Icons_AzureServices.png';
35+
import restIcon from '@patternfly/react-core/src/demos/assets/FuseConnector_Icons_REST.png';
36+
import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
1937

2038
- 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:
2139
1. Add an onNavToggle callback to PageHeader
@@ -50,3 +68,9 @@ When adding a context selector/perspective switcher in a `PageSidebar`, you must
5068
```ts file='./examples/Page/PageContextSelector.tsx' isFullscreen
5169

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

0 commit comments

Comments
 (0)