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.
Royal-Navy · Aug 12, 2020 · 763c3a7 · 763c3a7
1 parent 2432812
commit 763c3a7
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 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
@@ -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
@@ -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
@@ -43,8 +43,8 @@ export const Modal: React.FC<ModalProps> = ({
   )
 
   const primaryButtonWithIcon = primaryButton && {
-    ...primaryButton,
     icon: <IconForward data-testid="modal-primary-confirm" />,
+    ...primaryButton,
   }
 
   return (