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

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.5.0-prerelease.58","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.59","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.5.0-prerelease.58","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.59","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.5.0-prerelease.58","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.59","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.59",
+  "version": "6.5.0-prerelease.60",
   "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",
@@ -47,14 +47,14 @@
   },
   "dependencies": {
     "@patternfly/react-icons": "^6.5.0-prerelease.25",
-    "@patternfly/react-styles": "^6.5.0-prerelease.18",
-    "@patternfly/react-tokens": "^6.5.0-prerelease.17",
+    "@patternfly/react-styles": "^6.5.0-prerelease.19",
+    "@patternfly/react-tokens": "^6.5.0-prerelease.18",
     "focus-trap": "7.6.6",
     "react-dropzone": "^14.3.5",
     "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"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "6558bdd10eb90061e973dcc37ec971eb2b1a354d"
+  "gitHead": "30db3d99f05b39b6478ed7ed48baeb29bfb895cd"
 }

package/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;

package/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
     );

package/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> {

package/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,21 +75,21 @@ 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>
@@ -96,10 +97,10 @@ test('Does not render CompassPanel when children are passed', () => {
   );
 
   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" />
   );

package/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>

package/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>
 ```

package/src/components/Compass/examples/CompassBasic.tsx

@@ -4,7 +4,9 @@ import {
   CompassHero,
   CompassContent,
   CompassMainHeader,
-  CompassPanel,
+  Panel,
+  PanelMain,
+  PanelMainBody,
   CompassMainHeaderContent
 } from '@patternfly/react-core';
 import './compass.css';
@@ -20,11 +22,15 @@ export const CompassBasic: React.FunctionComponent = () => {
       </CompassHero>
       <CompassContent>
         <CompassMainHeader>
-          <CompassPanel>
-            <CompassMainHeaderContent>
-              <div>Content title</div>
-            </CompassMainHeaderContent>
-          </CompassPanel>
+          <Panel>
+            <PanelMain>
+              <PanelMainBody>
+                <CompassMainHeaderContent>
+                  <div>Content title</div>
+                </CompassMainHeaderContent>
+              </PanelMainBody>
+            </PanelMain>
+          </Panel>
         </CompassMainHeader>
         <div>Content</div>
       </CompassContent>

package/src/components/Compass/examples/CompassDockLayout.tsx

@@ -2,7 +2,9 @@ import {
   Compass,
   CompassContent,
   CompassMainHeader,
-  CompassPanel,
+  Panel,
+  PanelMain,
+  PanelMainBody,
   CompassMainHeaderContent
 } from '@patternfly/react-core';
 import './compass.css';
@@ -12,11 +14,15 @@ export const CompassBasic: React.FunctionComponent = () => {
   const mainContent = (
     <CompassContent>
       <CompassMainHeader>
-        <CompassPanel>
-          <CompassMainHeaderContent>
-            <div>Content title</div>
-          </CompassMainHeaderContent>
-        </CompassPanel>
+        <Panel>
+          <PanelMain>
+            <PanelMainBody>
+              <CompassMainHeaderContent>
+                <div>Content title</div>
+              </CompassMainHeaderContent>
+            </PanelMainBody>
+          </PanelMain>
+        </Panel>
       </CompassMainHeader>
       <div>Content</div>
     </CompassContent>

package/src/components/Compass/index.ts

@@ -12,4 +12,3 @@ export * from './CompassNavContent';
 export * from './CompassNavHome';
 export * from './CompassNavMain';
 export * from './CompassNavSearch';
-export * from './CompassPanel';

package/src/components/Panel/Panel.tsx

@@ -12,6 +12,16 @@ export interface PanelProps extends React.HTMLProps<HTMLDivElement> {
   variant?: 'raised' | 'bordered' | 'secondary';
   /** Flag to add scrollable styling to the panel */
   isScrollable?: boolean;
+  /** @beta When used with a scrollable panel, sets the panel to auto height */
+  isAutoHeight?: boolean;
+  /** @beta Flag to remove the panel's border */
+  hasNoBorder?: boolean;
+  /** @beta Flag to make the panel fill the available height of its container */
+  isFullHeight?: boolean;
+  /** @beta Modifies the panel to use glass styling when the glass theme is enabled */
+  isGlass?: boolean;
+  /** @beta Uses pill (fully rounded) border radius for the panel */
+  isPill?: boolean;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
 }
@@ -21,6 +31,11 @@ const PanelBase: React.FunctionComponent<PanelProps> = ({
   children,
   variant,
   isScrollable,
+  isAutoHeight,
+  hasNoBorder,
+  isFullHeight,
+  isGlass,
+  isPill,
   innerRef,
   ...props
 }: PanelProps) => (
@@ -29,6 +44,11 @@ const PanelBase: React.FunctionComponent<PanelProps> = ({
       styles.panel,
       variant && styles.modifiers[variant],
       isScrollable && styles.modifiers.scrollable,
+      isAutoHeight && styles.modifiers.scrollableAutoHeight,
+      hasNoBorder && styles.modifiers.noBorder,
+      isFullHeight && styles.modifiers.fullHeight,
+      isGlass && styles.modifiers.glass,
+      isPill && styles.modifiers.pill,
       className
     )}
     ref={innerRef}

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

@@ -1,4 +1,5 @@
 import { createRef, useEffect, useState } from 'react';
+import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import { Panel } from '../Panel';
 import { PanelMain } from '../PanelMain';
@@ -55,6 +56,71 @@ test(`Renders with class name ${styles.modifiers.scrollable} when isScrollable i
   expect(screen.getByText('Test')).toHaveClass(styles.modifiers.scrollable);
 });
 
