Issue #783

.nycrc

@@ -0,0 +1,8 @@
+{
+  "reporter": [
+    "text"
+  ],
+  "exclude": [
+    "test/**/*"
+  ]
+}

docs/components.json

@@ -465,7 +465,7 @@
       }
     }
   },
-  "components/button/index.jsx": {
+  "components/button/component.jsx": {
     "description": "General purpose button with three types",
     "displayName": "Button",
     "methods": [],
@@ -2433,6 +2433,18 @@
           "value": "{}",
           "computed": false
         }
+      },
+      "portalNode": {
+        "type": {
+          "name": "instanceOf",
+          "value": "Object"
+        },
+        "required": false,
+        "description": "Node to portal PopOver to",
+        "defaultValue": {
+          "value": "null",
+          "computed": false
+        }
       }
     }
   },
@@ -4729,22 +4741,7 @@
   "components/message/index.jsx": {
     "description": "Messages with optional styling for the current user's message,\ndifferent font sizes and message styles",
     "displayName": "Message",
-    "methods": [
-      {
-        "name": "renderIconMenu",
-        "docblock": null,
-        "modifiers": [],
-        "params": [],
-        "returns": null
-      },
-      {
-        "name": "renderImageIconMenu",
-        "docblock": null,
-        "modifiers": [],
-        "params": [],
-        "returns": null
-      }
-    ],
+    "methods": [],
     "props": {
       "avatar": {
         "type": {
@@ -5067,17 +5064,6 @@
           "computed": false
         }
       },
-      "iconColor": {
-        "type": {
-          "name": "string"
-        },
-        "required": false,
-        "description": "Color for the IconMenu's icon",
-        "defaultValue": {
-          "value": "colors.icons",
-          "computed": true
-        }
-      },
       "enableMultiline": {
         "type": {
           "name": "bool"
@@ -5870,6 +5856,44 @@
           "value": "null",
           "computed": false
         }
+      },
+      "portalNode": {
+        "type": {
+          "name": "instanceOf",
+          "value": "Object"
+        },
+        "required": false,
+        "description": "Node to portal PopOver to",
+        "defaultValue": {
+          "value": "null",
+          "computed": false
+        }
+      }
+    }
+  },
+  "components/portal/index.jsx": {
+    "description": "For transportation of elements to document.body or an element of choice",
+    "displayName": "Portal",
+    "methods": [],
+    "props": {
+      "children": {
+        "type": {
+          "name": "node"
+        },
+        "required": true,
+        "description": "Content to be portaled"
+      },
+      "node": {
+        "type": {
+          "name": "instanceOf",
+          "value": "Object"
+        },
+        "required": false,
+        "description": "Optional node to portal children to",
+        "defaultValue": {
+          "value": "null",
+          "computed": false
+        }
       }
     }
   },
@@ -6635,6 +6659,18 @@
           "computed": true
         }
       },
