feat(Panel, CompassPanel): Removed CompassPanel component. Updated Panel component for use in with compass

packages/react-core/package.json

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

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

@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Compass/compass';
 import { css } from '@patternfly/react-styles';
 
 export interface CompassContentProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content of the main Compass area. Typically one or more CompassPanel components. */
+  /** Content of the main Compass area. Typically one or more `Panel` components. */
   children: React.ReactNode;
   /** Additional classes added to the CompassContent */
   className?: string;

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

@@ -1,12 +1,12 @@
-import { CompassPanel, CompassPanelProps } from './CompassPanel';
 import { CompassMainHeaderContent } from './CompassMainHeaderContent';
 import { CompassMainHeaderTitle } from './CompassMainHeaderTitle';
 import { CompassMainHeaderToolbar } from './CompassMainHeaderToolbar';
+import { Panel, PanelMain, PanelMainBody, PanelProps } from '../Panel';
 import styles from '@patternfly/react-styles/css/components/Compass/compass';
 import { css } from '@patternfly/react-styles';
 
 /** 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.
+ * you should ensure any content within the main header is rendered inside a Panel, PanelMain, PanelMainBody stack and main header content wrappers.
  */
 
 export interface CompassMainHeaderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
@@ -18,10 +18,10 @@ export interface CompassMainHeaderProps extends Omit<React.HTMLProps<HTMLDivElem
   title?: React.ReactNode;
   /** Styled toolbar. If title or toolbar is provided, the children will be ignored. */
   toolbar?: 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.
+  /** Additional props passed to the Panel that wraps the main header content when using the title or toolbar props. When using the
+   * children prop, you should pass your own Panel.
    */
