chore(wizard): updated button order (#8409)

* chore(wizard): update button order * PR feedback from Eric and Matt * PR feedback from Michael
patternfly · Dec 5, 2022 · 2708a2f · 2708a2f
1 parent 21f9415
commit 2708a2f
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 58 deletions.
diff --git a/packages/react-core/src/components/Wizard/WizardFooterInternal.tsx b/packages/react-core/src/components/Wizard/WizardFooterInternal.tsx
@@ -28,14 +28,14 @@ export const WizardFooterInternal: React.FunctionComponent<WizardFooterInternalP
   cancelButtonText
 }: WizardFooterInternalProps) => (
   <footer className={css(styles.wizardFooter)}>
-    <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={!isValid}>
-      {nextButtonText}
-    </Button>
     {!activeStep.hideBackButton && (
       <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={firstStep}>
         {backButtonText}
       </Button>
     )}
+    <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={!isValid}>
+      {nextButtonText}
+    </Button>
     {!activeStep.hideCancelButton && (
       <div className={styles.wizardFooterCancel}>
         <Button variant={ButtonVariant.link} onClick={onClose}>

diff --git a/...rc/components/Wizard/__tests__/Generated/__snapshots__/WizardFooterInternal.test.tsx.snap b/...rc/components/Wizard/__tests__/Generated/__snapshots__/WizardFooterInternal.test.tsx.snap
@@ -6,25 +6,25 @@ exports[`WizardFooterInternal should match snapshot (auto-generated) 1`] = `
     class="pf-c-wizard__footer"
   >
     <button
-      aria-disabled="false"
-      class="pf-c-button pf-m-primary"
-      data-ouia-component-id="OUIA-Generated-Button-primary-1"
+      aria-disabled="true"
+      class="pf-c-button pf-m-secondary pf-m-disabled"
+      data-ouia-component-id="OUIA-Generated-Button-secondary-1"
       data-ouia-component-type="PF4/Button"
       data-ouia-safe="true"
-      type="submit"
+      disabled=""
+      type="button"
     >
       <div>
         ReactNode
       </div>
     </button>
     <button
-      aria-disabled="true"
-      class="pf-c-button pf-m-secondary pf-m-disabled"
-      data-ouia-component-id="OUIA-Generated-Button-secondary-1"
+      aria-disabled="false"
+      class="pf-c-button pf-m-primary"
+      data-ouia-component-id="OUIA-Generated-Button-primary-1"
       data-ouia-component-type="PF4/Button"
       data-ouia-safe="true"
-      disabled=""
-      type="button"
+      type="submit"
     >
       <div>
         ReactNode

diff --git a/packages/react-core/src/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap b/packages/react-core/src/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap
@@ -227,16 +227,6 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
       <footer
         class="pf-c-wizard__footer"
       >
-        <button
-          aria-disabled="false"
-          class="pf-c-button pf-m-primary"
-          data-ouia-component-id="OUIA-Generated-Button-primary-2"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="submit"
-        >
-          Next
-        </button>
         <button
           aria-disabled="true"
           class="pf-c-button pf-m-secondary pf-m-disabled"
@@ -248,6 +238,16 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
         >
           Back
         </button>
+        <button
+          aria-disabled="false"
+          class="pf-c-button pf-m-primary"
+          data-ouia-component-id="OUIA-Generated-Button-primary-2"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="submit"
+        >
+          Next
+        </button>
         <div
           class="pf-c-wizard__footer-cancel"
         >
@@ -475,16 +475,6 @@ exports[`Wizard Wizard should match snapshot 1`] = `
       <footer
         class="pf-c-wizard__footer"
       >
-        <button
-          aria-disabled="false"
-          class="pf-c-button pf-m-primary"
-          data-ouia-component-id="OUIA-Generated-Button-primary-1"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="submit"
-        >
-          Next
-        </button>
         <button
           aria-disabled="true"
           class="pf-c-button pf-m-secondary pf-m-disabled"
@@ -496,6 +486,16 @@ exports[`Wizard Wizard should match snapshot 1`] = `
         >
           Back
         </button>
+        <button
+          aria-disabled="false"
+          class="pf-c-button pf-m-primary"
+          data-ouia-component-id="OUIA-Generated-Button-primary-1"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="submit"
+        >
+          Next
+        </button>
         <div
           class="pf-c-wizard__footer-cancel"
         >
@@ -604,16 +604,6 @@ exports[`Wizard bare wiz 1`] = `
       <footer
         class="pf-c-wizard__footer"
       >
-        <button
-          aria-disabled="false"
-          class="pf-c-button pf-m-primary"
-          data-ouia-component-id="OUIA-Generated-Button-primary-3"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="submit"
-        >
-          Next
-        </button>
         <button
           aria-disabled="true"
           class="pf-c-button pf-m-secondary pf-m-disabled"
@@ -625,6 +615,16 @@ exports[`Wizard bare wiz 1`] = `
         >
           Back
         </button>
+        <button
+          aria-disabled="false"
+          class="pf-c-button pf-m-primary"
+          data-ouia-component-id="OUIA-Generated-Button-primary-3"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="submit"
+        >
+          Next
+        </button>
         <div
           class="pf-c-wizard__footer-cancel"
         >

diff --git a/packages/react-core/src/components/Wizard/examples/Wizard.md b/packages/react-core/src/components/Wizard/examples/Wizard.md
@@ -465,16 +465,16 @@ class ValidateButtonPressWizard extends React.Component {
             if (activeStep.name !== 'Final Step') {
               return (
                 <>
-                  <Button variant="primary" type="submit" onClick={onNext}>
-                    Forward
-                  </Button>
                   <Button
                     variant="secondary"
                     onClick={onBack}
-                    className={activeStep.name === 'Step 1' ? 'pf-m-disabled' : ''}
+                    className={activeStep.name === 'First step' ? 'pf-m-disabled' : ''}
                   >
                     Backward
                   </Button>
+                  <Button variant="primary" type="submit" onClick={onNext}>
+                    Forward
+                  </Button>
                   <Button variant="link" onClick={onClose}>
                     Cancel
                   </Button>
@@ -484,8 +484,10 @@ class ValidateButtonPressWizard extends React.Component {
             // Final step buttons
             return (
               <>
+                <Button variant="secondary" onClick={() => goToStepByName('First step')}>
+                  Go to Beginning
+                </Button>
                 <Button onClick={() => this.validateLastStep(onNext)}>Validate</Button>
-                <Button onClick={() => goToStepByName('Step 1')}>Go to Beginning</Button>
               </>
             );
           }}
@@ -769,16 +771,16 @@ class ProgressiveWizard extends React.Component {
           {({ activeStep, goToStepByName, goToStepById, onNext, onBack, onClose }) => {
             return (
               <>
-                <Button variant="primary" type="submit" onClick={() => this.getNextStep(activeStep, onNext)}>
-                  {activeStep.name === 'Review' ? 'Finish' : 'Next'}
-                </Button>
                 <Button
                   variant="secondary"
                   onClick={() => this.getPreviousStep(activeStep, onBack)}
-                  className={activeStep.name === 'Get Started' ? 'pf-m-disabled' : ''}
+                  className={activeStep.name === 'Get started' ? 'pf-m-disabled' : ''}
                 >
                   Back
                 </Button>
+                <Button variant="primary" type="submit" onClick={() => this.getNextStep(activeStep, onNext)}>
+                  {activeStep.name === 'Review' ? 'Finish' : 'Next'}
+                </Button>
                 <Button variant="link" onClick={onClose}>
                   Cancel
                 </Button>

diff --git a/packages/react-core/src/next/components/Wizard/WizardFooter.tsx b/packages/react-core/src/next/components/Wizard/WizardFooter.tsx
@@ -61,16 +61,16 @@ const InternalWizardFooter = ({
   cancelButtonText = 'Cancel'
 }: Omit<WizardFooterProps, 'activeStep'>) => (
   <WizardFooterWrapper>
-    <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={isNextDisabled}>
-      {nextButtonText}
-    </Button>
-
     {!isBackHidden && (
       <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={isBackDisabled}>
         {backButtonText}
       </Button>
     )}
 
+    <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={isNextDisabled}>
+      {nextButtonText}
+    </Button>
+
     {!isCancelHidden && (
       <div className={styles.wizardFooterCancel}>
         <Button variant={ButtonVariant.link} onClick={onClose}>

diff --git a/packages/react-core/src/next/components/Wizard/examples/WizardKitchenSink.tsx b/packages/react-core/src/next/components/Wizard/examples/WizardKitchenSink.tsx
@@ -123,12 +123,12 @@ const CustomStepThreeFooter = () => {
 
   return (
     <WizardFooterWrapper>
-      <Button variant="primary" onClick={() => onNext(goToNextStep)} isLoading={isLoading} isDisabled={isLoading}>
-        Async Next
-      </Button>
       <Button variant="secondary" onClick={onBack} isDisabled={isLoading}>
         Back
       </Button>
+      <Button variant="primary" onClick={() => onNext(goToNextStep)} isLoading={isLoading} isDisabled={isLoading}>
+        Async Next
+      </Button>
       <Button variant="link" onClick={onClose} isDisabled={isLoading}>
         Cancel
       </Button>