[Lens/SCSS] Delete and migrate annotations.scss file

src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.tsx

@@ -7,7 +7,6 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import './annotations.scss';
 import './reference_lines/reference_lines.scss';
 
 import React, { Fragment } from 'react';
@@ -28,6 +27,7 @@ import {
   EuiPanel,
   EuiSpacer,
   EuiTitle,
+  UseEuiTheme,
 } from '@elastic/eui';
 import type {
   EventAnnotationOutput,
@@ -39,6 +39,7 @@ import { defaultAnnotationColor, defaultAnnotationRangeColor } from '@kbn/event-
 import { Datatable, DatatableColumn, DatatableRow } from '@kbn/expressions-plugin/common';
 import { PointEventAnnotationRow } from '@kbn/event-annotation-plugin/common/manual_event_annotation/types';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { css } from '@emotion/react';
 import type { MergedAnnotation } from '../../common';
 import { AnnotationIcon, hasIcon, Marker, MarkerBody } from '../helpers';
 import { mapVerticalToHorizontalPlacement, LINES_MARKER_SIZE } from '../helpers';
@@ -67,11 +68,11 @@ const TooltipAnnotationDetails = ({
   }>;
 }) => {
   return extraFields.length > 0 ? (
-    <div className="xyAnnotationTooltip__extraFields">
+    <div css={styles.xyAnnotationTooltipExtraFields}>
       {extraFields.map((field) => (
         <EuiFlexGroup gutterSize="s">
-          <EuiFlexItem className="xyAnnotationTooltip__extraFieldsKey">{field.name}:</EuiFlexItem>
-          <EuiFlexItem className="xyAnnotationTooltip__extraFieldsValue">
+          <EuiFlexItem css={styles.xyAnnotationTooltipExtraFieldsKey}>{field.name}:</EuiFlexItem>
+          <EuiFlexItem css={styles.xyAnnotationTooltipExtraFieldsValue}>
             {field.formatter ? field.formatter.convert(row[field.key]) : row[field.key]}
           </EuiFlexItem>
         </EuiFlexGroup>
@@ -120,9 +121,9 @@ const createCustomTooltip =
         hasBorder={false}
         paddingSize="none"
         borderRadius="none"
-        className="xyAnnotationTooltip"
+        css={styles.xyAnnotationTooltip}
       >
-        <div className="xyAnnotationTooltip__rows">
+        <div css={styles.xyAnnotationTooltipRows}>
           {rows.slice(0, DISPLAYED_COUNT_OF_ROWS).map((row, index) => {
             const extraFields = getExtraFields(row, formatFactory, columns);
 
@@ -135,7 +136,7 @@ const createCustomTooltip =
                     <EuiSpacer size="xs" />
                   </>
                 )}
-                <div className="xyAnnotationTooltip__row">
+                <div css={styles.xyAnnotationTooltipRow}>
                   <EuiFlexGroup gutterSize="xs">
                     <EuiFlexItem grow={false}>
                       <AnnotationIcon
@@ -161,11 +162,11 @@ const createCustomTooltip =
           })}
         </div>
         {skippedCount ? (
-          <div className="xyAnnotationTooltip__skippedCount">
+          <div css={styles.xyAnnotationTooltipSkippedCount}>
             <EuiSpacer size="xs" />
             <EuiHorizontalRule margin="none" />
             <EuiSpacer size="xs" />
-            <div className="xyAnnotationTooltip__row ">
+            <div css={styles.xyAnnotationTooltipRow}>
               <FormattedMessage
                 id="expressionXY.annotations.skippedCount"
                 defaultMessage="+{value} more…"
@@ -362,9 +363,9 @@ export const Annotations = ({
                 hasBorder={false}
                 paddingSize="none"
                 borderRadius="none"
-                className="xyAnnotationTooltip"
+                css={styles.xyAnnotationTooltip}
               >
-                <div className="xyAnnotationTooltip__row">
+                <div css={styles.xyAnnotationTooltipRow}>
                   <EuiFlexGroup gutterSize="xs">
                     <EuiFlexItem grow={false}>
                       <EuiIcon type="stopFilled" color={color} />
@@ -399,3 +400,39 @@ export const Annotations = ({
     </>
   );
 };
+
+const styles = {
+  xyAnnotationTooltip: css({
+    borderRadius: '0 !important',
+  }),
+  xyAnnotationTooltipRows: css({
+    // maxHeight: '60vh',
+    overflowY: 'hidden',
+  }),
+  xyAnnotationTooltipRow: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      fontWeight: euiTheme.font.weight.regular,
+      padding: `${euiTheme.size.s} ${euiTheme.size.m} ${euiTheme.size.s} ${euiTheme.size.s}`,
+      borderRadius: '0 !important',
+    }),
+  xyAnnotationTooltipExtraFields: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      color: euiTheme.colors.darkShade,
+      marginTop: euiTheme.size.s,
+    }),
+  xyAnnotationTooltipExtraFieldsKey: css({
+    overflowWrap: 'anywhere',
+    hyphens: 'auto',
+  }),
+  xyAnnotationTooltipExtraFieldsValue: css({
+    textAlign: 'right',
+    overflowWrap: 'anywhere',
+    hyphens: 'auto',
+  }),
+  xyAnnotationTooltipSkippedCount: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      position: 'relative',
+      textAlign: 'right',
+      fontWeight: euiTheme.font.weight.regular,
+    }),
+};

src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx

@@ -9,7 +9,9 @@
 
 import React from 'react';
 import { Position } from '@elastic/charts';
-import { EuiFlexGroup, EuiIcon, EuiIconProps, EuiText } from '@elastic/eui';
+import { EuiFlexGroup, EuiIcon, EuiIconProps, EuiText, useEuiFontSize } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { UseEuiTheme } from '@elastic/eui';
 import type {
   IconPosition,
   ReferenceLineDecorationConfig,
@@ -143,12 +145,12 @@ function NumberIcon({ number }: { number: number }) {
   return (
     <EuiFlexGroup
       justifyContent="spaceAround"
-      className="xyAnnotationNumberIcon"
+      css={styles.xyAnnotationNumberIcon}
       data-test-subj="xyVisGroupedAnnotationIcon"
       gutterSize="none"
       alignItems="center"
     >
-      <EuiText color="ghost" className="xyAnnotationNumberIcon__text">
+      <EuiText color="ghost" css={[useEuiFontSize('xxxs'), styles.xyAnnotationNumberIconText]}>
         {number < 10 ? number : `9+`}
       </EuiText>
     </EuiFlexGroup>
@@ -176,12 +178,14 @@ export const AnnotationIcon = ({
   if (!iconConfig) {
     return null;
   }
+
   return (
     <EuiIcon
       {...rest}
       data-test-subj="xyVisAnnotationIcon"
       type={iconConfig.icon || type}
       className={iconConfig.shouldRotate ? rotateClassName : undefined}
+      css={styles.xyAnnotationIconRotate90}
     />
   );
 };
@@ -221,3 +225,24 @@ export function Marker({
   }
   return null;
 }
+
+const styles = {
+  xyAnnotationNumberIcon: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      borderRadius: euiTheme.size.base,
+      minWidth: euiTheme.size.base,
+      height: euiTheme.size.base,
+      backgroundColor: 'currentColor',
+    }),
+  xyAnnotationNumberIconText: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      fontWeight: euiTheme.font.weight.medium,
+      letterSpacing: '-.5px',
+    }),
+  xyAnnotationIconRotate90: css({
+    '&.xyAnnotationIcon_rotate90': {
+      transform: 'rotate(90deg) !important',
+      transformOrigin: 'center',
+    },
+  }),
+};

src/platform/plugins/shared/chart_expressions/expression_xy/tsconfig.json

@@ -8,6 +8,7 @@
     "common/**/*",
     "public/**/*",
     "server/**/*",
+    "../../../../../../typings/emotion.d.ts"
   ],
   "kbn_references": [
     { "path": "../tsconfig.json" },