-  compassPanelProps?: Omit<CompassPanelProps, 'children'>;
+  compassPanelProps?: Omit<PanelProps, 'children'>;
 }
 
 export const CompassMainHeader: React.FunctionComponent<CompassMainHeaderProps> = ({
@@ -34,12 +34,16 @@ export const CompassMainHeader: React.FunctionComponent<CompassMainHeaderProps>
 }: CompassMainHeaderProps) => {
   const _content =
     title !== undefined || toolbar !== undefined ? (
-      <CompassPanel {...compassPanelProps}>
-        <CompassMainHeaderContent>
-          {title && <CompassMainHeaderTitle>{title}</CompassMainHeaderTitle>}
-          {toolbar && <CompassMainHeaderToolbar>{toolbar}</CompassMainHeaderToolbar>}
-        </CompassMainHeaderContent>
-      </CompassPanel>
+      <Panel {...compassPanelProps}>
+        <PanelMain>
+          <PanelMainBody>
+            <CompassMainHeaderContent>
+              {title && <CompassMainHeaderTitle>{title}</CompassMainHeaderTitle>}
+              {toolbar && <CompassMainHeaderToolbar>{toolbar}</CompassMainHeaderToolbar>}
+            </CompassMainHeaderContent>
+          </PanelMainBody>
+        </PanelMain>
+      </Panel>
     ) : (
       children
     );

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

@@ -2,7 +2,7 @@ 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.
+ * in a `Panel` with `PanelMain` and `PanelMainBody`.
  */
 
 export interface CompassMainHeaderContentProps extends React.HTMLProps<HTMLDivElement> {

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

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { CompassMainHeader } from '../CompassMainHeader';
 import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import panelStyles from '@patternfly/react-styles/css/components/Panel/panel';
 
 test('Renders without children', () => {
   render(
@@ -74,32 +75,32 @@ test('Renders children when neither title nor toolbar are provided', () => {
   expect(screen.getByText('Custom children content')).toBeVisible();
 });
 
-test('Renders CompassPanel when title is passed', () => {
+test('Renders Panel when title is passed', () => {
   render(<CompassMainHeader data-testid="test-id" title="Title text" />);
 
   const panel = screen.getByTestId('test-id').firstChild;
-  expect(panel).toHaveClass(styles.compassPanel);
+  expect(panel).toHaveClass(panelStyles.panel);
 });
 
-test('Renders CompassPanel when toolbar is passed', () => {
+test('Renders Panel when toolbar is passed', () => {
   render(<CompassMainHeader data-testid="test-id" toolbar="Toolbar text" />);
 
   const panel = screen.getByTestId('test-id').firstChild;
-  expect(panel).toHaveClass(styles.compassPanel);
+  expect(panel).toHaveClass(panelStyles.panel);
 });
 
-test('Does not render CompassPanel when children are passed', () => {
+test('Does not render Panel when children are passed', () => {
   render(
     <CompassMainHeader data-testid="test-id">
       <div>Children content</div>
     </CompassMainHeader>
   );
 
   const content = screen.getByTestId('test-id').firstChild;
-  expect(content).not.toHaveClass(styles.compassPanel);
+  expect(content).not.toHaveClass(panelStyles.panel);
 });
 
-test('Passes props to CompassPanel when title and compassPanelProps is passed', () => {
+test('Passes props to Panel when title and compassPanelProps is passed', () => {
   render(
     <CompassMainHeader data-testid="test-id" compassPanelProps={{ className: 'panel-class' }} title="Title text" />
   );
@@ -108,7 +109,7 @@ test('Passes props to CompassPanel when title and compassPanelProps is passed',
   expect(panel).toHaveClass('panel-class');
 });
 
-test('Passes props to CompassPanel when toolbar and compassPanelProps is passed', () => {
+test('Passes props to Panel when toolbar and compassPanelProps is passed', () => {
   render(
     <CompassMainHeader data-testid="test-id" compassPanelProps={{ className: 'panel-class' }} toolbar="Toolbar text" />
   );

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

@@ -6,23 +6,31 @@ exports[`Matches the snapshot with both title and toolbar 1`] = `
     class="pf-v6-c-compass__main-header"
   >
     <div
-      class="pf-v6-c-compass__panel"
+      class="pf-v6-c-panel"
     >
       <div
-        class="pf-v6-c-compass__main-header-content"
+        class="pf-v6-c-panel__main"
       >
         <div
-          class="pf-v6-c-compass__main-header-title"
+          class="pf-v6-c-panel__main-body"
         >
-          <div>
-            Title
-          </div>
-        </div>
-        <div
-          class="pf-v6-c-compass__main-header-toolbar"
-        >
-          <div>
-            Toolbar
+          <div
+            class="pf-v6-c-compass__main-header-content"
+          >
+            <div
+              class="pf-v6-c-compass__main-header-title"
+            >
+              <div>
+                Title
+              </div>
+            </div>
+            <div
+              class="pf-v6-c-compass__main-header-toolbar"
+            >
+              <div>
+                Toolbar
+              </div>
+            </div>
           </div>
         </div>
       </div>

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

@@ -11,7 +11,6 @@ propComponents:
     'CompassContent',
     'CompassHero',
     'CompassMainHeader',
-    'CompassPanel',
     'CompassMessageBar',
     'CompassMainFooter'
   ]
@@ -33,7 +32,7 @@ In a basic Compass layout, content can be passed to the following props to popul
 
 - `header`: Content rendered at the top of the page, typically including a `<CompassHeader>` component that divides the header into 3 areas, with a logo or brand, middle navigation, and profile.
 - `sidebarStart`: Content rendered at the horizontal start of the page (by default, the left side).
-- `main`: Content rendered in the center of the page, typically including a `<CompassMainHeader>` or `<CompassHero>`, along with a `<CompassContent>` filled with 1 or more `<CompassPanel>` components.
+- `main`: Content rendered in the center of the page, typically including a `<CompassMainHeader>` or `<CompassHero>`, along with a `<CompassContent>` filled with 1 or more `<Panel>` components.
 - `sidebarEnd`: Content rendered at the horizontal end of the page (by default, the right side).
 - `footer`: Content rendered at the bottom of the page.
 
@@ -67,10 +66,14 @@ When using the `children` property in the `<CompassMainHeader>` component, there
 
 ```noLive
 <CompassMainHeader>
-  <CompassPanel>
-    <CompassMainHeaderContent>
-      {Your custom content goes here, which can include the <CompassMainHeaderTitle> and/or <CompassMainHeaderToolbar> sub-components}
-    </CompassMainHeaderContent>
-  </CompassPanel>
+  <Panel>
+    <PanelMain>
+      <PanelMainBody>
+        <CompassMainHeaderContent>
+          {Your custom content goes here, which can include the <CompassMainHeaderTitle> and/or <CompassMainHeaderToolbar> sub-components}
+        </CompassMainHeaderContent>
+      </PanelMainBody>
+    </PanelMain>
+  </Panel>
 </CompassMainHeader>
 ```