feat(Compass): add CompassMainFooter

Author: kmcfaul

packages/react-core/src/components/Compass/CompassMainFooter.tsx

@@ -0,0 +1,21 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+interface CompassMainFooterProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
+  /** Additional classes added to the main footer */
+  className?: string;
+  /** Main footer content */
+  children?: React.ReactNode;
+}
+
+export const CompassMainFooter: React.FunctionComponent<CompassMainFooterProps> = ({
+  className,
+  children,
+  ...props
+}) => (
+  <div className={css(`${styles.compass}__main-footer`, className)} {...props}>
+    {children}
+  </div>
+);
+
+CompassMainFooter.displayName = 'CompassMainFooter';

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

@@ -16,13 +16,14 @@ propComponents:
   ]
 ---
 
-import './compass.css';
 import { useRef, useState } from 'react';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
 import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon';
 import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
 
+import './compass.css';
+
 ## Examples
 
 ### Basic
@@ -41,6 +42,14 @@ The background image of the `Compass` and `CompassHero` may be customized by usi
 
 ```
 
+### With alternate footer
+
+When `footer` is used, its content will take up the width of the screen. However, if content inside of the footer grows, then the two sidebars' heights and placement will adjust to allow for the change. If this is not the desired behavior, then using a `CompassMainFooter` inside of the of the `main` section provides an alterate way to render footer content without interfering with the sidebars, by rendering content at the bottom of the page between the two sidebars opposed to the whole bottom of the page.
+
+```ts file="CompassMainFooterDemo.tsx"
+
+```
+
 ### Demo
 
 ```ts isFullscreen file="CompassDemo.tsx"

packages/react-core/src/components/Compass/examples/CompassBasic.tsx

@@ -1,5 +1,4 @@
 import { Compass, CompassHeader, CompassHero, CompassContent, CompassMainHeader } from '@patternfly/react-core';
-import './compass.css';
 
 export const CompassBasic: React.FunctionComponent = () => {
   const headerContent = <CompassHeader logo={<div>Logo</div>} nav={<div>Nav</div>} profile={<div>Profile</div>} />;

packages/react-core/src/components/Compass/examples/CompassMainFooterDemo.tsx

@@ -0,0 +1,42 @@
+import {
+  Compass,
+  CompassHeader,
+  CompassHero,
+  CompassContent,
+  CompassMainHeader,
+  CompassMainFooter
+} from '@patternfly/react-core';
+import './compass.css';
+
+export const CompassMainFooterDemo: React.FunctionComponent = () => {
+  const headerContent = <CompassHeader logo={<div>Logo</div>} nav={<div>Nav</div>} profile={<div>Profile</div>} />;
+  const sidebarStartContent = <div>Sidebar start</div>;
+  // TODO: simplify mainContent to only a div string
+  const mainContent = (
+    <>
+      <CompassHero>
+        <div>Hero</div>
+      </CompassHero>
+      <CompassContent>
+        <CompassMainHeader>
+          <div>Content title</div>
+        </CompassMainHeader>
+        <div>Content</div>
+      </CompassContent>
+      <CompassMainFooter>
+        <div>Footer</div>
+      </CompassMainFooter>
+    </>
+  );
+  const sidebarEndContent = <div>Sidebar end</div>;
+
+  return (
+    <Compass
+      header={headerContent}
+      sidebarStart={sidebarStartContent}
+      main={mainContent}
+      sidebarEnd={sidebarEndContent}
+      isFooterExpanded={false}
+    />
+  );
+};

packages/react-core/src/components/Compass/examples/compass.css

@@ -1,8 +1,20 @@
-#ws-react-c-compass-basic [class*="pf-v6-c-compass"] {
+#ws-react-p-compass-basic [class*="pf-v6-c-compass"] {
   position: relative;
 }
 
-#ws-react-c-compass-basic [class*="pf-v6-c-compass"]::after {
+#ws-react-p-compass-basic [class*="pf-v6-c-compass"]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: var(--pf-t--global--border--width--regular) dashed var(--pf-t--global--border--color--default);
+  pointer-events: none;
+}
+
+#ws-react-p-compass-with-alternate-footer [class*="pf-v6-c-compass"] {
+  position: relative;
+}
+
+#ws-react-p-compass-with-alternate-footer [class*="pf-v6-c-compass"]:not([class*="footer"])::after {
   content: "";
   position: absolute;
   inset: 0;

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

@@ -3,5 +3,6 @@ export * from './CompassContent';
 export * from './CompassHeader';
 export * from './CompassHero';
 export * from './CompassMainHeader';
+export * from './CompassMainFooter';
 export * from './CompassMessageBar';
 export * from './CompassPanel';

packages/react-docs/patternfly-docs/patternfly-docs.config.js

@@ -10,6 +10,7 @@ module.exports = {
   hasDesignGuidelines: false,
   sideNavItems: [
     { section: 'get-started' },
+    { section: 'PatternFly-AI' },
     { section: 'developer-resources' },
     { section: 'charts' },
     { section: 'components' },