@patternfly/react-core 6.5.0-prerelease.59 → 6.5.0-prerelease.60

package/src/components/Panel/examples/PanelScrollableWithAutoHeight.tsx

@@ -0,0 +1,37 @@
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+export const PanelScrollableWithAutoHeight: React.FunctionComponent = () => (
+  <div style={{ height: '200px' }}>
+    <Panel isScrollable isAutoHeight>
+      <PanelMain tabIndex={0}>
+        <PanelMainBody>
+          Main content
+          <br />
+          <br />
+          Main content
+          <br />
+          <br />
+          Main content
+          <br />
+          <br />
+          Main content
+          <br />
+          <br />
+          Main content
+          <br />
+          <br />
+          Main content
+          <br />
+          <br />
+          Main content
+          <br />
+          <br />
+          Main content
+          <br />
+          <br />
+          Main content
+        </PanelMainBody>
+      </PanelMain>
+    </Panel>
+  </div>
+);

package/src/demos/Compass/examples/CompassDemo.tsx

@@ -7,7 +7,9 @@ import {
   CompassHero,
   CompassContent,
   CompassMainHeader,
-  CompassPanel,
+  Panel,
+  PanelMain,
+  PanelMainBody,
   CompassMessageBar,
   CompassNavContent,
   CompassNavHome,
@@ -38,96 +40,108 @@ export const CompassBasic: React.FunctionComponent = () => {
 
   const navContent = (
     <>
-      <CompassPanel isPill>
-        <CompassNavContent>
-          <CompassNavHome onClick={() => console.log('Home')} />
-          <CompassNavMain>
-            <Tabs
-              activeKey={activeTab}
-              isNav
-              onSelect={(_event, tabIndex) => setActiveTab(tabIndex as number)}
-              component={TabsComponent.nav}
-              aria-label="Compass navigation tabs"
-            >
-              <Tab
-                tabContentId="subtabs"
-                tabContentRef={subTabsRef}
-                eventKey={0}
-                title={<TabTitleText>Tab 1</TabTitleText>}
-                aria-label="Compass tab with subtabs"
-              />
-              <Tab eventKey={1} title={<TabTitleText>Tab 2</TabTitleText>} />
-              <Tab eventKey={2} title={<TabTitleText>Tab 3</TabTitleText>} />
-              <Tab eventKey={3} title={<TabTitleText>Disabled Tab 4</TabTitleText>} isDisabled />
-            </Tabs>
-          </CompassNavMain>
-          <CompassNavSearch onClick={() => console.log('Search')} />
-        </CompassNavContent>
-      </CompassPanel>
-      <CompassPanel isPill hasNoPadding>
-        <TabContent id="subtabs" ref={subTabsRef}>
-          <CompassNavContent>
-            <CompassNavMain>
-              <Tabs
-                activeKey={activeSubtab}
-                isSubtab
-                isNav
-                onSelect={(_event, tabIndex) => setActiveSubtab(tabIndex as number)}
-                aria-label="Compass navigation subtabs"
-              >
-                <Tab
-                  tabContentId="subtab-1"
-                  eventKey={0}
-                  title={
-                    <TabTitleText>
-                      <div id="subtab-1">Subtab 1</div>
-                    </TabTitleText>
-                  }
-                />
-                <Tab eventKey={1} title={<TabTitleText>Subtab 2</TabTitleText>} />
-                <Tab eventKey={2} title={<TabTitleText>Disabled Subtab 3</TabTitleText>} isDisabled />
-              </Tabs>
-            </CompassNavMain>
-          </CompassNavContent>
-        </TabContent>
-      </CompassPanel>
+      <Panel isPill>
+        <PanelMain>
+          <PanelMainBody>
+            <CompassNavContent>
+              <CompassNavHome onClick={() => console.log('Home')} />
+              <CompassNavMain>
+                <Tabs
+                  activeKey={activeTab}
+                  isNav
+                  onSelect={(_event, tabIndex) => setActiveTab(tabIndex as number)}
+                  component={TabsComponent.nav}
+                  aria-label="Compass navigation tabs"
+                >
+                  <Tab
+                    tabContentId="subtabs"
+                    tabContentRef={subTabsRef}
+                    eventKey={0}
+                    title={<TabTitleText>Tab 1</TabTitleText>}
+                    aria-label="Compass tab with subtabs"
+                  />
+                  <Tab eventKey={1} title={<TabTitleText>Tab 2</TabTitleText>} />
+                  <Tab eventKey={2} title={<TabTitleText>Tab 3</TabTitleText>} />
+                  <Tab eventKey={3} title={<TabTitleText>Disabled Tab 4</TabTitleText>} isDisabled />
+                </Tabs>
+              </CompassNavMain>
+              <CompassNavSearch onClick={() => console.log('Search')} />
+            </CompassNavContent>
+          </PanelMainBody>
+        </PanelMain>
+      </Panel>
+      <Panel isPill>
+        <PanelMain>
+          <PanelMainBody style={{ padding: 0 }}>
+            <TabContent id="subtabs" ref={subTabsRef}>
+              <CompassNavContent>
+                <CompassNavMain>
+                  <Tabs
+                    activeKey={activeSubtab}
+                    isSubtab
+                    isNav
+                    onSelect={(_event, tabIndex) => setActiveSubtab(tabIndex as number)}
+                    aria-label="Compass navigation subtabs"
+                  >
+                    <Tab
+                      tabContentId="subtab-1"
+                      eventKey={0}
+                      title={
+                        <TabTitleText>
+                          <div id="subtab-1">Subtab 1</div>
+                        </TabTitleText>
+                      }
+                    />
+                    <Tab eventKey={1} title={<TabTitleText>Subtab 2</TabTitleText>} />
+                    <Tab eventKey={2} title={<TabTitleText>Disabled Subtab 3</TabTitleText>} isDisabled />
+                  </Tabs>
+                </CompassNavMain>
+              </CompassNavContent>
+            </TabContent>
+          </PanelMainBody>
+        </PanelMain>
+      </Panel>
     </>
   );
 
   const sidebarContent = (
-    <CompassPanel isPill>
-      <ActionList isIconList isVertical>
-        <ActionListGroup>
-          <ActionListItem>
-            <Tooltip content="Play">
-              <Button isCircle variant="plain" icon={<PlayIcon />} aria-label="Play" />
-            </Tooltip>
-          </ActionListItem>
-          <ActionListItem>
-            <Tooltip content="Add">
-              <Button isCircle variant="plain" icon={<OutlinedPlusSquare />} aria-label="Add" />
-            </Tooltip>
-          </ActionListItem>
-        </ActionListGroup>
-        <ActionListItem>
-          <Tooltip content="Copy">
-            <Button isCircle variant="plain" icon={<OutlinedCopy />} aria-label="Copy" />
-          </Tooltip>
-        </ActionListItem>
-        <ActionListGroup>
-          <ActionListItem>
-            <Tooltip content="Help">
-              <Button isCircle variant="plain" icon={<OutlinedQuestionCircleIcon />} aria-label="Help" />
-            </Tooltip>
-          </ActionListItem>
-          <ActionListItem>
-            <Tooltip content="Second copy">
-              <Button isCircle variant="plain" icon={<OutlinedCopy />} aria-label="Copy2" />
-            </Tooltip>
-          </ActionListItem>
-        </ActionListGroup>
-      </ActionList>
-    </CompassPanel>
+    <Panel isPill>
+      <PanelMain>
+        <PanelMainBody>
+          <ActionList isIconList isVertical>
+            <ActionListGroup>
+              <ActionListItem>
+                <Tooltip content="Play">
+                  <Button isCircle variant="plain" icon={<PlayIcon />} aria-label="Play" />
+                </Tooltip>
+              </ActionListItem>
+              <ActionListItem>
+                <Tooltip content="Add">
+                  <Button isCircle variant="plain" icon={<OutlinedPlusSquare />} aria-label="Add" />
+                </Tooltip>
+              </ActionListItem>
+            </ActionListGroup>
+            <ActionListItem>
+              <Tooltip content="Copy">
+                <Button isCircle variant="plain" icon={<OutlinedCopy />} aria-label="Copy" />
+              </Tooltip>
+            </ActionListItem>
+            <ActionListGroup>
+              <ActionListItem>
+                <Tooltip content="Help">
+                  <Button isCircle variant="plain" icon={<OutlinedQuestionCircleIcon />} aria-label="Help" />
+                </Tooltip>
+              </ActionListItem>
+              <ActionListItem>
+                <Tooltip content="Second copy">
+                  <Button isCircle variant="plain" icon={<OutlinedCopy />} aria-label="Copy2" />
+                </Tooltip>
+              </ActionListItem>
+            </ActionListGroup>
+          </ActionList>
+        </PanelMainBody>
+      </PanelMain>
+    </Panel>
   );
 
   const headerContent = <CompassHeader logo={<div>logo</div>} nav={navContent} profile={<div>Profile</div>} />;
@@ -139,16 +153,22 @@ export const CompassBasic: React.FunctionComponent = () => {
       </CompassHero>
       <CompassMainHeader title={<Title headingLevel="h1">Content title</Title>} />
       <CompassContent>
-        <CompassPanel>Content</CompassPanel>
+        <Panel>
+          <PanelMain>
+            <PanelMainBody>Content</PanelMainBody>
+          </PanelMain>
+        </Panel>
       </CompassContent>
     </>
   );
   const sidebarEndContent = sidebarContent;
   const footerContent = (
     <CompassMessageBar>
-      <CompassPanel isPill hasNoPadding>
-        Message bar
-      </CompassPanel>
+      <Panel isPill>
+        <PanelMain>
+          <PanelMainBody style={{ padding: 0 }}>Message bar</PanelMainBody>
+        </PanelMain>
+      </Panel>
     </CompassMessageBar>
   );
 

package/src/demos/Compass/examples/CompassDockDemo.tsx

@@ -3,7 +3,9 @@ import {
   Compass,
   CompassContent,
   CompassMainHeader,
-  CompassPanel,
+  Panel,
+  PanelMain,
+  PanelMainBody,
   Title,
   NavItem,
   NavList,
@@ -199,7 +201,11 @@ export const CompassDockDemo: React.FunctionComponent = () => {
     <>
       <CompassMainHeader title={<Title headingLevel="h1">Content title</Title>} />
       <CompassContent>
-        <CompassPanel>Content</CompassPanel>
+        <Panel>
+          <PanelMain>
+            <PanelMainBody>Content</PanelMainBody>
+          </PanelMain>
+        </Panel>
       </CompassContent>
     </>
   );

package/dist/esm/components/Compass/CompassPanel.d.ts

@@ -1,21 +0,0 @@
-/// <reference types="react" />
-export 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 declare const CompassPanel: React.FunctionComponent<CompassPanelProps>;
-//# sourceMappingURL=CompassPanel.d.ts.map

package/dist/esm/components/Compass/CompassPanel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CompassPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/Compass/CompassPanel.tsx"],"names":[],"mappings":";AAGA,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IACxE,4BAA4B;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qEAAqE;IACrE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qDAAqD;IACrD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iDAAiD;IACjD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6DAA6D;IAC7D,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CA0BnE,CAAC"}

package/dist/esm/components/Compass/CompassPanel.js

@@ -1,10 +0,0 @@
-import { __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import styles from '@patternfly/react-styles/css/components/Compass/compass.mjs';
-import { css } from '@patternfly/react-styles';
-export const CompassPanel = (_a) => {
-    var { children, className, isPill, hasNoBorder, hasNoPadding, isThinking, isFullHeight, isScrollable } = _a, props = __rest(_a, ["children", "className", "isPill", "hasNoBorder", "hasNoPadding", "isThinking", "isFullHeight", "isScrollable"]);
-    return (_jsx("div", Object.assign({ 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: children })));
-};
-CompassPanel.displayName = 'CompassPanel';
-//# sourceMappingURL=CompassPanel.js.map

package/dist/esm/components/Compass/CompassPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CompassPanel.js","sourceRoot":"","sources":["../../../../src/components/Compass/CompassPanel.tsx"],"names":[],"mappings":";;AAAA,OAAO,MAAM,oEAAgE;AAC7E,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAqB/C,MAAM,CAAC,MAAM,YAAY,GAA+C,CAAC,EAUrD,EAAE,EAAE;QAViD,EACvE,QAAQ,EACR,SAAS,EACT,MAAM,EACN,WAAW,EACX,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,YAAY,OAEM,EADf,KAAK,cAT+D,gHAUxE,CADS;IACe,OAAA,CACvB,4BACE,SAAS,EAAE,GAAG,CACZ,MAAM,CAAC,YAAY,EACnB,MAAM,IAAI,MAAM,CAAC,SAAS,CAAC,IAAI,EAC/B,WAAW,IAAI,MAAM,CAAC,SAAS,CAAC,QAAQ,EACxC,YAAY,IAAI,MAAM,CAAC,SAAS,CAAC,SAAS,EAC1C,UAAU,IAAI,kBAAkB,EAChC,YAAY,IAAI,MAAM,CAAC,SAAS,CAAC,UAAU,EAC3C,YAAY,IAAI,MAAM,CAAC,SAAS,CAAC,UAAU,EAC3C,SAAS,CACV,IACG,KAAK,cAER,QAAQ,IACL,CACP,CAAA;CAAA,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC"}

package/dist/js/components/Compass/CompassPanel.d.ts

@@ -1,21 +0,0 @@
-/// <reference types="react" />
-export 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 declare const CompassPanel: React.FunctionComponent<CompassPanelProps>;
-//# sourceMappingURL=CompassPanel.d.ts.map

package/dist/js/components/Compass/CompassPanel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CompassPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/Compass/CompassPanel.tsx"],"names":[],"mappings":";AAGA,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IACxE,4BAA4B;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qEAAqE;IACrE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qDAAqD;IACrD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iDAAiD;IACjD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6DAA6D;IAC7D,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CA0BnE,CAAC"}

package/dist/js/components/Compass/CompassPanel.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompassPanel = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const compass_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/components/Compass/compass"));
-const react_styles_1 = require("@patternfly/react-styles");
-const CompassPanel = (_a) => {
-    var { children, className, isPill, hasNoBorder, hasNoPadding, isThinking, isFullHeight, isScrollable } = _a, props = tslib_1.__rest(_a, ["children", "className", "isPill", "hasNoBorder", "hasNoPadding", "isThinking", "isFullHeight", "isScrollable"]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, react_styles_1.css)(compass_1.default.compassPanel, isPill && compass_1.default.modifiers.pill, hasNoBorder && compass_1.default.modifiers.noBorder, hasNoPadding && compass_1.default.modifiers.noPadding, isThinking && 'pf-v6-m-thinking', isFullHeight && compass_1.default.modifiers.fullHeight, isScrollable && compass_1.default.modifiers.scrollable, className) }, props, { children: children })));
-};
-exports.CompassPanel = CompassPanel;
-exports.CompassPanel.displayName = 'CompassPanel';
-//# sourceMappingURL=CompassPanel.js.map