+test(`Renders with class name ${styles.modifiers.scrollableAutoHeight} when isAutoHeight is true`, () => {
+  render(<Panel isAutoHeight>Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.scrollableAutoHeight);
+});
+
+test(`Does not add ${styles.modifiers.scrollableAutoHeight} when isAutoHeight is false or undefined`, () => {
+  const { rerender } = render(<Panel isAutoHeight={false}>Test</Panel>);
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.scrollableAutoHeight);
+
+  rerender(<Panel>Test</Panel>);
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.scrollableAutoHeight);
+});
+
+test(`Renders with class name ${styles.modifiers.noBorder} when hasNoBorder is true`, () => {
+  render(<Panel hasNoBorder>Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noBorder);
+});
+
+test(`Does not add ${styles.modifiers.noBorder} when hasNoBorder is false or undefined`, () => {
+  const { rerender } = render(<Panel hasNoBorder={false}>Test</Panel>);
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.noBorder);
+
+  rerender(<Panel>Test</Panel>);
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.noBorder);
+});
+
+test(`Renders with class name ${styles.modifiers.fullHeight} when isFullHeight is true`, () => {
+  render(<Panel isFullHeight>Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.fullHeight);
+});
+
+test(`Does not add ${styles.modifiers.fullHeight} when isFullHeight is false or undefined`, () => {
+  const { rerender } = render(<Panel isFullHeight={false}>Test</Panel>);
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.fullHeight);
+
+  rerender(<Panel>Test</Panel>);
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.fullHeight);
+});
+
+test(`Renders with class name ${styles.modifiers.glass} when isGlass is true`, () => {
+  render(<Panel isGlass>Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.glass);
+});
+
+test(`Does not add ${styles.modifiers.glass} when isGlass is false or undefined`, () => {
+  const { rerender } = render(<Panel isGlass={false}>Test</Panel>);
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.glass);
+
+  rerender(<Panel>Test</Panel>);
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.glass);
+});
+
+test(`Renders with class name ${styles.modifiers.pill} when isPill is true`, () => {
+  render(<Panel isPill>Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.pill);
+});
+
+test(`Does not add ${styles.modifiers.pill} when isPill is false or undefined`, () => {
+  const { rerender } = render(<Panel isPill={false}>Test</Panel>);
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.pill);
+
+  rerender(<Panel>Test</Panel>);
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.pill);
+});
+
 test('Renders with ref', async () => {
   const user = userEvent.setup();
   const panelRef: React.RefObject<HTMLDivElement | null> = createRef();
@@ -103,3 +169,58 @@ test('Matches the snapshot', () => {
   const { asFragment } = render(<Panel>Test</Panel>);
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('Matches the snapshot with hasNoBorder', () => {
+  const { asFragment } = render(
+    <Panel hasNoBorder>
+      <PanelMain>
+        <PanelMainBody>Test</PanelMainBody>
+      </PanelMain>
+    </Panel>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches the snapshot with isFullHeight', () => {
+  const { asFragment } = render(
+    <Panel isFullHeight>
+      <PanelMain>
+        <PanelMainBody>Test</PanelMainBody>
+      </PanelMain>
+    </Panel>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches the snapshot with isGlass', () => {
+  const { asFragment } = render(
+    <Panel isGlass>
+      <PanelMain>
+        <PanelMainBody>Test</PanelMainBody>
+      </PanelMain>
+    </Panel>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches the snapshot with isAutoHeight', () => {
+  const { asFragment } = render(
+    <Panel isScrollable isAutoHeight>
+      <PanelMain>
+        <PanelMainBody>Test</PanelMainBody>
+      </PanelMain>
+    </Panel>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches the snapshot with isPill', () => {
+  const { asFragment } = render(
+    <Panel isPill>
+      <PanelMain>
+        <PanelMainBody>Test</PanelMainBody>
+      </PanelMain>
+    </Panel>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -9,3 +9,93 @@ exports[`Matches the snapshot 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Matches the snapshot with hasNoBorder 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-panel pf-m-no-border"
+  >
+    <div
+      class="pf-v6-c-panel__main"
+    >
+      <div
+        class="pf-v6-c-panel__main-body"
+      >
+        Test
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot with isFullHeight 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-panel pf-m-full-height"
+  >
+    <div
+      class="pf-v6-c-panel__main"
+    >
+      <div
+        class="pf-v6-c-panel__main-body"
+      >
+        Test
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot with isGlass 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-panel pf-m-glass"
+  >
+    <div
+      class="pf-v6-c-panel__main"
+    >
+      <div
+        class="pf-v6-c-panel__main-body"
+      >
+        Test
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot with isAutoHeight 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-panel pf-m-scrollable pf-m-scrollable-auto-height"
+  >
+    <div
+      class="pf-v6-c-panel__main"
+    >
+      <div
+        class="pf-v6-c-panel__main-body"
+      >
+        Test
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot with isPill 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-panel pf-m-pill"
+  >
+    <div
+      class="pf-v6-c-panel__main"
+    >
+      <div
+        class="pf-v6-c-panel__main-body"
+      >
+        Test
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Panel/examples/Panel.md

@@ -46,13 +46,22 @@ propComponents: [Panel, PanelMain, PanelMainBody, PanelHeader, PanelFooter]
 
 ```ts file="PanelSecondaryVariant.tsx"
 ```
-
 ### Scrollable
 
 ```ts file="PanelScrollable.tsx"
 ```
 
+### Scrollable with auto height
+
+```ts file="PanelScrollableWithAutoHeight.tsx"
+```
+
 ### Scrollable with header and footer
 
 ```ts file="PanelScrollableHeaderFooter.tsx"
 ```
+
+### Pill
+
+```ts file="PanelPill.tsx"
+```

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

@@ -0,0 +1,9 @@
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+export const PanelPill: React.FunctionComponent = () => (
+  <Panel isPill>
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);