fix(Compass): wrap in DrawerContentBody when drawer is passed (#12127)

* fix(Compass): wrap in DrawerContentBody when drawer is passed

* update snap

Author: kmcfaul

packages/react-core/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';
 
@@ -96,7 +96,9 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
   if (hasDrawer) {
     return (
       <Drawer {...drawerProps}>
-        <DrawerContent panelContent={drawerContent}>{compassContent}</DrawerContent>
+        <DrawerContent panelContent={drawerContent}>
+          <DrawerContentBody>{compassContent}</DrawerContentBody>
+        </DrawerContent>
       </Drawer>
     );
   }

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

@@ -56,41 +56,45 @@ exports[`Matches the snapshot with drawer 1`] = `
         class="pf-v6-c-drawer__content"
       >
         <div
-          class="pf-v6-c-compass"
+          class="pf-v6-c-drawer__body"
         >
           <div
-            class="pf-v6-c-compass__header pf-m-expanded"
+            class="pf-v6-c-compass"
           >
-            <div>
-              Header
+            <div
+              class="pf-v6-c-compass__header pf-m-expanded"
+            >
+              <div>
+                Header
+              </div>
             </div>
-          </div>
-          <div
-            class="pf-v6-c-compass__sidebar pf-m-start pf-m-expanded"
-          >
-            <div>
-              Sidebar start
+            <div
+              class="pf-v6-c-compass__sidebar pf-m-start pf-m-expanded"
+            >
+              <div>
+                Sidebar start
+              </div>
             </div>
-          </div>
-          <div
-            class="pf-v6-c-compass__main"
-          >
-            <div>
-              Main content
+            <div
+              class="pf-v6-c-compass__main"
+            >
+              <div>
+                Main content
+              </div>
             </div>
-          </div>
-          <div
-            class="pf-v6-c-compass__sidebar pf-m-end pf-m-expanded"
-          >
-            <div>
-              Sidebar end
+            <div
+              class="pf-v6-c-compass__sidebar pf-m-end pf-m-expanded"
+            >
+              <div>
+                Sidebar end
+              </div>
             </div>
-          </div>
-          <div
-            class="pf-v6-c-compass__footer pf-m-expanded"
-          >
-            <div>
-              Footer
+            <div
+              class="pf-v6-c-compass__footer pf-m-expanded"
+            >
+              <div>
+                Footer
+              </div>
             </div>
           </div>
         </div>

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

@@ -3,7 +3,16 @@ id: Compass
 cssPrefix: pf-v6-c-compass
 section: components
 beta: true
-propComponents: ['Compass', 'CompassHeader', 'CompassContent', 'CompassHero', 'CompassMainHeader', 'CompassPanel']
+propComponents:
+  [
+    'Compass',
+    'CompassHeader',
+    'CompassContent',
+    'CompassHero',
+    'CompassMainHeader',
+    'CompassPanel',
+    'CompassMessageBar'
+  ]
 ---
 
 import './compass.css';