Merge branch 'main' into prebuiltrules_ffenable

src/platform/plugins/shared/expressions/public/_expression_renderer.scss

@@ -1,20 +0,0 @@
-.expExpressionRenderer {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
-
-.expExpressionRenderer__expression {
-  width: 100%;
-  height: 100%;
-}
-
-.expExpressionRenderer-isEmpty,
-.expExpressionRenderer-hasError {
-  .expExpressionRenderer__expression {
-    display: none;
-  }
-}

src/platform/plugins/shared/expressions/public/index.scss

@@ -1,10 +0,0 @@
-/* Expressions plugin styles */
-
-// Prefix all styles with "exp" to avoid conflicts.
-// Examples
-//  expChart
-//  expChart__legend
-//  expChart__legend--small
-//  expChart__legend-isLoading
-
-@import './expression_renderer';

src/platform/plugins/shared/expressions/public/index.ts

@@ -6,9 +6,6 @@
  * 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 './index.scss';
-
 import { PluginInitializerContext } from '@kbn/core/public';
 import { ExpressionsPublicPlugin } from './plugin';
 

src/platform/plugins/shared/expressions/public/react_expression_renderer/react_expression_renderer.tsx

@@ -8,9 +8,9 @@
  */
 
 import React, { useRef } from 'react';
-import classNames from 'classnames';
-import { PanelLoader } from '@kbn/panel-loader';
 import { EuiProgress, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { PanelLoader } from '@kbn/panel-loader';
 import { ExpressionRenderError } from '../types';
 import type { ExpressionRendererParams } from './use_expression_renderer';
 import { useExpressionRenderer } from './use_expression_renderer';
@@ -46,25 +46,32 @@ export function ReactExpressionRenderer({
     hasCustomErrorRenderer: !!renderError,
   });
 
-  const classes = classNames('expExpressionRenderer', className, {
-    'expExpressionRenderer-isEmpty': isEmpty,
-    'expExpressionRenderer-hasError': !!error,
-  });
-
-  const expressionStyles: React.CSSProperties = {};
-
-  if (padding) {
-    expressionStyles.padding = euiTheme.size[padding];
-  }
-
   return (
-    <div {...dataAttrs} className={classes}>
+    <div {...dataAttrs} className={className} css={styles}>
       {isEmpty && <PanelLoader />}
       {isLoading && (
         <EuiProgress size="xs" color="accent" position="absolute" css={{ zIndex: 1 }} />
       )}
       {!isLoading && error && renderError?.(error.message, error)}
-      <div className="expExpressionRenderer__expression" style={expressionStyles} ref={nodeRef} />
+      <div
+        className="expExpressionRenderer__expression"
+        css={css({
+          width: '100%',
+          height: '100%',
+          ...(padding ? { padding: euiTheme.size[padding] } : {}),
+          ...(isEmpty || !!error ? { display: 'none' } : {}),
+        })}
+        ref={nodeRef}
+      />
     </div>
   );
 }
+
+const styles = css({
+  position: 'relative',
+  display: 'flex',
+  width: '100%',
+  height: '100%',
+  alignItems: 'center',
+  justifyContent: 'center',
+});