From dce704b050c323037a177808ded368f7d450381d Mon Sep 17 00:00:00 2001
From: rvsia <r.vsia@seznam.cz>
Date: Tue, 23 Feb 2021 13:34:42 +0100
Subject: [PATCH] fix(pf4): add class for cancel wizard button

---
 .../src/files/wizard/step-buttons.js          |   8 +-
 .../__snapshots__/step-buttons.test.js.snap   |  72 ++++++-----
 .../__snapshots__/wizard-step.test.js.snap    | 108 ++++++++--------
 .../wizard/__snapshots__/wizard.test.js.snap  | 116 ++++++++++--------
 4 files changed, 171 insertions(+), 133 deletions(-)

diff --git a/packages/pf4-component-mapper/src/files/wizard/step-buttons.js b/packages/pf4-component-mapper/src/files/wizard/step-buttons.js
index 1dfc1ad13..b26f95f78 100644
--- a/packages/pf4-component-mapper/src/files/wizard/step-buttons.js
+++ b/packages/pf4-component-mapper/src/files/wizard/step-buttons.js
@@ -57,9 +57,11 @@ const WizardStepButtons = ({
             <Button type="button" variant="secondary" isDisabled={disableBack} onClick={handlePrev}>
               {back}
             </Button>
-            <Button type="button" variant="link" onClick={formOptions.onCancel}>
-              {cancel}
-            </Button>
+            <div className="pf-c-wizard__footer-cancel">
+              <Button type="button" variant="link" onClick={formOptions.onCancel}>
+                {cancel}
+              </Button>
+            </div>
           </React.Fragment>
         )}
       </FormSpy>
diff --git a/packages/pf4-component-mapper/src/tests/wizard/__snapshots__/step-buttons.test.js.snap b/packages/pf4-component-mapper/src/tests/wizard/__snapshots__/step-buttons.test.js.snap
index 8bd82fa93..293b60149 100644
--- a/packages/pf4-component-mapper/src/tests/wizard/__snapshots__/step-buttons.test.js.snap
+++ b/packages/pf4-component-mapper/src/tests/wizard/__snapshots__/step-buttons.test.js.snap
@@ -83,26 +83,30 @@ exports[`<WizardSTepButtons should add custom className to toolbar 1`] = `
               Back
             </button>
           </Button>
-          <Button
-            onClick={[MockFunction]}
-            type="button"
-            variant="link"
+          <div
+            className="pf-c-wizard__footer-cancel"
           >
-            <button
-              aria-disabled={false}
-              aria-label={null}
-              className="pf-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-2"
-              data-ouia-component-type="PF4/Button"
-              data-ouia-safe={true}
-              disabled={false}
+            <Button
               onClick={[MockFunction]}
-              role={null}
               type="button"
+              variant="link"
             >
-              Cancel
-            </button>
-          </Button>
+              <button
+                aria-disabled={false}
+                aria-label={null}
+                className="pf-c-button pf-m-link"
+                data-ouia-component-id="OUIA-Generated-Button-link-2"
+                data-ouia-component-type="PF4/Button"
+                data-ouia-safe={true}
+                disabled={false}
+                onClick={[MockFunction]}
+                role={null}
+                type="button"
+              >
+                Cancel
+              </button>
+            </Button>
+          </div>
         </FormSpy>
       </footer>
     </WizardStepButtons>
@@ -192,26 +196,30 @@ exports[`<WizardSTepButtons should render correctly 1`] = `
               Back
             </button>
           </Button>
-          <Button
-            onClick={[MockFunction]}
-            type="button"
-            variant="link"
+          <div
+            className="pf-c-wizard__footer-cancel"
           >
-            <button
-              aria-disabled={false}
-              aria-label={null}
-              className="pf-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-1"
-              data-ouia-component-type="PF4/Button"
-              data-ouia-safe={true}
-              disabled={false}
+            <Button
               onClick={[MockFunction]}
-              role={null}
               type="button"
+              variant="link"
             >
-              Cancel
-            </button>
-          </Button>
+              <button
+                aria-disabled={false}
+                aria-label={null}
+                className="pf-c-button pf-m-link"
+                data-ouia-component-id="OUIA-Generated-Button-link-1"
+                data-ouia-component-type="PF4/Button"
+                data-ouia-safe={true}
+                disabled={false}
+                onClick={[MockFunction]}
+                role={null}
+                type="button"
+              >
+                Cancel
+              </button>
+            </Button>
+          </div>
         </FormSpy>
       </footer>
     </WizardStepButtons>
