@patternfly/react-core 6.0.0-alpha.83 → 6.0.0-alpha.85

package/src/components/Wizard/Wizard.tsx

@@ -77,7 +77,7 @@ export const Wizard = ({
   onStepChange,
   onSave,
   onClose,
-  shouldFocusContent = false,
+  shouldFocusContent = true,
   ...wrapperProps
 }: WizardProps) => {
   const [activeStepIndex, setActiveStepIndex] = React.useState(startIndex);
@@ -92,6 +92,11 @@ export const Wizard = ({
     }
   }, [startIndex]);
 
+  // When children change, active step index should reset
+  React.useEffect(() => {
+    setActiveStepIndex(startIndex);
+  }, [children, startIndex]);
+
   const focusMainContentElement = () =>
     setTimeout(() => {
       wrapperRef?.current?.focus && wrapperRef.current.focus();

package/src/components/Wizard/WizardContext.tsx

@@ -74,6 +74,11 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
   const [currentSteps, setCurrentSteps] = React.useState<WizardStepType[]>(initialSteps);
   const [currentFooter, setCurrentFooter] = React.useState<WizardFooterType>();
 
+  // Callback to update steps if they change after initial render
+  React.useEffect(() => {
+    setCurrentSteps(initialSteps);
+  }, [initialSteps]);
+
   // Combined initial and current state steps
   const steps = React.useMemo(
     () =>

package/src/components/Wizard/WizardStep.tsx

@@ -16,8 +16,8 @@ export interface WizardStepProps {
   id: string | number;
   /** Optional for when the step is used as a parent to sub-steps */
   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;
+  /** Props for WizardBody that wraps content by default. */
+  body?: Omit<Omit<WizardBodyProps, 'children'>, 'children'>;
   /** Optional list of sub-steps */
   steps?: React.ReactElement<WizardStepProps>[];
   /** Flag to disable the step's navigation item */

package/src/components/Wizard/WizardToggle.tsx

@@ -73,8 +73,7 @@ export const WizardToggle = ({
 
     return (
       <React.Fragment key={step.id}>
-        {activeStep?.id === step.id &&
-          (body || body === undefined ? <WizardBody {...body}>{children}</WizardBody> : children)}
+        {activeStep?.id === step.id && <WizardBody {...body}>{children}</WizardBody>}
 
         <div key={step.id} style={{ display: 'none' }}>
           <WizardStep {...propsWithoutChildren} />

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

@@ -55,11 +55,6 @@ test('renders with children', () => {
   expect(screen.getByText('content')).toBeVisible();
 });
 
-test('excludes WizardBody when body is set to null', () => {
-  render(<WizardStep id="test-step" name="Test step" body={null} />);
-  expect(screen.queryByRole('main')).toBeNull();
-});
-
 test('updates "isDisabled" in context when the value changes', () => {
   render(<WizardStep {...testStep} isDisabled />);
   expect(setStep).toHaveBeenCalledWith({ ...testStepProps, isDisabled: true, isVisited: true });

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

@@ -65,8 +65,6 @@ import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
 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"
 
 ```

package/src/components/Wizard/examples/WizardStepDrawerContent.tsx

@@ -59,17 +59,27 @@ const StepContentWithDrawer: React.FunctionComponent = () => {
 
 export const WizardStepDrawerContent: React.FunctionComponent = () => (
   <Wizard height={400} title="With drawer wizard">
-    <WizardStep body={null} name="Step 1" id="with-drawer-step-1">
+    <WizardStep body={{ hasNoPadding: true }} name="Step 1" id="with-drawer-step-1">
       <StepContentWithDrawer />
     </WizardStep>
     <WizardStep
       name="Step 2"
       id="with-drawer-step-2"
       steps={[
-        <WizardStep body={null} key="with-drawer-substep-1" name="Substep 1" id="with-drawer-substep-1">
+        <WizardStep
+          body={{ hasNoPadding: true }}
+          key="with-drawer-substep-1"
+          name="Substep 1"
+          id="with-drawer-substep-1"
+        >
           <StepContentWithDrawer />
         </WizardStep>,
-        <WizardStep body={null} key="with-drawer-substep-2" name="Substep 2" id="with-drawer-substep-2">
+        <WizardStep
+          body={{ hasNoPadding: true }}
+          key="with-drawer-substep-2"
+          name="Substep 2"
+          id="with-drawer-substep-2"
+        >
           <StepContentWithDrawer />
         </WizardStep>
       ]}

package/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx

@@ -2,6 +2,9 @@ import React from 'react';
 
 import {
   Button,
+  ActionList,
+  ActionListGroup,
+  ActionListItem,
   Alert,
   EmptyState,
   EmptyStateFooter,
@@ -96,10 +99,18 @@ const LastStepFooter: React.FunctionComponent<LastStepFooterProps> = ({
 
   return (
     <WizardFooterWrapper>
-      <Button onClick={onValidate}>Validate</Button>
-      <Button variant="secondary" onClick={goToPrevStep}>
-        Back
-      </Button>
+      <ActionList>
+        <ActionListGroup>
+          <ActionListItem>
+            <Button variant="secondary" onClick={goToPrevStep}>
+              Back
+            </Button>
+          </ActionListItem>
+          <ActionListItem>
+            <Button onClick={onValidate}>Validate</Button>
+          </ActionListItem>
+        </ActionListGroup>
+      </ActionList>
     </WizardFooterWrapper>
   );
 };

package/src/components/Wizard/examples/WizardWithCustomFooter.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 
 import {
+  ActionList,
+  ActionListGroup,
+  ActionListItem,
   Button,
   Flex,
   FlexItem,
@@ -40,15 +43,27 @@ const CustomStepTwoFooter = () => {
 
   return (
     <WizardFooterWrapper>
-      <Button variant="secondary" onClick={goToPrevStep} isDisabled={isLoading}>
-        Back
-      </Button>
-      <Button variant="primary" onClick={onNext} isLoading={isLoading} isDisabled={isLoading}>
-        Async Next
-      </Button>
-      <Button variant="link" onClick={close} isDisabled={isLoading}>
-        Cancel
-      </Button>
+      <ActionList>
+        <ActionListGroup>
+          <ActionListItem>
+            <Button variant="secondary" onClick={goToPrevStep} isDisabled={isLoading}>
+              Back
+            </Button>
+          </ActionListItem>
+          <ActionListItem>
+            <Button variant="primary" onClick={onNext} isLoading={isLoading} isDisabled={isLoading}>
+              Async Next
+            </Button>
+          </ActionListItem>
+        </ActionListGroup>
+        <ActionListGroup>
+          <ActionListItem>
+            <Button variant="link" onClick={close} isDisabled={isLoading}>
+              Cancel
+            </Button>
+          </ActionListItem>
+        </ActionListGroup>
+      </ActionList>
     </WizardFooterWrapper>
   );
 };

package/src/demos/examples/Wizard/InModalWithDrawer.tsx

@@ -88,25 +88,30 @@ export const WizardModalWithDrawerDemo: React.FunctionComponent = () => {
         }
         height={400}
       >
-        <WizardStep body={null} name="Information" id="wizard-step-1">
+        <WizardStep body={{ hasNoPadding: true }} name="Information" id="wizard-step-1">
           {createStepContentWithDrawer('Information step')}
         </WizardStep>
         <WizardStep
           name="Configuration"
           id="wizard-step-2"
           steps={[
-            <WizardStep body={null} name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
+            <WizardStep body={{ hasNoPadding: true }} name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
               {createStepContentWithDrawer('Configuration substep A')}
             </WizardStep>,
-            <WizardStep body={null} name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
+            <WizardStep body={{ hasNoPadding: true }} name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
               {createStepContentWithDrawer('Configuration substep B')}
             </WizardStep>
           ]}
         />
-        <WizardStep body={null} name="Additional" id="wizard-step-3">
+        <WizardStep body={{ hasNoPadding: true }} name="Additional" id="wizard-step-3">
           {createStepContentWithDrawer('Additional step')}
         </WizardStep>
-        <WizardStep body={null} name="Review" id="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
+        <WizardStep
+          body={{ hasNoPadding: true }}
+          name="Review"
+          id="wizard-step-4"
+          footer={{ nextButtonText: 'Finish' }}
+        >
           {createStepContentWithDrawer('Review step')}
         </WizardStep>
       </Wizard>

package/src/demos/examples/Wizard/InModalWithDrawerInformationalStep.tsx

@@ -95,25 +95,30 @@ export const WizardModalWithDrawerInfoStepDemo: React.FunctionComponent = () =>
         }
         height={400}
       >
-        <WizardStep body={null} name="Information" id="wizard-step-1">
+        <WizardStep body={{ hasNoPadding: true }} name="Information" id="wizard-step-1">
           {createStepContentWithDrawer('Information step')}
         </WizardStep>
         <WizardStep
           name="Configuration"
           id="wizard-step-2"
           steps={[
-            <WizardStep body={null} name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
+            <WizardStep body={{ hasNoPadding: true }} name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
               {createStepContentWithDrawer('Configuration substep A')}
             </WizardStep>,
-            <WizardStep body={null} name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
+            <WizardStep body={{ hasNoPadding: true }} name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
               {createStepContentWithDrawer('Configuration substep B')}
             </WizardStep>
           ]}
         />
-        <WizardStep body={null} name="Additional" id="wizard-step-3">
+        <WizardStep body={{ hasNoPadding: true }} name="Additional" id="wizard-step-3">
           {createStepContentWithDrawer('Additional step')}
         </WizardStep>
-        <WizardStep body={null} name="Review" id="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
+        <WizardStep
+          body={{ hasNoPadding: true }}
+          name="Review"
+          id="wizard-step-4"
+          footer={{ nextButtonText: 'Finish' }}
+        >
           {createStepContentWithDrawer('Review step')}
         </WizardStep>
       </Wizard>

package/src/demos/examples/Wizard/InPageWithDrawer.tsx

@@ -166,25 +166,30 @@ export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
         </PageSection>
         <PageSection type={PageSectionTypes.wizard}>
           <Wizard>
-            <WizardStep body={null} name="Information" id="wizard-step-1">
+            <WizardStep body={{ hasNoPadding: true }} name="Information" id="wizard-step-1">
               {createStepContentWithDrawer('Information step')}
             </WizardStep>
             <WizardStep
               name="Configuration"
               id="wizard-step-2"
               steps={[
-                <WizardStep body={null} name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
+                <WizardStep body={{ hasNoPadding: true }} name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
                   {createStepContentWithDrawer('Configuration substep A')}
                 </WizardStep>,
-                <WizardStep body={null} name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
+                <WizardStep body={{ hasNoPadding: true }} name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
                   {createStepContentWithDrawer('Configuration substep B')}
                 </WizardStep>
               ]}
             />
-            <WizardStep body={null} name="Additional" id="wizard-step-3">
+            <WizardStep body={{ hasNoPadding: true }} name="Additional" id="wizard-step-3">
               {createStepContentWithDrawer('Additional step')}
             </WizardStep>
-            <WizardStep body={null} name="Review" id="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
+            <WizardStep
+              body={{ hasNoPadding: true }}
+              name="Review"
+              id="wizard-step-4"
+              footer={{ nextButtonText: 'Finish' }}
+            >
               {createStepContentWithDrawer('Review step')}
             </WizardStep>
           </Wizard>

package/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx

@@ -171,25 +171,30 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = ()
         </PageSection>
         <PageSection type={PageSectionTypes.wizard} ß>
           <Wizard>
-            <WizardStep body={null} name="Information" id="wizard-step-1">
+            <WizardStep body={{ hasNoPadding: true }} name="Information" id="wizard-step-1">
               {createStepContentWithDrawer('Information step')}
             </WizardStep>
             <WizardStep
               name="Configuration"
               id="wizard-step-2"
               steps={[
-                <WizardStep body={null} name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
+                <WizardStep body={{ hasNoPadding: true }} name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
                   {createStepContentWithDrawer('Configuration substep A')}
                 </WizardStep>,
-                <WizardStep body={null} name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
+                <WizardStep body={{ hasNoPadding: true }} name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
                   {createStepContentWithDrawer('Configuration substep B')}
                 </WizardStep>
               ]}
             />
-            <WizardStep body={null} name="Additional" id="wizard-step-3">
+            <WizardStep body={{ hasNoPadding: true }} name="Additional" id="wizard-step-3">
               {createStepContentWithDrawer('Additional step')}
             </WizardStep>
-            <WizardStep body={null} name="Review" id="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
+            <WizardStep
+              body={{ hasNoPadding: true }}
+              name="Review"
+              id="wizard-step-4"
+              footer={{ nextButtonText: 'Finish' }}
+            >
               {createStepContentWithDrawer('Review step')}
             </WizardStep>
           </Wizard>