diff --git a/packages/react-core/src/components/Wizard/Wizard.tsx b/packages/react-core/src/components/Wizard/Wizard.tsx index e501777ceb7..72aa2ba2b7f 100644 --- a/packages/react-core/src/components/Wizard/Wizard.tsx +++ b/packages/react-core/src/components/Wizard/Wizard.tsx @@ -21,7 +21,7 @@ export interface WizardStep { /** Optional identifier */ id?: string | number; /** The name of the step */ - name: string; + name: React.ReactNode; /** The component to render in the main body */ component?: any; /** Setting to true hides the side nav and footer */ @@ -31,7 +31,7 @@ export interface WizardStep { /** Sub steps */ steps?: WizardStep[]; /** (Unused if footer is controlled) Can change the Next button text. If nextButtonText is also set for the Wizard, this step specific one overrides it. */ - nextButtonText?: string; + nextButtonText?: React.ReactNode; /** (Unused if footer is controlled) The condition needed to enable the Next button */ enableNext?: boolean; /** (Unused if footer is controlled) True to hide the Cancel button */ @@ -41,8 +41,8 @@ export interface WizardStep { } export type WizardStepFunctionType = ( - newStep: { id?: string | number; name: string }, - prevStep: { prevId?: string | number; prevName: string } + newStep: { id?: string | number; name: React.ReactNode }, + prevStep: { prevId?: string | number; prevName: React.ReactNode } ) => void; export interface WizardProps extends React.HTMLProps { @@ -63,7 +63,7 @@ export interface WizardProps extends React.HTMLProps { /** The wizard title (required unless isInPage is used) */ title?: string; /** The wizard description */ - description?: string; + description?: React.ReactNode; /** Callback function to close the wizard */ onClose?: () => void; /** Callback function when a step in the nav is clicked */ @@ -87,11 +87,11 @@ export interface WizardProps extends React.HTMLProps { /** (Unused if footer is controlled) Callback function after Back button is clicked */ onBack?: WizardStepFunctionType; /** (Unused if footer is controlled) The Next button text */ - nextButtonText?: string; + nextButtonText?: React.ReactNode; /** (Unused if footer is controlled) The Back button text */ - backButtonText?: string; + backButtonText?: React.ReactNode; /** (Unused if footer is controlled) The Cancel button text */ - cancelButtonText?: string; + cancelButtonText?: React.ReactNode; /** (Unused if footer is controlled) aria-label for the close button */ closeButtonAriaLabel?: string; /** The parent container to append the modal to. Defaults to document.body */ @@ -273,7 +273,7 @@ export class Wizard extends React.Component { return flattenedSteps; }; - private getFlattenedStepsIndex = (flattenedSteps: WizardStep[], stepName: string): number => { + private getFlattenedStepsIndex = (flattenedSteps: WizardStep[], stepName: React.ReactNode): number => { for (let i = 0; i < flattenedSteps.length; i++) { if (flattenedSteps[i].name === stepName) { return i + 1; @@ -401,7 +401,7 @@ export class Wizard extends React.Component { return ( { return ( { return ( = ({ diff --git a/packages/react-core/src/components/Wizard/WizardHeader.tsx b/packages/react-core/src/components/Wizard/WizardHeader.tsx index 1e37862935e..0c3e72791a4 100644 --- a/packages/react-core/src/components/Wizard/WizardHeader.tsx +++ b/packages/react-core/src/components/Wizard/WizardHeader.tsx @@ -11,7 +11,7 @@ export interface WizardHeaderProps { /** Title of the wizard */ title: string; /** Description of the wizard */ - description?: string; + description?: React.ReactNode; /** Aria-label applied to the X (Close) button */ closeButtonAriaLabel?: string; /** id for the title */ diff --git a/packages/react-core/src/components/Wizard/WizardNavItem.tsx b/packages/react-core/src/components/Wizard/WizardNavItem.tsx index 06d4bec731c..7ec3b0f3941 100644 --- a/packages/react-core/src/components/Wizard/WizardNavItem.tsx +++ b/packages/react-core/src/components/Wizard/WizardNavItem.tsx @@ -5,8 +5,8 @@ import styles from '@patternfly/react-styles/css/components/Wizard/wizard'; export interface WizardNavItemProps { /** Can nest a WizardNav component for substeps */ children?: React.ReactNode; - /** The text to display in the nav item */ - text?: string; + /** The content to display in the nav item */ + content?: React.ReactNode; /** Whether the nav item is the currently active item */ isCurrent?: boolean; /** Whether the nav item is disabled */ @@ -21,7 +21,7 @@ export interface WizardNavItemProps { export const WizardNavItem: React.FunctionComponent = ({ children = null, - text = '', + content = '', isCurrent = false, isDisabled = false, step, @@ -39,7 +39,7 @@ export const WizardNavItem: React.FunctionComponent = ({ aria-disabled={isDisabled ? true : false} tabIndex={isDisabled ? -1 : undefined} > - {text} + {content} {children} diff --git a/packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/WizardNavItem.test.tsx.snap b/packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/WizardNavItem.test.tsx.snap index 2b4ac750950..367a2fff134 100644 --- a/packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/WizardNavItem.test.tsx.snap +++ b/packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/WizardNavItem.test.tsx.snap @@ -9,9 +9,7 @@ exports[`WizardNavItem should match snapshot (auto-generated) 1`] = ` aria-disabled={false} className="pf-c-wizard__nav-link" onClick={[Function]} - > - '' - + /> ReactNode `;