@patternfly/react-core 6.5.0-prerelease.14 → 6.5.0-prerelease.16

package/src/components/Compass/__tests__/__snapshots__/CompassNavHome.test.tsx.snap

@@ -0,0 +1,107 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__nav-home"
+  >
+    <button
+      aria-label="Home"
+      class="pf-v6-c-button pf-m-plain pf-m-circle"
+      data-ouia-component-id="OUIA-Generated-Button-plain-9"
+      data-ouia-component-type="PF6/Button"
+      data-ouia-safe="true"
+      type="button"
+    >
+      <span
+        class="pf-v6-c-button__icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v6-svg"
+          fill="none"
+          height="1em"
+          viewBox="0 0 20 20"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8.33268 13.334H11.666"
+            stroke="currentcolor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+          <path
+            d="M1.66602 6.66602L9.73102 2.63351C9.89994 2.54905 10.0988 2.54905 10.2677 2.63351L18.3327 6.66602"
+            stroke="currentcolor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+          <path
+            d="M16.6673 9.16602V15.4993C16.6673 16.6039 15.7719 17.4993 14.6673 17.4993H5.33398C4.22941 17.4993 3.33398 16.6039 3.33398 15.4993V9.16602"
+            stroke="currentcolor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot with custom props 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__nav-home custom-class"
+  >
+    <button
+      aria-label="Custom home"
+      class="pf-v6-c-button pf-m-plain pf-m-circle"
+      data-ouia-component-id="OUIA-Generated-Button-plain-10"
+      data-ouia-component-type="PF6/Button"
+      data-ouia-safe="true"
+      type="button"
+    >
+      <span
+        class="pf-v6-c-button__icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v6-svg"
+          fill="none"
+          height="1em"
+          viewBox="0 0 20 20"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8.33268 13.334H11.666"
+            stroke="currentcolor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+          <path
+            d="M1.66602 6.66602L9.73102 2.63351C9.89994 2.54905 10.0988 2.54905 10.2677 2.63351L18.3327 6.66602"
+            stroke="currentcolor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+          <path
+            d="M16.6673 9.16602V15.4993C16.6673 16.6039 15.7719 17.4993 14.6673 17.4993H5.33398C4.22941 17.4993 3.33398 16.6039 3.33398 15.4993V9.16602"
+            stroke="currentcolor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Compass/__tests__/__snapshots__/CompassNavMain.test.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__nav-main"
+  >
+    <div>
+      Main tabs content
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Compass/__tests__/__snapshots__/CompassNavSearch.test.tsx.snap

@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__nav-search"
+  >
+    <button
+      aria-label="Search"
+      class="pf-v6-c-button pf-m-plain pf-m-circle"
+      data-ouia-component-id="OUIA-Generated-Button-plain-9"
+      data-ouia-component-type="PF6/Button"
+      data-ouia-safe="true"
+      type="button"
+    >
+      <span
+        class="pf-v6-c-button__icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v6-svg"
+          fill="none"
+          height="1em"
+          viewBox="0 0 20 20"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14.166 14.166L17.4993 17.4993"
+            stroke="currentcolor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+          <path
+            d="M2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333C11.0108 15.8333 12.6801 15.0846 13.887 13.8744C15.0897 12.6685 15.8333 11.0044 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667Z"
+            stroke="currentcolor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot with custom props 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-compass__nav-search custom-class"
+  >
+    <button
+      aria-label="Custom search"
+      class="pf-v6-c-button pf-m-plain pf-m-circle"
+      data-ouia-component-id="OUIA-Generated-Button-plain-10"
+      data-ouia-component-type="PF6/Button"
+      data-ouia-safe="true"
+      type="button"
+    >
+      <span
+        class="pf-v6-c-button__icon"
+      >
+        <svg
+          aria-hidden="true"
+          class="pf-v6-svg"
+          fill="none"
+          height="1em"
+          viewBox="0 0 20 20"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14.166 14.166L17.4993 17.4993"
+            stroke="currentcolor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+          <path
+            d="M2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333C11.0108 15.8333 12.6801 15.0846 13.887 13.8744C15.0897 12.6685 15.8333 11.0044 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667Z"
+            stroke="currentcolor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;

package/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"

package/src/components/Compass/examples/CompassBasic.tsx

@@ -40,6 +40,7 @@ export const CompassBasic: React.FunctionComponent = () => {
       main={mainContent}
       sidebarEnd={sidebarEndContent}
       footer={footerContent}
+      style={{ height: '600px' }}
     />
   );
 };

