@patternfly/react-core 6.4.1-prerelease.9 → 6.5.0-prerelease.2

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.4.1-prerelease.8","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.5.0-prerelease.1","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.4.1-prerelease.8","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.5.0-prerelease.1","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.4.1-prerelease.8","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.5.0-prerelease.1","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.4.1-prerelease.9",
+  "version": "6.5.0-prerelease.2",
   "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.4.0",
-    "@patternfly/react-styles": "^6.4.0",
-    "@patternfly/react-tokens": "^6.4.0",
+    "@patternfly/react-icons": "^6.5.0-prerelease.2",
+    "@patternfly/react-styles": "^6.5.0-prerelease.2",
+    "@patternfly/react-tokens": "^6.5.0-prerelease.2",
     "focus-trap": "7.6.4",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.4.0",
+    "@patternfly/patternfly": "6.5.0-prerelease.12",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "985efafb947f9159883ef65eacb2a9af85d45473"
+  "gitHead": "c7b90a136c135c4cf74a7fc768cc17ee39227a6d"
 }

package/src/components/ActionList/ActionList.tsx

@@ -8,15 +8,26 @@ export interface ActionListProps extends React.HTMLProps<HTMLDivElement> {
   isIconList?: boolean;
   /** Additional classes added to the action list */
   className?: string;
+  /** @beta Whether the layout of children is vertical or horizontal. */
+  isVertical?: boolean;
 }
 
 export const ActionList: React.FunctionComponent<ActionListProps> = ({
   children,
   isIconList,
   className,
+  isVertical = false,
   ...props
 }: ActionListProps) => (
-  <div className={css(styles.actionList, isIconList && styles.modifiers.icons, className)} {...props}>
+  <div
+    className={css(
+      styles.actionList,
+      isIconList && styles.modifiers.icons,
+      isVertical && styles.modifiers.vertical,
+      className
+    )}
+    {...props}
+  >
     {children}
   </div>
 );

package/src/components/ActionList/__tests__/ActionList.test.tsx

@@ -37,6 +37,18 @@ test(`Renders with class ${styles.modifiers.icons} when isIconList is true`, ()
   expect(screen.getByText('Test')).toHaveClass(styles.modifiers.icons);
 });
 
+test(`Does not render with class ${styles.modifiers.vertical} by default`, () => {
+  render(<ActionList>Test</ActionList>);
+
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.vertical);
+});
+
+test(`Renders with class ${styles.modifiers.vertical} when isVertical is true`, () => {
+  render(<ActionList isVertical={true}>Test</ActionList>);
+
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.vertical);
+});
+
 test('Renders with inherited element props spread to the component', () => {
   render(<ActionList aria-label="Test label">Test</ActionList>);
 

package/src/components/ActionList/examples/ActionList.md

@@ -35,3 +35,9 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 ```ts file="./ActionListWithCancelButton.tsx"
 
 ```
+
+### Vertical action list
+
+```ts file="./ActionListVertical.tsx" isBeta
+
+```

package/src/components/ActionList/examples/ActionListVertical.tsx

@@ -0,0 +1,46 @@
+import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+
+export const ActionListVertical: React.FunctionComponent = () => (
+  <>
+    <h4>Multiple groups</h4>
+    <ActionList isVertical>
+      <ActionListGroup>
+        <ActionListItem>
+          <Button>Next</Button>
+        </ActionListItem>
+        <ActionListItem>
+          <Button variant="secondary">Back</Button>
+        </ActionListItem>
+      </ActionListGroup>
+      <ActionListGroup>
+        <ActionListItem>
+          <Button>Submit</Button>
+        </ActionListItem>
+        <ActionListItem>
+          <Button variant="link">Cancel</Button>
+        </ActionListItem>
+      </ActionListGroup>
+    </ActionList>
+    <h4>Icons, in two groups</h4>
+    <ActionList isVertical>
+      <ActionListGroup>
+        <ActionListItem>
+          <Button aria-label="Close vertical action list group 1" variant="plain" icon={<TimesIcon />} />
+        </ActionListItem>
+        <ActionListItem>
+          <Button aria-label="Toggle vertical action list example group 1" variant="plain" icon={<CheckIcon />} />
+        </ActionListItem>
+      </ActionListGroup>
+      <ActionListGroup>
+        <ActionListItem>
+          <Button aria-label="Close vertical action list group 2" variant="plain" icon={<TimesIcon />} />
+        </ActionListItem>
+        <ActionListItem>
+          <Button aria-label="Toggle vertical action list example group 2" variant="plain" icon={<CheckIcon />} />
+        </ActionListItem>
+      </ActionListGroup>
+    </ActionList>
+  </>
+);

package/src/components/Button/Button.tsx

@@ -107,6 +107,8 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   isHamburger?: boolean;
   /** Adjusts and animates the hamburger icon to indicate what will happen upon clicking the button. */
   hamburgerVariant?: 'expand' | 'collapse';
+  /** @beta Flag indicating the button is a circle button. Intended for buttons that only contain an icon.. */
+  isCircle?: boolean;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Adds count number to button */
@@ -131,6 +133,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   isSettings,
   isHamburger,
   hamburgerVariant,
+  isCircle,
   spinnerAriaValueText,
   spinnerAriaLabelledBy,
   spinnerAriaLabel,
@@ -261,6 +264,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
         variant === ButtonVariant.stateful && styles.modifiers[state],
         size === ButtonSize.sm && styles.modifiers.small,
         size === ButtonSize.lg && styles.modifiers.displayLg,
+        isCircle && styles.modifiers.circle,
         className
       )}
       disabled={isButtonElement ? isDisabled : null}

