[Emotion] Convert EuiPortal (#6075)

* [Emotion] Convert `EuiPortal` * Added CL * Better CL
elastic · Jul 28, 2022 · 1e9103e · 1e9103e
1 parent b17a335
commit 1e9103e
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 8 deletions.
diff --git a/src/components/index.scss b/src/components/index.scss
@@ -31,7 +31,6 @@
 @import 'pagination/index';
 @import 'panel/index';
 @import 'page/index'; // Page needs to come after Panel for cascade specificity
-@import 'portal/index';
 @import 'tree_view/index';
 @import 'resizable_container/index';
 @import 'side_nav/index';

diff --git a/src/components/portal/_index.scss b/src/components/portal/_index.scss
diff --git a/src/components/portal/_portal.scss b/src/components/portal/_portal.scss
diff --git a/src/global_styling/reset/global_styles.tsx b/src/global_styling/reset/global_styles.tsx
@@ -105,6 +105,12 @@ export const EuiGlobalStyles = ({}: EuiGlobalStylesProps) => {
         text-decoration: none;
       }
     }
+
+    // A few EUI components (e.g. tooltip, combobox) use a portal to render content outside of the DOM hierarchy.
+    // The portal content is absolutely positioned relative to the body.
+    .euiBody-hasPortalContent {
+      position: relative;
+    }
   `;
 
   return <Global styles={styles} />;

diff --git a/upcoming_changelogs/6075.md b/upcoming_changelogs/6075.md
@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Moved `.euiBody-hasPortalContent` styles that used to live in `_portal.scss` to Emotion `EuiGlobalStyles`