@patternfly/react-core 6.4.1-prerelease.9 → 6.4.1

package/src/components/ExpandableSection/ExpandableSectionToggle.tsx

@@ -30,10 +30,6 @@ export interface ExpandableSectionToggleProps extends Omit<React.HTMLProps<HTMLD
   onToggle?: (isExpanded: boolean) => void;
   /** Flag indicating that the expandable section and expandable toggle are detached from one another. */
   isDetached?: boolean;
-  /** Accessible name via human readable string for the expandable section toggle. */
-  toggleAriaLabel?: string;
-  /** Accessible name via space delimtted list of IDs for the expandable section toggle. */
-  toggleAriaLabelledBy?: string;
 }
 
 export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionToggleProps> = ({
@@ -46,8 +42,6 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
   direction = 'down',
   hasTruncatedContent = false,
   isDetached,
-  toggleAriaLabel,
-  toggleAriaLabelledBy,
   ...props
 }: ExpandableSectionToggleProps) => (
   <div
@@ -80,8 +74,6 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
             </span>
           )
         })}
-        aria-label={toggleAriaLabel}
-        aria-labelledby={toggleAriaLabelledBy}
       >
         {children}
       </Button>

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

@@ -191,20 +191,3 @@ test('Renders with class pf-m-detached when isDetached is true and direction is
 
   expect(screen.getByText('Test content').parentElement).toHaveClass('pf-m-detached');
 });
-
-test('Renders with aria-label when toggleAriaLabel is passed', () => {
-  render(<ExpandableSection toggleAriaLabel="Test label"></ExpandableSection>);
-
-  expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
-});
-
-test('Renders with aria-labelledby when toggleAriaLabelledBy is passed', () => {
-  render(
-    <>
-      <div id="test-id">Test label</div>
-      <ExpandableSection toggleAriaLabelledBy="test-id"></ExpandableSection>
-    </>
-  );
-
-  expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
-});

package/src/components/ExpandableSection/__tests__/ExpandableSectionToggle.test.tsx

@@ -30,20 +30,3 @@ test('Renders with class pf-m-detached when isDetached is true', () => {
 
   expect(screen.getByTestId('test-id')).toHaveClass('pf-m-detached');
 });
-
-test('Renders with aria-label when toggleAriaLabel is passed', () => {
-  render(<ExpandableSectionToggle toggleAriaLabel="Test label"></ExpandableSectionToggle>);
-
-  expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
-});
-
-test('Renders with aria-labelledby when toggleAriaLabelledBy is passed', () => {
-  render(
-    <>
-      <div id="test-id">Test label</div>
-      <ExpandableSectionToggle toggleAriaLabelledBy="test-id"></ExpandableSectionToggle>
-    </>
-  );
-
-  expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
-});

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -19,21 +19,29 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 A toggle is collapsed until it is selected by a user.
 
-```ts file="MenuToggleCollapsed.tsx"
+```ts
+import { MenuToggle } from '@patternfly/react-core';
+
+<MenuToggle>Collapsed</MenuToggle>
+
 ```
 
 ### Expanded toggle
 
 When a user selects a toggle, it becomes expanded and is styled with a blue underline. To flag expanded toggles, and apply expanded styling, use the `isExpanded` property .
 
-```ts file ="MenuToggleExpanded.tsx"
+```ts
+import { MenuToggle } from '@patternfly/react-core';
+
+<MenuToggle isExpanded>Expanded</MenuToggle>;
+
 ```
 
 ### Small toggle
 
 You can pass `size="sm"` to a MenuToggle to style it as a small toggle, such as within a [breadcrumb](/components/breadcrumb).
 
-```ts file="MenuToggleSmall.tsx"
+```ts file="./MenuToggleSmall.tsx"
 
 ```
 
@@ -41,21 +49,32 @@ You can pass `size="sm"` to a MenuToggle to style it as a small toggle, such as
 
 To disable the selection and expansion of a toggle, use the `isDisabled` property.
 
-```ts file="MenuToggleDisabled.tsx"
+```ts
+import { MenuToggle } from '@patternfly/react-core';
+
+<MenuToggle isDisabled>Disabled</MenuToggle>
+
 ```
 
 ### With a badge
 
 To display a count of selected items in a toggle, use the `badge` property. You can also pass in `variant="plainText"` for a badge only toggle.
 
