From 763c3a7c1968b08f9ef845bdd00d4acd58def7a2 Mon Sep 17 00:00:00 2001
From: jpveooys <66470099+jpveooys@users.noreply.github.com>
Date: Wed, 12 Aug 2020 13:46:42 +0100
Subject: [PATCH] feat(Modal): Respect primaryButton.icon if set

Prior to this change, `Modal` accepted an `icon` prop on `primaryButton` but always overrode it with the forward arrow icon.

For a cancellation or deletion modal dialogue you may want to use a different or no icon, so it this makes the forward arrow icon a default that can be overridden.
---
 .../src/components/Modal/Modal.stories.tsx    | 22 ++++++++++++++++++-
 .../src/components/Modal/Modal.test.tsx       | 21 ++++++++++++++++++
 .../src/components/Modal/Modal.tsx            |  2 +-
 3 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/packages/react-component-library/src/components/Modal/Modal.stories.tsx b/packages/react-component-library/src/components/Modal/Modal.stories.tsx
index 729afcea7c..5f2bca99b9 100644
--- a/packages/react-component-library/src/components/Modal/Modal.stories.tsx
+++ b/packages/react-component-library/src/components/Modal/Modal.stories.tsx
@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react'
 import React from 'react'
 
 import { Modal } from './index'
-import { ButtonProps } from '../Button'
+import { BUTTON_COLOR, ButtonProps } from '../Button'
 
 const stories = storiesOf('Modal', module)
 const examples = storiesOf('Modal/Examples', module)
@@ -60,6 +60,26 @@ examples.add('No buttons', () => {
   )
 })
 
+examples.add('Danger primary button without icon', () => {
+  const primaryButtonWithoutIcon: ButtonProps = {
+    ...primaryButton,
+    color: BUTTON_COLOR.DANGER,
+    icon: undefined,
+  }
+
+  return (
+    <Modal
+      title="Modal Header"
+      primaryButton={primaryButtonWithoutIcon}
+      secondaryButton={secondaryButton}
+      onClose={action('onClose')}
+      isOpen
+    >
+      <pre style={{ padding: '1rem' }}>Arbitrary JSX content</pre>
+    </Modal>
+  )
+})
+
 examples.add('No Tertiary Button', () => {
   return (
     <Modal
diff --git a/packages/react-component-library/src/components/Modal/Modal.test.tsx b/packages/react-component-library/src/components/Modal/Modal.test.tsx
index 34870144be..caa9034060 100644
--- a/packages/react-component-library/src/components/Modal/Modal.test.tsx
+++ b/packages/react-component-library/src/components/Modal/Modal.test.tsx
@@ -188,6 +188,27 @@ describe('Modal', () => {
           )
         })
       })
+
+      describe('and no primary button icon is specified', () => {
+        beforeEach(() => {
+          wrapper = render(
+            <Modal
+              isOpen
+              title={title}
+              onClose={onClose}
+              primaryButton={{...primaryButton, icon: undefined}}
+            >
+              <span>Example child JSX</span>
+            </Modal>
+          )
+        })
+
+        it('does not render an icon for the primary button', () => {
+          expect(
+            wrapper.queryByTestId('modal-primary-confirm')
+          ).toBeNull()
+        })
+      })
     })
   })
 
diff --git a/packages/react-component-library/src/components/Modal/Modal.tsx b/packages/react-component-library/src/components/Modal/Modal.tsx
index 9017c83129..333846e17c 100644
--- a/packages/react-component-library/src/components/Modal/Modal.tsx
+++ b/packages/react-component-library/src/components/Modal/Modal.tsx
@@ -43,8 +43,8 @@ export const Modal: React.FC<ModalProps> = ({
   )
 
   const primaryButtonWithIcon = primaryButton && {
-    ...primaryButton,
     icon: <IconForward data-testid="modal-primary-confirm" />,
+    ...primaryButton,
   }
 
   return (