use portal on bottom bar, fixes elastic#49

snide · Mar 9, 2018 · 677749d · 677749d
1 parent c258cf3
commit 677749d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/src/components/bottom_bar/bottom_bar.js b/src/components/bottom_bar/bottom_bar.js
@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import { EuiPortal } from '../portal'
+
 const paddingSizeToClassNameMap = {
   none: null,
   s: 'euiBottomBar--paddingSmall',
@@ -24,12 +26,14 @@ export const EuiBottomBar = ({
   );
 
   return (
-    <div
-      className={classes}
-      {...rest}
-    >
-      {children}
-    </div>
+    <EuiPortal>
+      <div
+        className={classes}
+        {...rest}
+      >
+        {children}
+      </div>
+    </EuiPortal>
   );
 };
 

diff --git a/src/components/bottom_bar/bottom_bar.test.js b/src/components/bottom_bar/bottom_bar.test.js
@@ -1,9 +1,15 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
 
 import { EuiBottomBar, PADDING_SIZES } from './bottom_bar';
 
+
+// TODO: Temporary hack which we can remove once react-test-renderer supports portals.
+// More info at https://github.com/facebook/react/issues/11565.
+ReactDOM.createPortal = node => node;
+
 describe('EuiBottomBar', () => {
   test('is rendered', () => {
     const component = render(