fix(Modal): fix Formik bug in Modal (#9797)

* fix(Modal): fix Formik bug in Modal - Remove SecondaryButtonSet sub-component (causing re-renders w/ Formik) * fix(modal): formatting issues Co-authored-by: Alessandra Davila <[email protected]> Co-authored-by: Scott Strubberg <[email protected]>
carbon-design-system · Oct 7, 2021 · 2612bbd · 2612bbd
1 parent 6e52398
commit 2612bbd
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 52 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -801,6 +801,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "ColbyJohnIBM",
+      "name": "ColbyJohnIBM",
+      "avatar_url": "https://avatars.githubusercontent.com/u/19613692?v=4",
+      "profile": "https://github.com/ColbyJohnIBM",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

diff --git a/README.md b/README.md
@@ -187,6 +187,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/adamalston"><img src="https://avatars.githubusercontent.com/u/18297826?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Adam Alston</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=adamalston" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/Kiittyka"><img src="https://avatars.githubusercontent.com/u/41021851?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Krithika S Udupa</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Kiittyka" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/egriff38"><img src="https://avatars.githubusercontent.com/u/6627718?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Eshin Griffith</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=egriff38" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/ColbyJohnIBM"><img src="https://avatars.githubusercontent.com/u/19613692?v=4?s=100" width="100px;" alt=""/><br /><sub><b>ColbyJohnIBM</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=ColbyJohnIBM" title="Code">💻</a></td>
   </tr>
 </table>
 

diff --git a/packages/react/src/components/Modal/Modal.js b/packages/react/src/components/Modal/Modal.js
@@ -451,32 +451,6 @@ export default class Modal extends Component {
       alertDialogProps['aria-describedby'] = this.modalBodyId;
     }
 
-    const SecondaryButtonSet = () => {
-      if (Array.isArray(secondaryButtons) && secondaryButtons.length <= 2) {
-        return secondaryButtons.map(
-          ({ buttonText, onClick: onButtonClick }, i) => (
-            <Button
-              key={`${buttonText}-${i}`}
-              kind="secondary"
-              onClick={onButtonClick}>
-              {buttonText}
-            </Button>
-          )
-        );
-      }
-      if (secondaryButtonText) {
-        return (
-          <Button
-            kind="secondary"
-            onClick={onSecondaryButtonClick}
-            ref={this.secondaryButton}>
-            {secondaryButtonText}
-          </Button>
-        );
-      }
-      return null;
-    };
-
     const modalBody = (
       <div
         ref={this.innerModal}
@@ -514,7 +488,25 @@ export default class Modal extends Component {
         )}
         {!passiveModal && (
           <ButtonSet className={footerClasses}>
-            <SecondaryButtonSet />
+            {Array.isArray(secondaryButtons) && secondaryButtons.length <= 2
+              ? secondaryButtons.map(
+                  ({ buttonText, onClick: onButtonClick }, i) => (
+                    <Button
+                      key={`${buttonText}-${i}`}
+                      kind="secondary"
+                      onClick={onButtonClick}>
+                      {buttonText}
+                    </Button>
+                  )
+                )
+              : secondaryButtonText && (
+                  <Button
+                    kind="secondary"
+                    onClick={onSecondaryButtonClick}
+                    ref={this.secondaryButton}>
+                    {secondaryButtonText}
+                  </Button>
+                )}
             <Button
               kind={danger ? 'danger' : 'primary'}
               disabled={primaryButtonDisabled}

diff --git a/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap b/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap
@@ -167,36 +167,34 @@ exports[`ModalWrapper should render 1`] = `
             <div
               className="bx--modal-footer bx--btn-set"
             >
-              <SecondaryButtonSet>
-                <Button
-                  dangerDescription="danger"
+              <Button
+                dangerDescription="danger"
+                disabled={false}
+                isExpressive={false}
+                kind="secondary"
+                onClick={[Function]}
+                size="default"
+                tabIndex={0}
+                tooltipAlignment="center"
+                tooltipPosition="top"
+                type="button"
+              >
+                <button
+                  aria-describedby={null}
+                  aria-pressed={null}
+                  className="bx--btn bx--btn--secondary"
                   disabled={false}
-                  isExpressive={false}
-                  kind="secondary"
+                  onBlur={[Function]}
                   onClick={[Function]}
-                  size="default"
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
                   tabIndex={0}
-                  tooltipAlignment="center"
-                  tooltipPosition="top"
                   type="button"
                 >
-                  <button
-                    aria-describedby={null}
-                    aria-pressed={null}
-                    className="bx--btn bx--btn--secondary"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                    tabIndex={0}
-                    type="button"
-                  >
-                    Cancel
-                  </button>
-                </Button>
-              </SecondaryButtonSet>
+                  Cancel
+                </button>
+              </Button>
               <Button
                 dangerDescription="danger"
                 disabled={false}