-```ts file="MenuToggleBadge.tsx"
+```ts
+import { Fragment } from 'react';
+import { MenuToggle, Badge } from '@patternfly/react-core';
+
+<Fragment>
+  <MenuToggle badge={<Badge>4 selected</Badge>}>Count</MenuToggle>
+  <MenuToggle variant="plainText" badge={<Badge screenReaderText="additional items">4</Badge>} />
+</Fragment>
 ```
 
 ### Settings toggle
 
 To create a "settings" menu toggle that will animate on hover and focus, you can pass the `isSettings` property in. Doing so will override the `icon` property, as a specific icon is used internally for the animations.
 
-```ts file="MenuToggleSettings.tsx"
+```ts file="./MenuToggleSettings.tsx"
 
 ```
 
@@ -65,7 +84,7 @@ To add a recognizable icon to a menu toggle, use the `icon` property. The follow
 
 For most basic icons, it is recommended to wrap it inside our [icon component](/components/icon).
 
-```ts file="MenuToggleCustomIcon.tsx"
+```ts file="./MenuToggleCustomIcon.tsx"
 
 ```
 
@@ -75,14 +94,37 @@ You can also pass images into the `icon` property. The following example passes
 
 This can be used alongside a text label that provides more context for the image.
 
-```ts file="MenuToggleAvatarText.tsx"
+```ts
+import { Fragment } from 'react';
+import { MenuToggle, Avatar } from '@patternfly/react-core';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+
+<Fragment>
+  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />}>Ned Username</MenuToggle>{' '}
+  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isExpanded>Ned Username</MenuToggle>{' '}
+  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isDisabled>Ned Username</MenuToggle>
+</Fragment>
 ```
 
 ### Variant styles
 
 Variant styling can be applied to menu toggles. In the following example, the toggle uses primary styling by passing `variant="primary"` into the `<MenuToggle>` component. Additional variant options include “default”, “plain”, “plainText”, “secondary”, and “typeahead”.
 
-```ts file="MenuToggleVariantStyles.tsx"
+```ts
+import { Fragment } from 'react';
+import { MenuToggle } from '@patternfly/react-core';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+
+<Fragment>
+  <MenuToggle variant="primary">Collapsed</MenuToggle>{' '}
+  <MenuToggle variant="primary" isExpanded>
+    Expanded
+  </MenuToggle>{' '}
+  <MenuToggle variant="primary" isDisabled>
+    Disabled
+  </MenuToggle>
+</Fragment>
+
 ```
 
 ### Plain toggle with icon
@@ -91,14 +133,39 @@ To apply plain styling to a menu toggle with an icon, pass in `variant="plain"`.
 
 If the toggle does not have any visible text content, use the `aria-label` property to provide an accessible name.
 
-```ts file="MenuTogglePlainIcon.tsx"
+```ts
+import { Fragment } from 'react';
+import { MenuToggle } from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+
+<Fragment>
+  <MenuToggle icon={<EllipsisVIcon />} variant="plain" aria-label="plain kebab"/>
+  {' '}
+  <MenuToggle icon={<EllipsisVIcon />} variant="plain" isExpanded aria-label="plain expanded kebab"/>
+  {' '}
+  <MenuToggle icon={<EllipsisVIcon />} variant="plain" isDisabled aria-label="disabled plain kebab"/>
+</Fragment>
 ```
 
 ### Plain toggle with text label
 
 To apply plain styling to a menu toggle with a text label, pass in `variant="plainText"`. Unlike the “plain” variant, “plainText” adds a caret pointing down in the toggle.
 
