From dbaf134c7bba665ded99c8c9dd2f36ad39d36232 Mon Sep 17 00:00:00 2001
From: MariaAga <mariaaga@redhat.com>
Date: Wed, 10 May 2023 12:05:15 +0200
Subject: [PATCH] docs(popover): fix appendTo where popovers are hidden

---
 .../src/components/Popover/examples/Popover.md        | 11 +++++++++++
 .../src/components/Popover/examples/PopoverAlert.tsx  |  1 +
 .../components/Popover/examples/PopoverWidthAuto.tsx  |  1 +
 .../Popover/examples/PopoverWithIconInTheTitle.tsx    |  1 +
 4 files changed, 14 insertions(+)

diff --git a/packages/react-core/src/components/Popover/examples/Popover.md b/packages/react-core/src/components/Popover/examples/Popover.md
index ce89207bed0..9c31d885732 100644
--- a/packages/react-core/src/components/Popover/examples/Popover.md
+++ b/packages/react-core/src/components/Popover/examples/Popover.md
@@ -14,6 +14,11 @@ import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
 
 ## Examples
 
+By default, the `appendTo` prop of the popover will append it to the parent element. However, in some cases, the popover might be too big for the parent and not fully visible. To solve this issue, users have two options:
+
+1. Add the prop `appendTo={() => document.body}` to append the popover to the document body instead of the parent element.
+2. Increase the z-index of the parent element to be higher than the z-index of the element that is hiding the popover.
+
 ### Basic
 
 ```ts file="./PopoverBasic.tsx"
@@ -38,6 +43,8 @@ Note: If you use the isVisible prop, either refer to the example above or if you
 
 ### Width auto
 
+Here the popover goes over the navigation, so the prop `appendTo` is set to the documents body.
+
 ```ts file="./PopoverWidthAuto.tsx"
 ```
 
@@ -58,10 +65,14 @@ Note: If you use the isVisible prop, either refer to the example above or if you
 
 ### Popover with icon in the title
 
+Here the popover goes over the navigation, so the prop `appendTo` is set to the documents body.
+
 ```ts file="./PopoverWithIconInTheTitle.tsx" 
 ```
 
 ### Alert popover
 
+Here the popover goes over the navigation, so the prop `appendTo` is set to the documents body.
+
 ```ts file="./PopoverAlert.tsx" 
 ```
diff --git a/packages/react-core/src/components/Popover/examples/PopoverAlert.tsx b/packages/react-core/src/components/Popover/examples/PopoverAlert.tsx
index ba3ef6979b9..a3884a71f89 100644
--- a/packages/react-core/src/components/Popover/examples/PopoverAlert.tsx
+++ b/packages/react-core/src/components/Popover/examples/PopoverAlert.tsx
@@ -38,6 +38,7 @@ export const AlertPopover: React.FunctionComponent = () => {
           headerComponent="h1"
           bodyContent={<div>Popovers are triggered by click rather than hover.</div>}
           footerContent="Popover footer"
+          appendTo={() => document.body}
         >
           <Button>Toggle popover</Button>
         </Popover>
diff --git a/packages/react-core/src/components/Popover/examples/PopoverWidthAuto.tsx b/packages/react-core/src/components/Popover/examples/PopoverWidthAuto.tsx
index f4254147f68..60dc0a9b58f 100644
--- a/packages/react-core/src/components/Popover/examples/PopoverWidthAuto.tsx
+++ b/packages/react-core/src/components/Popover/examples/PopoverWidthAuto.tsx
@@ -7,6 +7,7 @@ export const PopoverWidthAuto: React.FunctionComponent = () => (
       aria-label="Popover with auto-width"
       hasAutoWidth
       bodyContent={() => <div>Removes fixed-width and allows width to be defined by contents</div>}
+      appendTo={() => document.body}
     >
       <Button>Toggle popover</Button>
     </Popover>
diff --git a/packages/react-core/src/components/Popover/examples/PopoverWithIconInTheTitle.tsx b/packages/react-core/src/components/Popover/examples/PopoverWithIconInTheTitle.tsx
index 7b8e4cb731e..cda741f49db 100644
--- a/packages/react-core/src/components/Popover/examples/PopoverWithIconInTheTitle.tsx
+++ b/packages/react-core/src/components/Popover/examples/PopoverWithIconInTheTitle.tsx
@@ -10,6 +10,7 @@ export const PopoverWithIconInTheTitle: React.FunctionComponent = () => (
       headerIcon={<BullhornIcon />}
       bodyContent={<div>Popovers are triggered by click rather than hover.</div>}
       footerContent="Popover footer"
+      appendTo={() => document.body}
     >
       <Button>Toggle popover</Button>
     </Popover>