@patternfly/react-core 6.5.0-prerelease.3 → 6.5.0-prerelease.31

package/src/components/Compass/Compass.tsx

@@ -1,4 +1,4 @@
-import { Drawer, DrawerContent, DrawerProps } from '../Drawer';
+import { Drawer, DrawerContent, DrawerContentBody, DrawerProps } from '../Drawer';
 import styles from '@patternfly/react-styles/css/components/Compass/compass';
 import { css } from '@patternfly/react-styles';
 
@@ -6,8 +6,10 @@ import compassBackgroundImageLight from '@patternfly/react-tokens/dist/esm/c_com
 import compassBackgroundImageDark from '@patternfly/react-tokens/dist/esm/c_compass_BackgroundImage_dark';
 
 export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
-  /** Additional classes added to the compass. */
+  /** Additional classes added to the Compass. */
   className?: string;
+  /** Content of the docked navigation area of the layout */
+  dock?: React.ReactNode;
   /** Content placed at the top of the layout */
   header?: React.ReactNode;
   /** Flag indicating if the header is expanded */
@@ -30,14 +32,15 @@ export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
   drawerContent?: React.ReactNode;
   /** Additional props passed to the drawer */
   drawerProps?: DrawerProps;
-  /** Light theme background image path of the compass */
+  /** Light theme background image path of the Compass  */
   backgroundSrcLight?: string;
-  /** Dark theme background image path of the compass */
+  /** Dark theme background image path of the Compass  */
   backgroundSrcDark?: string;
 }
 
 export const Compass: React.FunctionComponent<CompassProps> = ({
   className,
+  dock,
   header,
   isHeaderExpanded = true,
   sidebarStart,
@@ -52,7 +55,7 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
   backgroundSrcLight,
   backgroundSrcDark,
   ...props
-}) => {
+}: CompassProps) => {
   const hasDrawer = drawerContent !== undefined;
 
   const backgroundImageStyles: { [key: string]: string } = {};
@@ -64,39 +67,54 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
   }
 
   const compassContent = (
-    <div className={css(styles.compass, className)} {...props} style={{ ...props.style, ...backgroundImageStyles }}>
-      <div
-        className={css(styles.compassHeader, isHeaderExpanded && 'pf-m-expanded')}
-        {...(!isHeaderExpanded && { inert: 'true' })}
-      >
-        {header}
-      </div>
-      <div
-        className={css(styles.compassSidebar, styles.modifiers.start, isSidebarStartExpanded && 'pf-m-expanded')}
-        {...(!isSidebarStartExpanded && { inert: 'true' })}
-      >
-        {sidebarStart}
-      </div>
-      <div className={css(styles.compassMain)}>{main}</div>
-      <div
-        className={css(styles.compassSidebar, styles.modifiers.end, isSidebarEndExpanded && 'pf-m-expanded')}
-        {...(!isSidebarEndExpanded && { inert: 'true' })}
-      >
-        {sidebarEnd}
-      </div>
-      <div
-        className={css(styles.compassFooter, isFooterExpanded && 'pf-m-expanded')}
-        {...(!isFooterExpanded && { inert: 'true' })}
-      >
-        {footer}
-      </div>
+    <div
+      className={css(styles.compass, dock !== undefined && styles.modifiers.dock, className)}
+      {...props}
+      style={{ ...props.style, ...backgroundImageStyles }}
+    >
+      {dock && <div className={css(`${styles.compass}__dock`)}>{dock}</div>}
+      {header && (
+        <div
+          className={css(styles.compassHeader, isHeaderExpanded && 'pf-m-expanded')}
+          {...(!isHeaderExpanded && { inert: 'true' })}
+        >
+          {header}
+        </div>
+      )}
+      {sidebarStart && (
+        <div
+          className={css(styles.compassSidebar, styles.modifiers.start, isSidebarStartExpanded && 'pf-m-expanded')}
+          {...(!isSidebarStartExpanded && { inert: 'true' })}
+        >
+          {sidebarStart}
+        </div>
+      )}
+      {main && <div className={css(styles.compassMain)}>{main}</div>}
+      {sidebarEnd && (
+        <div
+          className={css(styles.compassSidebar, styles.modifiers.end, isSidebarEndExpanded && 'pf-m-expanded')}
+          {...(!isSidebarEndExpanded && { inert: 'true' })}
+        >
+          {sidebarEnd}
+        </div>
+      )}
+      {footer && (
+        <div
+          className={css(styles.compassFooter, isFooterExpanded && 'pf-m-expanded')}
+          {...(!isFooterExpanded && { inert: 'true' })}
+        >
+          {footer}
+        </div>
+      )}
     </div>
   );
 
   if (hasDrawer) {
     return (
-      <Drawer {...drawerProps}>
-        <DrawerContent panelContent={drawerContent}>{compassContent}</DrawerContent>
+      <Drawer isPill {...drawerProps}>
+        <DrawerContent panelContent={drawerContent}>
+          <DrawerContentBody>{compassContent}</DrawerContentBody>
+        </DrawerContent>
       </Drawer>
     );
   }