+      "portalNode": {
+        "type": {
+          "name": "instanceOf",
+          "value": "Object"
+        },
+        "required": false,
+        "description": "Node to portal PopOver to",
+        "defaultValue": {
+          "value": "null",
+          "computed": false
+        }
+      },
       "color": {
         "type": {
           "name": "string"

docs/package.json

@@ -51,8 +51,8 @@
     "prismjs": "^1.8.3",
     "prop-types": "^15.5.6",
     "radium": "^0.19.1",
-    "react": "^15.5.3",
-    "react-dom": "^15.5.3",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
     "react-jss": "^5.3.0",
     "react-router": "^3.0.2",
     "uuid": "^3.0.1"

docs/src/components/icon-menu.jsx

@@ -1,3 +1,4 @@
+/* global document */
 import React from 'react';
 import _ from 'lodash';
 import IconMenu from '../../../dist/icon-menu';
@@ -62,6 +63,7 @@ const IconMenuDoc = () => {
               headerStyle={style.headerStyle}
               secondaryMenuItems={[<MenuItem icon={<IconRocket />} text="An item" onClick={() => {}} />, <MenuItem text="Another item" onClick={() => {}} />]}
               dividerText="More items"
+              portalNode={document.getElementsByTagName('main')[0]}
             >
               <MenuItem text="Active item" onClick={() => {}} active />
               <MenuItem text="Inactive item" onClick={() => {}} />
@@ -77,6 +79,7 @@ const IconMenuDoc = () => {
               secondaryMenuItems={[<MenuItem icon={<IconRocket />} text="An item" onClick={() => {}} />, <MenuItem text="Another item" onClick={() => {}} />]}
               dividerText="More items"
               buttonStyle={style.button}
+              portalNode={document.getElementsByTagName('main')[0]}
             >
               <MenuItem text="Active item" onClick={() => {}} active />
               <MenuItem text="Inactive item" onClick={() => {}} />

docs/src/components/nav.jsx

@@ -70,6 +70,7 @@ const Nav = ({ media, toggleMenu, open }, context) => {
       <MenuItem onClick={() => router.push('/pagination')} active={router.isActive('/pagination')} text="Pagination" />
       <MenuItem onClick={() => router.push('/paper')} active={router.isActive('/paper')} text="Paper" />
       <MenuItem onClick={() => router.push('/pop-over')} active={router.isActive('/pop-over')} text="PopOver" />
+      <MenuItem onClick={() => router.push('/portal')} active={router.isActive('/portal')} text="Portal" />
       <MenuItem onClick={() => router.push('/profile')} active={router.isActive('/profile')} text="Profile" />
       <MenuItem onClick={() => router.push('/profile-card')} active={router.isActive('/profile-card')} text="ProfileCard" />
       <MenuItem onClick={() => router.push('/radio-button')} active={router.isActive('/radio-button')} text="RadioButton" />

docs/src/components/portal/example.js

@@ -0,0 +1,37 @@
+export default `
+  \`\`\`jsx
+  import React, { Component } from 'react';
+  import Portal from 'anchor-ui/portal';
+
+  class MyComponent extends Component {
+    state = {
+      portalOpen: false
+    }
+
+    togglePortal = () => {
+      const { portalOpen } = this.state;
+
+      this.setState({
+        portalOpen: !portalOpen
+      });
+    }
+
+    render() {
+      const { portalOpen } = this.state;
+
+      return (
+        <section>
+          <Button onClick={this.togglePortal}>Portal</Button>
+          {
+            portalOpen
+              ? <Portal node={document.getElementById('root')}>
+                // children to be portaled
+              </Portal>
+              :null
+          }
+        </section>
+      );
+    }
+  }
+  \`\`\`
+`;

docs/src/components/portal/index.jsx

@@ -0,0 +1,78 @@
+/* global document */
+import React from 'react';
+import _ from 'lodash';
+import IconRocket from '../../../../dist/icons/icon-rocket';
+import Button from '../../../../dist/button';
+import Portal from '../../../../dist/portal';
+import Alert from '../../../../dist/alert';
+import Props from '../props';
+import components from '../../../components.json';
+import Paper from '../../../../dist/paper';
+import example from './example';
+import Markdown from '../markdown';
+
+class PortalDoc extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      portal: false
+    };
+  }
+
+  togglePortal = () => {
+    const { portal } = this.state;
+
+    this.setState({
+      portal: !portal
+    });
+  }
+
+  render() {
+    const { portal } = this.state;
+    const componentData = _.find(components, component => component.displayName === 'Portal');
+    const style = {
+      paper: {
+        margin: 0,
+        padding: '20px'
+      },
+      button: { margin: '10px' },
+      alert: { maxWidth: '100%' }
+    };
+
+    return (
+      <article className="page">
+        <h1>Portal</h1>
+        <Alert
+          style={style.alert}
+          text="Portal will only transport elements to desired element in React v16 or later. If React isn't at v16 it will render the element where it's called."
+          type="warning"
+        />
+        <section>
+          <h1>Description</h1>
+          <p>{componentData.description}</p>
+        </section>
+        <section>
+          <h1>Examples</h1>
+          <Markdown markdown={example} title="Code example" />
+          <Paper style={style.paper} id="portal-container">
+            <h2>{portal ? 'Remove the Portal' : 'Add a Portal'}</h2>
+            <Button onClick={this.togglePortal} style={style.button} iconButton>
+              <IconRocket />
+            </Button>
+            {
+              portal
+                ? <Portal node={document.getElementById('portal-container')}>
+                  <div>I got portaled to the bottom of this section!</div>
+                </Portal>
+                : null
+            }
+          </Paper>
+        </section>
+        <Props props={componentData.props} />
+      </article>
+    );
+  }
+}
+
+export default PortalDoc;

docs/src/components/select.jsx

@@ -1,3 +1,4 @@
+/* global document */
 import React, { Component } from 'react';
 import _ from 'lodash';
 import MenuItem from '../../../dist/menu-item';
@@ -64,6 +65,7 @@ class SelectDoc extends Component {
               label="Select"
               onChange={this.changeValue}
               style={style.select}
+              portalNode={document.getElementsByTagName('main')[0]}
             >
               <MenuItem text="Menu item" value={1} />
               <MenuItem text="Menu item 2" value={2} />
@@ -74,6 +76,7 @@ class SelectDoc extends Component {
               onChange={this.changeValueError}
               style={style.select}
               error="Error message"
+              portalNode={document.getElementsByTagName('main')[0]}
             >
               <MenuItem text="Menu item" value={1} />
               <MenuItem text="Menu item 2" value={2} />

docs/src/index.js

@@ -51,6 +51,7 @@ import DateSeparator from './components/date-separator';
 import EmojiFilter from './components/emoji-filter';
 import Gallery from './components/gallery';
 import Media from './components/media';
+import Portal from './components/portal';
 import './css/meyer-reset.css';
 import './css/index.css';
 import './css/prism.css';
@@ -105,6 +106,7 @@ ReactDOM.render(
         <Route path="/emoji-filter" component={EmojiFilter} />
         <Route path="/gallery" component={Gallery} />
         <Route path="/media" component={Media} />
+        <Route path="/portal" component={Portal} />
       </Route>
     </Router>
   </StyleRoot>,

mocha-setup.js

@@ -0,0 +1,4 @@
+const Adapter = require('enzyme-adapter-react-16');
+const enzyme = require('enzyme');
+
+enzyme.configure({ adapter: new Adapter() });

mocha.opts

@@ -0,0 +1,2 @@
+--require ./mocha-setup
+--compilers js:babel-core/register

package.json

@@ -7,8 +7,8 @@
     "/*"
   ],
   "scripts": {
-    "test": "NODE_ENV=test nyc mocha --compilers js:babel-core/register test/*",
-    "test:watch": "NODE_ENV=test mocha --watch --compilers js:babel-core/register test/*",
+    "test": "NODE_ENV=test nyc mocha --opts ./mocha.opts test/*",
+    "test:watch": "NODE_ENV=test mocha --opts ./mocha.opts --watch test/*",
     "watch": "babel -d dist/ -w src/",
     "compile": "rimraf dist && babel -d dist/ src/",
     "lint": "eslint '{src,docs/src,test}/**/**/*.{js,jsx}'",
@@ -43,7 +43,8 @@
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-0": "^6.16.0",
     "chai": "^3.5.0",
-    "enzyme": "^2.7.0",
+    "enzyme": "^3.1.0",
+    "enzyme-adapter-react-16": "^1.0.3",
     "eslint": "^3.19.0",
     "eslint-config-airbnb": "^15.0.1",
     "eslint-plugin-import": "^2.6.1",
@@ -53,10 +54,9 @@
     "mocha": "^3.2.0",
     "nyc": "^11.3.0",
     "prettier": "^1.7.4",
-    "react": "^15.4.2",
-    "react-addons-test-utils": "^15.4.2",
+    "react": "^16.0.0",
     "react-docgen": "^2.19.0",
-    "react-dom": "^15.4.2",
+    "react-dom": "^16.0.0",
     "react-test-renderer": "^15.5.4",
     "rimraf": "^2.6.2",
     "sinon": "^1.17.7",
@@ -81,7 +81,7 @@
     "date-fns": "^1.27.2",
     "emojione": "^3.0.3",
     "escape-html": "^1.0.3",
-    "html-react-parser": "^0.3.4",
+    "html-react-parser": "^0.4.0",
     "lodash": "^4.17.4",
     "mobile-detect": "^1.3.6",
     "radium": "^0.19.0",