[9.0] [Lens/SCSS] Delete and migrate reference_lines.scss file (#20…

…9982) (#212894)

# Backport

This will backport the following commits from `main` to `9.0`:
- [[Lens/SCSS] Delete and migrate `reference_lines.scss` file
(#209982)](#209982)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Maria
Iriarte","email":"106958839+mariairiartef@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-03-03T11:57:36Z","message":"[Lens/SCSS]
Delete and migrate `reference_lines.scss` file (#209982)\n\n##
Summary\n\nPart of
https://github.com/elastic/kibana/issues/208908\n\nReplaces scss to
css-in-js.\n\n\n### Checklist\n\n- [x] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n\n---------\n\nCo-authored-by:
Marta Bondyra
<4283304+mbondyra@users.noreply.github.com>","sha":"3b3bbb1a856b1da89af72368895457d446721998","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["technical
debt","Team:Visualizations","release_note:skip","Feature:Lens","v9.0.0","backport:version","v8.18.0","v9.1.0","v8.19.0"],"title":"[Lens/SCSS]
Delete and migrate `reference_lines.scss`
file","number":209982,"url":"https://github.com/elastic/kibana/pull/209982","mergeCommit":{"message":"[Lens/SCSS]
Delete and migrate `reference_lines.scss` file (#209982)\n\n##
Summary\n\nPart of
https://github.com/elastic/kibana/issues/208908\n\nReplaces scss to
css-in-js.\n\n\n### Checklist\n\n- [x] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n\n---------\n\nCo-authored-by:
Marta Bondyra
<4283304+mbondyra@users.noreply.github.com>","sha":"3b3bbb1a856b1da89af72368895457d446721998"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/209982","number":209982,"mergeCommit":{"message":"[Lens/SCSS]
Delete and migrate `reference_lines.scss` file (#209982)\n\n##
Summary\n\nPart of
https://github.com/elastic/kibana/issues/208908\n\nReplaces scss to
css-in-js.\n\n\n### Checklist\n\n- [x] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n\n---------\n\nCo-authored-by:
Marta Bondyra
<4283304+mbondyra@users.noreply.github.com>","sha":"3b3bbb1a856b1da89af72368895457d446721998"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Maria Iriarte <106958839+mariairiartef@users.noreply.github.com>

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';

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';

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%',
+    },
+  },
+});

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" },