feat(Page): add PageFooter and isPlain

Author: kmcfaul

packages/react-core/package.json

@@ -54,7 +54,7 @@
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.6.0-prerelease.39",
+    "@patternfly/patternfly": "6.6.0-prerelease.40",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.3"

packages/react-core/src/components/Page/Page.tsx

@@ -118,6 +118,10 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   breadcrumbProps?: PageBreadcrumbProps;
   /** Enables children to fill the available vertical space. Child page sections or groups that should fill should be passed the isFilled property. */
   isContentFilled?: boolean;
+  /** Flag indicating the page has non-PatternFly elements for header and footer and should be rendered plainly. Use PageHeader and PageFooter to wrap custom header and footer content to ensure the layout is maintained. */
+  isPlain?: boolean;
+  /** Content rendered inside the page footer */
+  footer?: React.ReactNode;
 }
 
 export interface PageState {
@@ -141,7 +145,8 @@ class Page extends Component<PageProps, PageState> {
     mainComponent: 'main',
     getBreakpoint,
     getVerticalBreakpoint,
-    mainRef: undefined
+    mainRef: undefined,
+    isPlain: false
   };
   mainRef = this.props?.mainRef ? this.props.mainRef : createRef<HTMLDivElement>();
   pageRef = createRef<HTMLDivElement>();
@@ -284,6 +289,8 @@ class Page extends Component<PageProps, PageState> {
       isContentFilled,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       mainRef,
+      isPlain,
+      footer,
       ...rest
     } = this.props;
     const { mobileView, mobileIsSidebarOpen, desktopIsSidebarOpen, width, height } = this.state;
@@ -367,6 +374,7 @@ class Page extends Component<PageProps, PageState> {
             width !== null && `pf-m-breakpoint-${getBreakpoint(width)}`,
             height !== null && `pf-m-height-breakpoint-${getVerticalBreakpoint(height)}`,
             sidebar === null && styles.modifiers.noSidebar,
+            isPlain && styles.modifiers.plain,
             className
           )}
         >
@@ -397,6 +405,7 @@ class Page extends Component<PageProps, PageState> {
             </div>
           )}
           {!notificationDrawer && main}
+          {footer && footer}
         </div>
       </PageContextProvider>
     );

packages/react-core/src/components/Page/PageFooter.tsx

@@ -0,0 +1,28 @@
+import styles from '@patternfly/react-styles/css/components/Page/page';
+import { css } from '@patternfly/react-styles';
+
+export interface PageFooterProps extends React.HTMLProps<HTMLElement> {
+  /** Content rendered inside the page header. This should be custom header content, rather than the PatternFly Masthead. */
+  children?: React.ReactNode;
+  /** Additional classes added to the page header */
+  className?: string;
+  /** Sets the base component to render. Defaults to header */
+  component?: keyof React.JSX.IntrinsicElements;
+}
+
+export const PageFooter: React.FunctionComponent<PageFooterProps> = ({
+  className,
+  children,
+  component = 'footer',
+  ...props
+}: PageFooterProps) => {
+  const Component = component as any;
+
+  return (
+    <Component {...props} className={css(styles.pageFooter, className)}>
+      {children}
+    </Component>
+  );
+};
+
+PageFooter.displayName = 'PageFooter';

packages/react-core/src/components/Page/__tests__/Page.test.tsx

@@ -13,6 +13,7 @@ import { PageHeader } from '../PageHeader';
 import { Masthead } from '../../Masthead';
 
 import styles from '@patternfly/react-styles/css/components/Page/page';
+import { PageFooter } from '../PageFooter';
 
 const props = {
   'aria-label': 'Page layout',
@@ -520,4 +521,49 @@ describe('Page docked variant', () => {
     expect(header).toHaveClass(styles.pageHeader);
     expect(header.parentElement).toHaveClass(styles.page);
   });
+
+  test('Renders PageFooter when passed to the footer prop', () => {
+    render(
+      <Page {...props} footer={<PageFooter>Custom footer</PageFooter>}>
+        <PageSection>Custom content</PageSection>
+      </Page>
+    );
+
+    const footer = screen.getByText('Custom footer');
+    expect(footer).toHaveClass(styles.pageFooter);
+    expect(footer.parentElement).toHaveClass(styles.page);
+  });
+
+  test(`Renders with ${styles.modifiers.plain} when isPlain is true`, () => {
+    render(
+      <Page {...props} isPlain data-testid="page">
+        <PageSection>Custom content</PageSection>
+      </Page>
+    );
+
+    const page = screen.getByTestId('page');
+    expect(page).toHaveClass(styles.modifiers.plain);
+  });
+
+  test(`Does not render with ${styles.modifiers.plain} when isPlain is false`, () => {
+    render(
+      <Page {...props} isPlain={false} data-testid="page">
+        <PageSection>Custom content</PageSection>
+      </Page>
+    );
+
+    const page = screen.getByTestId('page');
+    expect(page).not.toHaveClass(styles.modifiers.plain);
+  });
+
+  test(`Does not render with ${styles.modifiers.plain} when isPlain is not passed`, () => {
+    render(
+      <Page {...props} data-testid="page">
+        <PageSection>Custom content</PageSection>
+      </Page>
+    );
+
+    const page = screen.getByTestId('page');
+    expect(page).not.toHaveClass(styles.modifiers.plain);
+  });
 });

