feat(Compass): added responsive docked compass (#12382)

* feat(Compass): added responsive docked compass

* Updated docs and toggle logic

* Added inert to mobile items when collapsed

Author: thatblindgeye

packages/react-core/package.json

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

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

@@ -8,9 +8,17 @@ import compassBackgroundImageDark from '@patternfly/react-tokens/dist/esm/c_comp
 export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the Compass. */
   className?: string;
+  /** The horizontal masthead content (e.g. <Masthead />). This masthead will only render when dock content is passed and only at mobile viewports. */
+  masthead?: React.ReactNode;
   /** Content of the docked navigation area of the layout */
   dock?: React.ReactNode;
-  /** Content placed at the top of the layout */
+  /** @beta Flag indicating the docked nav is expanded on mobile. Only applies when dock content is passed. */
+  isDockExpanded?: boolean;
+  /** @beta Flag indicating the docked nav should display text on desktop. Only applies when dock content is passed, and
+   * will handle toggling the visibility of the text in individual isDocked components.
+   */
+  isDockTextExpanded?: boolean;
+  /** Content placed at the top of the compass layout */
   header?: React.ReactNode;
   /** Flag indicating if the header is expanded */
   isHeaderExpanded?: boolean;
@@ -40,7 +48,10 @@ export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
 
 export const Compass: React.FunctionComponent<CompassProps> = ({
   className,
+  masthead,
   dock,
+  isDockExpanded,
+  isDockTextExpanded,
   header,
   isHeaderExpanded = true,
   sidebarStart,
@@ -72,7 +83,18 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
       {...props}
       style={{ ...props.style, ...backgroundImageStyles }}
     >
-      {dock && <div className={css(`${styles.compass}__dock`)}>{dock}</div>}
+      {dock && masthead}
+      {dock && (
+        <div
+          className={css(
+            `${styles.compass}__dock`,
+            isDockExpanded && styles.modifiers.expanded,
+            isDockTextExpanded && styles.modifiers.textExpanded
+          )}
+        >
+          {dock}
+        </div>
+      )}
       {header && (
         <div
           className={css(styles.compassHeader, isHeaderExpanded && 'pf-m-expanded')}

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

@@ -0,0 +1,21 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+export interface CompassDockMainProps extends React.HTMLProps<HTMLDivElement> {
+  /** Additional classes added to the compass dock main container. */
+  className?: string;
+  /** Content of the compass dock main container. */
+  children?: React.ReactNode;
+}
+
+export const CompassDockMain: React.FunctionComponent<CompassDockMainProps> = ({
+  className,
+  children,
+  ...props
+}: CompassDockMainProps) => (
+  <div className={css(styles.compassDockMain, className)} {...props}>
+    {children}
+  </div>
+);
+
+CompassDockMain.displayName = 'CompassDockMain';

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

@@ -180,3 +180,33 @@ test(`Does not render with ${styles.modifiers.docked} class when dock is not pas
   render(<Compass data-testid="compass" />);
   expect(screen.getByTestId('compass')).not.toHaveClass(styles.modifiers.docked);
 });
+
+test('Does not render masthead content when dock is not passed', () => {
+  render(<Compass masthead="Masthead content" />);
+  expect(screen.queryByText('Masthead content')).not.toBeInTheDocument();
+});
+
+test('Renders masthead content when dock is passed', () => {
+  render(<Compass masthead={<div>Masthead content</div>} dock={<div>Dock content</div>} />);
+  expect(screen.getByText('Masthead content')).toBeVisible();
+});
+
+test(`Renders dock with ${styles.modifiers.expanded} class when isDockExpanded is true`, () => {
+  render(<Compass dock="Dock content" isDockExpanded />);
+  expect(screen.getByText('Dock content')).toHaveClass(styles.modifiers.expanded);
+});
+
+test(`Renders dock without ${styles.modifiers.expanded} class when isDockExpanded is false`, () => {
+  render(<Compass dock="Dock content" isDockExpanded={false} />);
+  expect(screen.getByText('Dock content')).not.toHaveClass(styles.modifiers.expanded);
+});
+
+test(`Renders dock with ${styles.modifiers.textExpanded} class when isDockTextExpanded is true`, () => {
+  render(<Compass dock="Dock content" isDockTextExpanded />);
+  expect(screen.getByText('Dock content')).toHaveClass(styles.modifiers.textExpanded);
+});
+
+test(`Renders dock without ${styles.modifiers.textExpanded} class when isDockTextExpanded is false`, () => {
+  render(<Compass dock="Dock content" isDockTextExpanded={false} />);
+  expect(screen.getByText('Dock content')).not.toHaveClass(styles.modifiers.textExpanded);
+});

packages/react-core/src/components/Compass/__tests__/CompassDockMain.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+import { CompassDockMain } from '../CompassDockMain';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-compass-dock-main">
+      <CompassDockMain />
+    </div>
+  );
+  expect(screen.getByTestId('test-compass-dock-main').firstChild).toBeVisible();
+});
+
+test('Renders with children', () => {
+  render(<CompassDockMain>Test content</CompassDockMain>);
+  expect(screen.getByText('Test content')).toBeVisible();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassDockMain className="custom-class">Test</CompassDockMain>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test(`Renders with default ${styles.compassDockMain} class`, () => {
+  render(<CompassDockMain>Test</CompassDockMain>);
+  expect(screen.getByText('Test')).toHaveClass(styles.compassDockMain, { exact: true });
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassDockMain id="custom-id">Test</CompassDockMain>);
+  expect(screen.getByText('Test')).toHaveAttribute('id', 'custom-id');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(
+    <CompassDockMain>
+      <div>Test content</div>
+    </CompassDockMain>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassDockMain.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__dock-main"
+  >
+    <div>
+      Test content
+    </div>
+  </div>
+</DocumentFragment>
+`;

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

@@ -1,5 +1,6 @@
 export * from './Compass';
 export * from './CompassContent';
+export * from './CompassDockMain';
 export * from './CompassHeader';
 export * from './CompassHero';
 export * from './CompassMainHeader';

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

@@ -24,9 +24,9 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   variant?: 'default' | 'docked';
   /** @beta Flag indicating the docked nav is expanded on mobile. Only applies when variant is docked. */
   isDockExpanded?: boolean;
-  /** @beta Flag indicating the docked nav should display text on desktop. Only applies when variant is docked, and will handle
-   * setting isTextExpanded on individual isDocked components.
-   * */
+  /** @beta Flag indicating the docked nav should display text on desktop. Only applies when variant is docked, and
+   * will handle toggling the visibility of the text in individual isDocked components.
+   */
   isDockTextExpanded?: boolean;
   /** The horizontal masthead content (e.g. <Masthead />). When using the docked variant, this content will only render at mobile viewports. */
   masthead?: React.ReactNode;

packages/react-core/src/demos/Compass/Compass.md

@@ -4,7 +4,7 @@ section: AI
 subsection: Generative UIs
 ---
 
-import { useRef, useState } from 'react';
+import { useRef, useState, useEffect } 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';
@@ -14,8 +14,11 @@ import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import imgAvatar from '../assets/avatarImg.svg';
+import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 import pfLogo from '../assets/PF-IconLogo-color.svg';
+import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg';
 
 ## Demos