package/dist/js/components/Compass/CompassPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CompassPanel.js","sourceRoot":"","sources":["../../../../src/components/Compass/CompassPanel.tsx"],"names":[],"mappings":";;;;;AAAA,8GAA6E;AAC7E,2DAA+C;AAqBxC,MAAM,YAAY,GAA+C,CAAC,EAUrD,EAAE,EAAE;QAViD,EACvE,QAAQ,EACR,SAAS,EACT,MAAM,EACN,WAAW,EACX,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,YAAY,OAEM,EADf,KAAK,sBAT+D,gHAUxE,CADS;IACe,OAAA,CACvB,8CACE,SAAS,EAAE,IAAA,kBAAG,EACZ,iBAAM,CAAC,YAAY,EACnB,MAAM,IAAI,iBAAM,CAAC,SAAS,CAAC,IAAI,EAC/B,WAAW,IAAI,iBAAM,CAAC,SAAS,CAAC,QAAQ,EACxC,YAAY,IAAI,iBAAM,CAAC,SAAS,CAAC,SAAS,EAC1C,UAAU,IAAI,kBAAkB,EAChC,YAAY,IAAI,iBAAM,CAAC,SAAS,CAAC,UAAU,EAC3C,YAAY,IAAI,iBAAM,CAAC,SAAS,CAAC,UAAU,EAC3C,SAAS,CACV,IACG,KAAK,cAER,QAAQ,IACL,CACP,CAAA;CAAA,CAAC;AA1BW,QAAA,YAAY,gBA0BvB;AAEF,oBAAY,CAAC,WAAW,GAAG,cAAc,CAAC"}

