Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
Nov 2, 2023
Merged

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

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6326b29
feat: ability to add props to WizardFooter buttons
adamviktora Oct 4, 2023
c5ee199
fix(WizardFooter): null check
adamviktora Oct 4, 2023
0427f12
fix(Wizard): simpler design of adding footer buttons props
adamviktora Oct 4, 2023
e971c99
test(Wizard): can add props to footer buttons
adamviktora Oct 4, 2023
541693e
docs(WizardFooter): move comment so docs have correct description
adamviktora Oct 23, 2023
b13ca84
refactor(WizardFooter): move FooterButtonProps to types file
adamviktora Oct 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 22 additions & 5 deletions packages/react-core/src/components/Wizard/WizardFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,15 @@ import React from 'react';
import { css } from '@patternfly/react-styles';
import styles from '@patternfly/react-styles/css/components/Wizard/wizard';

import { Button, ButtonVariant } from '../Button';
import { Button, ButtonProps, ButtonVariant } from '../Button';
import { isCustomWizardFooter, 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.
*/

type FooterButtonProps = Omit<ButtonProps, 'children' | 'variant' | 'onClick'>;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This needs to be placed before line 9. That comment currently renders a description of the WizardFooter component, and placing this type here removes that description on the site.


export interface WizardFooterProps {
/** The active step */
activeStep: WizardStepType;
Expand All @@ -33,6 +35,12 @@ export interface WizardFooterProps {
isBackHidden?: boolean;
/** Flag to hide the cancel button */
isCancelHidden?: boolean;
/** Additional props for the Next button. */
nextButtonProps?: Omit<FooterButtonProps, 'isDisabled' | 'type'>;
/** Additional props for the Back button. */
backButtonProps?: Omit<FooterButtonProps, 'isDisabled'>;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a reason for including type for the nextButtonProps but not backButtonProps?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am omitting that type prop, because it is being set to type="submit" on the nextButton, so I thought it may not be a good idea to have a possibility to overwrite it.

/** Additional props for the Cancel button. */
cancelButtonProps?: FooterButtonProps;
}

/**
Expand Down Expand Up @@ -62,22 +70,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>
Expand Down
21 changes: 21 additions & 0 deletions packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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</>}>
Expand Down