package/src/components/Compass/CompassContent.tsx

@@ -2,8 +2,8 @@ import { Drawer, DrawerContent, DrawerProps } from '../Drawer';
 import styles from '@patternfly/react-styles/css/components/Compass/compass';
 import { css } from '@patternfly/react-styles';
 
-interface CompassContentProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content of the main compass area. Typically one or more CompassPanel components. */
+export interface CompassContentProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content of the main Compass area. Typically one or more CompassPanel components. */
   children: React.ReactNode;
   /** Additional classes added to the CompassContent */
   className?: string;
@@ -19,7 +19,7 @@ export const CompassContent: React.FunctionComponent<CompassContentProps> = ({
   drawerProps,
   drawerContent,
   ...props
-}) => {
+}: CompassContentProps) => {
   const hasDrawer = drawerContent !== undefined;
 
   const compassContent = (
@@ -30,7 +30,7 @@ export const CompassContent: React.FunctionComponent<CompassContentProps> = ({
 
   if (hasDrawer) {
     return (
-      <Drawer {...drawerProps}>
+      <Drawer isPill {...drawerProps}>
         <DrawerContent panelContent={drawerContent}>{compassContent}</DrawerContent>
       </Drawer>
     );

package/src/components/Compass/CompassHeader.tsx

@@ -1,7 +1,7 @@
 import styles from '@patternfly/react-styles/css/components/Compass/compass';
 import { css } from '@patternfly/react-styles';
 
-interface CompassHeaderProps {
+export interface CompassHeaderProps {
   /** Content of the logo area */
   logo?: React.ReactNode;
   /** Content of the navigation area */
@@ -10,7 +10,11 @@ interface CompassHeaderProps {
   profile?: React.ReactNode;
 }
 
-export const CompassHeader: React.FunctionComponent<CompassHeaderProps> = ({ logo, nav, profile }) => (
+export const CompassHeader: React.FunctionComponent<CompassHeaderProps> = ({
+  logo,
+  nav,
+  profile
+}: CompassHeaderProps) => (
   <>
     <div className={css(`${styles.compass}__logo`)}>{logo}</div>
     <div className={css(styles.compassNav)}>{nav}</div>

package/src/components/Compass/CompassHero.tsx

@@ -1,87 +1,22 @@
 import styles from '@patternfly/react-styles/css/components/Compass/compass';
 import { css } from '@patternfly/react-styles';
 
-import compassHeroBackgroundImageLight from '@patternfly/react-tokens/dist/esm/c_compass__hero_BackgroundImage_light';
-import compassHeroBackgroundImageDark from '@patternfly/react-tokens/dist/esm/c_compass__hero_BackgroundImage_dark';
-import compassHeroGradientStop1Light from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_1_light';
-import compassHeroGradientStop2Light from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_2_light';
-import compassHeroGradientStop3Light from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_3_light';
-import compassHeroGradientStop1Dark from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_1_dark';
-import compassHeroGradientStop2Dark from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_2_dark';
-import compassHeroGradientStop3Dark from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_3_dark';
-
-interface CompassHeroProps extends Omit<React.HTMLProps<HTMLDivElement>, 'content'> {
+/** A wrapper component to pass a PatternFly Hero component into. */
+export interface CompassHeroProps extends Omit<React.HTMLProps<HTMLDivElement>, 'content'> {
   /** Content of the hero */
   children?: React.ReactNode;
   /** Additional classes added to the hero */
   className?: string;
-  /** Light theme background image path of the hero */
-  backgroundSrcLight?: string;
-  /** Dark theme background image path of the hero */
-  backgroundSrcDark?: string;
-  /** Light theme gradient of the hero */
-  gradientLight?: {
-    stop1?: string;
-    stop2?: string;
-    stop3?: string;
-  };
-  /** Dark theme gradient of the hero */
-  gradientDark?: {
-    stop1?: string;
-    stop2?: string;
-    stop3?: string;
-  };
 }
 
 export const CompassHero: React.FunctionComponent<CompassHeroProps> = ({
   className,
   children,
-  backgroundSrcLight,
-  backgroundSrcDark,
-  gradientLight,
-  gradientDark,
   ...props
-}) => {
-  const backgroundImageStyles: { [key: string]: string } = {};
-  if (backgroundSrcLight) {
-    backgroundImageStyles[compassHeroBackgroundImageLight.name] = `url(${backgroundSrcLight})`;
-  }
-  if (backgroundSrcDark) {
-    backgroundImageStyles[compassHeroBackgroundImageDark.name] = `url(${backgroundSrcDark})`;
-  }
-
-  if (gradientLight) {
-    if (gradientLight.stop1) {
-      backgroundImageStyles[compassHeroGradientStop1Light.name] = gradientLight.stop1;
-    }
-    if (gradientLight.stop2) {
-      backgroundImageStyles[compassHeroGradientStop2Light.name] = gradientLight.stop2;
-    }
-    if (gradientLight.stop3) {
-      backgroundImageStyles[compassHeroGradientStop3Light.name] = gradientLight.stop3;
-    }
-  }
-  if (gradientDark) {
-    if (gradientDark.stop1) {
-      backgroundImageStyles[compassHeroGradientStop1Dark.name] = gradientDark.stop1;
-    }
-    if (gradientDark.stop2) {
-      backgroundImageStyles[compassHeroGradientStop2Dark.name] = gradientDark.stop2;
-    }
-    if (gradientDark.stop3) {
-      backgroundImageStyles[compassHeroGradientStop3Dark.name] = gradientDark.stop3;
-    }
-  }
-
-  return (
-    <div
-      className={css(styles.compassPanel, styles.compassHero, className)}
-      style={{ ...props.style, ...backgroundImageStyles }}
-      {...props}
-    >
-      <div className={css(styles.compassHeroBody)}>{children}</div>
-    </div>
-  );
-};
+}: CompassHeroProps) => (
+  <div className={css(`${styles.compass}__hero`, className)} {...props}>
+    {children}
+  </div>
+);
 
 CompassHero.displayName = 'CompassHero';

package/src/components/Compass/CompassMainFooter.tsx

@@ -0,0 +1,24 @@
+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;
+  /** Indicates if the main footer is expanded */
+  isExpanded?: boolean;
+}
+
+export const CompassMainFooter: React.FunctionComponent<CompassMainFooterProps> = ({
+  className,
+  children,
+  isExpanded = true,
+  ...props
+}) => (
+  <div className={css(styles.compassMainFooter, isExpanded && 'pf-m-expanded', className)} {...props}>
+    {children}
+  </div>
+);
+
+CompassMainFooter.displayName = 'CompassMainFooter';

package/src/components/Compass/CompassMainHeader.tsx

@@ -1,17 +1,27 @@
-import { Flex, FlexItem } from '../../layouts/Flex';
-import { CompassPanel } from './CompassPanel';
+import { CompassPanel, CompassPanelProps } from './CompassPanel';
+import { CompassMainHeaderContent } from './CompassMainHeaderContent';
+import { CompassMainHeaderTitle } from './CompassMainHeaderTitle';
+import { CompassMainHeaderToolbar } from './CompassMainHeaderToolbar';
 import styles from '@patternfly/react-styles/css/components/Compass/compass';
 import { css } from '@patternfly/react-styles';
 
-interface CompassMainHeaderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
+/** The wrapper component for header content in the main Compass area. When building out a custom implementation,
+ * you should ensure any content within the main header is rendered inside a Compass panel and main header content wrappers.
+ */
+
+export interface CompassMainHeaderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
+  /** Custom main header content. To opt into a default styling, use the title and toolbar props instead. */
+  children?: React.ReactNode;
   /** Additional classes added to the main header */
   className?: string;
   /** Styled title. If title or toolbar is provided, the children will be ignored. */
   title?: React.ReactNode;
   /** Styled toolbar. If title or toolbar is provided, the children will be ignored. */
   toolbar?: React.ReactNode;
-  /** Custom main header content. To opt into a default styling, use the title and toolbar props instead. */
-  children?: React.ReactNode;
+  /** Additional props passed to the Compass panel that wraps the main header content when using the title or toolbar props. When using the
+   * children prop, you should pass your own Compass panel.
+   */
+  compassPanelProps?: Omit<CompassPanelProps, 'children'>;
 }
 
 export const CompassMainHeader: React.FunctionComponent<CompassMainHeaderProps> = ({
@@ -19,15 +29,16 @@ export const CompassMainHeader: React.FunctionComponent<CompassMainHeaderProps>
   title,
   toolbar,
   children,
+  compassPanelProps,
   ...props
-}) => {
+}: CompassMainHeaderProps) => {
   const _content =
     title !== undefined || toolbar !== undefined ? (
-      <CompassPanel>
-        <Flex alignItems={{ default: 'alignItemsCenter' }}>
-          <FlexItem grow={{ default: 'grow' }}>{title}</FlexItem>
-          {toolbar && <FlexItem>{toolbar}</FlexItem>}
-        </Flex>
+      <CompassPanel {...compassPanelProps}>
+        <CompassMainHeaderContent>
+          {title && <CompassMainHeaderTitle>{title}</CompassMainHeaderTitle>}
+          {toolbar && <CompassMainHeaderToolbar>{toolbar}</CompassMainHeaderToolbar>}
+        </CompassMainHeaderContent>
       </CompassPanel>
     ) : (
       children

package/src/components/Compass/CompassMainHeaderContent.tsx

@@ -0,0 +1,25 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+/** A wrapper component to be passed as custom content for the Compass main header. This should also be wrapped
+ * in a Compass panel component.
+ */
+
+export interface CompassMainHeaderContentProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content of the main header content. */
+  children: React.ReactNode;
+  /** Additional classes added to the main header content. */
+  className?: string;
+}
+
+export const CompassMainHeaderContent: React.FunctionComponent<CompassMainHeaderContentProps> = ({
+  children,
+  className,
+  ...props
+}: CompassMainHeaderContentProps) => (
+  <div className={css(styles.compassMainHeaderContent, className)} {...props}>
+    {children}
+  </div>
+);
+
+CompassMainHeaderContent.displayName = 'CompassMainHeaderContent';

package/src/components/Compass/CompassMainHeaderTitle.tsx

@@ -0,0 +1,25 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+/** A wrapper component for custom title content to be passed into a Compass main header. This should also be wrapped
+ * by a Compass main header content component.
+ */
+
+export interface CompassMainHeaderTitleProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content of the main header title. */
+  children: React.ReactNode;
+  /** Additional classes added to the main header title. */
+  className?: string;
+}
+
+export const CompassMainHeaderTitle: React.FunctionComponent<CompassMainHeaderTitleProps> = ({
+  children,
+  className,
+  ...props
+}: CompassMainHeaderTitleProps) => (
+  <div className={css(`${styles.compass}__main-header-title`, className)} {...props}>
+    {children}
+  </div>
+);
+
+CompassMainHeaderTitle.displayName = 'CompassMainHeaderTitle';

package/src/components/Compass/CompassMainHeaderToolbar.tsx

@@ -0,0 +1,25 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+/** A wrapper component for custom toolbar content to be passed into a Compass main header. This should also be wrapped
+ * by a Compass main header content component.
+ */
+
+export interface CompassMainHeaderToolbarProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content of the main header toolbar. */
+  children: React.ReactNode;
+  /** Additional classes added to the main header toolbar. */
+  className?: string;
+}
+
+export const CompassMainHeaderToolbar: React.FunctionComponent<CompassMainHeaderToolbarProps> = ({
+  children,
+  className,
+  ...props
+}: CompassMainHeaderToolbarProps) => (
+  <div className={css(`${styles.compass}__main-header-toolbar`, className)} {...props}>
+    {children}
+  </div>
+);
+
+CompassMainHeaderToolbar.displayName = 'CompassMainHeaderToolbar';

package/src/components/Compass/CompassMessageBar.tsx

@@ -1,7 +1,7 @@
 import styles from '@patternfly/react-styles/css/components/Compass/compass';
 import { css } from '@patternfly/react-styles';
 
-interface CompassMessageBarProps extends React.HTMLProps<HTMLDivElement> {
+export interface CompassMessageBarProps extends React.HTMLProps<HTMLDivElement> {
   /** Content of the message bar. Typically a @patternfly/chatbot MessageBar component. */
   children?: React.ReactNode;
   /** Additional classes added to the message bar */
@@ -12,7 +12,7 @@ export const CompassMessageBar: React.FunctionComponent<CompassMessageBarProps>
   children,
   className,
   ...props
-}) => (
+}: CompassMessageBarProps) => (
   <div className={css(styles.compassMessageBar, className)} {...props}>
     {children}
   </div>

package/src/components/Compass/CompassNavContent.tsx

@@ -0,0 +1,20 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+export interface CompassNavContentProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content of the nav content wrapper. */
+  children: React.ReactNode;
+  /** Additional classes added to the nav content. */
+  className?: string;
+}
+
+export const CompassNavContent: React.FunctionComponent<CompassNavContentProps> = ({
+  children,
+  className,
+  ...props
+}: CompassNavContentProps) => (
+  <div className={css(styles.compassNavContent, className)} {...props}>
+    {children}
+  </div>
+);
+
+CompassNavContent.displayName = 'CompassNavContent';

package/src/components/Compass/CompassNavHome.tsx

@@ -0,0 +1,77 @@
+import { useRef } from 'react';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+import { Button } from '../Button';
+import { Tooltip } from '../Tooltip';
+
+const CompassHomeIcon = () => (
+  <svg
+    width="1em"
+    height="1em"
+    className="pf-v6-svg"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path
+      d="M8.33268 13.334H11.666"
+      stroke="currentcolor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <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"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <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"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export interface CompassNavHomeProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onClick'> {
+  /** Content to display in the tooltip. Defaults to "Home". */
+  tooltipContent?: React.ReactNode;
+  /** Click handler for the home button. */
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  /** Additional classes added to the nav home wrapper. */
+  className?: string;
+  /** Accessible label for the nav home. */
+  'aria-label'?: string;
+}
+
+export const CompassNavHome: React.FunctionComponent<CompassNavHomeProps> = ({
+  'aria-label': ariaLabel = 'Home',
+  tooltipContent = 'Home',
+  className,
+  onClick,
+  ...props
+}: CompassNavHomeProps) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <div className={css(styles.compassNav + '-home', className)} {...props}>
+      <Tooltip content={tooltipContent} position="left" aria="none" aria-live="off" triggerRef={buttonRef}>
+        <Button
+          isCircle
+          variant="plain"
+          icon={<CompassHomeIcon />}
+          aria-label={ariaLabel}
+          onClick={onClick}
+          ref={buttonRef}
+        />
+      </Tooltip>
+    </div>
+  );
+};
+
+CompassNavHome.displayName = 'CompassNavHome';

package/src/components/Compass/CompassNavMain.tsx

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

package/src/components/Compass/CompassNavSearch.tsx

@@ -0,0 +1,70 @@
+import { useRef } from 'react';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+import { Button } from '../Button';
+import { Tooltip } from '../Tooltip';
+
+const CompassSearchIcon = () => (
+  <svg
+    width="1em"
+    height="1em"
+    className="pf-v6-svg"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path
+      d="M14.166 14.166L17.4993 17.4993"
+      stroke="currentcolor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <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"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export interface CompassNavSearchProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onClick'> {
+  /** Content to display in the tooltip. Defaults to "Search". */
+  tooltipContent?: React.ReactNode;
+  /** Click handler for the search button. */
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  /** Additional classes added to the nav search wrapper. */
+  className?: string;
+  /** Accessible label for the nav search. */
+  'aria-label'?: string;
+}
+
+export const CompassNavSearch: React.FunctionComponent<CompassNavSearchProps> = ({
+  'aria-label': ariaLabel = 'Search',
+  tooltipContent = 'Search',
+  className,
+  onClick,
+  ...props
+}: CompassNavSearchProps) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <div className={css(styles.compassNav + '-search', className)} {...props}>
+      <Tooltip content={tooltipContent} aria="none" aria-live="off" triggerRef={buttonRef}>
+        <Button
+          isCircle
+          variant="plain"
+          icon={<CompassSearchIcon />}
+          aria-label={ariaLabel}
+          onClick={onClick}
+          ref={buttonRef}
+        />
+      </Tooltip>
+    </div>
+  );
+};
+
+CompassNavSearch.displayName = 'CompassNavSearch';

package/src/components/Compass/CompassPanel.tsx

@@ -1,7 +1,7 @@
 import styles from '@patternfly/react-styles/css/components/Compass/compass';
 import { css } from '@patternfly/react-styles';
 
-interface CompassPanelProps extends React.HTMLProps<HTMLDivElement> {
+export interface CompassPanelProps extends React.HTMLProps<HTMLDivElement> {
   /** Content of the panel. */
   children: React.ReactNode;
   /** Additional classes added to the panel. */
@@ -30,7 +30,7 @@ export const CompassPanel: React.FunctionComponent<CompassPanelProps> = ({
   isFullHeight,
   isScrollable,
   ...props
-}) => (
+}: CompassPanelProps) => (
   <div
     className={css(
       styles.compassPanel,