-```ts file="MenuTogglePlainTextLabel.tsx"
+```ts
+import { Fragment } from 'react';
+import { MenuToggle } from '@patternfly/react-core';
+
+<Fragment>
+  <MenuToggle variant="plainText" isDisabled aria-label="Disabled plain menu toggle">
+    Disabled
+  </MenuToggle>{' '}
+  <MenuToggle variant="plainText" aria-label="Plain menu toggle">
+    Custom text
+  </MenuToggle>{' '}
+  <MenuToggle variant="plainText" isExpanded aria-label="Expanded plain menu toggle">
+    Custom text (expanded)
+  </MenuToggle>
+</Fragment>
 ```
 
 ### Split toggle with checkbox
@@ -149,7 +216,14 @@ A full height toggle fills the height of its parent. To flag a full height toggl
 
 In the following example, the toggle fills the size of the "80px" `<div>` element that it is within.
 
-```ts file="MenuToggleFullHeight.tsx"
+```ts
+import { MenuToggle } from '@patternfly/react-core';
+
+<div style={{ height: "80px" }}>
+  <MenuToggle isFullHeight aria-label="Full height menu toggle">
+    Full height
+  </MenuToggle>
+</div>
 ```
 
 ### Full width toggle
@@ -158,7 +232,16 @@ A full width toggle fills the width of its parent. To flag a full width toggle,
 
 In the following example, the toggle fills the width of its parent as the window size changes.
 
-```ts file="MenuToggleFullWidth.tsx"
+```ts
+import { MenuToggle } from '@patternfly/react-core';
+
+const fullWidth: React.FunctionComponent = () => {
+  return (
+    <MenuToggle isFullWidth aria-label="Full width menu toggle" >
+      Full width
+    </MenuToggle>
+  );
+}
 ```
 
 ### Typeahead toggle

package/src/components/Modal/Modal.tsx

@@ -27,8 +27,6 @@ export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
    * focusable element will receive focus.
    */
   elementToFocus?: HTMLElement | SVGElement | string;
-  /** Id of the focus trap in the ModalContent component */
-  focusTrapId?: string;
   /** An id to use for the modal box container. */
   id?: string;
   /** Flag to show the modal. */

package/src/components/Modal/ModalContent.tsx

@@ -29,8 +29,6 @@ export interface ModalContentProps extends OUIAProps {
    * focusable element will receive focus.
    */
   elementToFocus?: HTMLElement | SVGElement | string;
-  /** Id of the focus trap */
-  focusTrapId?: string;
   /** Flag to show the modal. */
   isOpen?: boolean;
   /** A callback for when the close button is clicked. */
@@ -71,7 +69,6 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
   ouiaId,
   ouiaSafe = true,
   elementToFocus,
-  focusTrapId,
   ...props
 }: ModalContentProps) => {
   if (!isOpen) {
@@ -125,7 +122,6 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
           initialFocus: elementToFocus || undefined
         }}
         className={css(bullsEyeStyles.bullseye)}
-        id={focusTrapId}
       >
         {modalBox}
       </FocusTrap>

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

@@ -172,13 +172,4 @@ describe('Modal', () => {
     expect(asideSibling).not.toHaveAttribute('aria-hidden');
     expect(articleSibling).not.toHaveAttribute('aria-hidden');
   });
-
-  test('Modal can add id to focus trap correctly for use with dropdowns', () => {
-    render(<Modal focusTrapId="focus-trap" isOpen onClose={jest.fn()} children="modal content" />);
-    expect(screen.getByRole('dialog', { name: /modal content/i }).parentElement).toHaveAttribute('id', 'focus-trap');
-    expect(screen.getByRole('dialog', { name: /modal content/i }).parentElement).toHaveAttribute(
-      'class',
-      'pf-v6-l-bullseye'
-    );
-  });
 });

package/src/components/Modal/__tests__/ModalContent.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 
 import { ModalContent } from '../ModalContent';
 
@@ -43,19 +43,3 @@ test('Modal Content Test with onclose', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
-
-test('Modal content can add id to focus trap correctly for use with dropdowns', () => {
-  render(
-    <ModalContent focusTrapId="focus-trap" isOpen {...modalContentProps}>
-      This is a ModalBox header
-    </ModalContent>
-  );
-  expect(screen.getByRole('dialog', { name: /This is a ModalBox header/i }).parentElement).toHaveAttribute(
-    'id',
-    'focus-trap'
-  );
-  expect(screen.getByRole('dialog', { name: /This is a ModalBox header/i }).parentElement).toHaveAttribute(
-    'class',
-    'pf-v6-l-bullseye'
-  );
-});

package/src/components/Modal/examples/Modal.md

@@ -17,7 +17,7 @@ import formStyles from '@patternfly/react-styles/css/components/Form/form';
 
 ### Basic modals
 
-Basic modals give users the option to either confirm or cancel an action.
+Basic modals give users the option to either confirm or cancel an action. 
 
 To flag an open modal, use the `isOpen` property. To execute a callback when a modal is closed, use the `onClose` property.
 
@@ -71,7 +71,7 @@ To choose a specific width for a modal, use the `width` property. The following
 
 ### Custom header
 
-To add a custom header to a modal, your custom content must be passed as a child of the `<ModalHeader>` component. Do not pass the `title` property to `<ModalHeader>` when using a custom header.
+To add a custom header to a modal, your custom content must be passed as a child of the `<ModalHeader>` component. Do not pass the `title` property to `<ModalHeader>` when using a custom header. 
 
 ```ts file="./ModalCustomHeader.tsx"
 
