EuiColorPicker uses standard portal DOM positioning, intentional popover entrance

src-docs/src/views/color_picker/color_picker_example.js

@@ -84,6 +84,10 @@ const modesPickerSnippet = `// Gradient map only
 />
 `;
 
+import Containers from './containers';
+const containersSource = require('!!raw-loader!./containers');
+const containersHtml = renderToHtml(Containers);
+
 import { KitchenSink } from './kitchen_sink';
 const kitchenSinkSource = require('!!raw-loader!./kitchen_sink');
 const kitchenSinkHtml = renderToHtml(KitchenSink);
@@ -211,6 +215,27 @@ export const ColorPickerExample = {
       snippet: [modesSwatchSnippet, modesPickerSnippet],
       demo: <Modes />,
     },
+    {
+      title: 'Containers',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: containersSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: containersHtml,
+        },
+      ],
+      text: (
+        <p>
+          Demonstrating that <EuiCode>EuiColorPicker</EuiCode> can exist in
+          portal containers and that its popover position works in nested
+          contexts.
+        </p>
+      ),
+      demo: <Containers />,
+    },
     {
       title: 'Kitchen sink',
       source: [

src-docs/src/views/color_picker/containers.js

@@ -0,0 +1,110 @@
+import React, { Component, Fragment } from 'react';
+
+import {
+  EuiColorPicker,
+  EuiButton,
+  EuiPopover,
+  EuiFormRow,
+  EuiModal,
+  EuiModalBody,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiOverlayMask,
+  EuiSpacer,
+} from '../../../../src/components';
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      color: '#FFF',
+      isModalVisible: false,
+      isPopoverOpen: false,
+    };
+  }
+
+  closeModal = () => {
+    this.setState({ isModalVisible: false });
+  };
+
+  showModal = () => {
+    this.setState({ isModalVisible: true });
+  };
+
+  togglePopover = () => {
+    this.setState(prevState => ({
+      isPopoverOpen: !prevState.isPopoverOpen,
+    }));
+  };
+
+  closePopover = () => {
+    this.setState({
+      isPopoverOpen: false,
+    });
+  };
+
+  onChange = color => {
+    this.setState({
+      color,
+    });
+  };
+
+  render() {
+    const { color, isModalVisible, isPopoverOpen } = this.state;
+
+    const colorPicker = (
+      <EuiColorPicker color={color} onChange={this.onChange} />
+    );
+
+    const button = (
+      <EuiButton
+        iconType="arrowDown"
+        iconSide="right"
+        onClick={this.togglePopover}>
+        Open popover
+      </EuiButton>
+    );
+
+    let modal;
+
+    if (isModalVisible) {
+      modal = (
+        <EuiOverlayMask>
+          <EuiModal onClose={this.closeModal} style={{ width: '800px' }}>
+            <EuiModalHeader>
+              <EuiModalHeaderTitle>Color picker in a modal</EuiModalHeaderTitle>
+            </EuiModalHeader>
+
+            <EuiModalBody>{colorPicker}</EuiModalBody>
+          </EuiModal>
+        </EuiOverlayMask>
+      );
+    }
+
+    return (
+      <Fragment>
+        <EuiFormRow
+          label="Color picker"
+          helpText="This color picker is inside of a form row">
+          {colorPicker}
+        </EuiFormRow>
+
+        <EuiPopover
+          id="popover"
+          ownFocus
+          button={button}
+          isOpen={isPopoverOpen}
+          closePopover={this.closePopover}>
+          <div style={{ width: '300px' }}>{colorPicker}</div>
+        </EuiPopover>
+
+        <EuiSpacer size="m" />
+
+        <EuiButton onClick={this.showModal}>Show modal</EuiButton>
+
+        {modal}
+      </Fragment>
+    );
+  }
+}