Add container prop to EuiPopover

src-docs/src/views/popover/popover_container.js

@@ -0,0 +1,69 @@
+import React, {
+  Component,
+} from 'react';
+
+import {
+  EuiButton,
+  EuiCode,
+  EuiPanel,
+  EuiPopover,
+  EuiSpacer,
+} from '../../../../src/components';
+
+export default class PopoverContainer extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isPopoverOpen: false,
+    };
+  }
+
+  onButtonClick = () => {
+    this.setState({
+      isPopoverOpen: !this.state.isPopoverOpen,
+    });
+  }
+
+  closePopover = () => {
+    this.setState({
+      isPopoverOpen: false,
+    });
+  }
+
+  setPanelRef = node => this.panel = node;
+
+  render() {
+    const button = (
+      <EuiButton
+        iconType="arrowDown"
+        iconSide="right"
+        onClick={this.onButtonClick}
+        style={{ position: 'relative', left: 50 }}
+      >
+        Show constrained popover
+      </EuiButton>
+    );
+
+    return (
+      <EuiPanel panelRef={this.setPanelRef}>
+        <EuiPopover
+          id="popover"
+          button={button}
+          isOpen={this.state.isPopoverOpen}
+          closePopover={this.closePopover}
+          container={this.panel}
+        >
+          <div>
+            Popover is positioned <EuiCode>downCenter</EuiCode> but
+            constrained to fit within the panel.
+          </div>
+        </EuiPopover>
+
+        {/* create adequate room for the popover */}
+        <EuiSpacer size="xxl"/>
+        <EuiSpacer size="xxl"/>
+      </EuiPanel>
+    );
+  }
+}

src-docs/src/views/popover/popover_example.js

@@ -40,6 +40,10 @@ import PopoverHTMLElementAnchor from './popover_htmlelement_anchor';
 const popoverHTMLElementAnchorSource = require('!!raw-loader!./popover_htmlelement_anchor');
 const popoverHTMLElementAnchorHtml = renderToHtml(PopoverHTMLElementAnchor);
 
+import PopoverContainer from './popover_container';
+const popoverContainerSource = require('!!raw-loader!./popover_htmlelement_anchor');
+const popoverContainerHtml = renderToHtml(PopoverHTMLElementAnchor);
+
 
 export const PopoverExample = {
   title: 'Popover',
@@ -163,6 +167,25 @@ export const PopoverExample = {
       </div>
     ),
     demo: <PopoverWithTitlePadding />,
+  }, {
+    title: 'Constraining a popover inside a container',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: popoverContainerSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: popoverContainerHtml,
+    }],
+    text: (
+      <div>
+        <p>
+          <EuiCode>EuiPopover</EuiCode> can accept a React or DOM element as
+          a <EuiCode>container</EuiCode> prop and restrict the popover from
+          overflowing that container.
+        </p>
+      </div>
+    ),
+    demo: <PopoverContainer />,
   }, {
     title: 'Popover using an HTMLElement as the anchor',
     source: [{

src/components/popover/popover.js

@@ -224,6 +224,7 @@ export class EuiPopover extends Component {
     if (this.button == null || this.panel == null) return;
 
     const { top, left, position, arrow } = findPopoverPosition({
+      container: this.props.container,
       position: getPopoverPositionFromAnchorPosition(this.props.anchorPosition),
       align: getPopoverAlignFromAnchorPosition(this.props.anchorPosition),
       anchor: this.button,
@@ -235,7 +236,7 @@ export class EuiPopover extends Component {
       }
     });
 
-    // the popver's z-index must inherit from the button
+    // the popover's z-index must inherit from the button
     // this keeps a button's popover under a flyout that would cover the button
     // but a popover triggered inside a flyout will appear over that flyout
     const zIndex = getElementZIndex(this.button, this.panel);
@@ -403,15 +404,16 @@ EuiPopover.propTypes = {
   ownFocus: PropTypes.bool,
   withTitle: PropTypes.bool,
   closePopover: PropTypes.func.isRequired,
-  button: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.instanceOf(HTMLElement),
-  ]).isRequired,
+  button: PropTypes.node.isRequired,
   children: PropTypes.node,
   anchorPosition: PropTypes.oneOf(ANCHOR_POSITIONS),
   panelClassName: PropTypes.string,
   panelPaddingSize: PropTypes.oneOf(SIZES),
-  popoverRef: PropTypes.func
+  popoverRef: PropTypes.func,
+  container: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.instanceOf(HTMLElement)
+  ]),
 };
 
 EuiPopover.defaultProps = {

src/components/popover/wrapping_popover.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { findDOMNode } from 'react-dom';
+import PropTypes from 'prop-types';
 import { EuiPopover } from './popover';
 import { EuiPortal } from '../portal';
 
@@ -55,3 +56,7 @@ export class EuiWrappingPopover extends Component {
     );
   }
 }
+
+EuiWrappingPopover.propTypes = {
+  button: PropTypes.instanceOf(HTMLElement),
+};