feat(Wizard): ability to add props to WizardFooter buttons (#9709)

* feat: ability to add props to WizardFooter buttons

* fix(WizardFooter): null check

* fix(Wizard): simpler design of adding footer buttons props

* test(Wizard): can add props to footer buttons

* docs(WizardFooter): move comment so docs have correct description

* refactor(WizardFooter): move FooterButtonProps to types file

packages/react-core/src/components/Wizard/WizardFooter.tsx

@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
 import { Button, ButtonVariant } from '../Button';
-import { isCustomWizardFooter, WizardStepType } from './types';
+import { isCustomWizardFooter, WizardFooterButtonProps, WizardStepType } from './types';
 
 /**
  * Hosts the standard structure of a footer with ties to the active step so that text for buttons can vary from step to step.
@@ -33,6 +33,12 @@ export interface WizardFooterProps {
   isBackHidden?: boolean;
   /** Flag to hide the cancel button */
   isCancelHidden?: boolean;
+  /** Additional props for the Next button. */
+  nextButtonProps?: Omit<WizardFooterButtonProps, 'isDisabled' | 'type'>;
+  /** Additional props for the Back button. */
+  backButtonProps?: Omit<WizardFooterButtonProps, 'isDisabled'>;
+  /** Additional props for the Cancel button. */
+  cancelButtonProps?: WizardFooterButtonProps;
 }
 
 /**
@@ -62,22 +68,31 @@ const InternalWizardFooter = ({
   isCancelHidden,
   nextButtonText = 'Next',
   backButtonText = 'Back',
-  cancelButtonText = 'Cancel'
+  cancelButtonText = 'Cancel',
+  nextButtonProps,
+  backButtonProps,
+  cancelButtonProps
 }: Omit<WizardFooterProps, 'activeStep'>) => (
   <WizardFooterWrapper>
     {!isBackHidden && (
-      <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={isBackDisabled}>
+      <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={isBackDisabled} {...backButtonProps}>
         {backButtonText}
       </Button>
     )}
 
-    <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={isNextDisabled}>
+    <Button
+      variant={ButtonVariant.primary}
+      type="submit"
+      onClick={onNext}
+      isDisabled={isNextDisabled}
+      {...nextButtonProps}
+    >
       {nextButtonText}
     </Button>
 
     {!isCancelHidden && (
       <div className={styles.wizardFooterCancel}>
-        <Button variant={ButtonVariant.link} onClick={onClose}>
+        <Button variant={ButtonVariant.link} onClick={onClose} {...cancelButtonProps}>
           {cancelButtonText}
         </Button>
       </div>

packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx

@@ -58,6 +58,27 @@ test('renders default footer with custom props', () => {
   expect(screen.getByRole('button', { name: 'Leave now!' })).toBeVisible();
 });
 
+test('can add props to default footer buttons', () => {
+  render(
+    <Wizard
+      footer={{
+        nextButtonProps: { id: 'next-button', className: 'custom-class' },
+        backButtonProps: { id: 'back-button' },
+        cancelButtonProps: { id: 'cancel-button' }
+      }}
+    >
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
+
+  const nextButton = screen.getByRole('button', { name: 'Next' });
+
+  expect(nextButton).toHaveProperty('id', 'next-button');
+  expect(nextButton).toHaveClass('custom-class');
+  expect(screen.getByRole('button', { name: 'Back' })).toHaveProperty('id', 'back-button');
+  expect(screen.getByRole('button', { name: 'Cancel' })).toHaveProperty('id', 'cancel-button');
+});
+
 test('renders custom footer', () => {
   render(
     <Wizard footer={<>Some footer</>}>

packages/react-core/src/components/Wizard/types.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { WizardNavProps, WizardNavItemProps, WizardFooterProps } from '.';
+import { ButtonProps } from '../Button';
 
 /** Type used to define 'basic' steps, or in other words, steps that are neither parents or children of parents. */
 export interface WizardBasicStep {
@@ -30,6 +31,9 @@ export enum WizardNavItemStatus {
   Error = 'error'
 }
 
+/** Type for customizing a button (next, back or cancel) in a Wizard footer. It omits some props which either have a default value or are passed directly via WizardFooterProps. */
+export type WizardFooterButtonProps = Omit<ButtonProps, 'children' | 'variant' | 'onClick'>;
+
 /** Type used to define parent steps. */
 export interface WizardParentStep extends WizardBasicStep {
   /** Nested step IDs */