@patternfly/react-core 4.274.0 → 4.274.1

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { WizardNavItemType } from './types';
+import { isWizardParentStep, WizardNavItemType } from './types';
 import { WizardBodyProps } from './WizardBody';
 import { useWizardContext } from './WizardContext';
 import { WizardFooterProps } from './WizardFooter';
@@ -15,7 +15,7 @@ export interface WizardStepProps {
   /** Unique identifier */
   id: string | number;
   /** Optional for when the step is used as a parent to sub-steps */
-  children?: React.ReactNode;
+  children?: React.ReactNode | undefined;
   /** Props for WizardBody that wraps content by default. Can be set to null for exclusion of WizardBody. */
   body?: Omit<Omit<WizardBodyProps, 'children'>, 'children'> | null;
   /** Optional list of sub-steps */
@@ -30,8 +30,8 @@ export interface WizardStepProps {
   footer?: React.ReactElement | Partial<WizardFooterProps>;
   /** Used to determine icon next to the step's navigation item */
   status?: 'default' | 'error';
-  /** Flag to determine whether sub-steps can collapse or not */
-  isCollapsible?: boolean;
+  /** Flag to determine whether parent steps can expand or not. Defaults to false. */
+  isExpandable?: boolean;
 }
 
 export const WizardStep = ({ children, steps: _subSteps, ...props }: WizardStepProps) => {
@@ -40,6 +40,8 @@ export const WizardStep = ({ children, steps: _subSteps, ...props }: WizardStepP
 
   // Update step in context when props change or when the step is active has yet to be marked as visited.
   React.useEffect(() => {
+    const shouldUpdateIsVisited = !isWizardParentStep(activeStep) && id === activeStep?.id && !activeStep?.isVisited;
+
     setStep({
       id,
       name,
@@ -49,9 +51,9 @@ export const WizardStep = ({ children, steps: _subSteps, ...props }: WizardStepP
       ...(navItem && { navItem }),
       ...(footer && { footer }),
       ...(status && { status }),
-      ...(id === activeStep?.id && !activeStep?.isVisited && { isVisited: true })
+      ...(shouldUpdateIsVisited && { isVisited: true })
     });
-  }, [body, footer, id, isDisabled, isHidden, name, navItem, status, activeStep?.id, activeStep?.isVisited, setStep]);
+  }, [body, footer, id, isDisabled, isHidden, name, navItem, status, activeStep, setStep]);
 
   return <>{children}</>;
 };

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

@@ -7,7 +7,7 @@ import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-ico
 
 import { KeyTypes } from '../../../helpers/constants';
 import { WizardNavProps, WizardBody, WizardStep, WizardStepProps } from '../Wizard';
-import { WizardControlStep, isWizardSubStep } from './types';
+import { WizardStepType, isWizardSubStep } from './types';
 
 /**
  * Used to toggle between step content, including the body and footer. This is also where the navigation and its expandability is controlled.
@@ -15,9 +15,9 @@ import { WizardControlStep, isWizardSubStep } from './types';
 
 export interface WizardToggleProps {
   /** List of steps and/or sub-steps */
-  steps: WizardControlStep[];
+  steps: WizardStepType[];
   /** The current step */
-  activeStep: WizardControlStep;
+  activeStep: WizardStepType;
   /** Wizard footer */
   footer: React.ReactElement;
   /** Wizard navigation */
@@ -27,7 +27,7 @@ export interface WizardToggleProps {
   /** Flag to determine whether the dropdown navigation is expanded */
   isNavExpanded?: boolean;
   /** Callback to expand or collapse the dropdown navigation */
-  toggleNavExpanded?: () => void;
+  toggleNavExpanded?: (event: React.MouseEvent<HTMLButtonElement> | KeyboardEvent) => void;
 }
 
 export const WizardToggle = ({
@@ -49,7 +49,7 @@ export const WizardToggle = ({
   const handleKeyClicks = React.useCallback(
     (event: KeyboardEvent): void => {
       if (isNavExpanded && event.key === KeyTypes.Escape) {
-        toggleNavExpanded?.();
+        toggleNavExpanded?.(event);
       }
     },
     [isNavExpanded, toggleNavExpanded]

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

@@ -18,21 +18,6 @@ test('renders step when child is of type WizardStep', () => {
   expect(screen.getByText('Step content')).toBeVisible();
 });
 
-test('renders step when child has required props; name, id, children', () => {
-  const CustomStep = props => <div {...props} />;
-
-  render(
-    <Wizard>
-      <CustomStep id="test-step" name="Test step">
-        Custom step content
-      </CustomStep>
-    </Wizard>
-  );
-
-  expect(screen.getByRole('button', { name: 'Test step' })).toBeVisible();
-  expect(screen.getByText('Custom step content')).toBeVisible();
-});
-
 test('renders a header when specified', () => {
   render(
     <Wizard header="Some header">
@@ -101,7 +86,7 @@ test('renders default nav with custom props', () => {
   };
 
   render(
-    <Wizard id="wizard-id" nav={nav} isStepVisitRequired>
+    <Wizard id="wizard-id" nav={nav} isVisitRequired>
       <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>
@@ -111,7 +96,6 @@ test('renders default nav with custom props', () => {
 
   expect(navElement).toBeVisible();
   expect(navElement).toHaveAttribute('aria-labelledby', 'wizard-id');
-  expect(screen.getByRole('button', { name: 'Test step 1, visited' }).parentElement).toHaveClass('pf-m-expandable');
   expect(screen.getByRole('button', { name: 'Test step 2' })).toHaveAttribute('disabled');
 });
 
@@ -183,7 +167,7 @@ test('calls onNavByIndex on nav item click', async () => {
   const onNavByIndex = jest.fn();
 
   render(
-    <Wizard onNavByIndex={onNavByIndex}>
+    <Wizard onStepChange={onNavByIndex}>
       <WizardStep id="step-1" name="Test step 1" />
       <WizardStep id="step-2" name="Test step 2" />
     </Wizard>
@@ -199,7 +183,7 @@ test('calls onNext and not onSave on next button click when not on the last step
   const onSave = jest.fn();
 
   render(
-    <Wizard onNext={onNext} onSave={onSave}>
+    <Wizard onStepChange={onNext} onSave={onSave}>
       <WizardStep id="step-1" name="Test step 1" />
       <WizardStep id="step-2" name="Test step 2" />
     </Wizard>
@@ -216,7 +200,7 @@ test('calls onBack on back button click', async () => {
   const onBack = jest.fn();
 
   render(
-    <Wizard onBack={onBack}>
+    <Wizard onStepChange={onBack}>
       <WizardStep id="step-1" name="Test step 1" />
       <WizardStep id="step-2" name="Test step 2" />
     </Wizard>
@@ -298,13 +282,18 @@ test('does not render inactive step content', async () => {
   expect(screen.getByText('Step 2 content')).toBeVisible();
 });
 
-test('parent steps have collapsed sub-steps by default unless the step is active', async () => {
+test('parent steps have collapsed sub-steps when isExpandable is true unless the step is active', async () => {
   const user = userEvent.setup();
 
   render(
-    <Wizard startIndex={2}>
+    <Wizard>
       <WizardStep id="step-1" name="Test step 1" />
-      <WizardStep id="step-2" name="Test step 2" steps={[<WizardStep id="sub-step-1" name="Test sub step 1" />]} />
+      <WizardStep
+        id="step-2"
+        name="Test step 2"
+        isExpandable
+        steps={[<WizardStep id="sub-step-1" name="Test sub step 1" />]}
+      />
     </Wizard>
   );
 
@@ -315,17 +304,131 @@ test('parent steps have collapsed sub-steps by default unless the step is active
   expect(screen.getByLabelText('Collapse step icon')).toBeVisible();
 });
 
-test('parent step can be non-collapsible by setting isCollapsible to false', () => {
+test('parent step can be expandable by setting isExpandable to true', () => {
   render(
     <Wizard>
       <WizardStep
         id="step-1"
         name="Test step 1"
-        isCollapsible={false}
+        isExpandable
         steps={[<WizardStep id="sub-step-1" name="Sub step 1" />]}
       />
     </Wizard>
   );
 
-  expect(screen.queryByLabelText('step icon', { exact: false })).toBeNull();
+  expect(screen.queryByLabelText('step icon', { exact: false })).toBeVisible();
+});
+
+test('incrementally shows/hides steps based on the activeStep when isProgressive is enabled', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <Wizard isProgressive>
+      <WizardStep id="step-1" name="Test step 1">
+        Step 1 content
+      </WizardStep>
+      <WizardStep id="step-2" name="Test step 2">
+        Step 2 content
+      </WizardStep>
+      <WizardStep id="step-3" name="Test step 3">
+        Step 3 content
+      </WizardStep>
+    </Wizard>
+  );
+
+  const nextButton = screen.getByRole('button', {
+    name: 'Next'
+  });
+  const backButton = screen.getByRole('button', {
+    name: 'Back'
+  });
+
+  // Initially only the first nav item will be visible
+  expect(
+    screen.getByRole('button', {
+      name: 'Test step 1'
+    })
+  ).toBeVisible();
+  expect(
+    screen.queryByRole('button', {
+      name: 'Test step 2'
+    })
+  ).toBeNull();
+  expect(
+    screen.queryByRole('button', {
+      name: 'Test step 3'
+    })
+  ).toBeNull();
+
+  // Progressing to the next step will show steps 1 & 2
+  await user.click(nextButton);
+  expect(
+    screen.getByRole('button', {
+      name: 'Test step 1, visited'
+    })
+  ).toBeVisible();
+  expect(
+    screen.getByRole('button', {
+      name: 'Test step 2'
+    })
+  ).toBeVisible();
+  expect(
+    screen.queryByRole('button', {
+      name: 'Test step 3'
+    })
+  ).toBeNull();
+
+  // Progressing to the next step will show all steps
+  await user.click(nextButton);
+  expect(
+    screen.getByRole('button', {
+      name: 'Test step 1, visited'
+    })
+  ).toBeVisible();
+  expect(
+    screen.getByRole('button', {
+      name: 'Test step 2, visited'
+    })
+  ).toBeVisible();
+  expect(
+    screen.getByRole('button', {
+      name: 'Test step 3'
+    })
+  ).toBeVisible();
+
+  // Going back a step will hide step 3
+  await user.click(backButton);
+  expect(
+    screen.getByRole('button', {
+      name: 'Test step 1, visited'
+    })
+  ).toBeVisible();
+  expect(
+    screen.getByRole('button', {
+      name: 'Test step 2'
+    })
+  ).toBeVisible();
+  expect(
+    screen.queryByRole('button', {
+      name: 'Test step 3'
+    })
+  ).toBeNull();
+
+  // Going back a step will hide step 2 & 3
+  await user.click(backButton);
+  expect(
+    screen.getByRole('button', {
+      name: 'Test step 1'
+    })
+  ).toBeVisible();
+  expect(
+    screen.queryByRole('button', {
+      name: 'Test step 2'
+    })
+  ).toBeNull();
+  expect(
+    screen.queryByRole('button', {
+      name: 'Test step 3'
+    })
+  ).toBeNull();
 });

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

@@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react';
 
 import { WizardStep, WizardStepProps } from '../WizardStep';
 import * as WizardContext from '../WizardContext';
-import { WizardControlStep } from '..';
+import { WizardStepType } from '..';
 
 const testStepProps: WizardStepProps = {
   id: 'test-step',
@@ -12,7 +12,7 @@ const testStepProps: WizardStepProps = {
   footer: <>Step footer</>
 };
 
-const testStep: WizardControlStep = {
+const testStep: WizardStepType = {
   ...testStepProps,
   index: 1
 };
@@ -24,9 +24,9 @@ const wizardContext: WizardContext.WizardContextProps = {
   steps: [testStep],
   activeStep: testStep,
   footer: <>Wizard footer</>,
-  onNext: jest.fn(),
-  onBack: jest.fn(),
-  onClose: jest.fn(),
+  goToNextStep: jest.fn(),
+  goToPrevStep: jest.fn(),
+  close: jest.fn(),
   goToStepById: jest.fn(),
   goToStepByName: jest.fn(),
   goToStepByIndex: jest.fn(),

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

@@ -5,9 +5,9 @@ import userEvent from '@testing-library/user-event';
 
 import { KeyTypes } from '../../../../helpers';
 import { WizardToggle, WizardToggleProps } from '../WizardToggle';
-import { WizardControlStep } from '../types';
+import { WizardStepType } from '../types';
 
-const steps: WizardControlStep[] = [
+const steps: WizardStepType[] = [
   { id: 'id-1', name: 'First step', index: 1, component: <>First step content</> },
   { id: 'id-2', name: 'Second step', index: 2, component: <>Second step content</> }
 ];

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

@@ -5,11 +5,11 @@ import { buildSteps } from '../utils';
 import { WizardStep } from '../WizardStep';
 
 describe('buildSteps', () => {
-  test('throws error if child does not have required props or type of WizardStep', () => {
+  test('throws error if child is not of type WizardStep', () => {
     try {
       buildSteps(<div />);
     } catch (error) {
-      expect(error.message).toEqual('Wizard only accepts children with required WizardStepProps.');
+      expect(error.message).toEqual('Wizard only accepts children of type WizardStep.');
     }
   });
 
@@ -17,7 +17,7 @@ describe('buildSteps', () => {
     try {
       buildSteps('test' as any);
     } catch (error) {
-      expect(error.message).toEqual('Wizard only accepts children with required WizardStepProps.');
+      expect(error.message).toEqual('Wizard only accepts children of type WizardStep.');
     }
   });
 
@@ -30,20 +30,6 @@ describe('buildSteps', () => {
     expect(step.component?.props).toEqual(component.props);
   });
 
-  test('returns array of steps if children have required props', () => {
-    const CustomStep = props => <div {...props} />;
-    const component = (
-      <CustomStep name="Step 1" id="step-1">
-        Content
-      </CustomStep>
-    );
-    const [step] = buildSteps(component);
-
-    expect(step.id).toEqual('step-1');
-    expect(step.name).toEqual('Step 1');
-    expect(step.component?.props).toEqual(component.props);
-  });
-
   test('returns flattened array of steps and sub-steps when sub-steps exist', () => {
     const CustomSubStep = props => <div {...props} />;
 

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

@@ -6,6 +6,7 @@ propComponents:
   [
     'Wizard',
     'WizardFooter',
+    'WizardFooterWrapper',
     'WizardToggle',
     'WizardStep',
     'WizardBody',
@@ -16,7 +17,6 @@ propComponents:
     'WizardBasicStep',
     'WizardParentStep',
     'WizardSubStep',
-    'WizardNavStepData',
   ]
 beta: true
 ---
@@ -49,6 +49,9 @@ WizardNavItem,
 WizardNav,
 WizardHeader
 } from '@patternfly/react-core/next';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
+import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-icon';
+import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
 
 PatternFly has two implementations of a `Wizard`. This newer `Wizard` takes a more explicit and declarative approach compared to the older implementation, which can be found under the [React](/components/wizard/react) tab.
 
@@ -59,64 +62,89 @@ PatternFly has two implementations of a `Wizard`. This newer `Wizard` takes a mo
 ```ts file="./WizardBasic.tsx"
 ```
 
-### Custom navigation
+### Basic with disabled steps
 
-The `Wizard`'s `nav` property can be used to build your own navigation.
+```ts file="./WizardBasicDisabledSteps.tsx"
+```
 
-```noLive
-/** Callback for the Wizard's 'nav' property. Returns element which replaces the Wizard's default navigation. */
-export type CustomWizardNavFunction = (
-  isExpanded: boolean,
-  steps: WizardControlStep[],
-  activeStep: WizardControlStep,
-  goToStepByIndex: (index: number) => void
-) => React.ReactElement<WizardNavProps>;
+### Anchors for nav items
 
-/** Encompasses all step type variants that are internally controlled by the Wizard */
-type WizardControlStep = WizardBasicStep | WizardParentStep | WizardSubStep;
+```ts file="./WizardWithNavAnchors.tsx"
 ```
 
-```ts file="./WizardCustomNav.tsx"
+### Incrementally enabled steps
+
+```ts file="./WizardStepVisitRequired.tsx"
 ```
 
-### Kitchen sink
+### Expandable steps
 
-Includes the following:
+```ts file="./WizardExpandableSteps.tsx"
+```
 
-- Header
-- Custom footer
-- Sub-steps
-- Step content with a drawer
-- Custom navigation item
-- Disabled navigation items until visited
-- Action to toggle visibility of a step
-- Action to toggle navigation item error status
+### Progress after submission
 
-Custom operations when navigating between steps can be achieved by utilizing `onNext`, `onBack`, or `onNavByIndex` properties whose callback functions return the 'id' and 'name' of the currently focused step (currentStep), and the previously focused step (previousStep).
+```ts file="./WizardWithSubmitProgress.tsx"
+```
 
-```noLive
-/** Callback for the Wizard's 'onNext', 'onBack', and 'onNavByIndex' properties */
-type WizardNavStepFunction = (currentStep: WizardNavStepData, previousStep: WizardNavStepData) => void | Promise<void>;
+### Enabled on form validation
 
-/** Data returned for either parameter of WizardNavStepFunction */
-type WizardNavStepData = Pick<WizardControlStep, 'id' | 'name'>;
+```ts file="./WizardEnabledOnFormValidation.tsx"
 ```
 
-#
+### Validate on button press
 
-The `WizardStep`'s `navItem` property can be used to build your own nav item for that step.
+```ts file="./WizardValidateOnButtonPress.tsx"
+```
 
-```noLive
-/** Callback for the Wizard's 'navItem' property. Returns element which replaces the WizardStep's default navItem. */
-export type CustomWizardNavItemFunction = (
-  step: WizardControlStep,
-  activeStep: WizardControlStep,
-  steps: WizardControlStep[],
-  goToStepByIndex: (index: number) => void
-) => React.ReactElement<WizardNavItemProps>;
+### 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"
 ```
 
-```ts file="./WizardKitchenSink.tsx"
+### Toggle step visibility
+
+```ts file="./WizardToggleStepVisibility.tsx"
+```
+
+### Step error status
+
+```ts file="./WizardStepErrorStatus.tsx"
 ```
 
 ## Hooks

package/src/next/components/Wizard/examples/WizardBasic.tsx

@@ -2,21 +2,15 @@ import React from 'react';
 import { Wizard, WizardStep } from '@patternfly/react-core/next';
 
 export const WizardBasic: React.FunctionComponent = () => (
-  <Wizard height={400}>
-    <WizardStep name="First step" id="basic-first-step">
-      <p>Step 1 content</p>
+  <Wizard height={400} title="Basic wizard">
+    <WizardStep name="Step 1" id="basic-first-step">
+      Step 1 content
     </WizardStep>
-    <WizardStep name="Second step" id="basic-second-step">
-      <p>Step 2 content</p>
-    </WizardStep>
-    <WizardStep name="Third step" id="basic-third-step">
-      <p>Step 3 content</p>
-    </WizardStep>
-    <WizardStep name="Fourth step" id="basic-fourth-step">
-      <p>Step 4 content</p>
+    <WizardStep name="Step 2" id="basic-second-step">
+      Step 2 content
     </WizardStep>
     <WizardStep name="Review" id="basic-review-step" footer={{ nextButtonText: 'Finish' }}>
-      <p>Review step content</p>
+      Review step content
     </WizardStep>
   </Wizard>
 );

package/src/next/components/Wizard/examples/WizardBasicDisabledSteps.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Wizard, WizardStep } from '@patternfly/react-core/next';
+
+export const WizardBasicDisabledSteps: React.FunctionComponent = () => (
+  <Wizard height={400} title="Basic disabled wizard">
+    <WizardStep name="Step 1" id="bdisabled-first-step">
+      Step 1 content
+    </WizardStep>
+    <WizardStep name="Step 2" id="bdisabled-second-step" isDisabled>
+      Step 2 content
+    </WizardStep>
+    <WizardStep name="Step 3" id="bdisabled-third-step">
+      Step 3 content
+    </WizardStep>
+    <WizardStep name="Step 4" id="bdisabled-fourth-step" isDisabled>
+      Step 4 content
+    </WizardStep>
+    <WizardStep name="Review" id="bdisabled-review-step" footer={{ nextButtonText: 'Finish' }}>
+      Review step content
+    </WizardStep>
+  </Wizard>
+);