package/src/components/Compass/CompassPanel.tsx

@@ -1,51 +0,0 @@
-import styles from '@patternfly/react-styles/css/components/Compass/compass';
-import { css } from '@patternfly/react-styles';
-
-export 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
-}: CompassPanelProps) => (
-  <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';

package/src/components/Compass/__tests__/CompassPanel.test.tsx

@@ -1,86 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { CompassPanel } from '../CompassPanel';
-import styles from '@patternfly/react-styles/css/components/Compass/compass';
-
-test('Renders with children', () => {
-  render(<CompassPanel>Test content</CompassPanel>);
-  expect(screen.getByText('Test content')).toBeVisible();
-});
-
-test('Renders with custom class name when className prop is provided', () => {
-  render(<CompassPanel className="custom-class">Test</CompassPanel>);
-  expect(screen.getByText('Test')).toHaveClass('custom-class');
-});
-
-test(`Renders with default ${styles.compassPanel} class`, () => {
-  render(<CompassPanel>Test</CompassPanel>);
-  expect(screen.getByText('Test')).toHaveClass(styles.compassPanel);
-});
-
-test(`Renders with ${styles.modifiers.pill} when isPill is true`, () => {
-  render(<CompassPanel isPill>Test</CompassPanel>);
-  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.pill);
-});
-
-test(`Renders with ${styles.modifiers.noBorder} when hasNoBorder is true`, () => {
-  render(<CompassPanel hasNoBorder>Test</CompassPanel>);
-  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noBorder);
-});
-
-test(`Renders with ${styles.modifiers.noPadding} when hasNoPadding is true`, () => {
-  render(<CompassPanel hasNoPadding>Test</CompassPanel>);
-  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noPadding);
-});
-
-test('Renders with pf-v6-m-thinking when isThinking is true', () => {
-  render(<CompassPanel isThinking>Test</CompassPanel>);
-  expect(screen.getByText('Test')).toHaveClass('pf-v6-m-thinking');
-});
-
-test(`Renders with ${styles.modifiers.fullHeight} when isFullHeight is true`, () => {
-  render(<CompassPanel isFullHeight>Test</CompassPanel>);
-  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.fullHeight);
-});
-
-test(`Renders with ${styles.modifiers.scrollable} when isScrollable is true`, () => {
-  render(<CompassPanel isScrollable>Test</CompassPanel>);
-  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.scrollable);
-});
-
-test('Renders with multiple modifier classes when multiple props are true', () => {
-  render(
-    <CompassPanel isPill hasNoBorder hasNoPadding isThinking isFullHeight isScrollable>
-      Test
-    </CompassPanel>
-  );
-  const panelElement = screen.getByText('Test');
-  expect(panelElement).toHaveClass(styles.modifiers.pill);
-  expect(panelElement).toHaveClass(styles.modifiers.noBorder);
-  expect(panelElement).toHaveClass(styles.modifiers.noPadding);
-  expect(panelElement).toHaveClass('pf-v6-m-thinking');
-  expect(panelElement).toHaveClass(styles.modifiers.fullHeight);
-  expect(panelElement).toHaveClass(styles.modifiers.scrollable);
-});
-
-test('Renders with additional props spread to the component', () => {
-  render(<CompassPanel aria-label="Test label">Test</CompassPanel>);
-  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
-});
-
-test('Matches the snapshot with all modifiers', () => {
-  const { asFragment } = render(
-    <CompassPanel isPill hasNoBorder hasNoPadding isThinking isFullHeight isScrollable>
-      <div>Panel with all modifiers</div>
-    </CompassPanel>
-  );
-  expect(asFragment()).toMatchSnapshot();
-});
-
-test('Matches the snapshot with no modifiers', () => {
-  const { asFragment } = render(
-    <CompassPanel>
-      <div>Basic panel</div>
-    </CompassPanel>
-  );
-  expect(asFragment()).toMatchSnapshot();
-});

package/src/components/Compass/__tests__/__snapshots__/CompassPanel.test.tsx.snap

@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Matches the snapshot with all modifiers 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-compass__panel pf-m-pill pf-m-no-border pf-m-no-padding pf-v6-m-thinking pf-m-full-height pf-m-scrollable"
-  >
-    <div>
-      Panel with all modifiers
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Matches the snapshot with no modifiers 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-compass__panel"
-  >
-    <div>
-      Basic panel
-    </div>
-  </div>
-</DocumentFragment>
-`;