package/src/components/Button/__tests__/Button.test.tsx

@@ -214,6 +214,11 @@ test(`Renders without class ${styles.modifiers.progress} when isLoading = false
   expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.progress);
 });
 
+test(`Renders with class ${styles.modifiers.circle} when isCircle is true`, () => {
+  render(<Button isCircle>Circle Button</Button>);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.circle);
+});
+
 test(`Renders custom icon with class ${styles.modifiers.inProgress} when isLoading = true and icon is present`, () => {
   render(
     <Button variant="plain" isLoading aria-label="Upload" spinnerAriaValueText="Loading" icon={<div>ICON</div>} />

package/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Renders basic button 1`] = `
   <button
     aria-label="basic button"
     class="pf-v6-c-button pf-m-primary"
-    data-ouia-component-id="OUIA-Generated-Button-primary-66"
+    data-ouia-component-id="OUIA-Generated-Button-primary-67"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"

package/src/components/Button/examples/Button.md

@@ -138,6 +138,14 @@ Stateful buttons are ideal for displaying the state of notifications. Use `varia
 
 ```
 
+### Circle buttons
+
+Pass `isCircle` to a button to modify its styling from simply rounded corners to complete circles. Circle buttons are intended for buttons that only contain an icon and adequate accessible naming.
+
+```ts file="./ButtonCircle.tsx"
+
+```
+
 ## Animated examples
 
 The following `<Button>` implementations have animations built into them. When using one of the following implementations, the `icon` property will be overridden due to the animations needing specific icons internally.

package/src/components/Button/examples/ButtonCircle.tsx

@@ -0,0 +1,63 @@
+import { Button, Flex } from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
+
+interface LoadingPropsType {
+  spinnerAriaValueText: string;
+  spinnerAriaLabelledBy?: string;
+  spinnerAriaLabel?: string;
+  isLoading: boolean;
+}
+
+export const ButtonCircle: React.FunctionComponent = () => {
+  const [isUploading, setIsUploading] = useState<boolean>(false);
+
+  const uploadingProps = {} as LoadingPropsType;
+  uploadingProps.spinnerAriaValueText = 'Loading circle variant example';
+  uploadingProps.spinnerAriaLabel = 'Uploading circle variant example data';
+  uploadingProps.isLoading = isUploading;
+
+  return (
+    <Flex columnGap={{ default: 'columnGapSm' }}>
+      <Button isCircle icon={<PlusCircleIcon />} aria-label="Add primary circle variant example" />
+      <Button
+        variant="secondary"
+        isCircle
+        icon={<PlusCircleIcon />}
+        aria-label="Add secondary circle variant example"
+      />
+      <Button variant="tertiary" isCircle icon={<PlusCircleIcon />} aria-label="Add tertiary circle variant example" />
+      <Button variant="danger" isCircle icon={<PlusCircleIcon />} aria-label="Add danger circle variant example" />
+      <Button variant="warning" isCircle icon={<PlusCircleIcon />} aria-label="Add warning circle variant example" />
+      <Button variant="link" isCircle icon={<PlusCircleIcon />} aria-label="Add link circle variant example" />
+      <Button variant="control" isCircle icon={<CopyIcon />} aria-label="Copy control circle variant example" />
+      <Button variant="plain" isCircle icon={<TimesIcon />} aria-label="Remove plain circle variant example" />
+      <Button variant="stateful" isCircle icon={<BellIcon />} aria-label="Stateful unread circle variant example" />
+      <Button
+        variant="stateful"
+        state="read"
+        isCircle
+        icon={<BellIcon />}
+        aria-label="Stateful read circle variant example"
+      />
+      <Button
+        variant="stateful"
+        state="attention"
+        isCircle
+        icon={<BellIcon />}
+        aria-label="Stateful attention circle variant example"
+      />
+      <Button
+        variant="plain"
+        isCircle
+        {...(!isUploading && { 'aria-label': 'Upload circle variant example' })}
+        onClick={() => setIsUploading(!isUploading)}
+        icon={<UploadIcon />}
+        {...uploadingProps}
+      />
+    </Flex>
+  );
+};

package/src/components/Compass/Compass.tsx

@@ -0,0 +1,107 @@
+import { Drawer, DrawerContent, DrawerProps } from '../Drawer';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+import compassBackgroundImageLight from '@patternfly/react-tokens/dist/esm/c_compass_BackgroundImage_light';
+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. */
+  className?: string;
+  /** Content placed at the top of the layout */
+  header?: React.ReactNode;
+  /** Flag indicating if the header is expanded */
+  isHeaderExpanded?: boolean;
+  /** Content placed at the horizontal start of the layout, before the main content */
+  sidebarStart?: React.ReactNode;
+  /** Flag indicating if the start sidebar is expanded */
+  isSidebarStartExpanded?: boolean;
+  /** Content placed at the center of the layout */
+  main?: React.ReactNode;
+  /** Content placed at the horizontal end of the layout, after the main content */
+  sidebarEnd?: React.ReactNode;
+  /** Flag indicating if the end sidebar is expanded */
+  isSidebarEndExpanded?: boolean;
+  /** Content placed at the bottom of the layout */
+  footer?: React.ReactNode;
+  /** Flag indicating if the footer is expanded */
+  isFooterExpanded?: boolean;
+  /** Content rendered in an optional drawer wrapping the layout */
+  drawerContent?: React.ReactNode;
+  /** Additional props passed to the drawer */
+  drawerProps?: DrawerProps;
+  /** Light theme background image path of the compass */
+  backgroundSrcLight?: string;
+  /** Dark theme background image path of the compass */
+  backgroundSrcDark?: string;
+}
+
+export const Compass: React.FunctionComponent<CompassProps> = ({
+  className,
+  header,
+  isHeaderExpanded = true,
+  sidebarStart,
+  isSidebarStartExpanded = true,
+  main,
+  sidebarEnd,
+  isSidebarEndExpanded = true,
+  footer,
+  isFooterExpanded = true,
+  drawerContent,
+  drawerProps,
+  backgroundSrcLight,
+  backgroundSrcDark,
+  ...props
+}) => {
+  const hasDrawer = drawerContent !== undefined;
+
+  const backgroundImageStyles: { [key: string]: string } = {};
+  if (backgroundSrcLight) {
+    backgroundImageStyles[compassBackgroundImageLight.name] = `url(${backgroundSrcLight})`;
+  }
+  if (backgroundSrcDark) {
+    backgroundImageStyles[compassBackgroundImageDark.name] = `url(${backgroundSrcDark})`;
+  }
+
+  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>
+  );
+
+  if (hasDrawer) {
+    return (
+      <Drawer {...drawerProps}>
+        <DrawerContent panelContent={drawerContent}>{compassContent}</DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return compassContent;
+};
+
+Compass.displayName = 'Compass';

package/src/components/Compass/CompassContent.tsx

@@ -0,0 +1,42 @@
+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. */
+  children: React.ReactNode;
+  /** Additional classes added to the CompassContent */
+  className?: string;
+  /** Content rendered in an optional drawer wrapping the CompassContent */
+  drawerContent?: React.ReactNode;
+  /** Additional props passed to the drawer */
+  drawerProps?: DrawerProps;
+}
+
+export const CompassContent: React.FunctionComponent<CompassContentProps> = ({
+  children,
+  className,
+  drawerProps,
+  drawerContent,
+  ...props
+}) => {
+  const hasDrawer = drawerContent !== undefined;
+
+  const compassContent = (
+    <div className={css(styles.compassContent, className)} {...props}>
+      {children}
+    </div>
+  );
+
+  if (hasDrawer) {
+    return (
+      <Drawer {...drawerProps}>
+        <DrawerContent panelContent={drawerContent}>{compassContent}</DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return compassContent;
+};
+
+CompassContent.displayName = 'CompassContent';

package/src/components/Compass/CompassHeader.tsx

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

package/src/components/Compass/CompassHero.tsx

@@ -0,0 +1,87 @@
+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'> {
+  /** 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>
+  );
+};
+
+CompassHero.displayName = 'CompassHero';

package/src/components/Compass/CompassMainHeader.tsx

@@ -0,0 +1,43 @@
+import { Flex, FlexItem } from '../../layouts/Flex';
+import { CompassPanel } from './CompassPanel';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+interface CompassMainHeaderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
+  /** 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;
+}
+
+export const CompassMainHeader: React.FunctionComponent<CompassMainHeaderProps> = ({
+  className,
+  title,
+  toolbar,
+  children,
+  ...props
+}) => {
+  const _content =
+    title !== undefined || toolbar !== undefined ? (
+      <CompassPanel>
+        <Flex alignItems={{ default: 'alignItemsCenter' }}>
+          <FlexItem grow={{ default: 'grow' }}>{title}</FlexItem>
+          {toolbar && <FlexItem>{toolbar}</FlexItem>}
+        </Flex>
+      </CompassPanel>
+    ) : (
+      children
+    );
+
+  return (
+    <div className={css(`${styles.compass}__main-header`, className)} {...props}>
+      {_content}
+    </div>
+  );
+};
+
+CompassMainHeader.displayName = 'CompassMainHeader';

package/src/components/Compass/CompassMessageBar.tsx

@@ -0,0 +1,21 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+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 */
+  className?: string;
+}
+
+export const CompassMessageBar: React.FunctionComponent<CompassMessageBarProps> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <div className={css(styles.compassMessageBar, className)} {...props}>
+    {children}
+  </div>
+);
+
+CompassMessageBar.displayName = 'CompassMessageBar';

package/src/components/Compass/CompassPanel.tsx

@@ -0,0 +1,51 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+interface CompassPanelProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content of the panel. */
+  children: React.ReactNode;
+  /** Additional classes added to the panel. */
+  className?: string;
+  /** Indicates the panel should have a pill border radius */
+  isPill?: boolean;
+  /** Indicates the panel should expand to fill the available height */
+  isFullHeight?: boolean;
+  /** Indicates the panel should scroll its overflow */
+  isScrollable?: boolean;
+  /** Indicates the panel should have no border */
+  hasNoBorder?: boolean;
+  /** Indicates the panel should have no padding */
+  hasNoPadding?: boolean;
+  /** Indicates the panel should have a "thinking" animation */
+  isThinking?: boolean;
+}
+
+export const CompassPanel: React.FunctionComponent<CompassPanelProps> = ({
+  children,
+  className,
+  isPill,
+  hasNoBorder,
+  hasNoPadding,
+  isThinking,
+  isFullHeight,
+  isScrollable,
+  ...props
+}) => (
+  <div
+    className={css(
+      styles.compassPanel,
+      isPill && styles.modifiers.pill,
+      hasNoBorder && styles.modifiers.noBorder,
+      hasNoPadding && styles.modifiers.noPadding,
+      isThinking && 'pf-v6-m-thinking',
+      isFullHeight && styles.modifiers.fullHeight,
+      isScrollable && styles.modifiers.scrollable,
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+CompassPanel.displayName = 'CompassPanel';