@patternfly/react-core 4.248.0 → 4.250.0

package/src/next/components/Wizard/WizardNavItem.tsx

@@ -1,29 +1,37 @@
 import * as React from 'react';
+
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+
+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;
-  /** The step passed into the onNavItemClick callback */
-  step: number;
-  /** Callback for when the nav item is clicked */
-  onNavItemClick?: (step: number) => any;
+  /** Whether the navigation item has been visited */
+  isVisited?: boolean;
+  /** The step index passed into the onNavItemClick callback */
+  stepIndex: number;
+  /** 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';
 }
 
 export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
@@ -31,16 +39,17 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
   content = '',
   isCurrent = false,
   isDisabled = false,
-  step,
+  isVisited = false,
+  stepIndex,
   onNavItemClick = () => undefined,
   navItemComponent = 'button',
   href = null,
   isExpandable = false,
   id,
+  status = 'default',
   ...rest
 }: WizardNavItemProps) => {
   const NavItemComponent = navItemComponent;
-
   const [isExpanded, setIsExpanded] = React.useState(false);
 
   React.useEffect(() => {
@@ -52,14 +61,22 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
     console.error('WizardNavItem: When using an anchor, please provide an href');
   }
 
-  const btnProps = {
-    disabled: isDisabled
-  };
+  const ariaLabel = React.useMemo(() => {
+    if (status === WizardNavItemStatus.Error || (isVisited && !isCurrent)) {
+      let label = content.toString();
+
+      if (status === WizardNavItemStatus.Error) {
+        label += `, ${status}`;
+      }
+
+      // No need to signify step is visited if current
+      if (isVisited && !isCurrent) {
+        label += ', visited';
+      }
 
-  const linkProps = {
-    tabIndex: isDisabled ? -1 : undefined,
-    href
-  };
+      return label;
+    }
+  }, [content, isCurrent, isVisited, status]);
 
   return (
     <li
@@ -71,11 +88,11 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
     >
       <NavItemComponent
         {...rest}
-        {...(navItemComponent === 'a' ? { ...linkProps } : { ...btnProps })}
+        {...(navItemComponent === 'a' ? { tabIndex: isDisabled ? -1 : undefined, href } : { disabled: isDisabled })}
         {...(id && { id: id.toString() })}
         onClick={e => {
           e.preventDefault();
-          isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onNavItemClick(step);
+          isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onNavItemClick(stepIndex);
         }}
         className={css(
           styles.wizardNavLink,
@@ -85,6 +102,7 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
         aria-disabled={isDisabled ? true : null}
         aria-current={isCurrent && !children ? 'step' : false}
         {...(isExpandable && { 'aria-expanded': isExpanded })}
+        {...(ariaLabel && { 'aria-label': ariaLabel })}
       >
         {isExpandable ? (
           <>
@@ -96,11 +114,20 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
             </span>
           </>
         ) : (
-          content
+          <>
+            {content}
+            {/* TODO, patternfly/patternfly#5142 */}
+            {status === WizardNavItemStatus.Error && (
+              <span style={{ marginLeft: 'var(--pf-global--spacer--sm)' }}>
+                <ExclamationCircleIcon color="var(--pf-global--danger-color--100)" />
+              </span>
+            )}
+          </>
         )}
       </NavItemComponent>
       {children}
     </li>
   );
 };
+
 WizardNavItem.displayName = 'WizardNavItem';

package/src/next/components/Wizard/WizardStep.tsx

@@ -1,23 +1,68 @@
 import React from 'react';
 
-import { WizardBasicStep } from './types';
+import { WizardNavItemType } from './types';
 import { WizardBody, WizardBodyProps } from './WizardBody';
+import { useWizardFooter } from './hooks/useWizardFooter';
+import { useWizardContext } from './WizardContext';
+import { WizardFooterProps } from './WizardFooter';
 
 /**
- * Used as a passthrough of step properties for Wizard and all supporting child components.
- * Also acts as a wrapper for content, with an optional inclusion of WizardBody.
+ * The primary child component for Wizard. Step props are used for the list of steps managed in context.
  */
 