package/src/components/Compass/examples/CompassDemo.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable no-console */
+
 import { useRef, useState } from 'react';
 import {
   Compass,
@@ -7,6 +9,10 @@ import {
   CompassMainHeader,
   CompassPanel,
   CompassMessageBar,
+  CompassNavContent,
+  CompassNavHome,
+  CompassNavMain,
+  CompassNavSearch,
   Hero,
   Tabs,
   TabsComponent,
@@ -32,49 +38,57 @@ export const CompassBasic: React.FunctionComponent = () => {
 
   const navContent = (
     <>
-      <CompassPanel isPill hasNoPadding>
-        <Tabs
-          activeKey={activeTab}
-          isNav
-          onSelect={(_event, tabIndex) => setActiveTab(tabIndex as number)}
-          component={TabsComponent.nav}
-          aria-label="Compass navigation tabs"
-          inset={{ default: 'insetXl' }}
-        >
-          <Tab
-            tabContentId="subtabs"
-            tabContentRef={subTabsRef}
-            eventKey={0}
-            title={<TabTitleText>Tab 1</TabTitleText>}
-            aria-label="Compass tab with subtabs"
-          />
-          <Tab eventKey={1} title={<TabTitleText>Tab 2</TabTitleText>} />
-          <Tab eventKey={2} title={<TabTitleText>Tab 3</TabTitleText>} />
-          <Tab eventKey={3} title={<TabTitleText>Disabled Tab 4</TabTitleText>} isDisabled />
-        </Tabs>
+      <CompassPanel isPill>
+        <CompassNavContent>
+          <CompassNavHome onClick={() => console.log('Home')} />
+          <CompassNavMain>
+            <Tabs
+              activeKey={activeTab}
+              isNav
+              onSelect={(_event, tabIndex) => setActiveTab(tabIndex as number)}
+              component={TabsComponent.nav}
+              aria-label="Compass navigation tabs"
+            >
+              <Tab
+                tabContentId="subtabs"
+                tabContentRef={subTabsRef}
+                eventKey={0}
+                title={<TabTitleText>Tab 1</TabTitleText>}
+                aria-label="Compass tab with subtabs"
+              />
+              <Tab eventKey={1} title={<TabTitleText>Tab 2</TabTitleText>} />
+              <Tab eventKey={2} title={<TabTitleText>Tab 3</TabTitleText>} />
+              <Tab eventKey={3} title={<TabTitleText>Disabled Tab 4</TabTitleText>} isDisabled />
+            </Tabs>
+          </CompassNavMain>
+          <CompassNavSearch onClick={() => console.log('Search')} />
+        </CompassNavContent>
       </CompassPanel>
       <CompassPanel isPill hasNoPadding>
         <TabContent id="subtabs" ref={subTabsRef}>
-          <Tabs
-            activeKey={activeSubtab}
-            isSubtab
-            isNav
-            onSelect={(_event, tabIndex) => setActiveSubtab(tabIndex as number)}
-            aria-label="Compass navigation subtabs"
-            inset={{ default: 'insetXl' }}
-          >
-            <Tab
-              tabContentId="subtab-1"
-              eventKey={0}
-              title={
-                <TabTitleText>
-                  <div id="subtab-1">Subtab 1</div>
-                </TabTitleText>
-              }
-            />
-            <Tab eventKey={1} title={<TabTitleText>Subtab 2</TabTitleText>} />
-            <Tab eventKey={2} title={<TabTitleText>Disabled Subtab 3</TabTitleText>} isDisabled />
-          </Tabs>
+          <CompassNavContent>
+            <CompassNavMain>
+              <Tabs
+                activeKey={activeSubtab}
+                isSubtab
+                isNav
+                onSelect={(_event, tabIndex) => setActiveSubtab(tabIndex as number)}
+                aria-label="Compass navigation subtabs"
+              >
+                <Tab
+                  tabContentId="subtab-1"
+                  eventKey={0}
+                  title={
+                    <TabTitleText>
+                      <div id="subtab-1">Subtab 1</div>
+                    </TabTitleText>
+                  }
+                />
+                <Tab eventKey={1} title={<TabTitleText>Subtab 2</TabTitleText>} />
+                <Tab eventKey={2} title={<TabTitleText>Disabled Subtab 3</TabTitleText>} isDisabled />
+              </Tabs>
+            </CompassNavMain>
+          </CompassNavContent>
         </TabContent>
       </CompassPanel>
     </>

package/src/components/Compass/examples/CompassMainFooterDemo.tsx

@@ -0,0 +1,43 @@
+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}
+      style={{ height: '600px' }}
+    />
+  );
+};

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

package/src/components/Compass/index.ts

@@ -6,5 +6,10 @@ export * from './CompassMainHeader';
 export * from './CompassMainHeaderContent';
 export * from './CompassMainHeaderTitle';
 export * from './CompassMainHeaderToolbar';
+export * from './CompassMainFooter';
 export * from './CompassMessageBar';
+export * from './CompassNavContent';
+export * from './CompassNavHome';
+export * from './CompassNavMain';
+export * from './CompassNavSearch';
 export * from './CompassPanel';