addressing feedback

Author: jpuzz0

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

@@ -30,7 +30,7 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   header?: React.ReactNode;
   /** Wizard footer */
   footer?: WizardFooterType;
-  /** Wizard nav */
+  /** Wizard navigation */
   nav?: WizardNavType;
   /** The initial index the wizard is to start on (1 or higher). Defaults to 1. */
   startIndex?: number;
@@ -40,11 +40,11 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   width?: number | string;
   /** Custom height of the wizard */
   height?: number | string;
-  /** Disables nav items that haven't been visited. Defaults to false */
-  forceStepVisit?: boolean;
+  /** Disables navigation items that haven't been visited. Defaults to false */
+  isStepVisitRequired?: boolean;
   /** Flag to unmount inactive steps instead of hiding. Defaults to true */
-  unmountInactiveSteps?: boolean;
-  /** Callback function when a step in the nav is clicked */
+  hasUnmountedSteps?: boolean;
+  /** Callback function when a step in the navigation is clicked */
   onNavByIndex?: WizardNavStepFunction;
   /** Callback function after next button is clicked */
   onNext?: WizardNavStepFunction;
@@ -65,8 +65,8 @@ export const Wizard = ({
   header,
   nav,
   startIndex = 1,
-  forceStepVisit = false,
-  unmountInactiveSteps = true,
+  isStepVisitRequired = false,
+  hasUnmountedSteps = true,
   onNavByIndex,
   onNext,
   onBack,
@@ -159,7 +159,7 @@ export const Wizard = ({
       steps={initialSteps}
       currentStepIndex={currentStepIndex}
       footer={footer}
-      forceStepVisit={forceStepVisit}
+      isStepVisitRequired={isStepVisitRequired}
       onNext={goToNextStep}
       onBack={goToPrevStep}
       onClose={onClose}
@@ -176,17 +176,17 @@ export const Wizard = ({
         {...wrapperProps}
       >
         {header}
-        <WizardInternal nav={nav} unmountInactiveSteps={unmountInactiveSteps} forceStepVisit={forceStepVisit} />
+        <WizardInternal nav={nav} hasUnmountedSteps={hasUnmountedSteps} isStepVisitRequired={isStepVisitRequired} />
       </div>
     </WizardContextProvider>
   );
 };
 
 const WizardInternal = ({
   nav,
-  unmountInactiveSteps,
-  forceStepVisit
-}: Pick<WizardProps, 'nav' | 'unmountInactiveSteps' | 'forceStepVisit'>) => {
+  hasUnmountedSteps,
+  isStepVisitRequired
+}: Pick<WizardProps, 'nav' | 'hasUnmountedSteps' | 'isStepVisitRequired'>) => {
   const { currentStep, steps, footer, goToStepByIndex } = useWizardContext();
   const [isNavExpanded, setIsNavExpanded] = React.useState(false);
 
@@ -195,8 +195,8 @@ const WizardInternal = ({
       return typeof nav === 'function' ? nav(isNavExpanded, steps, currentStep, goToStepByIndex) : nav;
     }
 
-    return <WizardNavInternal nav={nav} isNavExpanded={isNavExpanded} forceStepVisit={forceStepVisit} />;
-  }, [currentStep, forceStepVisit, goToStepByIndex, isNavExpanded, nav, steps]);
+    return <WizardNavInternal nav={nav} isNavExpanded={isNavExpanded} isStepVisitRequired={isStepVisitRequired} />;
+  }, [currentStep, isStepVisitRequired, goToStepByIndex, isNavExpanded, nav, steps]);
 
   return (
     <WizardToggle
@@ -206,7 +206,7 @@ const WizardInternal = ({
       currentStep={currentStep}
       isNavExpanded={isNavExpanded}
       toggleNavExpanded={() => setIsNavExpanded(prevIsExpanded => !prevIsExpanded)}
-      unmountInactiveSteps={unmountInactiveSteps}
+      hasUnmountedSteps={hasUnmountedSteps}
     />
   );
 };

packages/react-core/src/next/components/Wizard/WizardContext.tsx

@@ -41,7 +41,7 @@ export interface WizardContextProviderProps {
   steps: WizardControlStep[];
   currentStepIndex: number;
   footer: WizardFooterType;
-  forceStepVisit: boolean;
+  isStepVisitRequired: boolean;
   children: React.ReactElement;
   onNext(steps: WizardControlStep[]): void;
   onBack(steps: WizardControlStep[]): void;
@@ -55,7 +55,7 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
   steps: initialSteps,
   footer: initialFooter,
   currentStepIndex,
-  forceStepVisit,
+  isStepVisitRequired,
   children,
   onNext,
   onBack,
@@ -90,7 +90,7 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
         onNext={goToNextStep}
         onBack={goToPrevStep}
         onClose={onClose}
-        disableBackButton={currentStep?.id === steps[0]?.id}
+        isBackDisabled={currentStep?.id === steps[0]?.id}
         {...wizardFooter}
       />
     );
@@ -134,10 +134,10 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
             return stepToHide;
           }
 
-          // When forceStepVisit is enabled, if the step was previously hidden and not visited yet,
+          // When isStepVisitRequired is enabled, if the step was previously hidden and not visited yet,
           // when it is shown, all steps beyond it should be disabled to ensure it is visited.
           if (
-            forceStepVisit &&
+            isStepVisitRequired &&
             stepToHide?.isHidden === false &&
             !stepToHide?.isVisited &&
             prevSteps.indexOf(stepToHide) < prevSteps.indexOf(prevStep)
@@ -148,7 +148,7 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
           return prevStep;
         });
       }),