@@ -113,18 +113,9 @@ To guide users through a series of steps in a modal, you can add a [wizard](/com
 
 ### With dropdown
 
-To present a menu of actions or links to a user, you can add a [dropdown](/components/menus/dropdown) to a modal.
+To present a menu of actions or links to a user, you can add a [dropdown](/components/menus/dropdown) to a modal. 
 
-Using the Dropdown's default append location will interfere with keyboard accessibility due to the modal's
-built-in focus trap. To allow the dropdown to visually break out of the modal container, set the Dropdown's
-`popperProps appendTo` property to id of the focus trap for the modal. This can be done by adding prop
-`focusTrapId` to the modal, and then setting the append location to that as per this example. Otherwise you
-can use `inline` to allow it to scroll within the modal itself. Appending to the focus trap should allow the
-menu to expand visually outside the Modal (no scrollbar created in the Modal itself), and still allow
-focusing the content within that menu via keyboard. You should also handle the modal's closing behavior by
-listening to the
-`onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the
-dropdown without closing the entire modal.
+To allow the dropdown to visually break out of the modal container, set the `menuAppendTo` property to “parent”. Handle the modal’s closing behavior by listening to the `onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the dropdown without closing the entire modal.
 
 ```ts file="./ModalWithDropdown.tsx"
 
@@ -150,7 +141,7 @@ To enable form submission from a button in the modal's footer (outside of the `<
 
 ### Custom focus
 
-To customize which element inside the modal receives focus when initially opened, use the `elementToFocus` property`.
+To customize which element inside the modal receives focus when initially opened, use the `elementToFocus` property`. 
 
 ```ts file="./ModalCustomFocus.tsx"
 

package/src/components/Modal/examples/ModalWithDropdown.tsx

@@ -32,10 +32,8 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
   };
 
   const onFocus = () => {
-    if (typeof document !== 'undefined') {
-      const element = document.getElementById('modal-dropdown-toggle');
-      (element as HTMLElement)?.focus();
-    }
+    const element = document.getElementById('modal-dropdown-toggle');
+    (element as HTMLElement).focus();
   };
 
   const onEscapePress = (event: KeyboardEvent) => {
@@ -47,16 +45,6 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
     }
   };
 
-  const getAppendLocation = () => {
-    // document doesn't exist when PatternFly website docs framework gets pre-rendered
-    // this is just to avoid that issue - works fine at runtime without it
-    if (typeof document !== 'undefined' && document.getElementById) {
-      return document.getElementById('modal-with-dropdown-focus-trap');
-    } else {
-      return 'inline';
-    }
-  };
-
   return (
     <Fragment>
       <Button variant="primary" onClick={handleModalToggle}>
@@ -69,21 +57,14 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
         onEscapePress={onEscapePress}
         aria-labelledby="modal-with-dropdown"
         aria-describedby="modal-box-body-with-dropdown"
-        focusTrapId="modal-with-dropdown-focus-trap"
       >
         <ModalHeader title="Dropdown modal" labelId="modal-with-dropdown" />
         <ModalBody id="modal-box-body-with-dropdown">
           <div>
-            Using the Dropdown's default append location will interfere with keyboard accessibility due to the modal's
-            built-in focus trap. To allow the dropdown to visually break out of the modal container, set the Dropdown's
-            popperProps appendTo property to id of the focus trap for the modal. This can be done by adding prop
-            focusTrapId to the modal, and then setting the append location to that as per this example. Otherwise you
-            can use "inline" to allow it to scroll within the modal itself. Appending to the focus trap should allow the
-            menu to expand visually outside the Modal (no scrollbar created in the Modal itself), and still allow
-            focusing the content within that menu via keyboard. You should also handle the modal's closing behavior by
-            listening to the
-            <em>onEscapePress</em> callback on the Modal component. This allows the "escape" key to collapse the
-            dropdown without closing the entire modal.
+            Set the dropdown <strong>menuAppendTo</strong> prop to <em>parent</em> in order to allow the dropdown menu
+            break out of the modal container. You'll also want to handle closing of the modal yourself, by listening to
+            the <strong>onEscapePress</strong> callback on the Modal component, so you can close the Dropdown first if
+            it's open without closing the entire modal.
           </div>
           <br />
           <div>
@@ -92,18 +73,10 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
               onSelect={onSelect}
               onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}
               toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-                <MenuToggle
-                  id="modal-dropdown-toggle"
-                  ref={toggleRef}
-                  onClick={handleDropdownToggle}
-                  isExpanded={isDropdownOpen}
-                >
+                <MenuToggle ref={toggleRef} onClick={handleDropdownToggle} isExpanded={isDropdownOpen}>
                   Dropdown
                 </MenuToggle>
               )}
-              popperProps={{
-                appendTo: getAppendLocation()
-              }}
             >
               <DropdownList>
                 <DropdownItem value={0} key="action">

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

@@ -9,50 +9,199 @@ propComponents: [Panel, PanelMain, PanelMainBody, PanelHeader, PanelFooter]
 
 ### Basic
 
-```ts file="PanelBasic.tsx"
+```js
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+const BasicPanel = () => (
+  <Panel>
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);
 ```
 
 ### Header
 
-```ts file="PanelHeaderExample.tsx"
+```js
+import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider } from '@patternfly/react-core';
+
+const HeaderPanel = () => (
+  <Panel>
+    <PanelHeader>Header content</PanelHeader>
+    <Divider />
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);
 ```
 
 ### Footer
 
-```ts file="PanelFooterExample.tsx"
+```js
+import { Panel, PanelMain, PanelMainBody, PanelFooter } from '@patternfly/react-core';
+
+const FooterPanel = () => (
+  <Panel>
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+    <PanelFooter>Footer content</PanelFooter>
+  </Panel>
+);
 ```
 
 ### Header and footer
 
