@patternfly/react-core 5.0.0-alpha.97 → 5.0.0-alpha.98

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.97",
+  "version": "5.0.0-alpha.98",
   "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",
@@ -49,7 +49,7 @@
     "@patternfly/react-icons": "^5.0.0-alpha.14",
     "@patternfly/react-styles": "^5.0.0-alpha.10",
     "@patternfly/react-tokens": "^5.0.0-alpha.9",
-    "focus-trap": "7.4.0",
+    "focus-trap": "7.4.1",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "2f2eb377c744647e34d557e1550ae7a01f87f5a6"
+  "gitHead": "cb753616f434b5fc8308a19047867f16e4cceb65"
 }

package/src/components/Label/Label.tsx

@@ -232,30 +232,31 @@ export const Label: React.FunctionComponent<LabelProps> = ({
     setCurrValue(editableInputRef.current.value);
   };
 
-  let labelComponentChild = <span className={css(styles.labelContent)}>{content}</span>;
-
+  let LabelComponentChildElement = 'span';
   if (href) {
-    labelComponentChild = (
-      <a className={css(styles.labelContent)} href={href}>
-        {content}
-      </a>
-    );
+    LabelComponentChildElement = 'a';
   } else if (isEditable) {
-    labelComponentChild = (
-      <button
-        ref={editableButtonRef}
-        className={css(styles.labelContent)}
-        onClick={(e: React.MouseEvent) => {
-          setIsEditableActive(true);
-          e.stopPropagation();
-        }}
-        {...editableProps}
-      >
-        {content}
-      </button>
-    );
+    LabelComponentChildElement = 'button';
   }
 
+  const labelComponentChildProps = {
+    className: css(styles.labelContent),
+    ...(isTooltipVisible && { tabIndex: 0 }),
+    ...(href && { href }),
+    ...(isEditable && {
+      ref: editableButtonRef,
+      onClick: (e: React.MouseEvent) => {
+        setIsEditableActive(true);
+        e.stopPropagation();
+      },
+      ...editableProps
+    })
+  };
+
+  let labelComponentChild = (
+    <LabelComponentChildElement {...labelComponentChildProps}>{content}</LabelComponentChildElement>
+  );
+
   if (render) {
     labelComponentChild = (
       <React.Fragment>

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

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

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

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

package/src/components/Wizard/hooks/__tests__/useWizardFooter.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { useWizardFooter } from '../useWizardFooter';
 import * as WizardContext from '../../WizardContext';