-    [currentStep.id, forceStepVisit]
+    [currentStep.id, isStepVisitRequired]
   );
 
   return (

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

@@ -26,13 +26,13 @@ export interface WizardFooterProps {
   /** Custom text for the Cancel link */
   cancelButtonText?: React.ReactNode;
   /** Flag to disable the next button */
-  disableNextButton?: boolean;
+  isNextDisabled?: boolean;
   /** Flag to disable the back button */
-  disableBackButton?: boolean;
-  /** True to hide the Cancel button */
-  hideCancelButton?: boolean;
+  isBackDisabled?: boolean;
   /** True to hide the Back button */
-  hideBackButton?: boolean;
+  isBackHidden?: boolean;
+  /** True to hide the Cancel button */
+  isCancelHidden?: boolean;
 }
 
 export const WizardFooterWrapper: React.FunctionComponent = ({ children }) => (
@@ -48,26 +48,26 @@ const InternalWizardFooter = ({
   onNext,
   onBack,
   onClose,
-  disableNextButton,
-  disableBackButton,
-  hideBackButton,
-  hideCancelButton,
+  isNextDisabled,
+  isBackDisabled,
+  isBackHidden,
+  isCancelHidden,
   nextButtonText = 'Next',
   backButtonText = 'Back',
   cancelButtonText = 'Cancel'
 }: Omit<WizardFooterProps, 'currentStep'>) => (
   <WizardFooterWrapper>
-    <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={disableNextButton}>
+    <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={isNextDisabled}>
       {nextButtonText}
     </Button>
 
-    {!hideBackButton && (
-      <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={disableBackButton}>
+    {!isBackHidden && (
+      <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={isBackDisabled}>
         {backButtonText}
       </Button>
     )}
 
-    {!hideCancelButton && (
+    {!isCancelHidden && (
       <div className={styles.wizardFooterCancel}>
         <Button variant={ButtonVariant.link} onClick={onClose}>
           {cancelButtonText}

packages/react-core/src/next/components/Wizard/WizardHeader.tsx

@@ -15,7 +15,7 @@ export interface WizardHeaderProps {
   /** Component type of the description */
   descriptionComponent?: 'div' | 'p';
   /** Flag indicating whether the close button should be in the header */
-  hideClose?: boolean;
+  isCloseHidden?: boolean;
   /** Aria-label applied to the X (Close) button */
   closeButtonAriaLabel?: string;
   /** id for the title */
@@ -28,14 +28,14 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
   onClose = () => undefined,
   title,
   description,
-  hideClose,
+  isCloseHidden,
   closeButtonAriaLabel,
   titleId,
   descriptionComponent: Component = 'p',
   descriptionId
 }: WizardHeaderProps) => (
   <div className={css(styles.wizardHeader)}>
-    {!hideClose && (
+    {!isCloseHidden && (
       <Button variant="plain" className={css(styles.wizardClose)} aria-label={closeButtonAriaLabel} onClick={onClose}>
         <TimesIcon aria-hidden="true" />
       </Button>

packages/react-core/src/next/components/Wizard/WizardNav.tsx

@@ -5,27 +5,25 @@ import { css } from '@patternfly/react-styles';
 export interface WizardNavProps {
   /** children should be WizardNavItem components */
   children?: any;
-  /** Aria-label applied to the nav element */
-  ariaLabel?: string;
-  /** Sets the aria-labelledby attribute on the nav element */
-  ariaLabelledBy?: string;
-  /** Whether the nav is expanded */
+  /** Aria-label applied to the navigation element */
+  'aria-label'?: string;
+  /** Sets the aria-labelledby attribute on the navigation element */
+  'aria-labelledby'?: string;
+  /** Whether the navigation is expanded */
   isExpanded?: boolean;
-  /** True to return the inner list without the wrapping nav element */
-  returnList?: boolean;
+  /** True to return the inner list without the wrapping navigation element */
+  isInnerList?: boolean;
 }
 
 export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
   children,
-  ariaLabel,
-  ariaLabelledBy,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
   isExpanded = false,
-  returnList = false
+  isInnerList = false
 }: WizardNavProps) => {
-  const innerList = <ol className={css(styles.wizardNavList)}>{children}</ol>;
-
-  if (returnList) {
-    return innerList;
+  if (isInnerList) {
+    return <ol className={css(styles.wizardNavList)}>{children}</ol>;
   }
 
   return (

packages/react-core/src/next/components/Wizard/WizardNavInternal.tsx

@@ -11,19 +11,19 @@ import { WizardNavItem } from './WizardNavItem';
  * This component is not exposed to consumers.
  */
 
-interface WizardNavInternalProps extends Pick<WizardProps, 'forceStepVisit'> {
+interface WizardNavInternalProps extends Pick<WizardProps, 'isStepVisitRequired'> {
   nav: Partial<WizardNavProps>;
   isNavExpanded: boolean;
 }
 
-export const WizardNavInternal = ({ nav, forceStepVisit, isNavExpanded }: WizardNavInternalProps) => {
+export const WizardNavInternal = ({ nav, isStepVisitRequired, isNavExpanded }: WizardNavInternalProps) => {
   const { currentStep, steps, goToStepByIndex } = useWizardContext();
 
-  const wizardNavProps = {
+  const wizardNavProps: WizardNavProps = {
     isExpanded: isNavExpanded,
-    ariaLabel: nav?.ariaLabel || 'Wizard nav',
-    ...(nav?.ariaLabelledBy && {
-      ariaLabelledBy: nav?.ariaLabelledBy
+    'aria-label': nav?.['aria-label'] || 'Wizard navigation',
+    ...(nav?.['aria-labelledby'] && {
+      'aria-labelledby': nav['aria-labelledby']
     })
   };
 
@@ -54,7 +54,7 @@ export const WizardNavInternal = ({ nav, forceStepVisit, isNavExpanded }: Wizard
               </React.Fragment>
             );
 
-            // Don't render the sub-step nav item if the hidden property is enabled
+            // Don't render the sub-step navigation item if the hidden property is enabled
             if (subStep.isHidden) {
               return;
             }
@@ -76,7 +76,7 @@ export const WizardNavInternal = ({ nav, forceStepVisit, isNavExpanded }: Wizard
                   id={subStep.id}
                   content={subStep.name}
                   isCurrent={currentStep?.id === subStep.id}
-                  isDisabled={subStep.isDisabled || (forceStepVisit && !subStep.isVisited)}
+                  isDisabled={subStep.isDisabled || (isStepVisitRequired && !subStep.isVisited)}
                   isVisited={subStep.isVisited}
                   stepIndex={subStepOrderIndex}
                   onNavItemClick={goToStepByIndex}
@@ -105,7 +105,7 @@ export const WizardNavInternal = ({ nav, forceStepVisit, isNavExpanded }: Wizard
                 status={step.status}
                 {...step.navItem}
               >
-                <WizardNav {...wizardNavProps} returnList>
+                <WizardNav {...wizardNavProps} isInnerList>
                   {subNavItems}
                 </WizardNav>
               </WizardNavItem>
@@ -121,7 +121,7 @@ export const WizardNavInternal = ({ nav, forceStepVisit, isNavExpanded }: Wizard
                 id={step.id}
                 content={step.name}
                 isCurrent={currentStep?.id === step.id}
-                isDisabled={step.isDisabled || (forceStepVisit && !step.isVisited)}
+                isDisabled={step.isDisabled || (isStepVisitRequired && !step.isVisited)}
                 isVisited={step.isVisited}
                 stepIndex={stepIndex}
                 onNavItemClick={goToStepByIndex}

packages/react-core/src/next/components/Wizard/WizardNavItem.tsx

@@ -10,25 +10,25 @@ import { WizardNavItemStatus } from './types';
 export interface WizardNavItemProps {
   /** Can nest a WizardNav component for substeps */
   children?: React.ReactNode;
-  /** The content to display in the nav item */
+  /** The content to display in the navigation item */
   content?: React.ReactNode;
-  /** Whether the nav item is the currently active item */
+  /** Whether the navigation item is the currently active item */
   isCurrent?: boolean;
-  /** Whether the nav item is disabled */
+  /** Whether the navigation item is disabled */
   isDisabled?: boolean;
-  /** Whether the nav item has been visited */
+  /** Whether the navigation item has been visited */
   isVisited?: boolean;
   /** The step index passed into the onNavItemClick callback */
   stepIndex: number;
-  /** Callback for when the nav item is clicked */
+  /** Callback for when the navigation item is clicked */
   onNavItemClick?: (stepIndex: number) => any;
   /** Component used to render WizardNavItem */
   navItemComponent?: 'button' | 'a';
   /** An optional url to use for when using an anchor component */
   href?: string;
   /** Flag indicating that this NavItem has child steps and is expandable */
   isExpandable?: boolean;
-  /** The id for the nav item */
+  /** The id for the navigation item */
   id?: string | number;
   /** Used to determine the icon displayed next to content. Default has no icon. */
   status?: 'default' | 'error';

packages/react-core/src/next/components/Wizard/WizardStep.tsx

@@ -11,7 +11,7 @@ import { WizardFooterProps } from './WizardFooter';
  */
 
 export interface WizardStepProps {
-  /** Name of the step's nav item */
+  /** Name of the step's navigation item */
   name: React.ReactNode;
   /** Unique identifier */
   id: string | number;
@@ -21,19 +21,17 @@ export interface WizardStepProps {
   body?: Omit<Omit<WizardBodyProps, 'children'>, 'children'> | null;
   /** Optional list of sub-steps */
   steps?: React.ReactElement<WizardStepProps>[];
-  /** Flag to disable the step's nav item */
+  /** Flag to disable the step's navigation item */
   isDisabled?: boolean;
   /** Flag to represent whether the step has been visited (navigated to) */
   isVisited?: boolean;
   /** Flag to determine whether the step is hidden */
   isHidden?: boolean;
-  /** Content shown when the step's nav item is selected. When treated as a parent step, only sub-step content will be shown. */
-  component?: React.ReactElement;
-  /** Replaces the step's nav item or its properties. */
+  /** Replaces the step's navigation item or its properties. */
   navItem?: WizardNavItemType;
   /** Replaces the step's footer. The step's footer takes precedance over the wizard's footer. */
   footer?: React.ReactElement | Partial<WizardFooterProps>;
-  /** Used to determine icon next to the step's navItem */
+  /** Used to determine icon next to the step's navigation item */
   status?: 'default' | 'error';
 }
 
@@ -57,7 +55,7 @@ export const WizardStep = ({ children, body, id, footer, isHidden, isDisabled, n
   }, [id, setStep, currentStep?.id, isDisabled, navItem, status, currentStep?.isVisited]);
 
   // Toggle visibility when the isHidden flag updates.
-  // Wizard's unmountInactiveSteps prop must be set to false for visibility changes to take effect.
+  // Wizard's hasUnmountedSteps prop must be set to false for visibility changes to take effect.
   React.useEffect(() => {
     if (isHidden !== undefined) {
       toggleStep(id, isHidden);