breaking(Modal): update shorthand functionality (#1599)

* fix(Modal): update actions prop type

* fix(Modal): update closeIcon prop types

* wip

* feat(Modal): add onItemClick prop

* docs(ModalExampleShorthand): fix default export name

* fix(customPropTypes): allow itemShorthand arrays

* fix(Modal): fix actions shorthand types and tests

* fix(Modal): fix closeIcon type

* typings(ModalActions): run lint fix

Author: levithomason

docs/app/Examples/modules/Modal/Types/ModalExampleShorthand.js

@@ -1,16 +1,16 @@
 import React from 'react'
 import { Button, Modal } from 'semantic-ui-react'
 
-const ModalShorthandExample = () => (
+const ModalExampleShorthand = () => (
   <Modal
     trigger={<Button>Show Modal</Button>}
-    header='Delete Your Account'
-    content='Are you sure you want to delete your account'
+    header='Reminder!'
+    content='Call Benjamin regarding the reports.'
     actions={[
-      { key: 'no', content: 'No', color: 'red', triggerClose: true },
-      { key: 'yes', content: 'Yes', color: 'green', triggerClose: true },
+      'Snooze',
+      { key: 'done', content: 'Done', positive: true },
     ]}
   />
 )
 
-export default ModalShorthandExample
+export default ModalExampleShorthand

docs/app/Examples/modules/Modal/Variations/ModalExampleCloseIcon.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { Button, Header, Icon, Modal } from 'semantic-ui-react'
 
 const ModalExampleCloseIcon = () => (
-  <Modal trigger={<Button>Show Modal</Button>} closeIcon='close'>
+  <Modal trigger={<Button>Show Modal</Button>} closeIcon>
     <Header icon='archive' content='Archive Old Messages' />
     <Modal.Content>
       <p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>

src/lib/customPropTypes.js

@@ -270,6 +270,12 @@ export const itemShorthand = (...args) => every([
   PropTypes.oneOfType([
     PropTypes.node,
     PropTypes.object,
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.node,
+        PropTypes.object,
+      ]),
+    ),
   ]),
 ])(...args)
 

src/modules/Modal/Modal.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { SemanticShorthandItem } from '../..';
 import { PortalProps } from '../../addons/Portal';
-import { default as ModalActions } from './ModalActions';
+import { default as ModalActions, ModalActionsProps } from './ModalActions';
 import { default as ModalContent, ModalContentProps } from './ModalContent';
 import { default as ModalDescription } from './ModalDescription';
 import { default as ModalHeader, ModalHeaderProps } from './ModalHeader';