diff --git a/packages/pf4-component-mapper/src/tests/wizard/__snapshots__/wizard-step.test.js.snap b/packages/pf4-component-mapper/src/tests/wizard/__snapshots__/wizard-step.test.js.snap
index 4f759e294..52f16be9c 100644
--- a/packages/pf4-component-mapper/src/tests/wizard/__snapshots__/wizard-step.test.js.snap
+++ b/packages/pf4-component-mapper/src/tests/wizard/__snapshots__/wizard-step.test.js.snap
@@ -173,26 +173,30 @@ exports[`<WizardStep /> should render correctly 1`] = `
               Back
             </button>
           </Button>
-          <Button
-            onClick={[MockFunction]}
-            type="button"
-            variant="link"
+          <div
+            className="pf-c-wizard__footer-cancel"
           >
-            <button
-              aria-disabled={false}
-              aria-label={null}
-              className="pf-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-1"
-              data-ouia-component-type="PF4/Button"
-              data-ouia-safe={true}
-              disabled={false}
+            <Button
               onClick={[MockFunction]}
-              role={null}
               type="button"
+              variant="link"
             >
-              Cancel
-            </button>
-          </Button>
+              <button
+                aria-disabled={false}
+                aria-label={null}
+                className="pf-c-button pf-m-link"
+                data-ouia-component-id="OUIA-Generated-Button-link-1"
+                data-ouia-component-type="PF4/Button"
+                data-ouia-safe={true}
+                disabled={false}
+                onClick={[MockFunction]}
+                role={null}
+                type="button"
+              >
+                Cancel
+              </button>
+            </Button>
+          </div>
         </FormSpy>
       </footer>
     </WizardStepButtons>
@@ -381,26 +385,30 @@ exports[`<WizardStep /> should render custom description 1`] = `
               Back
             </button>
           </Button>
-          <Button
-            onClick={[MockFunction]}
-            type="button"
-            variant="link"
+          <div
+            className="pf-c-wizard__footer-cancel"
           >
-            <button
-              aria-disabled={false}
-              aria-label={null}
-              className="pf-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-5"
-              data-ouia-component-type="PF4/Button"
-              data-ouia-safe={true}
-              disabled={false}
+            <Button
               onClick={[MockFunction]}
-              role={null}
               type="button"
+              variant="link"
             >
-              Cancel
-            </button>
-          </Button>
+              <button
+                aria-disabled={false}
+                aria-label={null}
+                className="pf-c-button pf-m-link"
+                data-ouia-component-id="OUIA-Generated-Button-link-5"
+                data-ouia-component-type="PF4/Button"
+                data-ouia-safe={true}
+                disabled={false}
+                onClick={[MockFunction]}
+                role={null}
+                type="button"
+              >
+                Cancel
+              </button>
+            </Button>
+          </div>
         </FormSpy>
       </footer>
     </WizardStepButtons>
@@ -618,26 +626,30 @@ exports[`<WizardStep /> should render title with showTitle 1`] = `
               Back
             </button>
           </Button>
-          <Button
-            onClick={[MockFunction]}
-            type="button"
-            variant="link"
+          <div
+            className="pf-c-wizard__footer-cancel"
           >
-            <button
-              aria-disabled={false}
-              aria-label={null}
-              className="pf-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-2"
-              data-ouia-component-type="PF4/Button"
-              data-ouia-safe={true}
-              disabled={false}
+            <Button
               onClick={[MockFunction]}
-              role={null}
               type="button"
+              variant="link"
             >
-              Cancel
-            </button>
-          </Button>
+              <button
+                aria-disabled={false}
+                aria-label={null}
+                className="pf-c-button pf-m-link"
+                data-ouia-component-id="OUIA-Generated-Button-link-2"
+                data-ouia-component-type="PF4/Button"
+                data-ouia-safe={true}
+                disabled={false}
+                onClick={[MockFunction]}
+                role={null}
+                type="button"
+              >
+                Cancel
+              </button>
+            </Button>
+          </div>
         </FormSpy>
       </footer>
     </WizardStepButtons>
diff --git a/packages/pf4-component-mapper/src/tests/wizard/__snapshots__/wizard.test.js.snap b/packages/pf4-component-mapper/src/tests/wizard/__snapshots__/wizard.test.js.snap
index 0c3b7f23e..5dbfd87b6 100644
--- a/packages/pf4-component-mapper/src/tests/wizard/__snapshots__/wizard.test.js.snap
+++ b/packages/pf4-component-mapper/src/tests/wizard/__snapshots__/wizard.test.js.snap
@@ -1139,26 +1139,30 @@ exports[`<Wizard /> should render correctly and unmount 1`] = `
                                               Back
                                             </button>
                                           </Button>
-                                          <Button
-                                            onClick={[Function]}
-                                            type="button"
-                                            variant="link"
+                                          <div
+                                            className="pf-c-wizard__footer-cancel"
                                           >
