@patternfly/react-core 4.203.2 → 4.204.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.203.2",
+  "version": "4.204.0",
   "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",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.54.2",
-    "@patternfly/react-styles": "^4.53.2",
-    "@patternfly/react-tokens": "^4.55.2",
+    "@patternfly/react-icons": "^4.55.0",
+    "@patternfly/react-styles": "^4.54.0",
+    "@patternfly/react-tokens": "^4.56.0",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "ca5c716646e391e92b954b9cb3bbbe52b16834b7"
+  "gitHead": "9116e7cc699cff22722794c15cda402c1cabf67b"
 }

package/src/components/ProgressStepper/ProgressStep.tsx

@@ -22,13 +22,11 @@ export interface ProgressStepProps
   description?: string;
   /** ID of the title of the progress step. */
   titleId?: string;
-  /** Popover for a progress step. */
-  popover?: React.ReactNode;
-  /** @hide Forwarded reference to title container */
-  innerRef?: React.Ref<any>;
   /** Accessible label for the progress step. Should communicate all information being communicated by the progress
    * step's icon, including the variant and the completed status. */
   'aria-label'?: string;
+  /** Forwards the step ref to rendered function.  Use this prop to add a popover to the step.*/
+  popoverRender?: (stepRef: React.RefObject<any>) => React.ReactNode;
 }
 
 const variantIcons = {
@@ -49,7 +47,7 @@ const variantStyle = {
   danger: styles.modifiers.danger
 };
 
-const ProgressStepBase: React.FunctionComponent<ProgressStepProps> = ({
+export const ProgressStep: React.FunctionComponent<ProgressStepProps> = ({
   children,
   className,
   variant,
@@ -57,13 +55,13 @@ const ProgressStepBase: React.FunctionComponent<ProgressStepProps> = ({
   description,
   icon,
   titleId,
-  popover,
-  innerRef,
   'aria-label': ariaLabel,
+  popoverRender,
   ...props
 }: ProgressStepProps) => {
   const _icon = icon !== undefined ? icon : variantIcons[variant];
-  const Component = popover !== undefined ? 'span' : 'div';
+  const Component = popoverRender !== undefined ? 'span' : 'div';
+  const stepRef = React.useRef();
 
   if (props.id === undefined || titleId === undefined) {
     /* eslint-disable no-console */
@@ -89,14 +87,14 @@ const ProgressStepBase: React.FunctionComponent<ProgressStepProps> = ({
       </div>
       <div className={css(styles.progressStepperStepMain)}>
         <Component
-          className={css(styles.progressStepperStepTitle, popover && styles.modifiers.helpText)}
+          className={css(styles.progressStepperStepTitle, popoverRender && styles.modifiers.helpText)}
           id={titleId}
-          ref={innerRef}
-          {...(popover && { tabIndex: 0, role: 'button', type: 'button' })}
+          ref={stepRef}
+          {...(popoverRender && { tabIndex: 0, role: 'button', type: 'button' })}
           {...(props.id !== undefined && titleId !== undefined && { 'aria-labelledby': `${props.id} ${titleId}` })}
         >
           {children}
-          {popover}
+          {popoverRender && popoverRender(stepRef)}
         </Component>
         {description && <div className={css(styles.progressStepperStepDescription)}>{description}</div>}
       </div>
@@ -104,7 +102,4 @@ const ProgressStepBase: React.FunctionComponent<ProgressStepProps> = ({
   );
 };
 
-export const ProgressStep = React.forwardRef((props: ProgressStepProps, ref: React.Ref<HTMLSpanElement>) => (
-  <ProgressStepBase innerRef={ref} {...props} />
-));
 ProgressStep.displayName = 'ProgressStep';

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

@@ -87,7 +87,7 @@ describe('ProgressStep', () => {
   });
 
   test('renders help text styling', () => {
-    const view = render(<ProgressStep popover={<div></div>}>Title</ProgressStep>);
+    const view = render(<ProgressStep popoverRender={({ stepRef }) => (<div></div>)}>Title</ProgressStep>);
     expect(view.container).toMatchSnapshot();
   });
 

package/src/components/ProgressStepper/examples/ProgressStepper.md

@@ -331,17 +331,13 @@ import PendingIcon from '@patternfly/react-icons/dist/esm/icons/pending-icon';
 
 ### With help popover
 
-To add a popover to a progress step, set the `popover` and `ref` properties on the `ProgressStep` component and the `reference` property on the `Popover` component.
+To add a popover to a progress step, set the `popoverRender` properties on the `ProgressStep` component.
 
 ```js
 import React from 'react';
 import { ProgressStepper, ProgressStep, Popover } from '@patternfly/react-core';
 
 PopoverProgressStep = () => {
-  const firstStepRef = React.useRef();
-  const secondStepRef = React.useRef();
-  const thirdStepRef = React.useRef();
-
   return (
     <ProgressStepper>
       <ProgressStep
@@ -349,55 +345,52 @@ PopoverProgressStep = () => {
         id="popover-step1"
         titleId="popover-step1-title"
         aria-label="completed step with popover, step with success"
-        popover={
+        popoverRender={( stepRef ) => (
           <Popover
             aria-label="First step help"
             headerContent={<div>First step popover</div>}
             bodyContent={<div>Additional info or help text content.</div>}
-            reference={firstStepRef}
+            reference={stepRef}
             position="right"
           />
-        }
-        ref={firstStepRef}
+           )}
       >
-        First Step
+        First step
       </ProgressStep>
       <ProgressStep
         variant="danger"
         id="popover-step2"
         titleId="popover-step2-title"
         aria-label="completed step with popover, step with danger"
-        popover={
+        popoverRender={( stepRef ) => (
           <Popover
             aria-label="Second step help"
             headerContent={<div>Second step popover</div>}
             bodyContent={<div>Additional info or help text content.</div>}
-            reference={secondStepRef}
+            reference={stepRef}
             position="right"
           />
-        }
-        ref={secondStepRef}
+        )}
       >
-        Second Step
+        Second step
       </ProgressStep>
       <ProgressStep
         variant="info"
         id="popover-step3"
         titleId="popover-step3-title"
         aria-label="step with popover"
-        popover={
+        popoverRender={(stepRef) => (
           <Popover
             aria-label="Third step help"
             headerContent={<div>Third step popover</div>}
             bodyContent={<div>Additional info or help text content.</div>}
-            reference={thirdStepRef}
+            reference={stepRef}
             position="right"
           />
-        }
+        )}
         isCurrent
-        ref={thirdStepRef}
       >
-        Third Step
+        Third step
       </ProgressStep>
       <ProgressStep variant="pending" id="popover-step4" titleId="popover-step4-title" aria-label="pending step">
         Fourth step