feat(Modal): Enable usage without wrapper, add custom Portal

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

@@ -1,36 +1,21 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Button, Header, Icon, Modal } from 'stardust'
 
-class ModalBasicExample extends Component {
-  state = { active: false }
-
-  show = () => this.setState({ active: true })
-  hide = () => this.setState({ active: false })
-
-  render() {
-    const { active } = this.state
-
-    return (
-      <div>
-        <Button onClick={this.show}>Basic Modal</Button>
-
-        <Modal basic size='small' active={active} onHide={this.hide}>
-          <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>
-          </Modal.Content>
-          <Modal.Actions>
-            <Button basic color='red' inverted onClick={this.hide}>
-              <Icon name='remove' /> No
-            </Button>
-            <Button color='green' inverted onClick={this.hide}>
-              <Icon name='checkmark' /> Yes
-            </Button>
-          </Modal.Actions>
-        </Modal>
-      </div>
-    )
-  }
-}
+const ModalBasicExample = () => (
+  <Modal trigger={<Button>Basic Modal</Button>} basic size='small'>
+    <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>
+    </Modal.Content>
+    <Modal.Actions>
+      <Button basic color='red' inverted>
+        <Icon name='remove' /> No
+      </Button>
+      <Button color='green' inverted>
+        <Icon name='checkmark' /> Yes
+      </Button>
+    </Modal.Actions>
+  </Modal>
+)
 
 export default ModalBasicExample

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

@@ -1,33 +1,18 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Button, Header, Image, Modal } from 'stardust'
 
-class ModalModalExample extends Component {
-  state = { active: false }
-
-  show = () => this.setState({ active: true })
-  hide = () => this.setState({ active: false })
-
-  render() {
-    const { active } = this.state
-
-    return (
-      <div>
-        <Button onClick={this.show}>Show Modal</Button>
-
-        <Modal active={active} onHide={this.hide}>
-          <Modal.Header>Select a Photo</Modal.Header>
-          <Modal.Content image>
-            <Image wrapped className='medium' src='http://semantic-ui.com/images/avatar2/large/rachel.png' />
-            <Modal.Description>
-              <Header>Default Profile Image</Header>
-              <p>We've found the following gravatar image associated with your e-mail address.</p>
-              <p>Is it okay to use this photo?</p>
-            </Modal.Description>
-          </Modal.Content>
-        </Modal>
-      </div>
-    )
-  }
-}
+const ModalModalExample = () => (
+  <Modal trigger={<Button>Show Modal</Button>}>
+    <Modal.Header>Select a Photo</Modal.Header>
+    <Modal.Content image>
+      <Image wrapped size='medium' src='http://semantic-ui.com/images/avatar2/large/rachel.png' />
+      <Modal.Description>
+        <Header>Default Profile Image</Header>
+        <p>We've found the following gravatar image associated with your e-mail address.</p>
+        <p>Is it okay to use this photo?</p>
+      </Modal.Description>
+    </Modal.Content>
+  </Modal>
+)
 
 export default ModalModalExample

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

@@ -1,46 +1,31 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Button, Header, Icon, Image, Modal } from 'stardust'
 
-class ModalScrollingExample extends Component {
-  state = { active: false }
-
-  show = () => this.setState({ active: true })
-  hide = () => this.setState({ active: false })
-
-  render() {
-    const { active, dimmer } = this.state
-
-    return (
-      <div>
-        <Button onClick={this.show}>Long Modal</Button>
-
-        <Modal dimmer={dimmer} active={active} onHide={this.hide}>
-          <Modal.Header>Profile Picture</Modal.Header>
-          <Modal.Content image>
-            <Image wrapped className='medium' src='http://semantic-ui.com/images/wireframe/image.png' />
-            <Modal.Description>
-              <Header>Modal Header</Header>
-              <p>This is an example of expanded content that will cause the modal's dimmer to scroll</p>
-              <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
-              <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
-              <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
-              <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
-              <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
-              <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
-              <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
-              <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
-            </Modal.Description>
-          </Modal.Content>
-          <Modal.Actions>
-            <Button primary icon onClick={this.hide}>
-              Proceed <Icon name='right chevron' />
-            </Button>
-          </Modal.Actions>
-        </Modal>
-      </div>
-    )
-  }
-}
+const ModalScrollingExample = () => (
+  <Modal trigger={<Button>Long Modal</Button>}>
+    <Modal.Header>Profile Picture</Modal.Header>
+    <Modal.Content image>
+      <Image wrapped size='medium' src='http://semantic-ui.com/images/wireframe/image.png' />
+      <Modal.Description>
+        <Header>Modal Header</Header>
+        <p>This is an example of expanded content that will cause the modal's dimmer to scroll</p>
+        <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
+        <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
+        <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
+        <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
+        <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
+        <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
+        <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
+        <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
+      </Modal.Description>
+    </Modal.Content>
+    <Modal.Actions>
+      <Button primary icon>
+        Proceed <Icon name='right chevron' />
+      </Button>
+    </Modal.Actions>
+  </Modal>
+)
 
 export default ModalScrollingExample
 

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