-```ts file="PanelHeaderFooter.tsx"
+```js
+import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider, PanelFooter } from '@patternfly/react-core';
+
+const HeaderFooterPanel = () => (
+  <Panel>
+    <PanelHeader>Header content</PanelHeader>
+    <Divider />
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+    <PanelFooter>Footer content</PanelFooter>
+  </Panel>
+);
 ```
 
 ### No body
 
-```ts file="PanelNoBody.tsx"
+```js
+import { Panel, PanelMain } from '@patternfly/react-core';
+
+const NoBodyPanel = () => (
+  <Panel>
+    <PanelMain>Main content</PanelMain>
+  </Panel>
+);
 ```
 
 ### Raised
 
-```ts file="PanelRaised.tsx"
+```js
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+const RaisedPanel = () => (
+  <Panel variant="raised">
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);
 ```
 
 ### Bordered
 
-```ts file="PanelBordered.tsx"
+```js
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+const BorderedPanel = () => (
+  <Panel variant="bordered">
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);
 ```
 
 ### Secondary variant
 
-```ts file="PanelSecondaryVariant.tsx"
+```js
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+const PanelSecondaryVariant = () => (
+  <Panel variant="secondary">
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);
 ```
 
 ### Scrollable
 
-```ts file="PanelScrollable.tsx"
+```js
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+const ScrollablePanel = () => (
+  <Panel isScrollable>
+    <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>
+);
 ```
 
 ### Scrollable with header and footer
 
-```ts file="PanelScrollableHeaderFooter.tsx"
+```js
+import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider, PanelFooter } from '@patternfly/react-core';
+
+const ScrollableHeaderFooterPanel = () => (
+  <Panel isScrollable>
+    <PanelHeader>Header content</PanelHeader>
+    <Divider />
+    <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>
+    <PanelFooter>Footer content</PanelFooter>
+  </Panel>
+);
 ```