feat(Compass): add isPill to Drawer by default (#12151)

* feat(Compass): add isPill to Drawer by default

* add isPill to CompassContent Drawer

* fix example css

Author: kmcfaul

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

@@ -95,7 +95,7 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
 
   if (hasDrawer) {
     return (
-      <Drawer {...drawerProps}>
+      <Drawer isPill {...drawerProps}>
         <DrawerContent panelContent={drawerContent}>
           <DrawerContentBody>{compassContent}</DrawerContentBody>
         </DrawerContent>

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

@@ -30,7 +30,7 @@ export const CompassContent: React.FunctionComponent<CompassContentProps> = ({
 
   if (hasDrawer) {
     return (
-      <Drawer {...drawerProps}>
+      <Drawer isPill {...drawerProps}>
         <DrawerContent panelContent={drawerContent}>{compassContent}</DrawerContent>
       </Drawer>
     );

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

@@ -47,7 +47,7 @@ exports[`Matches the snapshot with basic layout 1`] = `
 exports[`Matches the snapshot with drawer 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-drawer pf-m-expanded"
+    class="pf-v6-c-drawer pf-m-expanded pf-m-pill"
   >
     <div
       class="pf-v6-c-drawer__main"

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

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot with drawer 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-drawer pf-m-expanded"
+    class="pf-v6-c-drawer pf-m-expanded pf-m-pill"
   >
     <div
       class="pf-v6-c-drawer__main"

packages/react-core/src/components/Compass/examples/compass.css

@@ -1,20 +1,20 @@
-#ws-react-p-compass-basic [class*="pf-v6-c-compass"] {
+#ws-react-a-compass-basic [class*="pf-v6-c-compass"] {
   position: relative;
 }
 
-#ws-react-p-compass-basic [class*="pf-v6-c-compass"]::after {
+#ws-react-a-compass-basic [class*="pf-v6-c-compass"]::after {
   content: "";
   position: absolute;
   inset: 0;
   border: var(--pf-t--global--border--width--regular) dashed var(--pf-t--global--border--color--default);
   pointer-events: none;
 }
 
-#ws-react-p-compass-with-alternate-footer [class*="pf-v6-c-compass"] {
+#ws-react-a-compass-with-alternate-footer [class*="pf-v6-c-compass"] {
   position: relative;
 }
 
-#ws-react-p-compass-with-alternate-footer [class*="pf-v6-c-compass"]:not([class*="footer"])::after {
+#ws-react-a-compass-with-alternate-footer [class*="pf-v6-c-compass"]:not([class*="footer"])::after {
   content: "";
   position: absolute;
   inset: 0;