-export interface WizardStepProps extends Omit<WizardBasicStep, 'visited'> {
+export interface WizardStepProps {
+  /** Name of the step's navigation item */
+  name: React.ReactNode;
+  /** Unique identifier */
+  id: string | number;
   /** Optional for when the step is used as a parent to sub-steps */
   children?: React.ReactNode;
   /** Props for WizardBody that wraps content by default. Can be set to null for exclusion of WizardBody. */
-  body?: Omit<WizardBodyProps, 'children'> | null;
+  body?: Omit<Omit<WizardBodyProps, 'children'>, 'children'> | null;
   /** Optional list of sub-steps */
   steps?: React.ReactElement<WizardStepProps>[];
+  /** 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;
+  /** 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 navigation item */
+  status?: 'default' | 'error';
 }
 
-export const WizardStep = ({ body, children }: WizardStepProps) =>
-  body || body === undefined ? <WizardBody {...body}>{children}</WizardBody> : <>{children}</>;
+export const WizardStep = ({ children, body, id, footer, isHidden, isDisabled, navItem, status }: WizardStepProps) => {
+  const { currentStep, setStep, toggleStep } = useWizardContext();
+
+  useWizardFooter(footer, id);
+
+  // Update the controlled step when a change is detected with select properties
+  React.useEffect(() => {
+    if (currentStep?.id === id && (isDisabled || navItem || status || !currentStep?.isVisited)) {
+      setStep({
+        id,
+        ...(isDisabled && { isDisabled }),
+        ...(navItem && { navItem }),
+        ...(status && { status }),
+        // When the current step is active and isn't visited, set as isVisited
+        ...(!currentStep?.isVisited && { isVisited: true })
+      });
+    }
+  }, [id, setStep, currentStep?.id, isDisabled, navItem, status, currentStep?.isVisited]);
+
+  // Toggle visibility when the isHidden flag updates.
+  // Wizard's hasUnmountedSteps prop must be set to false for visibility changes to take effect.
+  React.useEffect(() => {
+    if (isHidden !== undefined) {
+      toggleStep(id, isHidden);
+    }
+  }, [toggleStep, id, isHidden]);
+
+  return body || body === undefined ? <WizardBody {...body}>{children}</WizardBody> : <>{children}</>;
+};
 
 WizardStep.displayName = 'WizardStep';

package/src/next/components/Wizard/WizardToggle.tsx

@@ -6,52 +6,48 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 import { KeyTypes } from '../../../helpers/constants';
-import { WizardNav, WizardNavItem, WizardNavProps } from '../Wizard';
-import {
-  WizardControlStep,
-  isWizardBasicStep,
-  isWizardParentStep,
-  isWizardSubStep,
-  isCustomWizardNav,
-  DefaultWizardNavProps,
-  CustomWizardNavFunction
-} from './types';
-import { useWizardContext } from './WizardContext';
+import { WizardNavProps } from '../Wizard';
+import { WizardControlStep, isWizardSubStep } from './types';
 
 /**
- * Used to toggle between step content, including the body and footer. This is also where the nav and its expandability is controlled.
+ * Used to toggle between step content, including the body and footer. This is also where the navigation and its expandability is controlled.
  */
 
 export interface WizardToggleProps {
   /** List of steps and/or sub-steps */
   steps: WizardControlStep[];
-  /** The currently active WizardStep */
-  activeStep: WizardControlStep;
+  /** The current step */
+  currentStep: WizardControlStep;
   /** Wizard footer */
   footer: React.ReactElement;
-  /** Wizard nav */
+  /** Wizard navigation */
   nav: React.ReactElement<WizardNavProps>;
   /** The expandable dropdown button's aria-label */
   'aria-label'?: string;
   /** Flag to unmount inactive steps instead of hiding. Defaults to true */
-  unmountInactiveSteps?: boolean;
-  /** Flag to determine whether the dropdown nav is expanded */
+  hasUnmountedSteps?: boolean;
+  /** Flag to determine whether the dropdown navigation is expanded */
   isNavExpanded?: boolean;
-  /** Callback to expand or collapse the dropdown nav */
+  /** Callback to expand or collapse the dropdown navigation */
   toggleNavExpanded?: () => void;
 }
 
 export const WizardToggle = ({
   steps,
-  activeStep,
+  currentStep,
   footer,
   nav,
   isNavExpanded,
   toggleNavExpanded,
-  unmountInactiveSteps = true,
+  hasUnmountedSteps = true,
   'aria-label': ariaLabel = 'Wizard toggle'
 }: WizardToggleProps) => {
-  const isActiveSubStep = isWizardSubStep(activeStep);
+  const isActiveSubStep = isWizardSubStep(currentStep);
+  const nonSubSteps = steps.filter(step => !isWizardSubStep(step));
+  const wizardToggleIndex =
+    nonSubSteps.indexOf(
+      isWizardSubStep(currentStep) ? steps.find(step => step.id === currentStep.parentId) : currentStep
+    ) + 1;
 
   const handleKeyClicks = React.useCallback(
     (event: KeyboardEvent): void => {
@@ -62,7 +58,7 @@ export const WizardToggle = ({
     [isNavExpanded, toggleNavExpanded]
   );
 
-  // Open/close collapsable nav on keydown event
+  // Open/close collapsable navigation on keydown event
   React.useEffect(() => {
     const target = typeof document !== 'undefined' ? document.body : null;
     target?.addEventListener('keydown', handleKeyClicks, false);
@@ -72,11 +68,11 @@ export const WizardToggle = ({
     };
   }, [handleKeyClicks]);
 
-  // Only render the active step when unmountInactiveSteps is true
-  const bodyContent = unmountInactiveSteps
-    ? activeStep?.component
+  // Only render the current step when hasUnmountedSteps is true
+  const bodyContent = hasUnmountedSteps
+    ? currentStep?.component
     : steps.map(step => {
-        if (activeStep?.name === step.name) {
+        if (currentStep?.name === step.name) {
           return step.component;
         }
 
@@ -97,10 +93,10 @@ export const WizardToggle = ({
       >
         <span className={css(styles.wizardToggleList)}>
           <span className={css(styles.wizardToggleListItem)}>
-            {activeStep?.name}
+            <span className={css(styles.wizardToggleNum)}>{wizardToggleIndex}</span> {currentStep?.name}
             {isActiveSubStep && <AngleRightIcon className={css(styles.wizardToggleSeparator)} aria-hidden="true" />}
           </span>
-          {isActiveSubStep && <span className={css(styles.wizardToggleListItem)}>{activeStep?.name}</span>}
+          {isActiveSubStep && <span className={css(styles.wizardToggleListItem)}>{currentStep?.name}</span>}
         </span>
 
         <span className={css(styles.wizardToggleIcon)}>
@@ -119,118 +115,4 @@ export const WizardToggle = ({
   );
 };
 
-interface WizardToggleInternalProps extends Pick<WizardToggleProps, 'unmountInactiveSteps'> {
-  /** Custom WizardNav or callback used to create a default WizardNav */
-  nav?: DefaultWizardNavProps | CustomWizardNavFunction;
-}
-
-export const WizardToggleInternal = ({ nav, unmountInactiveSteps }: WizardToggleInternalProps) => {
-  const [isNavExpanded, setIsNavExpanded] = React.useState(false);
-  const { activeStep, steps, footer, goToStepByIndex } = useWizardContext();
-
-  const wizardNav = React.useMemo(() => {
-    if (isCustomWizardNav(nav)) {
-      return nav(isNavExpanded, steps, activeStep, goToStepByIndex);
-    }
-
-    const navProps = {
-      isExpanded: isNavExpanded,
-      'aria-label': nav?.ariaLabel || 'Wizard nav',
-      ...(nav?.ariaLabelledBy && { 'aria-labelledby': nav?.ariaLabelledBy })
-    };
-
-    return (
-      <WizardNav {...navProps}>
-        {steps.map((step, index) => {
-          const stepIndex = index + 1;
-          const stepNavItem = step.navItem && <React.Fragment key={step.id}>{step.navItem}</React.Fragment>;
-
-          if (isWizardParentStep(step)) {
-            let firstSubStepIndex;
-            let hasActiveChild = false;
-
-            const subNavItems = step.subStepIds?.map((subStepId, index) => {
-              const subStep = steps.find(step => step.id === subStepId);
-              const subStepIndex = steps.indexOf(subStep) + 1;
-
-              if (index === 0) {
-                firstSubStepIndex = subStepIndex;
-              }
-
-              if (activeStep?.id === subStep.id) {
-                hasActiveChild = true;
-              }
-
-              return subStep.navItem ? (
-                <React.Fragment key={subStep.id}>{subStep.navItem}</React.Fragment>
-              ) : (
-                <WizardNavItem
-                  key={subStep.id}
-                  id={subStep.id}
-                  content={subStep.name}
-                  isCurrent={activeStep?.id === subStep.id}
-                  isDisabled={subStep.isDisabled || (nav?.forceStepVisit && !subStep.visited)}
-                  step={subStepIndex}
-                  onNavItemClick={goToStepByIndex}
-                />
-              );
-            });
-
-            const hasEnabledChildren = React.Children.toArray(subNavItems).some(
-              child => React.isValidElement(child) && !child.props.isDisabled
-            );
-
-            return (
-              stepNavItem || (
-                <WizardNavItem
-                  key={step.id}
-                  id={step.id}
-                  content={step.name}
-                  isExpandable={nav?.isExpandable}
-                  isCurrent={hasActiveChild}
-                  isDisabled={!hasEnabledChildren}
-                  step={firstSubStepIndex}
-                  onNavItemClick={goToStepByIndex}
-                >
-                  <WizardNav {...navProps} returnList>
-                    {subNavItems}
-                  </WizardNav>
-                </WizardNavItem>
-              )
-            );
-          }
-
-          if (isWizardBasicStep(step)) {
-            return (
-              stepNavItem || (
-                <WizardNavItem
-                  key={step.id}
-                  id={step.id}
-                  content={step.name}
-                  isCurrent={activeStep?.id === step.id}
-                  isDisabled={step.isDisabled || (nav?.forceStepVisit && !step.visited)}
-                  step={stepIndex}
-                  onNavItemClick={goToStepByIndex}
-                />
-              )
-            );
-          }
-        })}
-      </WizardNav>
-    );
-  }, [activeStep, goToStepByIndex, isNavExpanded, nav, steps]);
-
-  return (
-    <WizardToggle
-      nav={wizardNav}
-      footer={footer}
-      steps={steps}
-      activeStep={activeStep}
-      isNavExpanded={isNavExpanded}
-      toggleNavExpanded={() => setIsNavExpanded(prevIsExpanded => !prevIsExpanded)}
-      unmountInactiveSteps={unmountInactiveSteps}
-    />
-  );
-};
-
 WizardToggle.displayName = 'WizardToggle';

package/src/next/components/Wizard/__tests__/Wizard.test.tsx

@@ -3,8 +3,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { DefaultWizardNavProps, DefaultWizardFooterProps } from '../types';
-import { Wizard, WizardStep } from '../';
+import { Wizard, WizardFooterProps, WizardStep, WizardNavProps } from '../';
 
 test('renders step when child is of type WizardStep', () => {
   render(
@@ -57,7 +56,7 @@ test('renders default footer without specifying the footer prop', () => {
 });
 
 test('renders default footer with custom props', () => {
-  const footer: DefaultWizardFooterProps = {
+  const footer: Partial<WizardFooterProps> = {
     nextButtonText: <>Proceed with caution</>,
     backButtonText: 'Turn back!',
     cancelButtonText: 'Leave now!'
@@ -96,15 +95,13 @@ test('renders default nav without specifying the nav prop', () => {
 });
 
 test('renders default nav with custom props', () => {
-  const nav: DefaultWizardNavProps = {
-    isExpandable: true,
-    ariaLabel: 'Some nav label',
-    ariaLabelledBy: 'wizard-id',
-    forceStepVisit: true
+  const nav: Partial<WizardNavProps> = {
+    'aria-label': 'Some nav label',
+    'aria-labelledby': 'wizard-id'
   };
 
   render(
-    <Wizard id="wizard-id" nav={nav}>
+    <Wizard id="wizard-id" nav={nav} isStepVisitRequired>
       <WizardStep id="step-1" name="Test step 1" steps={[<WizardStep id="nested-step" name="Nested step" />]} />
       <WizardStep id="step-2" name="Test step 2" />
     </Wizard>
@@ -119,7 +116,7 @@ test('renders default nav with custom props', () => {
 });
 
 test('renders custom nav', () => {
-  const customNav = <nav>Some custom nav</nav>;
+  const customNav = () => <nav>Some custom nav</nav>;
 
   render(
     <Wizard nav={customNav}>
@@ -130,7 +127,7 @@ test('renders custom nav', () => {
   expect(screen.getByRole('navigation')).toBeVisible();
 });
 
-test('starts at the first step as the active one by default', () => {
+test('starts with the first step as the current one by default', () => {
   render(
     <Wizard>
       <WizardStep id="step-1" name="Test step 1">
@@ -301,11 +298,11 @@ test('unmounts inactive steps by default', async () => {
   expect(screen.getByText('Step 2 content')).toBeVisible();
 });
 
-test('keeps inactive steps mounted when unmountInactiveSteps is enabled', async () => {
+test('keeps inactive steps mounted when hasUnmountedSteps is enabled', async () => {
   const user = userEvent.setup();
 
   render(
-    <Wizard unmountInactiveSteps={false}>
+    <Wizard hasUnmountedSteps={false}>
       <WizardStep id="step-1" name="Test step 1">
         Step 1 content
       </WizardStep>

package/src/next/components/Wizard/__tests__/WizardBody.test.tsx

@@ -30,12 +30,12 @@ test('has aria-labelledby when one is specified', () => {
   expect(container.firstElementChild).toHaveAttribute('aria-labelledby', 'some-id');
 });
 
-test('wrapper element is of type div when wrapperElement is not specified', () => {
+test('wrapper element is of type div when component is not specified', () => {
   const { container } = render(<WizardBody aria-label="Wizard body">content</WizardBody>);
   expect(container.firstElementChild?.tagName).toEqual('DIV');
 });
 
-test('renders with custom wrapperElement', () => {
-  const { container } = render(<WizardBody wrapperElement="main">content</WizardBody>);
+test('renders with custom component', () => {
+  const { container } = render(<WizardBody component="main">content</WizardBody>);
   expect(container.firstElementChild?.tagName).toEqual('MAIN');
 });

package/src/next/components/Wizard/__tests__/WizardFooter.test.tsx

@@ -3,10 +3,10 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { WizardFooter } from '../WizardFooter';
+import { WizardFooter, WizardFooterProps } from '../WizardFooter';
 
-const defaultProps = {
-  activeStep: { name: 'Step name', id: 'some-id' },
+const defaultProps: WizardFooterProps = {
+  currentStep: { name: 'Step name', id: 'some-id' },
   onNext: jest.fn(),
   onBack: jest.fn(),
   onClose: jest.fn()
@@ -65,27 +65,24 @@ test('can have custom button names', () => {
   expect(screen.getByRole('button', { name: 'Get out!' })).toBeVisible();
 });
 
-test('has disabled back button when disableBackButton is enabled', () => {
-  render(<WizardFooter {...defaultProps} disableBackButton />);
+test('has disabled back button when isBackDisabled is enabled', () => {
+  render(<WizardFooter {...defaultProps} isBackDisabled />);
   expect(screen.getByRole('button', { name: 'Back' })).toHaveAttribute('disabled');
 });
 
-test('has no back button when activeStep has hideBackButton enabled', () => {
-  render(<WizardFooter {...defaultProps} activeStep={{ ...defaultProps.activeStep, hideBackButton: true }} />);
+test('uses currentStep footer properties when specified', () => {
+  render(
+    <WizardFooter {...defaultProps} currentStep={{ ...defaultProps.currentStep, footer: { isBackHidden: true } }} />
+  );
   expect(screen.queryByRole('button', { name: 'Back' })).toBeNull();
 });
 
-test('has no cancel button when activeStep has hideCancelButton enabled', () => {
-  render(<WizardFooter {...defaultProps} activeStep={{ ...defaultProps.activeStep, hideCancelButton: true }} />);
-  expect(screen.queryByRole('button', { name: 'Cancel' })).toBeNull();
-});
-
-test(`uses activeStep's nextButtonText when specified instead of nextButtonText of WizardFooter`, () => {
+test(`currentStep footer properties take precendence over WizardFooter's`, () => {
   render(
     <WizardFooter
       {...defaultProps}
       nextButtonText="Footer next"
-      activeStep={{ ...defaultProps.activeStep, nextButtonText: 'Active step next' }}
+      currentStep={{ ...defaultProps.currentStep, footer: { nextButtonText: 'Active step next' } }}
     />
   );
   expect(screen.queryByRole('button', { name: 'Footer next' })).toBeNull();