@patternfly/react-core 5.4.0-prerelease.3 → 5.4.0-prerelease.31

package/src/components/Wizard/WizardContext.tsx

@@ -28,6 +28,12 @@ export interface WizardContextProps {
   getStep: (stepId: number | string) => WizardStepType;
   /** Set step by ID */
   setStep: (step: Pick<WizardStepType, 'id'> & Partial<WizardStepType>) => void;
+  /** Flag indicating whether the wizard content should be focused after the onNext or onBack callbacks
+   * are called.
+   */
+  shouldFocusContent: boolean;
+  /** Ref for main wizard content element. */
+  mainWrapperRef: React.RefObject<HTMLElement>;
 }
 
 export const WizardContext = React.createContext({} as WizardContextProps);
@@ -47,6 +53,8 @@ export interface WizardContextProviderProps {
     steps: WizardStepType[],
     index: number
   ): void;
+  shouldFocusContent: boolean;
+  mainWrapperRef: React.RefObject<HTMLElement>;
 }
 
 export const WizardContextProvider: React.FunctionComponent<WizardContextProviderProps> = ({
@@ -59,11 +67,28 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
   onClose,
   goToStepById,
   goToStepByName,
-  goToStepByIndex
+  goToStepByIndex,
+  shouldFocusContent,
+  mainWrapperRef
 }) => {
   const [currentSteps, setCurrentSteps] = React.useState<WizardStepType[]>(initialSteps);
   const [currentFooter, setCurrentFooter] = React.useState<WizardFooterType>();
 
+  // Callback to update steps if the overall step number changes
+  React.useEffect(() => {
+    if (currentSteps.length !== initialSteps.length) {
+      const newSteps = initialSteps.map((newStep) => {
+        const currentStepMatch = currentSteps.find((step) => step.id === newStep.id);
+        // If an existing step has the same id as a new step, carry over props
+        if (currentStepMatch) {
+          return { ...currentStepMatch, ...newStep };
+        }
+        return newStep;
+      });
+      setCurrentSteps(newSteps);
+    }
+  }, [currentSteps, initialSteps]);
+
   // Combined initial and current state steps
   const steps = React.useMemo(
     () =>
@@ -115,7 +140,6 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
           if (prevStep.id === step.id) {
             return { ...prevStep, ...step };
           }
-
           return prevStep;
         })
       ),
@@ -139,7 +163,9 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
         goToStepByIndex: React.useCallback(
           (index: number) => goToStepByIndex(null, steps, index),
           [goToStepByIndex, steps]
-        )
+        ),
+        shouldFocusContent,
+        mainWrapperRef
       }}
     >
       {children}

package/src/components/Wizard/WizardFooter.tsx

