diff --git a/packages/react-core/src/components/Wizard/WizardFooter.tsx b/packages/react-core/src/components/Wizard/WizardFooter.tsx index a44679e2a8e..bd4596dc477 100644 --- a/packages/react-core/src/components/Wizard/WizardFooter.tsx +++ b/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; + /** Additional props for the Back button. */ + backButtonProps?: Omit; + /** 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) => ( {!isBackHidden && ( - )} - {!isCancelHidden && (
-
diff --git a/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx b/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx index ed52e8ef8f7..f374905a11c 100644 --- a/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx +++ b/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( + + + + ); + + 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( Some footer}> diff --git a/packages/react-core/src/components/Wizard/types.tsx b/packages/react-core/src/components/Wizard/types.tsx index 7be809dbf8f..0fde2151e5d 100644 --- a/packages/react-core/src/components/Wizard/types.tsx +++ b/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; + /** Type used to define parent steps. */ export interface WizardParentStep extends WizardBasicStep { /** Nested step IDs */