docs(Modal): Add controlled modal example (#769)

* Add controlled modal example

* docs(Modal): fix open prop description

Author: lewisblackwood

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

@@ -0,0 +1,36 @@
+import React, { Component } from 'react'
+import { Button, Header, Icon, Modal } from 'semantic-ui-react'
+
+export default class ModalExampleControlled extends Component {
+  state = { modalOpen: false }
+
+  handleOpen = (e) => this.setState({
+    modalOpen: true,
+  })
+
+  handleClose = (e) => this.setState({
+    modalOpen: false,
+  })
+
+  render() {
+    return (
+      <Modal
+        trigger={<Button onClick={this.handleOpen}>Show Modal</Button>}
+        open={this.state.modalOpen}
+        onClose={this.handleClose}
+        basic
+        size='small'
+      >
+        <Header icon='browser' content='Cookies policy' />
+        <Modal.Content>
+          <h3>This website uses cookies to ensure the best user experience.</h3>
+        </Modal.Content>
+        <Modal.Actions>
+          <Button color='green' onClick={this.handleClose} inverted>
+            <Icon name='checkmark' /> Got it
+          </Button>
+        </Modal.Actions>
+      </Modal>
+    )
+  }
+}

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

@@ -34,6 +34,11 @@ const ModalExamples = () => (
       description='Multiple modals can be displayed on top of one another.'
       examplePath='modules/Modal/Types/ModalExampleMultiple'
     />
+    <ComponentExample
+      title='Controlled'
+      description='A modal can be a controlled component'
+      examplePath='modules/Modal/Types/ModalExampleControlled'
+    />
   </ExampleSection>
 )
 

src/modules/Modal/Modal.js

@@ -69,6 +69,9 @@ class Modal extends Component {
     /** Called when the portal is unmounted from the DOM */
     onUnmount: PropTypes.func,
 
+    /** Controls whether or not the Modal is displayed. */
+    open: PropTypes.bool,
+
     /** A modal can vary in size */
     size: PropTypes.oneOf(_meta.props.size),
 
@@ -169,7 +172,7 @@ class Modal extends Component {
   }
 
   render() {
-    const { basic, children, className, dimmer, mountNode, size } = this.props
+    const { basic, children, className, dimmer, mountNode, open, size } = this.props
 
     // Short circuit when server side rendering
     if (!isBrowser) return null
@@ -225,6 +228,7 @@ class Modal extends Component {
         onMount={this.handlePortalMount}
         onOpen={this.handleOpen}
         onUnmount={this.handlePortalUnmount}
+        open={open}
       >
         {modalJSX}
       </Portal>