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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.96",
+  "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": "88e143dc1df5a48525453a2038c495f9ee5b8f62"
+  "gitHead": "cb753616f434b5fc8308a19047867f16e4cceb65"
 }

package/src/components/Badge/Badge.tsx

@@ -25,7 +25,7 @@ export const Badge: React.FunctionComponent<BadgeProps> = ({
     className={css(styles.badge, (isRead ? styles.modifiers.read : styles.modifiers.unread) as any, className)}
   >
     {children}
-    {screenReaderText && <span className="pf-screen-reader">{screenReaderText}</span>}
+    {screenReaderText && <span className="pf-v5-screen-reader">{screenReaderText}</span>}
   </span>
 );
 Badge.displayName = 'Badge';

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

@@ -31,9 +31,9 @@ test('Renders with class name pf-m-read when isRead prop is true', () => {
   expect(screen.getByText('Test')).toHaveClass('pf-m-read');
 });
 
-test('Does not render pf-screen-reader class by default', () => {
+test('Does not render pf-v5-screen-reader class by default', () => {
   render(<Badge>Test</Badge>);
-  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-screen-reader"></span>');
+  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-v5-screen-reader"></span>');
 });
 
 test('Renders screenReaderText passed via prop', () => {

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -336,7 +336,7 @@ export const CalendarMonth = ({
           <tr>
             {calendar[0].map(({ date }, index) => (
               <th key={index} className={styles.calendarMonthDay} scope="col">
-                <span className="pf-screen-reader">{longWeekdayFormat(date)}</span>
+                <span className="pf-v5-screen-reader">{longWeekdayFormat(date)}</span>
                 <span aria-hidden>{weekdayFormat(date)}</span>
               </th>
             ))}

package/src/components/Card/Card.tsx

@@ -141,7 +141,7 @@ export const Card: React.FunctionComponent<CardProps> = ({
     >
       {hasSelectableInput && (
         <input
-          className="pf-screen-reader"
+          className="pf-v5-screen-reader"
           id={`${id}-input`}
           {...ariaProps}
           type="checkbox"

package/src/components/DataList/DataListItem.tsx

@@ -93,7 +93,7 @@ export class DataListItem extends React.Component<DataListItemProps> {
             >
               {onSelectableRowChange && (
                 <input
-                  className="pf-screen-reader"
+                  className="pf-v5-screen-reader"
                   type="radio"
                   checked={isSelected}
                   onChange={(event) => onSelectableRowChange(event, id)}

package/src/components/DataList/examples/DataList.md

@@ -68,9 +68,9 @@ import { css } from '@patternfly/react-styles';
 
 ```
 
-### Selectable rows
+### Clickable rows
 
-```ts file="./DataListSelectableRows.tsx"
+```ts file="./DataListClickableRows.tsx"
 
 ```
 

package/src/components/DataList/examples/{DataListSelectableRows.tsx → DataListClickableRows.tsx}

@@ -14,7 +14,7 @@ import {
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
-export const DataListSelectableRows: React.FunctionComponent = () => {
+export const DataListClickableRows: React.FunctionComponent = () => {
   const [isOpen1, setIsOpen1] = React.useState(false);
   const [isOpen2, setIsOpen2] = React.useState(false);
   const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('');
@@ -46,24 +46,24 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <DataList
-        aria-label="selectable data list example"
+        aria-label="clickable data list example"
         selectedDataListItemId={selectedDataListItemId}
         onSelectDataListItem={onSelectDataListItem}
         onSelectableRowChange={handleInputChange}
       >
-        <DataListItem aria-labelledby="selectable-action-item1" id="item1">
+        <DataListItem aria-labelledby="clickable-action-item1" id="item1">
           <DataListItemRow>
             <DataListItemCells
               dataListCells={[
                 <DataListCell key="primary content">
-                  <span id="selectable-action-item1">Single actionable Primary content</span>
+                  <span id="clickable-action-item1">Single actionable Primary content</span>
                 </DataListCell>,
                 <DataListCell key="secondary content">Single actionable Secondary content</DataListCell>
               ]}
             />
             <DataListAction
-              aria-labelledby="selectable-action-item1 selectable-action-action1"
-              id="selectable-action-action1"
+              aria-labelledby="clickable-action-item1 clickable-action-action1"
+              id="clickable-action-action1"
               aria-label="Actions"
               isPlainButtonAction
             >
@@ -76,7 +76,7 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
                     isExpanded={isOpen1}
                     onClick={onToggle1}
                     variant="plain"
-                    aria-label="Data list selectable rows example kebab toggle 1"
+                    aria-label="Data list clickable rows example kebab toggle 1"
                   >
                     <EllipsisVIcon aria-hidden="true" />
                   </MenuToggle>
@@ -102,19 +102,19 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
             </DataListAction>
           </DataListItemRow>
         </DataListItem>
-        <DataListItem aria-labelledby="selectable-actions-item2" id="item2">
+        <DataListItem aria-labelledby="clickable-actions-item2" id="item2">
           <DataListItemRow>
             <DataListItemCells
               dataListCells={[
                 <DataListCell key="primary content">
-                  <span id="selectable-actions-item2">Selectable actions Primary content</span>
+                  <span id="clickable-actions-item2">clickable actions Primary content</span>
                 </DataListCell>,
-                <DataListCell key="secondary content">Selectable actions Secondary content</DataListCell>
+                <DataListCell key="secondary content">clickable actions Secondary content</DataListCell>
               ]}
             />
             <DataListAction
-              aria-labelledby="selectable-actions-item2 selectable-actions-action2"
-              id="selectable-actions-action2"
+              aria-labelledby="clickable-actions-item2 clickable-actions-action2"
+              id="clickable-actions-action2"
               aria-label="Actions"
               isPlainButtonAction
             >
@@ -127,7 +127,7 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
                     isExpanded={isOpen2}
                     onClick={onToggle2}
                     variant="plain"
-                    aria-label="Data list selectable rows example kebab toggle 2"
+                    aria-label="Data list clickable rows example kebab toggle 2"
                   >
                     <EllipsisVIcon aria-hidden="true" />
                   </MenuToggle>

package/src/components/DataList/examples/DataListDraggable.tsx

@@ -93,10 +93,10 @@ export const DataListDraggable: React.FunctionComponent = () => {
           ))}
         </DataList>
       </Droppable>
-      <div className="pf-screen-reader" aria-live="assertive">
+      <div className="pf-v5-screen-reader" aria-live="assertive">
         {liveText}
       </div>
-      <div className="pf-screen-reader" id={`description-${uniqueId}`}>
+      <div className="pf-v5-screen-reader" id={`description-${uniqueId}`}>
         Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm
         the drag, or any other key to cancel the drag operation.
       </div>

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

@@ -190,7 +190,7 @@ exports[`With popover opened 1`] = `
                     scope="col"
                   >
                     <span
-                      class="pf-screen-reader"
+                      class="pf-v5-screen-reader"
                     >
                       Sunday
                     </span>
@@ -205,7 +205,7 @@ exports[`With popover opened 1`] = `
                     scope="col"
                   >
                     <span
-                      class="pf-screen-reader"
+                      class="pf-v5-screen-reader"
                     >
                       Monday
                     </span>
@@ -220,7 +220,7 @@ exports[`With popover opened 1`] = `
                     scope="col"
                   >
                     <span
-                      class="pf-screen-reader"
+                      class="pf-v5-screen-reader"
                     >
                       Tuesday
                     </span>
@@ -235,7 +235,7 @@ exports[`With popover opened 1`] = `
                     scope="col"
                   >
                     <span
-                      class="pf-screen-reader"
+                      class="pf-v5-screen-reader"
                     >
                       Wednesday
                     </span>
@@ -250,7 +250,7 @@ exports[`With popover opened 1`] = `
                     scope="col"
                   >
                     <span
-                      class="pf-screen-reader"
+                      class="pf-v5-screen-reader"
                     >
                       Thursday
                     </span>
@@ -265,7 +265,7 @@ exports[`With popover opened 1`] = `
                     scope="col"
                   >
                     <span
-                      class="pf-screen-reader"
+                      class="pf-v5-screen-reader"
                     >
                       Friday
                     </span>
@@ -280,7 +280,7 @@ exports[`With popover opened 1`] = `
                     scope="col"
                   >
                     <span
-                      class="pf-screen-reader"
+                      class="pf-v5-screen-reader"
                     >
                       Saturday
                     </span>

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/MultipleFileUpload/MultipleFileUploadStatusItem.tsx

@@ -148,7 +148,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
     <li className={css(styles.multipleFileUploadStatusItem, className)} {...props}>
       <div className={styles.multipleFileUploadStatusItemIcon}>{fileIcon || <FileIcon />}</div>
       <div className={styles.multipleFileUploadStatusItemMain}>
-        <div className="pf-screen-reader" aria-live="polite">
+        <div className="pf-v5-screen-reader" aria-live="polite">
           {progressAriaLiveMessage &&
             typeof progressAriaLiveMessage === 'function' &&
             progressAriaLiveMessage(+loadPercentage.toFixed(2))}

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap

@@ -25,7 +25,7 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
     >
       <div
         aria-live="polite"
-        class="pf-screen-reader"
+        class="pf-v5-screen-reader"
       >
         Progress value is 0%.
       </div>
@@ -137,7 +137,7 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
     >
       <div
         aria-live="polite"
-        class="pf-screen-reader"
+        class="pf-v5-screen-reader"
       >
         Progress value is 0%.
       </div>
@@ -246,7 +246,7 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progres
     >
       <div
         aria-live="polite"
-        class="pf-screen-reader"
+        class="pf-v5-screen-reader"
       >
         test message
       </div>
@@ -357,7 +357,7 @@ exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMe
     >
       <div
         aria-live="polite"
-        class="pf-screen-reader"
+        class="pf-v5-screen-reader"
       >
         test message 0
       </div>
@@ -468,7 +468,7 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
     >
       <div
         aria-live="polite"
-        class="pf-screen-reader"
+        class="pf-v5-screen-reader"
       >
         Progress value is 42%.
       </div>
@@ -594,7 +594,7 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file
     >
       <div
         aria-live="polite"
-        class="pf-screen-reader"
+        class="pf-v5-screen-reader"
       >
         Progress value is 0%.
       </div>
@@ -705,7 +705,7 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
     >
       <div
         aria-live="polite"
-        class="pf-screen-reader"
+        class="pf-v5-screen-reader"
       >
         Progress value is 0%.
       </div>
@@ -814,7 +814,7 @@ exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage whe
     >
       <div
         aria-live="polite"
-        class="pf-screen-reader"
+        class="pf-v5-screen-reader"
       >
         Progress value is 0%.
       </div>

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';

package/src/demos/ProgressDemo.md

@@ -31,7 +31,7 @@ ProgressStepperDemo = () => {
         <br />
       </StackItem>
       <StackItem>
-        <div className="pf-screen-reader" aria-live="polite">
+        <div className="pf-v5-screen-reader" aria-live="polite">
           {`Progress value is ${currentValue}%.`}
         </div>
         <Progress value={currentValue} title="Title" />
@@ -71,7 +71,7 @@ ProgressStepperDemo = () => {
         <br />
       </StackItem>
       <StackItem>
-        <div className="pf-screen-reader" aria-live="polite">
+        <div className="pf-v5-screen-reader" aria-live="polite">
           {`Progress value is ${currentValue}%.`}
         </div>
         <Progress value={currentValue} title="Title" />

package/src/demos/ProgressStepperDemo.md

@@ -46,7 +46,7 @@ ProgressStepperDemo = () => {
         <br />
       </StackItem>
       <StackItem>
-        <div className="pf-screen-reader" aria-live="polite">
+        <div className="pf-v5-screen-reader" aria-live="polite">
           {steps[currentStep] && `On ${steps[currentStep].title}.`}
           {steps[currentStep - 1] && `${steps[currentStep - 1].title} was successful.`}
         </div>