@patternfly/react-core 4.255.0 → 4.255.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.255.0",
+  "version": "4.255.2",
   "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",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "d37ff721bbea043cbb5c51b95829f8143d37c80c"
+  "gitHead": "16b0f452e3031ba81eda21a873e961bc6aab51fd"
 }

package/src/components/Alert/AlertIcon.tsx

@@ -26,9 +26,9 @@ export interface AlertIconProps extends React.HTMLProps<HTMLDivElement> {
 
 export const AlertIcon = ({ variant, customIcon, className = '', ...props }: AlertIconProps) => {
   const Icon = variantIcons[variant];
-  return (
+  return Icon ? (
     <div {...props} className={css(styles.alertIcon, className)}>
       {customIcon || <Icon />}
     </div>
-  );
+  ) : null;
 };

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

@@ -103,6 +103,22 @@ describe('Button', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test('isLoading inline link', () => {
+    const { asFragment } = render(
+      <Button variant="link" isInline isLoading aria-label="Loading" spinnerAriaValueText="Loading">
+        Loading Button
+      </Button>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('isLoading icon only', () => {
+    const { asFragment } = render(
+      <Button variant="plain" isLoading aria-label="Upload" spinnerAriaValueText="Loading" icon={<div>ICON</div>} />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
   test('allows passing in a string as the component', () => {
     const component = 'a';
     render(<Button component={component}>anchor button</Button>);
@@ -130,11 +146,4 @@ describe('Button', () => {
     render(<Button tabIndex={0}>TabIndex 0 Button</Button>);
     expect(screen.getByRole('button')).toHaveAttribute('tabindex', '0');
   });
-
-  test('isLoading icon only', () => {
-    const { asFragment } = render(
-      <Button variant="plain" isLoading aria-label="Upload" spinnerAriaValueText="Loading" icon={<div>ICON</div>} />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
 });

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

@@ -240,6 +240,42 @@ exports[`Button isLoading icon only 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Button isLoading inline link 1`] = `
+<DocumentFragment>
+  <button
+    aria-disabled="false"
+    aria-label="Loading"
+    class="pf-c-button pf-m-link pf-m-inline pf-m-progress pf-m-in-progress"
+    data-ouia-component-id="OUIA-Generated-Button-link-5"
+    data-ouia-component-type="PF4/Button"
+    data-ouia-safe="true"
+    type="button"
+  >
+    <span
+      class="pf-c-button__progress"
+    >
+      <span
+        aria-label="Contents"
+        aria-valuetext="Loading"
+        class="pf-c-spinner pf-m-md"
+        role="progressbar"
+      >
+        <span
+          class="pf-c-spinner__clipper"
+        />
+        <span
+          class="pf-c-spinner__lead-ball"
+        />
+        <span
+          class="pf-c-spinner__tail-ball"
+        />
+      </span>
+    </span>
+    Loading Button
+  </button>
+</DocumentFragment>
+`;
+
 exports[`Button isSmall 1`] = `
 <DocumentFragment>
   <button

package/src/components/Button/examples/ButtonProgress.tsx

@@ -12,6 +12,7 @@ interface LoadingPropsType {
 export const ButtonProgress: React.FunctionComponent = () => {
   const [isPrimaryLoading, setIsPrimaryLoading] = React.useState<boolean>(true);
   const [isSecondaryLoading, setIsSecondaryLoading] = React.useState<boolean>(true);
+  const [isInlineLoading, setIsInlineLoading] = React.useState<boolean>(true);
   const [isUploading, setIsUploading] = React.useState<boolean>(false);
 
   const primaryLoadingProps = {} as LoadingPropsType;
@@ -24,6 +25,11 @@ export const ButtonProgress: React.FunctionComponent = () => {
   secondaryLoadingProps.spinnerAriaLabel = 'Content being loaded';
   secondaryLoadingProps.isLoading = isSecondaryLoading;
 
+  const inlineLoadingProps = {} as LoadingPropsType;
+  inlineLoadingProps.spinnerAriaValueText = 'Loading';
+  inlineLoadingProps.spinnerAriaLabel = 'Content being loaded';
+  inlineLoadingProps.isLoading = isInlineLoading;
+
   const uploadingProps = {} as LoadingPropsType;
   uploadingProps.spinnerAriaValueText = 'Loading';
   uploadingProps.spinnerAriaLabel = 'Uploading data';
@@ -37,18 +43,25 @@ export const ButtonProgress: React.FunctionComponent = () => {
         onClick={() => setIsPrimaryLoading(!isPrimaryLoading)}
         {...primaryLoadingProps}
       >
-        {isPrimaryLoading ? 'Pause loading logs' : 'Resume loading logs'}
+        {isPrimaryLoading ? 'Click to stop loading' : 'Click to start loading'}
       </Button>{' '}
       <Button variant="secondary" onClick={() => setIsSecondaryLoading(!isSecondaryLoading)} {...secondaryLoadingProps}>
         {isSecondaryLoading ? 'Click to stop loading' : 'Click to start loading'}
       </Button>{' '}
+      <br />
+      <br />
       <Button
         variant="plain"
         {...(!isUploading && { 'aria-label': 'Upload' })}
         onClick={() => setIsUploading(!isUploading)}
         icon={<UploadIcon />}
         {...uploadingProps}
-      />
+      />{' '}
+      <br />
+      <br />
+      <Button variant="link" isInline onClick={() => setIsInlineLoading(!isInlineLoading)} {...inlineLoadingProps}>
+        {isInlineLoading ? 'Pause loading logs' : 'Resume loading logs'}
+      </Button>{' '}
     </React.Fragment>
   );
 };

package/src/components/Wizard/examples/Wizard.md

@@ -134,8 +134,10 @@ class IncrementallyEnabledStepsWizard extends React.Component {
       stepIdReached: 1
     };
     this.onNext = ({ id }) => {
+      const [, orderIndex] = id.split('-');
+
       this.setState({
-        stepIdReached: this.state.stepIdReached < id ? id : this.state.stepIdReached
+        stepIdReached: this.state.stepIdReached < orderIndex ? orderIndex : this.state.stepIdReached
       });
     };
     this.closeWizard = () => {
@@ -147,27 +149,27 @@ class IncrementallyEnabledStepsWizard extends React.Component {
     const { stepIdReached } = this.state;
 
     const steps = [
-      { id: 'incrementally-enabled-1', name: 'First step', component: <p>Step 1 content</p> },
+      { id: 'incrementallyEnabled-1', name: 'First step', component: <p>Step 1 content</p> },
       {
-        id: 'incrementally-enabled-2',
+        id: 'incrementallyEnabled-2',
         name: 'Second step',
         component: <p>Step 2 content</p>,
         canJumpTo: stepIdReached >= 2
       },
       {
-        id: 'incrementally-enabled-3',
+        id: 'incrementallyEnabled-3',
         name: 'Third step',
         component: <p>Step 3 content</p>,
         canJumpTo: stepIdReached >= 3
       },
       {
-        id: 'incrementally-enabled-4',
+        id: 'incrementallyEnabled-4',
         name: 'Fourth step',
         component: <p>Step 4 content</p>,
         canJumpTo: stepIdReached >= 4
       },
       {
-        id: 'incrementally-enabled-5',
+        id: 'incrementallyEnabled-5',
         name: 'Review',
         component: <p>Review step content</p>,
         nextButtonText: 'Finish',
@@ -312,8 +314,10 @@ class ValidationWizard extends React.Component {
 
     this.onNext = ({ id, name }, { prevId, prevName }) => {
       console.log(`current id: ${id}, current name: ${name}, previous id: ${prevId}, previous name: ${prevName}`);
+      const [, orderIndex] = id.split('-');
+
       this.setState({
-        stepIdReached: this.state.stepIdReached < id ? id : this.state.stepIdReached
+        stepIdReached: this.state.stepIdReached < orderIndex ? orderIndex : this.state.stepIdReached
       });
       this.areAllStepsValid();
     };

package/src/next/components/Wizard/Wizard.tsx

@@ -42,8 +42,6 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   height?: number | string;
   /** Disables navigation items that haven't been visited. Defaults to false */
   isStepVisitRequired?: boolean;
-  /** Flag to unmount inactive steps instead of hiding. Defaults to true */
-  hasUnmountedSteps?: boolean;
   /** Callback function when a step in the navigation is clicked */
   onNavByIndex?: WizardNavStepFunction;
   /** Callback function after next button is clicked */
@@ -66,7 +64,6 @@ export const Wizard = ({
   nav,
   startIndex = 1,
   isStepVisitRequired = false,
-  hasUnmountedSteps = true,
   onNavByIndex,
   onNext,
   onBack,
@@ -74,42 +71,37 @@ export const Wizard = ({
   onClose,
   ...wrapperProps
 }: WizardProps) => {
-  const [currentStepIndex, setCurrentStepIndex] = React.useState(startIndex);
+  const [activeStepIndex, setActiveStepIndex] = React.useState(startIndex);
   const initialSteps = buildSteps(children);
 
   const goToNextStep = (steps: WizardControlStep[] = initialSteps) => {
-    const newStepIndex =
-      steps.findIndex((step, index) => index + 1 > currentStepIndex && !step.isHidden && !isWizardParentStep(step)) + 1;
+    const newStepIndex = steps.find(step => step.index > activeStepIndex && !step.isHidden && !isWizardParentStep(step))
+      ?.index;
 
-    if (currentStepIndex >= steps.length || !newStepIndex) {
+    if (activeStepIndex >= steps.length || !newStepIndex) {
       return onSave ? onSave() : onClose?.();
     }
 
-    const currStep = isWizardParentStep(steps[currentStepIndex])
-      ? steps[currentStepIndex + 1]
-      : steps[currentStepIndex];
-    const prevStep = steps[currentStepIndex - 1];
-
-    setCurrentStepIndex(newStepIndex);
+    const currStep = isWizardParentStep(steps[activeStepIndex]) ? steps[activeStepIndex + 1] : steps[activeStepIndex];
+    const prevStep = steps[activeStepIndex - 1];
 
-    return onNext?.(normalizeNavStep(currStep, steps), normalizeNavStep(prevStep, steps));
+    setActiveStepIndex(newStepIndex);
+    return onNext?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
   };
 
   const goToPrevStep = (steps: WizardControlStep[] = initialSteps) => {
     const newStepIndex =
       findLastIndex(
         steps,
-        (step: WizardControlStep, index: number) =>
-          index + 1 < currentStepIndex && !step.isHidden && !isWizardParentStep(step)
+        (step: WizardControlStep) => step.index < activeStepIndex && !step.isHidden && !isWizardParentStep(step)
       ) + 1;
-    const currStep = isWizardParentStep(steps[currentStepIndex - 2])
-      ? steps[currentStepIndex - 3]
-      : steps[currentStepIndex - 2];
-    const prevStep = steps[currentStepIndex - 1];
-
-    setCurrentStepIndex(newStepIndex);
+    const currStep = isWizardParentStep(steps[activeStepIndex - 2])
+      ? steps[activeStepIndex - 3]
+      : steps[activeStepIndex - 2];
+    const prevStep = steps[activeStepIndex - 1];
 
-    return onBack?.(normalizeNavStep(currStep, steps), normalizeNavStep(prevStep, steps));
+    setActiveStepIndex(newStepIndex);
+    return onBack?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
   };
 
   const goToStepByIndex = (steps: WizardControlStep[] = initialSteps, index: number) => {
@@ -120,46 +112,40 @@ export const Wizard = ({
       index = 1;
     } else if (index > lastStepIndex) {
       index = lastStepIndex;
-    } else if (steps[index - 1].isHidden) {
-      // eslint-disable-next-line no-console
-      console.error('Wizard: Unable to navigate to hidden step.');
     }
 
     const currStep = steps[index - 1];
-    const prevStep = steps[currentStepIndex - 1];
-    setCurrentStepIndex(index);
+    const prevStep = steps[activeStepIndex - 1];
 
-    return onNavByIndex?.(normalizeNavStep(currStep, steps), normalizeNavStep(prevStep, steps));
+    setActiveStepIndex(index);
+    return onNavByIndex?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
   };
 
   const goToStepById = (steps: WizardControlStep[] = initialSteps, id: number | string) => {
-    const stepIndex = steps.findIndex(step => step.id === id) + 1;
+    const step = steps.find(step => step.id === id);
+    const stepIndex = step?.index;
+    const lastStepIndex = steps.length + 1;
 
-    if (stepIndex > 0 && stepIndex < steps.length + 1 && !steps[stepIndex].isHidden) {
-      setCurrentStepIndex(stepIndex);
-    } else {
-      // eslint-disable-next-line no-console
-      console.error(`Wizard: Unable to navigate to step with id: ${id}.`);
+    if (stepIndex > 0 && stepIndex < lastStepIndex && !step.isHidden) {
+      setActiveStepIndex(stepIndex);
     }
   };
 
   const goToStepByName = (steps: WizardControlStep[] = initialSteps, name: string) => {
-    const stepIndex = initialSteps.findIndex(step => step.name === name) + 1;
+    const step = steps.find(step => step.name === name);
+    const stepIndex = step?.index;
+    const lastStepIndex = steps.length + 1;
 
-    if (stepIndex > 0 && stepIndex < steps.length + 1 && !steps[stepIndex].isHidden) {
-      setCurrentStepIndex(stepIndex);
-    } else {
-      // eslint-disable-next-line no-console
-      console.error(`Wizard: Unable to navigate to step with name: ${name}.`);
+    if (stepIndex > 0 && stepIndex < lastStepIndex && !step.isHidden) {
+      setActiveStepIndex(stepIndex);
     }
   };
 
   return (
     <WizardContextProvider
       steps={initialSteps}
-      currentStepIndex={currentStepIndex}
+      activeStepIndex={activeStepIndex}
       footer={footer}
-      isStepVisitRequired={isStepVisitRequired}
       onNext={goToNextStep}
       onBack={goToPrevStep}
       onClose={onClose}
@@ -176,37 +162,32 @@ export const Wizard = ({
         {...wrapperProps}
       >
         {header}
-        <WizardInternal nav={nav} hasUnmountedSteps={hasUnmountedSteps} isStepVisitRequired={isStepVisitRequired} />
+        <WizardInternal nav={nav} isStepVisitRequired={isStepVisitRequired} />
       </div>
     </WizardContextProvider>
   );
 };
 
-const WizardInternal = ({
-  nav,
-  hasUnmountedSteps,
-  isStepVisitRequired
-}: Pick<WizardProps, 'nav' | 'hasUnmountedSteps' | 'isStepVisitRequired'>) => {
-  const { currentStep, steps, footer, goToStepByIndex } = useWizardContext();
+const WizardInternal = ({ nav, isStepVisitRequired }: Pick<WizardProps, 'nav' | 'isStepVisitRequired'>) => {
+  const { activeStep, steps, footer, goToStepByIndex } = useWizardContext();
   const [isNavExpanded, setIsNavExpanded] = React.useState(false);
 
   const wizardNav = React.useMemo(() => {
     if (isCustomWizardNav(nav)) {
-      return typeof nav === 'function' ? nav(isNavExpanded, steps, currentStep, goToStepByIndex) : nav;
+      return typeof nav === 'function' ? nav(isNavExpanded, steps, activeStep, goToStepByIndex) : nav;
     }
 
     return <WizardNavInternal nav={nav} isNavExpanded={isNavExpanded} isStepVisitRequired={isStepVisitRequired} />;
-  }, [currentStep, isStepVisitRequired, goToStepByIndex, isNavExpanded, nav, steps]);
+  }, [activeStep, isStepVisitRequired, goToStepByIndex, isNavExpanded, nav, steps]);
 
   return (
     <WizardToggle
       nav={wizardNav}
       footer={footer}
       steps={steps}
-      currentStep={currentStep}
+      activeStep={activeStep}
       isNavExpanded={isNavExpanded}
       toggleNavExpanded={() => setIsNavExpanded(prevIsExpanded => !prevIsExpanded)}
-      hasUnmountedSteps={hasUnmountedSteps}
     />
   );
 };

package/src/next/components/Wizard/WizardBody.tsx

@@ -10,7 +10,7 @@ import { css } from '@patternfly/react-styles';
 export interface WizardBodyProps {
   children: React.ReactNode | React.ReactNode[];
   /** Set to true to remove the default body padding */
-  hasNoBodyPadding?: boolean;
+  hasNoPadding?: boolean;
   /** An aria-label to use for the wrapper element */
   'aria-label'?: string;
   /** Sets the aria-labelledby attribute for the wrapper element */
@@ -21,13 +21,13 @@ export interface WizardBodyProps {
 
 export const WizardBody = ({
   children,
-  hasNoBodyPadding = false,
+  hasNoPadding = false,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
   component: WrapperComponent = 'div'
 }: WizardBodyProps) => (
   <WrapperComponent aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} className={css(styles.wizardMain)}>
-    <div className={css(styles.wizardMainBody, hasNoBodyPadding && styles.modifiers.noPadding)}>{children}</div>
+    <div className={css(styles.wizardMainBody, hasNoPadding && styles.modifiers.noPadding)}>{children}</div>
   </WrapperComponent>
 );
 

package/src/next/components/Wizard/WizardContext.tsx

@@ -1,16 +1,14 @@
 import React from 'react';
 
-import { isCustomWizardFooter, isWizardParentStep, WizardControlStep, WizardFooterType } from './types';
-import { getCurrentStep } from './utils';
+import { isCustomWizardFooter, WizardControlStep, WizardFooterType } from './types';
+import { getActiveStep } from './utils';
 import { WizardFooter, WizardFooterProps } from './WizardFooter';
 
 export interface WizardContextProps {
   /** List of steps */
   steps: WizardControlStep[];
   /** Current step */
-  currentStep: WizardControlStep;
-  /** Current step index */
-  currentStepIndex: number;
+  activeStep: WizardControlStep;
   /** Footer element */
   footer: React.ReactElement;
   /** Navigate to the next step */
@@ -31,17 +29,14 @@ export interface WizardContextProps {
   getStep: (stepId: number | string) => WizardControlStep;
   /** Set step by ID */
   setStep: (step: Pick<WizardControlStep, 'id'> & Partial<WizardControlStep>) => void;
-  /** Toggle step visibility by ID */
-  toggleStep: (stepId: number | string, isHidden: boolean) => void;
 }
 
 export const WizardContext = React.createContext({} as WizardContextProps);
 
 export interface WizardContextProviderProps {
   steps: WizardControlStep[];
-  currentStepIndex: number;
+  activeStepIndex: number;
   footer: WizardFooterType;
-  isStepVisitRequired: boolean;
   children: React.ReactElement;
   onNext(steps: WizardControlStep[]): void;
   onBack(steps: WizardControlStep[]): void;
@@ -54,8 +49,7 @@ export interface WizardContextProviderProps {
 export const WizardContextProvider: React.FunctionComponent<WizardContextProviderProps> = ({
   steps: initialSteps,
   footer: initialFooter,
-  currentStepIndex,
-  isStepVisitRequired,
+  activeStepIndex,
   children,
   onNext,
   onBack,
@@ -64,43 +58,58 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
   goToStepByName,
   goToStepByIndex
 }) => {
-  const [steps, setSteps] = React.useState(initialSteps);
+  const [currentSteps, setCurrentSteps] = React.useState(initialSteps);
   const [currentFooter, setCurrentFooter] = React.useState(
     typeof initialFooter !== 'function' ? initialFooter : undefined
   );
-  const currentStep = getCurrentStep(steps, currentStepIndex);
+
+  // Combined initial and current state steps
+  const steps = React.useMemo(
+    () =>
+      currentSteps.map((currentStepProps, index) => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { isVisited, ...initialStepProps } = initialSteps[index];
+
+        return {
+          ...currentStepProps,
+          ...initialStepProps
+        };
+      }),
+    [initialSteps, currentSteps]
+  );
+  const activeStep = getActiveStep(steps, activeStepIndex);
 
   const goToNextStep = React.useCallback(() => onNext(steps), [onNext, steps]);
   const goToPrevStep = React.useCallback(() => onBack(steps), [onBack, steps]);
 
   const footer = React.useMemo(() => {
-    const wizardFooter = currentFooter || initialFooter;
+    const wizardFooter = activeStep?.footer || currentFooter || initialFooter;
 
     if (isCustomWizardFooter(wizardFooter)) {
       const customFooter = wizardFooter;
 
       return typeof customFooter === 'function'
-        ? customFooter(currentStep, goToNextStep, goToPrevStep, onClose)
+        ? customFooter(activeStep, goToNextStep, goToPrevStep, onClose)
         : customFooter;
     }
 
     return (
       <WizardFooter
-        currentStep={currentStep}
+        activeStep={activeStep}
         onNext={goToNextStep}
         onBack={goToPrevStep}
         onClose={onClose}
-        isBackDisabled={currentStep?.id === steps[0]?.id}
+        isBackDisabled={activeStep?.id === steps[0]?.id}
         {...wizardFooter}
       />
     );
-  }, [currentFooter, initialFooter, currentStep, goToNextStep, goToPrevStep, onClose, steps]);
+  }, [currentFooter, initialFooter, activeStep, goToNextStep, goToPrevStep, onClose, steps]);
 
   const getStep = React.useCallback((stepId: string | number) => steps.find(step => step.id === stepId), [steps]);
 
   const setStep = React.useCallback(
     (step: Pick<WizardControlStep, 'id'> & Partial<WizardControlStep>) =>
-      setSteps(prevSteps =>
+      setCurrentSteps(prevSteps =>
         prevSteps.map(prevStep => {
           if (prevStep.id === step.id) {
             return { ...prevStep, ...step };
@@ -112,56 +121,15 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
     []
   );
 
-  const toggleStep = React.useCallback(
-    (stepId: string | number, isHidden: boolean) =>
-      setSteps(prevSteps => {
-        let stepToHide: WizardControlStep;
-
-        return prevSteps.map(prevStep => {
-          if (prevStep.id === stepId) {
-            // Don't hide the currently active step or its parent (if a sub-step).
-            if (
-              isHidden &&
-              (currentStep.id === prevStep.id ||
-                (isWizardParentStep(prevStep) && prevStep.subStepIds.includes(currentStep.id)))
-            ) {
-              // eslint-disable-next-line no-console
-              console.error('Wizard: Unable to hide the current step or its parent.');
-              return prevStep;
-            }
-
-            stepToHide = { ...prevStep, isHidden };
-            return stepToHide;
-          }
-
-          // When isStepVisitRequired is enabled, if the step was previously hidden and not visited yet,
-          // when it is shown, all steps beyond it should be disabled to ensure it is visited.
-          if (
-            isStepVisitRequired &&
-            stepToHide?.isHidden === false &&
-            !stepToHide?.isVisited &&
-            prevSteps.indexOf(stepToHide) < prevSteps.indexOf(prevStep)
-          ) {
-            return { ...prevStep, isVisited: false };
-          }
-
-          return prevStep;
-        });
-      }),
-    [currentStep.id, isStepVisitRequired]
-  );
-
   return (
     <WizardContext.Provider
       value={{
         steps,
-        currentStep,
-        currentStepIndex,
+        activeStep,
         footer,
         onClose,
         getStep,
         setStep,
-        toggleStep,
         setFooter: setCurrentFooter,
         onNext: goToNextStep,
         onBack: goToPrevStep,

package/src/next/components/Wizard/WizardFooter.tsx

@@ -11,8 +11,8 @@ import { isCustomWizardFooter, WizardControlStep, WizardNavStepFunction } from '
  */
 
 export interface WizardFooterProps {
-  /** The current step */
-  currentStep: WizardControlStep;
+  /** The active step */
+  activeStep: WizardControlStep;
   /** Next button callback */
   onNext: () => WizardNavStepFunction | void;
   /** Back button callback */
@@ -43,9 +43,9 @@ export const WizardFooterWrapper = ({ children }: WizardFooterWrapperProps) => (
   <footer className={css(styles.wizardFooter)}>{children}</footer>
 );
 
-export const WizardFooter = ({ currentStep, ...internalProps }: WizardFooterProps) => {
-  const currentStepFooter = !isCustomWizardFooter(currentStep.footer) && currentStep.footer;
-  return <InternalWizardFooter {...internalProps} {...currentStepFooter} />;
+export const WizardFooter = ({ activeStep, ...internalProps }: WizardFooterProps) => {
+  const activeStepFooter = !isCustomWizardFooter(activeStep.footer) && activeStep.footer;
+  return <InternalWizardFooter {...internalProps} {...activeStepFooter} />;
 };
 
 const InternalWizardFooter = ({
@@ -59,7 +59,7 @@ const InternalWizardFooter = ({
   nextButtonText = 'Next',
   backButtonText = 'Back',
   cancelButtonText = 'Cancel'
-}: Omit<WizardFooterProps, 'currentStep'>) => (
+}: Omit<WizardFooterProps, 'activeStep'>) => (
   <WizardFooterWrapper>
     <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={isNextDisabled}>
       {nextButtonText}