Updated examples to use ActionList in custom footers

Author: Eric Olkowski

packages/react-core/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);

packages/react-core/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"
 
 ```

packages/react-core/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>
   );
 };

packages/react-core/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>
   );
 };