@@ -2,24 +2,27 @@ import React, { Component } from 'react'
 import { Button, Icon, Modal } from 'stardust'
 
 class ModalCloseConfigExample extends Component {
-  state = { active: false }
+  state = { open: false }
 
-  closeConfigShow = (closeOnEscape, closeOnClickOutside) => () => {
-    this.setState({ closeOnEscape, closeOnClickOutside, active: true })
+  closeConfigShow = (closeOnEscape, closeOnDocumentClick) => () => {
+    this.setState({ closeOnEscape, closeOnDocumentClick, open: true })
   }
 
-  hide = () => this.setState({ active: false })
+  close = () => this.setState({ open: false })
 
   render() {
-    const { active, closeOnEscape, closeOnClickOutside } = this.state
+    const { open, closeOnEscape, closeOnDocumentClick } = this.state
 
     return (
       <div>
         <Button onClick={this.closeConfigShow(false, true)}>No Close on Escape</Button>
         <Button onClick={this.closeConfigShow(true, false)}>No Close on Click Outside</Button>
 
-        <Modal active={active} onHide={this.hide}
-          closeOnEscape={closeOnEscape} closeOnClickOutside={closeOnClickOutside}
+        <Modal
+          open={open}
+          closeOnEscape={closeOnEscape}
+          closeOnDocumentClick={closeOnDocumentClick}
+          onClose={this.close}
         >
           <Modal.Header>
             Delete Your Account

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

@@ -2,13 +2,13 @@ import React, { Component } from 'react'
 import { Button, Header, Icon, Image, Modal } from 'stardust'
 
 class ModalDimmerExample extends Component {
-  state = { active: false }
+  state = { open: false }
 
-  show = (dimmer) => () => this.setState({ dimmer, active: true })
-  hide = () => this.setState({ active: false })
+  show = (dimmer) => () => this.setState({ dimmer, open: true })
+  close = () => this.setState({ open: false })
 
   render() {
-    const { active, dimmer } = this.state
+    const { open, dimmer } = this.state
 
     return (
       <div>
@@ -17,21 +17,21 @@ class ModalDimmerExample extends Component {
         <Button onClick={this.show('blurring')}>Blurring</Button>
         <Button onClick={this.show(false)}>None</Button>
 
-        <Modal dimmer={dimmer} active={active} onHide={this.hide}>
+        <Modal dimmer={dimmer} open={open} onClose={this.close}>
           <Modal.Header>Select a Photo</Modal.Header>
           <Modal.Content image>
-            <Image wrapped className='medium' src='http://semantic-ui.com/images/avatar2/large/rachel.png' />
+            <Image wrapped size='medium' src='http://semantic-ui.com/images/avatar2/large/rachel.png' />
             <Modal.Description>
               <Header>Default Profile Image</Header>
               <p>We've found the following gravatar image associated with your e-mail address.</p>
               <p>Is it okay to use this photo?</p>
             </Modal.Description>
           </Modal.Content>
           <Modal.Actions>
-            <Button color='black' onClick={this.hide}>
+            <Button color='black' onClick={this.close}>
               Nope
             </Button>
-            <Button positive icon labeled='right' onClick={this.hide}>
+            <Button positive icon labeled='right' onClick={this.close}>
               Yep, that's me <Icon name='checkmark' />
             </Button>
           </Modal.Actions>

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

@@ -2,21 +2,21 @@ import React, { Component } from 'react'
 import { Button, Icon, Modal } from 'stardust'
 
 class ModalSizeExample extends Component {
-  state = { active: false }
+  state = { open: false }
 
-  show = (size) => () => this.setState({ size, active: true })
-  hide = () => this.setState({ active: false })
+  show = (size) => () => this.setState({ size, open: true })
+  close = () => this.setState({ open: false })
 
   render() {
-    const { active, size } = this.state
+    const { open, size } = this.state
 
     return (
       <div>
         <Button onClick={this.show('small')}>Small</Button>
         <Button onClick={this.show('large')}>Large</Button>
         <Button onClick={this.show('fullscreen')}>Fullscreen</Button>
 
-        <Modal size={size} active={active} onHide={this.hide}>
+        <Modal size={size} open={open} onClose={this.close}>
           <Modal.Header>
             Delete Your Account
           </Modal.Header>

package.json

@@ -49,7 +49,6 @@
     "classnames": "^2.1.5",
     "debug": "^2.2.0",
     "lodash": "^4.6.1",
-    "react-portal": "^2.2.1",
     "semantic-ui-css": "^2.2.2"
   },
   "devDependencies": {