-                                            <button
-                                              aria-disabled={false}
-                                              aria-label={null}
-                                              className="pf-c-button pf-m-link"
-                                              data-ouia-component-id="OUIA-Generated-Button-link-1"
-                                              data-ouia-component-type="PF4/Button"
-                                              data-ouia-safe={true}
-                                              disabled={false}
+                                            <Button
                                               onClick={[Function]}
-                                              role={null}
                                               type="button"
+                                              variant="link"
                                             >
-                                              Cancel
-                                            </button>
-                                          </Button>
+                                              <button
+                                                aria-disabled={false}
+                                                aria-label={null}
+                                                className="pf-c-button pf-m-link"
+                                                data-ouia-component-id="OUIA-Generated-Button-link-1"
+                                                data-ouia-component-type="PF4/Button"
+                                                data-ouia-safe={true}
+                                                disabled={false}
+                                                onClick={[Function]}
+                                                role={null}
+                                                type="button"
+                                              >
+                                                Cancel
+                                              </button>
+                                            </Button>
+                                          </div>
                                         </FormSpy>
                                       </footer>
                                     </WizardStepButtons>
@@ -1800,16 +1804,20 @@ exports[`<Wizard /> should render correctly in modal and unmount 1`] = `
                                               >
                                                 Back
                                               </button>
-                                              <button
-                                                aria-disabled="false"
-                                                class="pf-c-button pf-m-link"
-                                                data-ouia-component-id="OUIA-Generated-Button-link-8"
-                                                data-ouia-component-type="PF4/Button"
-                                                data-ouia-safe="true"
-                                                type="button"
+                                              <div
+                                                class="pf-c-wizard__footer-cancel"
                                               >
-                                                Cancel
-                                              </button>
+                                                <button
+                                                  aria-disabled="false"
+                                                  class="pf-c-button pf-m-link"
+                                                  data-ouia-component-id="OUIA-Generated-Button-link-8"
+                                                  data-ouia-component-type="PF4/Button"
+                                                  data-ouia-safe="true"
+                                                  type="button"
+                                                >
+                                                  Cancel
+                                                </button>
+                                              </div>
                                             </footer>
                                           </div>
                                         </div>
@@ -1969,16 +1977,20 @@ exports[`<Wizard /> should render correctly in modal and unmount 1`] = `
                                                 >
                                                   Back
                                                 </button>
-                                                <button
-                                                  aria-disabled="false"
-                                                  class="pf-c-button pf-m-link"
-                                                  data-ouia-component-id="OUIA-Generated-Button-link-8"
-                                                  data-ouia-component-type="PF4/Button"
-                                                  data-ouia-safe="true"
-                                                  type="button"
+                                                <div
+                                                  class="pf-c-wizard__footer-cancel"
                                                 >
-                                                  Cancel
-                                                </button>
+                                                  <button
+                                                    aria-disabled="false"
+                                                    class="pf-c-button pf-m-link"
+                                                    data-ouia-component-id="OUIA-Generated-Button-link-8"
+                                                    data-ouia-component-type="PF4/Button"
+                                                    data-ouia-safe="true"
+                                                    type="button"
+                                                  >
+                                                    Cancel
+                                                  </button>
+                                                </div>
                                               </footer>
                                             </div>
                                           </div>
@@ -2683,26 +2695,30 @@ exports[`<Wizard /> should render correctly in modal and unmount 1`] = `
                                                           Back
                                                         </button>
                                                       </Button>
-                                                      <Button
-                                                        onClick={[Function]}
-                                                        type="button"
-                                                        variant="link"
+                                                      <div
+                                                        className="pf-c-wizard__footer-cancel"
                                                       >
-                                                        <button
-                                                          aria-disabled={false}
-                                                          aria-label={null}
-                                                          className="pf-c-button pf-m-link"
-                                                          data-ouia-component-id="OUIA-Generated-Button-link-8"
-                                                          data-ouia-component-type="PF4/Button"
-                                                          data-ouia-safe={true}
-                                                          disabled={false}
+                                                        <Button
                                                           onClick={[Function]}
-                                                          role={null}
                                                           type="button"
+                                                          variant="link"
                                                         >
-                                                          Cancel
-                                                        </button>
-                                                      </Button>
+                                                          <button
+                                                            aria-disabled={false}
+                                                            aria-label={null}
+                                                            className="pf-c-button pf-m-link"
+                                                            data-ouia-component-id="OUIA-Generated-Button-link-8"
+                                                            data-ouia-component-type="PF4/Button"
+                                                            data-ouia-safe={true}
+                                                            disabled={false}
+                                                            onClick={[Function]}
+                                                            role={null}
+                                                            type="button"
+                                                          >
+                                                            Cancel
+                                                          </button>
+                                                        </Button>
+                                                      </div>
                                                     </FormSpy>
                                                   </footer>
                                                 </WizardStepButtons>