From 7f70fba5d464c88fdc4368522ea2c1a298d881b0 Mon Sep 17 00:00:00 2001
From: Maria Iriarte <106958839+mariairiartef@users.noreply.github.com>
Date: Mon, 3 Mar 2025 12:57:36 +0100
Subject: [PATCH] [Lens/SCSS] Delete and migrate `reference_lines.scss` file
 (#209982)

## Summary

Part of https://github.com/elastic/kibana/issues/208908

Replaces scss to css-in-js.

### Checklist

- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>
(cherry picked from commit 3b3bbb1a856b1da89af72368895457d446721998)
---
 .../public/components/annotations.tsx         |  1 -
 .../reference_lines/reference_lines.scss      | 18 ------------
 .../reference_lines/reference_lines.tsx       |  2 --
 .../public/helpers/annotations.tsx            | 29 +++++++++++++++++--
 .../expression_xy/tsconfig.json               |  1 +
 5 files changed, 27 insertions(+), 24 deletions(-)
 delete mode 100644 src/platform/plugins/shared/chart_expressions/expression_xy/public/components/reference_lines/reference_lines.scss

diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.tsx b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.tsx
index 4e6893f82e840..ebdba377d0fcc 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.tsx
+++ b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/annotations.tsx
@@ -8,7 +8,6 @@
  */
 
 import './annotations.scss';
-import './reference_lines/reference_lines.scss';
 
 import React, { Fragment } from 'react';
 import { snakeCase } from 'lodash';
diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/reference_lines/reference_lines.scss b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/reference_lines/reference_lines.scss
deleted file mode 100644
index 2cd7fb9c26915..0000000000000
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/reference_lines/reference_lines.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.xyDecorationRotatedWrapper {
-  display: inline-block;
-  overflow: hidden;
-  line-height: 1.5;
-
-  .xyDecorationRotatedWrapper__label {
-    display: inline-block;
-    white-space: nowrap;
-    transform: translate(0, 100%) rotate(-90deg);
-    transform-origin: 0 0;
-
-    &::after {
-      content: '';
-      float: left;
-      margin-top: 100%;
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/reference_lines/reference_lines.tsx b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/reference_lines/reference_lines.tsx
index 37bcc3a07af54..d4a63356f4828 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/reference_lines/reference_lines.tsx
+++ b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/reference_lines/reference_lines.tsx
@@ -7,8 +7,6 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import './reference_lines.scss';
-
 import React from 'react';
 import { Position } from '@elastic/charts';
 import type { FieldFormat } from '@kbn/field-formats-plugin/common';
diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx b/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
index cbbeb30a8b87b..4456c533b904a 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
+++ b/src/platform/plugins/shared/chart_expressions/expression_xy/public/helpers/annotations.tsx
@@ -10,6 +10,7 @@
 import React from 'react';
 import { Position } from '@elastic/charts';
 import { EuiFlexGroup, EuiIcon, EuiIconProps, EuiText } from '@elastic/eui';
+import { css } from '@emotion/react';
 import type {
   IconPosition,
   ReferenceLineDecorationConfig,
@@ -123,9 +124,12 @@ export function MarkerBody({
     <div
       className="xyDecorationRotatedWrapper"
       data-test-subj="xyVisAnnotationText"
-      css={{
-        width: LINES_MARKER_SIZE,
-      }}
+      css={[
+        xyDecorationRotatedWrapperStyles,
+        {
+          maxWidth: LINES_MARKER_SIZE,
+        },
+      ]}
     >
       <div
         className="eui-textTruncate xyDecorationRotatedWrapper__label"
@@ -221,3 +225,22 @@ export function Marker({
   }
   return null;
 }
+
+const xyDecorationRotatedWrapperStyles = css({
+  display: 'inline-block',
+  overflow: 'hidden',
+  lineHeight: 1.5,
+
+  '& .xyDecorationRotatedWrapper__label': {
+    display: 'inline-block',
+    whiteSpace: 'nowrap',
+    transform: 'translate(0, 100%) rotate(-90deg)',
+    transformOrigin: '0 0',
+
+    '&::after': {
+      content: '""',
+      float: 'left',
+      marginTop: '100%',
+    },
+  },
+});
diff --git a/src/platform/plugins/shared/chart_expressions/expression_xy/tsconfig.json b/src/platform/plugins/shared/chart_expressions/expression_xy/tsconfig.json
index c24593e043af0..2c92889748b88 100644
--- a/src/platform/plugins/shared/chart_expressions/expression_xy/tsconfig.json
+++ b/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" },