packages/react-core/src/components/Page/__tests__/PageFooter.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import styles from '@patternfly/react-styles/css/components/Page/page';
+import { PageFooter } from '../PageFooter';
+
+test('Renders children', () => {
+  render(<PageFooter>Footer content</PageFooter>);
+  expect(screen.getByText('Footer content')).toBeVisible();
+});
+
+test(`Renders with class ${styles.pageFooter} by default`, () => {
+  render(<PageFooter>Footer content</PageFooter>);
+  expect(screen.getByText('Footer content')).toHaveClass(styles.pageFooter, { exact: true });
+});
+
+test('Renders as a div by default', () => {
+  render(<PageFooter>Footer content</PageFooter>);
+  expect(screen.getByText('Footer content').tagName).toBe('FOOTER');
+});
+
+test('Renders as a custom component when component is passed', () => {
+  render(<PageFooter component="div">Footer content</PageFooter>);
+  expect(screen.getByText('Footer content').tagName).toBe('DIV');
+});
+
+test('Renders with custom classes when className is passed', () => {
+  render(<PageFooter className="custom-class">Footer content</PageFooter>);
+  expect(screen.getByText('Footer content')).toHaveClass('custom-class');
+});
+
+test('Renders with spread props', () => {
+  render(<PageFooter id="custom-id">Footer content</PageFooter>);
+  expect(screen.getByText('Footer content')).toHaveAttribute('id', 'custom-id');
+});

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

@@ -33,11 +33,15 @@ The `<MastheadMain>` component includes the smaller area that typically contains
 - 1 or more `<PageSidebarBody>` components inside `<PageSidebar>` for vertical navigation or other sidebar content
 - 1 or more `<PageSection>` components
 
-### Page header
+### Page header and footer
 
 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.
 
-```ts file="./PageHeaderContent.tsx"
+`<PageFooter>` can be passed to the `footer` property, and should be used to wrap custom footer content.
+
+When using custom a `<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 removes the scroll management from the content section so the window will be what scrolls.
+
+```ts file="./PageHeaderAndFooterContent.tsx"
 
 ```
 

…ents/Page/examples/PageHeaderContent.tsx …/examples/PageHeaderAndFooterContent.tsxpackages/react-core/src/components/Page/examples/PageHeaderContent.tsx renamed to packages/react-core/src/components/Page/examples/PageHeaderAndFooterContent.tsx packages/react-core/src/components/Page/examples/PageHeaderContent.tsx renamed to packages/react-core/src/components/Page/examples/PageHeaderAndFooterContent.tsx

@@ -1,10 +1,11 @@
-import { Page, PageHeader, PageSection } from '@patternfly/react-core';
+import { Page, PageHeader, PageFooter, PageSection } from '@patternfly/react-core';
 
-export const PageHeaderContent: React.FunctionComponent = () => {
+export const PageHeaderAndFooterContent: React.FunctionComponent = () => {
   const pageHeader = <PageHeader>Page header</PageHeader>;
+  const pageFooter = <PageFooter>Page footer</PageFooter>;
 
   return (
-    <Page masthead={pageHeader}>
+    <Page isPlain masthead={pageHeader} footer={pageFooter}>
       <PageSection aria-labelledby="header-example-section-1">
         <h2 id="header-example-section-1">Page header example section 1</h2>
       </PageSection>

packages/react-core/src/components/Page/index.ts

@@ -1,6 +1,7 @@
 export * from './Page';
 export * from './PageBody';
 export * from './PageBreadcrumb';
+export * from './PageFooter';
 export * from './PageGroup';
 export * from './PageHeader';
 export * from './PageSidebar';

packages/react-docs/package.json

@@ -23,7 +23,7 @@
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "dependencies": {
-    "@patternfly/patternfly": "6.6.0-prerelease.39",
+    "@patternfly/patternfly": "6.6.0-prerelease.40",
     "@patternfly/react-charts": "workspace:^",
     "@patternfly/react-code-editor": "workspace:^",
     "@patternfly/react-core": "workspace:^",

packages/react-icons/package.json

@@ -38,7 +38,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@patternfly/patternfly": "6.6.0-prerelease.39",
+    "@patternfly/patternfly": "6.6.0-prerelease.40",
     "@rhds/icons": "^2.2.0",
     "fs-extra": "^11.3.3"
   },