@@ -13,8 +13,8 @@ export interface ModalProps extends PortalProps {
   /** An element type to render as (string or function). */
   as?: any;
 
-  /** A Modal can be passed action buttons via shorthand. */
-  actions?: Array<any>;
+  /** Shorthand for Modal.Actions. Typically an array of button shorthand. */
+  actions?: SemanticShorthandItem<ModalActionsProps>;
 
   /** A Modal can reduce its complexity */
   basic?: boolean;
@@ -49,6 +49,14 @@ export interface ModalProps extends PortalProps {
   /** The node where the modal should mount. Defaults to document.body. */
   mountNode?: any;
 
+  /**
+   * Action onClick handler when using shorthand `actions`.
+   *
+   * @param {SyntheticEvent} event - React's original SyntheticEvent.
+   * @param {object} data - All props.
+   */
+  onActionClick?: (event: React.MouseEvent<HTMLElement>, data: ModalProps) => void;
+
   /**
    * Called when a close event happens.
    *

src/modules/Modal/Modal.js

@@ -33,8 +33,8 @@ class Modal extends Component {
     /** An element type to render as (string or function). */
     as: customPropTypes.as,
 
-    /** Elements to render as Modal action buttons. */
-    actions: PropTypes.arrayOf(customPropTypes.itemShorthand),
+    /** Shorthand for Modal.Actions. Typically an array of button shorthand. */
+    actions: customPropTypes.itemShorthand,
 
     /** A modal can reduce its complexity */
     basic: PropTypes.bool,
@@ -45,7 +45,7 @@ class Modal extends Component {
     /** Additional classes. */
     className: PropTypes.string,
 
-    /** Icon. */
+    /** Shorthand for the close icon. Closes the modal on click. */
     closeIcon: PropTypes.oneOfType([
       PropTypes.node,
       PropTypes.object,
@@ -76,6 +76,14 @@ class Modal extends Component {
     /** The node where the modal should mount. Defaults to document.body. */
     mountNode: PropTypes.any,
 
+    /**
+     * Action onClick handler when using shorthand `actions`.
+     *
+     * @param {SyntheticEvent} event - React's original SyntheticEvent.
+     * @param {object} data - All props.
+     */
+    onActionClick: PropTypes.func,
+
     /**
      * Called when a close event happens.
      *
@@ -153,10 +161,10 @@ class Modal extends Component {
 
   handleActionsOverrides = predefinedProps => ({
     onActionClick: (e, actionProps) => {
-      const { triggerClose } = actionProps
-
       _.invoke(predefinedProps, 'onActionClick', e, actionProps)
-      if (triggerClose) this.handleClose(e)
+      _.invoke(this.props, 'onActionClick', e, this.props)
+
+      this.handleClose(e)
     },
   })
 

src/modules/Modal/ModalActions.d.ts

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import { ButtonProps } from '../../elements/Button';
+import { SemanticShorthandCollection } from '../..';
 
 export interface ModalActionsProps {
   [key: string]: any;
 
   /** An element type to render as (string or function). */
   as?: any;
 
-  /** An element type to render as (string or function). */
-  actions?: Array<any>;
+  /** Array of shorthand buttons. */
+  actions?: SemanticShorthandCollection<ButtonProps>;
 
   /** Primary content. */
   children?: React.ReactNode;

src/modules/Modal/ModalActions.js

@@ -21,11 +21,8 @@ export default class ModalActions extends Component {
     /** An element type to render as (string or function). */
     as: customPropTypes.as,
 
-    /** Elements to render as Modal action buttons. */
-    actions: customPropTypes.every([
-      customPropTypes.disallow(['children']),
-      PropTypes.arrayOf(customPropTypes.itemShorthand),
-    ]),
+    /** Array of shorthand buttons. */
+    actions: customPropTypes.collectionShorthand,
 
     /** Primary content. */
     children: PropTypes.node,
@@ -34,10 +31,10 @@ export default class ModalActions extends Component {
     className: PropTypes.string,
 
     /**
-     * onClick handler for an action. Mutually exclusive with children.
+     * Action onClick handler when using shorthand `actions`.
      *
      * @param {SyntheticEvent} event - React's original SyntheticEvent.
-     * @param {object} data - All item props.
+     * @param {object} data - All props from the clicked action.
      */
     onActionClick: customPropTypes.every([
       customPropTypes.disallow(['children']),

test/specs/modules/Modal/Modal-test.js

@@ -104,29 +104,36 @@ describe('Modal', () => {
   })
 
   describe('actions', () => {
-    const actions = [
-      { key: 'cancel', content: 'Cancel' },
-      { key: 'ok', content: 'OK', triggerClose: true },
-    ]
+    it('closes the modal on action click', () => {
+      wrapperMount(<Modal actions={['OK']} defaultOpen />)
 
-    it('handles onItemClick', () => {
-      const onActionClick = sandbox.spy()
-      const event = { target: null }
+      assertBodyContains('.ui.modal')
+      domEvent.click('.ui.modal .actions .button')
+      assertBodyContains('.ui.modal', false)
+    })
 
-      wrapperMount(<Modal defaultOpen actions={{ actions, onActionClick }} />)
+    it('calls shorthand onActionClick callback', () => {
+      const onActionClick = sandbox.spy()
+      const modalActions = { onActionClick, actions: [{ key: 'ok', content: 'OK' }] }
+      wrapperMount(<Modal actions={modalActions} defaultOpen />)
 
-      domEvent.click('.button:last-child')
+      onActionClick.should.not.have.been.called()
+      domEvent.click('.ui.modal .actions .button')
       onActionClick.should.have.been.calledOnce()
-      onActionClick.should.have.been.calledWithMatch(event, { content: 'OK' })
     })
+  })
 
-    it('handles triggerClose prop on an action', () => {
-      wrapperMount(<Modal defaultOpen actions={actions} />)
+  describe('onActionClick', () => {
+    it('is called when an action is clicked', () => {
+      const onActionClick = sandbox.spy()
+      const event = { target: null }
+      const props = { actions: ['OK'], defaultOpen: true, onActionClick }
 
-      domEvent.click('.button:first-child')
-      assertBodyContains('.ui.modal')
-      domEvent.click('.button:last-child')
-      assertBodyContains('.ui.modal', false)
+      wrapperMount(<Modal {...props} />)
+      domEvent.click('.ui.modal .actions .button')
+
+      onActionClick.should.have.been.calledOnce()
+      onActionClick.should.have.been.calledWithMatch(event, props)
     })
   })
 

test/specs/modules/Modal/ModalActions-test.js

@@ -1,6 +1,6 @@
 import React from 'react'
-import ModalActions from 'src/modules/Modal/ModalActions'
 
+import ModalActions from 'src/modules/Modal/ModalActions'
 import * as common from 'test/specs/commonTests'
 import { sandbox } from 'test/utils'