[Visualizations] Migrate vislib scss files to Emotion

src/platform/plugins/private/vis_types/vislib/public/vis_wrapper.styles.tsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { Global } from '@emotion/react';
+import { useEuiTheme } from '@elastic/eui';
+import { vislibVisTypeStyles } from './vislib/vislib_vis_type.styles';
+import { vislibLayoutStyles } from './vislib/lib/layout/layout.styles';
+import { vislibMeterStyles } from './vislib/visualizations/gauges/meter.styles';
+import { vislibTooltipStyles } from './vislib/components/tooltip/tooltip.styles';
+
+// Styles for non-React DOM nodes
+export const GlobalVislibWrapperStyles = React.memo(() => {
+  const euiThemeContext = useEuiTheme();
+
+  const styles = [
+    vislibVisTypeStyles,
+    vislibLayoutStyles(euiThemeContext),
+    vislibMeterStyles(euiThemeContext),
+    vislibTooltipStyles(euiThemeContext),
+  ];
+
+  return <Global styles={styles} />;
+});

src/platform/plugins/private/vis_types/vislib/public/vis_wrapper.tsx

@@ -17,12 +17,13 @@ import { ChartsPluginSetup } from '@kbn/charts-plugin/public';
 
 import { KibanaExecutionContext } from '@kbn/core-execution-context-common';
 import { METRIC_TYPE } from '@kbn/analytics';
+import { css } from '@emotion/react';
 import { VislibRenderValue } from './vis_type_vislib_vis_fn';
 import { createVislibVisController, VislibVisController } from './vis_controller';
 import { VisTypeVislibCoreSetup } from './plugin';
 
-import './index.scss';
 import { getUsageCollectionStart } from './services';
+import { GlobalVislibWrapperStyles } from './vis_wrapper.styles';
 
 type VislibWrapperProps = VislibRenderValue & {
   core: VisTypeVislibCoreSetup;
@@ -44,6 +45,25 @@ const extractContainerType = (context?: KibanaExecutionContext): string | undefi
   }
 };
 
+const visWrapperStyles = {
+  base: css({
+    display: 'flex',
+    flex: '1 1 auto',
+    minHeight: 0,
+    minWidth: 0,
+  }),
+  wrapper: css({
+    position: 'relative',
+  }),
+  container: css({
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  }),
+};
+
 const VislibWrapper = ({ core, charts, visData, visConfig, handlers }: VislibWrapperProps) => {
   const chartDiv = useRef<HTMLDivElement>(null);
   const visController = useRef<VislibVisController | null>(null);
@@ -110,13 +130,24 @@ const VislibWrapper = ({ core, charts, visData, visConfig, handlers }: VislibWra
   }, [handlers.uiState, renderChart]);
 
   return (
-    <EuiResizeObserver onResize={onResize}>
-      {(resizeRef) => (
-        <div className="vislib__wrapper" ref={resizeRef}>
-          <div className="vislib__container" ref={chartDiv} />
-        </div>
-      )}
-    </EuiResizeObserver>
+    <>
+      <GlobalVislibWrapperStyles />
+      <EuiResizeObserver onResize={onResize}>
+        {(resizeRef) => (
+          <div
+            className="vislib__wrapper"
+            ref={resizeRef}
+            css={[visWrapperStyles.base, visWrapperStyles.wrapper]}
+          >
+            <div
+              className="vislib__container"
+              ref={chartDiv}
+              css={[visWrapperStyles.base, visWrapperStyles.container]}
+            />
+          </div>
+        )}
+      </EuiResizeObserver>
+    </>
   );
 };
 

src/platform/plugins/private/vis_types/vislib/public/vislib/components/legend/legend.test.tsx

@@ -11,7 +11,7 @@ import React from 'react';
 import { mount, ReactWrapper } from 'enzyme';
 
 import { I18nProvider } from '@kbn/i18n-react';
-import { EuiButtonGroup } from '@elastic/eui';
+import { EuiButtonGroup, EuiThemeProvider } from '@elastic/eui';
 
 import { VisLegend, VisLegendProps } from './legend';
 import { legendColors } from './models';
@@ -85,16 +85,18 @@ const uiState = {
 const getWrapper = async (props?: Partial<VisLegendProps>) => {
   const wrapper = mount(
     <I18nProvider>
-      <VisLegend
-        addLegend
-        position="top"
-        fireEvent={fireEvent}
-        hasCompatibleActions={hasCompatibleActions}
-        vislibVis={vislibVis}
-        visData={visData}
-        uiState={uiState}
-        {...props}
-      />
+      <EuiThemeProvider>
+        <VisLegend
+          addLegend
+          position="top"
+          fireEvent={fireEvent}
+          hasCompatibleActions={hasCompatibleActions}
+          vislibVis={vislibVis}
+          visData={visData}
+          uiState={uiState}
+          {...props}
+        />
+      </EuiThemeProvider>
     </I18nProvider>
   );