@@ -5,12 +5,11 @@ import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
 import { Button, ButtonVariant } from '../Button';
 import { isCustomWizardFooter, WizardFooterButtonProps, 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.
  */
 
-export interface WizardFooterProps {
+export interface WizardFooterProps extends React.HTMLProps<HTMLElement> {
   /** The active step */
   activeStep: WizardStepType;
   /** Next button callback */
@@ -39,18 +38,23 @@ export interface WizardFooterProps {
   backButtonProps?: Omit<WizardFooterButtonProps, 'isDisabled'>;
   /** Additional props for the Cancel button. */
   cancelButtonProps?: WizardFooterButtonProps;
+  /** Additional classes spread to the wizard footer */
+  className?: string;
 }
 
 /**
  * Applies default wizard footer styling any number of child elements.
  */
 
-interface WizardFooterWrapperProps {
+interface WizardFooterWrapperProps extends React.HTMLProps<HTMLElement> {
   children: React.ReactNode;
+  className?: string;
 }
 
-export const WizardFooterWrapper = ({ children }: WizardFooterWrapperProps) => (
-  <footer className={css(styles.wizardFooter)}>{children}</footer>
+export const WizardFooterWrapper = ({ children, className, ...props }: WizardFooterWrapperProps) => (
+  <footer className={css(styles.wizardFooter, className)} {...props}>
+    {children}
+  </footer>
 );
 
 export const WizardFooter = ({ activeStep, ...internalProps }: WizardFooterProps) => {
@@ -71,9 +75,11 @@ const InternalWizardFooter = ({
   cancelButtonText = 'Cancel',
   nextButtonProps,
   backButtonProps,
-  cancelButtonProps
+  cancelButtonProps,
+  className,
+  ...props
 }: Omit<WizardFooterProps, 'activeStep'>) => (
-  <WizardFooterWrapper>
+  <WizardFooterWrapper className={className} {...props}>
     {!isBackHidden && (
       <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={isBackDisabled} {...backButtonProps}>
         {backButtonText}

package/src/components/Wizard/WizardHeader.tsx

@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
 import { Button } from '../Button';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
-export interface WizardHeaderProps {
+export interface WizardHeaderProps extends React.HTMLProps<HTMLDivElement> {
   /** Callback function called when the X (Close) button is clicked */
   onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   /** Title of the wizard */
@@ -21,6 +21,8 @@ export interface WizardHeaderProps {
   titleId?: string;
   /** id for the description */
   descriptionId?: string;
+  /** Additional classes spread to the wizard header */
+  className?: string;
 }
 
 export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
@@ -31,9 +33,11 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
   closeButtonAriaLabel,
   titleId,
   descriptionComponent: Component = 'div',
-  descriptionId
+  descriptionId,
+  className,
+  ...props
 }: WizardHeaderProps) => (
-  <div className={css(styles.wizardHeader)}>
+  <div className={css(styles.wizardHeader, className)} {...props}>
     {!isCloseHidden && (
       <div className={css(styles.wizardClose)}>
         <Button variant="plain" aria-label={closeButtonAriaLabel} onClick={onClose}>

package/src/components/Wizard/WizardNav.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { css } from '@patternfly/react-styles';
 
-export interface WizardNavProps {
+export interface WizardNavProps extends Omit<React.HTMLProps<HTMLOListElement>, 'type' | 'ref'> {
   /** children should be WizardNavItem components */
   children?: any;
   /** Aria-label applied to the navigation element */
@@ -13,6 +13,8 @@ export interface WizardNavProps {
   isExpanded?: boolean;
   /** True to return the inner list without the wrapping navigation element */
   isInnerList?: boolean;
+  /** Additional classes spread to the wizard nav */
+  className?: string;
 }
 
 export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
@@ -20,11 +22,13 @@ export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
   isExpanded = false,
-  isInnerList = false
+  isInnerList = false,
+  className,
+  ...props
 }: WizardNavProps) => {
   if (isInnerList) {
     return (
-      <ol className={css(styles.wizardNavList)} role="list">
+      <ol className={css(styles.wizardNavList, className)} role="list" {...props}>
         {children}
       </ol>
     );
@@ -32,9 +36,10 @@ export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
 
   return (
     <nav
-      className={css(styles.wizardNav, isExpanded && styles.modifiers.expanded)}
+      className={css(styles.wizardNav, isExpanded && styles.modifiers.expanded, className)}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
+      {...props}
     >
       <ol className={css(styles.wizardNavList)} role="list">
         {children}

package/src/components/Wizard/WizardNavItem.tsx

@@ -10,7 +10,11 @@ import { WizardNavItemStatus } from './types';
 import globalSpacerSm from '@patternfly/react-tokens/dist/esm/global_spacer_sm';
 import globalDangerColor100 from '@patternfly/react-tokens/dist/esm/global_danger_color_100';
 
-export interface WizardNavItemProps extends OUIAProps {
+export interface WizardNavItemProps
+  extends Omit<React.HTMLProps<HTMLLIElement>, 'onClick' | 'id' | 'content' | 'type'>,
+    OUIAProps {
+  /** Additional classes spread to the wizard nav item */
+  className?: string;
   /** Can nest a WizardNav component for substeps */
   children?: React.ReactNode;
   /** The content to display in the navigation item */
@@ -44,6 +48,7 @@ export const WizardNavItem = ({
   content = '',
   isCurrent = false,
   isDisabled = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   isVisited = false,
   stepIndex,
   onClick,
@@ -54,7 +59,9 @@ export const WizardNavItem = ({
   status = 'default',
   target,
   ouiaId,
-  ouiaSafe = true
+  ouiaSafe = true,
+  className,
+  ...props
 }: WizardNavItemProps) => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const ouiaProps = useOUIAProps(WizardNavItem.displayName, ouiaId, ouiaSafe);
@@ -68,30 +75,15 @@ export const WizardNavItem = ({
     console.error('WizardNavItem: When using an anchor, please provide an href');
   }
 
-  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';
-      }
-
-      return label;
-    }
-  }, [content, isCurrent, isVisited, status]);
-
   return (
     <li
       className={css(
         styles.wizardNavItem,
         isExpandable && styles.modifiers.expandable,
-        isExpandable && isExpanded && styles.modifiers.expanded
+        isExpandable && isExpanded && styles.modifiers.expanded,
+        className
       )}
+      {...props}
     >
       <NavItemComponent
         {...(NavItemComponent === 'a'
@@ -110,7 +102,6 @@ export const WizardNavItem = ({
         aria-disabled={isDisabled ? true : null}
         aria-current={isCurrent && !children ? 'step' : false}
         {...(isExpandable && { 'aria-expanded': isExpanded })}
-        {...(ariaLabel && { 'aria-label': ariaLabel })}
         {...ouiaProps}
       >
         {isExpandable ? (
@@ -127,9 +118,12 @@ export const WizardNavItem = ({
             {content}
             {/* TODO, patternfly/patternfly#5142 */}
             {status === WizardNavItemStatus.Error && (
-              <span style={{ marginLeft: globalSpacerSm.var }}>
-                <ExclamationCircleIcon color={globalDangerColor100.var} />
-              </span>
+              <>
+                <span className="pf-v5-screen-reader">, {status}</span>
+                <span style={{ marginLeft: globalSpacerSm.var }}>
+                  <ExclamationCircleIcon color={globalDangerColor100.var} />
+                </span>
+              </>
             )}
           </>
         )}

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

@@ -411,7 +411,7 @@ test('incrementally shows/hides steps based on the activeStep when isProgressive
   await user.click(nextButton);
   expect(
     screen.getByRole('button', {
-      name: 'Test step 1, visited'
+      name: 'Test step 1'
     })
   ).toBeVisible();
   expect(
@@ -429,12 +429,12 @@ test('incrementally shows/hides steps based on the activeStep when isProgressive
   await user.click(nextButton);
   expect(
     screen.getByRole('button', {
-      name: 'Test step 1, visited'
+      name: 'Test step 1'
     })
   ).toBeVisible();
   expect(
     screen.getByRole('button', {
-      name: 'Test step 2, visited'
+      name: 'Test step 2'
     })
   ).toBeVisible();
   expect(
@@ -447,7 +447,7 @@ test('incrementally shows/hides steps based on the activeStep when isProgressive
   await user.click(backButton);
   expect(
     screen.getByRole('button', {
-      name: 'Test step 1, visited'
+      name: 'Test step 1'
     })
   ).toBeVisible();
   expect(

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

@@ -3,11 +3,20 @@ import { render, screen } from '@testing-library/react';
 import { WizardBody } from '../WizardBody';
 
 test('renders children without additional props', () => {
-  const { container } = render(<WizardBody>content</WizardBody>);
+  render(<WizardBody data-testid="test-id">content</WizardBody>);
 
-  expect(container).toHaveTextContent('content');
-  expect(container).not.toHaveAttribute('aria-label');
-  expect(container).not.toHaveAttribute('aria-labelledby');
+  expect(screen.getByTestId('test-id')).toHaveTextContent('content');
+  expect(screen.getByTestId('test-id')).not.toHaveAttribute('aria-label');
+  expect(screen.getByTestId('test-id')).not.toHaveAttribute('aria-labelledby');
+});
+
+test(`Renders with additional classes when className is passed`, () => {
+  render(
+    <WizardBody className="custom-class" data-testid="test-id">
+      Test
+    </WizardBody>
+  );
+  expect(screen.getByTestId('test-id')).toHaveClass('custom-class');
 });
 
 test('has no padding className when hasNoPadding is not specified', () => {
@@ -21,11 +30,19 @@ test('has padding className when hasNoPadding is 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');
+  render(
+    <WizardBody data-testid="test-id" aria-label="Wizard body">
+      content
+    </WizardBody>
+  );
+  expect(screen.getByTestId('test-id').tagName).toEqual('DIV');
 });
 
 test('renders with custom component', () => {
-  const { container } = render(<WizardBody component="main">content</WizardBody>);
-  expect(container.firstElementChild?.tagName).toEqual('MAIN');
+  render(
+    <WizardBody component="main" data-testid="test-id">
+      content
+    </WizardBody>
+  );
+  expect(screen.getByTestId('test-id').tagName).toEqual('MAIN');
 });

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

@@ -20,6 +20,15 @@ test('has button names of "Next", "Back", and "Cancel" by default', () => {
   expect(screen.getByRole('button', { name: 'Cancel' })).toBeVisible();
 });
 
+test(`Renders with additional classes when className is passed`, () => {
+  render(
+    <WizardFooter {...defaultProps} className="custom-class" data-testid="test-id">
+      Test
+    </WizardFooter>
+  );
+  expect(screen.getByTestId('test-id')).toHaveClass('custom-class');
+});
+
 test('calls onNext when the next button is clicked', async () => {
   const onNext = jest.fn();
   const user = userEvent.setup();

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

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { WizardHeader } from '../WizardHeader';
+import userEvent from '@testing-library/user-event';
+
+// close button related tests
+test(`Renders close button by default`, () => {
+  render(<WizardHeader data-testid="header-component" />);
+  expect(screen.getByRole('button')).toBeInTheDocument();
+});
+
+test(`Close button is hidden when isCloseHidden is passed`, () => {
+  render(<WizardHeader isCloseHidden />);
+  expect(screen.queryByRole('button')).toBeNull();
+});
+
+test(`Close button renders passed aria label`, () => {
+  render(<WizardHeader closeButtonAriaLabel="test aria label" />);
+  expect(screen.getByRole('button', { name: 'test aria label' })).toBeInTheDocument();
+});
+
+test(`Callback function fires when onClose passed`, async () => {
+  const onClose = jest.fn();
+  const user = userEvent.setup();
+  render(<WizardHeader onClose={onClose} />);
+  await user.click(screen.getByRole('button'));
+  expect(onClose).toHaveBeenCalled();
+});
+
+// description related tests
+test(`Renders a description when passed description`, () => {
+  render(<WizardHeader description="test description" />);
+  expect(screen.getByText('test description')).toBeVisible();
+});
+
+test(`Renders the id passed via descriptionId`, () => {
+  render(<WizardHeader description="test description" descriptionId="test-id" />);
+  expect(screen.queryByText('test description')).toHaveAttribute('id', 'test-id');
+});
+
+// other prop tests
+test(`Renders title when prop is passed`, () => {
+  render(<WizardHeader title="Test" />);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test(`Renders with additional classes when className is passed`, () => {
+  render(<WizardHeader className="custom-class" data-testid="header-component" />);
+  expect(screen.getByTestId('header-component')).toHaveClass('custom-class');
+});

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

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { WizardNav } from '../WizardNav';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+
+test(`Renders with additional classes when className is passed`, () => {
+  render(
+    <WizardNav className="custom-class" data-testid="test-id">
+      Test
+    </WizardNav>
+  );
+  expect(screen.getByTestId('test-id')).toHaveClass('custom-class');
+});
+
+test(`Renders with accessible aria-label when passed`, () => {
+  render(
+    <WizardNav aria-label="test aria label" data-testid="test-id">
+      Test
+    </WizardNav>
+  );
+  expect(screen.getByTestId('test-id')).toHaveAccessibleName('test aria label');
+});
+
+test(`Renders with accessible aria-labelledby when passed`, () => {
+  render(
+    <WizardNav aria-labelledby="test-labelledby" data-testid="test-id">
+      Test
+    </WizardNav>
+  );
+  expect(screen.getByTestId('test-id')).toHaveAttribute('aria-labelledby');
+});
+
+test(`Renders with expanded styles when prop passed`, () => {
+  render(
+    <WizardNav isExpanded data-testid="test-id">
+      Test
+    </WizardNav>
+  );
+  expect(screen.getByTestId('test-id')).toHaveClass(styles.modifiers.expanded);
+});
+
+test(`Renders with expanded styles when prop passed`, () => {
+  render(<WizardNav isInnerList>Test</WizardNav>);
+  expect(screen.getByRole('list')).toBeInTheDocument();
+});

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

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { WizardNavItem } from '../WizardNavItem';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import userEvent from '@testing-library/user-event';
+
+test(`Renders with additional classes when className is passed`, () => {
+  render(<WizardNavItem className="custom-class" />);
+  expect(screen.getByRole('listitem')).toHaveClass('custom-class');
+});
+
+test(`Renders content passed to content prop`, () => {
+  render(<WizardNavItem content="test content" />);
+  expect(screen.getByText('test content')).toBeVisible();
+});
+
+test(`Renders ${styles.modifiers.disabled} class when isDisabled is true`, () => {
+  render(<WizardNavItem isDisabled />);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.disabled);
+});
+
+test(`Renders ${styles.modifiers.current} class when isCurrent is true`, () => {
+  render(<WizardNavItem isCurrent />);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.current);
+});
+
+test(`Callback function fires when onClick passed`, async () => {
+  const onClick = jest.fn();
+  const user = userEvent.setup();
+  render(<WizardNavItem onClick={onClick} />);
+  await user.click(screen.getByRole('button'));
+  expect(onClick).toHaveBeenCalled();
+});
+
+test(`Renders a link element with an href when the props are passed`, () => {
+  render(<WizardNavItem component="a" href="test-href" />);
+  expect(screen.getByRole('link')).toHaveAttribute('href', 'test-href');
+});
+
+test(`Renders a link element with a target when the props are passed`, () => {
+  render(<WizardNavItem component="a" href="test-href" target="test-target" />);
+  expect(screen.getByRole('link')).toHaveAttribute('target', 'test-target');
+});
+
+test(`Renders an expandable li when isExapandable is passed`, () => {
+  render(<WizardNavItem isExpandable />);
+  expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
+  expect(screen.getByRole('listitem')).toHaveClass(styles.modifiers.expandable);
+});
+
+test(`Renders id to nav item button when passed`, () => {
+  render(<WizardNavItem id="test-id" />);
+  expect(screen.getByRole('button')).toHaveAttribute('id', 'test-id');
+});

package/src/components/Wizard/examples/Wizard.md

@@ -16,7 +16,7 @@ propComponents:
     'WizardContextProps',
     'WizardBasicStep',
     'WizardParentStep',
-    'WizardSubStep',
+    'WizardSubStep'
   ]
 ---
 
@@ -57,91 +57,119 @@ import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 ### Basic
 
 ```ts file="./WizardBasic.tsx"
+
+```
+
+### Focus content on next/back
+
+To focus the main content element of the `Wizard`, pass in the `shouldFocusContent` property. It is recommended that this is passed in so that users can navigate through a `WizardStep` content in order.
+
+If a `WizardStep` is passed a `body={null}` property, you must manually handle focus.
+
+```ts file="./WizardFocusOnNextBack.tsx"
+
 ```
 
 ### Basic with disabled steps
 
 ```ts file="./WizardBasicDisabledSteps.tsx"
+
 ```
 
 ### Anchors for nav items
 
 ```ts file="./WizardWithNavAnchors.tsx"
+
 ```
 
 ### Incrementally enabled steps
 
 ```ts file="./WizardStepVisitRequired.tsx"
+
 ```
 
 ### Expandable steps
 
 ```ts file="./WizardExpandableSteps.tsx"
+
 ```
 
 ### Progress after submission
 
 ```ts file="./WizardWithSubmitProgress.tsx"
+
 ```
 
 ### Enabled on form validation
 
 ```ts file="./WizardEnabledOnFormValidation.tsx"
+
 ```
 
 ### Validate on button press
 
 ```ts file="./WizardValidateOnButtonPress.tsx"
+
 ```
 
 ### Progressive steps
 
 ```ts file="./WizardProgressiveSteps.tsx"
+
 ```
 
 ### Get current step
 
 ```ts file="./WizardGetCurrentStep.tsx"
+
 ```
 
 ### Within modal
 
 ```ts file="./WizardWithinModal.tsx"
+
 ```
 
 ### Step drawer content
 
 ```ts file="./WizardStepDrawerContent.tsx"
+
 ```
 
 ### Custom navigation
 
 ```ts file="./WizardWithCustomNav.tsx"
+
 ```
 
 ### Header
 
 ```ts file="./WizardWithHeader.tsx"
+
 ```
 
 ### Custom footer
 
 ```ts file="./WizardWithCustomFooter.tsx"
+
 ```
 
 ### Custom navigation item
 
 ```ts file="./WizardWithCustomNavItem.tsx"
+
 ```
 
 ### Toggle step visibility
 
 ```ts file="./WizardToggleStepVisibility.tsx"
+
 ```
 
 ### Step error status
 
 ```ts file="./WizardStepErrorStatus.tsx"
+
 ```
 
 ## Hooks