refactor(Wizard): Update string props to be React nodes.

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<HTMLDivElement> {
@@ -63,7 +63,7 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   /** 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<HTMLDivElement> {
   /** (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<WizardProps, WizardState> {
     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<WizardProps, WizardState> {
             return (
               <WizardNavItem
                 key={index}
-                text={step.name}
+                content={step.name}
                 isCurrent={hasActiveChild}
                 isDisabled={!canJumpToParent}
                 step={navItemStep}
@@ -418,7 +418,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
                     return (
                       <WizardNavItem
                         key={`child_${indexChild}`}
-                        text={childStep.name}
+                        content={childStep.name}
                         isCurrent={activeStep.name === childStep.name}
                         isDisabled={!enabled}
                         step={navItemStep}
@@ -435,7 +435,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
           return (
             <WizardNavItem
               key={index}
-              text={step.name}
+              content={step.name}
               isCurrent={activeStep.name === step.name}
               isDisabled={!enabled}
               step={navItemStep}

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

@@ -11,9 +11,9 @@ export interface WizardFooterInternalProps {
   isValid: boolean;
   firstStep: boolean;
   activeStep: WizardStep;
-  nextButtonText: string;
-  backButtonText: string;
-  cancelButtonText: string;
+  nextButtonText: React.ReactNode;
+  backButtonText: React.ReactNode;
+  cancelButtonText: React.ReactNode;
 }
 
 export const WizardFooterInternal: React.FunctionComponent<WizardFooterInternalProps> = ({

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 */

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<WizardNavItemProps> = ({
   children = null,
-  text = '',
+  content = '',
   isCurrent = false,
   isDisabled = false,
   step,
@@ -39,7 +39,7 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
         aria-disabled={isDisabled ? true : false}
         tabIndex={isDisabled ? -1 : undefined}
       >
-        {text}
+        {content}
       </NavItemComponent>
       {children}
     </li>

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]}
-  >
-    ''
-  </a>
+  />
   ReactNode
 </li>
 `;