@patternfly/react-core 6.6.1-prerelease.7 → 6.6.1-prerelease.8

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.6.1-prerelease.6","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.6.1-prerelease.7","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.6.1-prerelease.6","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.6.1-prerelease.7","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.6.1-prerelease.6","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.6.1-prerelease.7","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.6.1-prerelease.7",
+  "version": "6.6.1-prerelease.8",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.6.1-prerelease.2",
-    "@patternfly/react-styles": "^6.6.1-prerelease.1",
-    "@patternfly/react-tokens": "^6.6.1-prerelease.1",
+    "@patternfly/react-icons": "^6.6.1-prerelease.3",
+    "@patternfly/react-styles": "^6.6.1-prerelease.2",
+    "@patternfly/react-tokens": "^6.6.1-prerelease.2",
     "focus-trap": "7.6.6",
     "react-dropzone": "^14.3.5",
     "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"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "a2d7f2396e73fb6f9e599dcfcaba23c6fb0d042d"
+  "gitHead": "008744f97e0d226d41c0bec0b78ec938943392e3"
 }

package/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 should render without the content area background and overflow scroll. */
+  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>
     );

package/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 footer */
+  children?: React.ReactNode;
+  /** Additional classes added to the footer */
+  className?: string;
+  /** Sets the base component to render. Defaults to footer */
+  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';

package/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.getByRole('contentinfo');
+    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);
+  });
 });

package/src/components/Page/__tests__/PageFooter.test.tsx

@@ -0,0 +1,38 @@
+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.getByRole('contentinfo')).toBeVisible();
+});
+
+test('Renders without children', () => {
+  render(<PageFooter data-testid="footer" />);
+  expect(screen.getByTestId('footer')).toBeVisible();
+});
+
+test(`Renders with class ${styles.pageFooter} by default`, () => {
+  render(<PageFooter>Footer content</PageFooter>);
+  expect(screen.getByRole('contentinfo')).toHaveClass(styles.pageFooter, { exact: true });
+});
+
+test('Renders as a footer by default', () => {
+  render(<PageFooter>Footer content</PageFooter>);
+  expect(screen.getByRole('contentinfo').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.getByRole('contentinfo')).toHaveClass('custom-class');
+});
+
+test('Renders with spread props', () => {
+  render(<PageFooter id="custom-id">Footer content</PageFooter>);
+  expect(screen.getByRole('contentinfo')).toHaveAttribute('id', 'custom-id');
+});

package/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 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.
+
+```ts file="./PageHeaderAndFooterContent.tsx"
 
 ```
 

package/src/components/Page/examples/{PageHeaderContent.tsx → 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>

package/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';