From 860eaa314b436a9e946532bc7052af5d37153c4a Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter.rafelsberger@elastic.co>
Date: Thu, 7 Nov 2024 10:37:20 +0100
Subject: [PATCH] [ML] Migrate ColorRangeLegend from SCSS to emotion. (#199156)

## Summary

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

Migrates SCSS to emotion for ColorRangeLegend.

<img
src="https://github.com/user-attachments/assets/3444fa49-2ef2-4706-b15e-c3e8415c6293"
/>

<img
src="https://github.com/user-attachments/assets/a79648a5-1230-41b6-b8f5-c1ff2dc9f996"
width="75%" />

### Checklist

- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [x] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)

(cherry picked from commit 12dc8c1bb84091d7c404b0e29654d56113fc5acb)
---
 .../plugins/ml/public/application/_index.scss |  1 -
 .../_color_range_legend.scss                  | 18 -------------
 .../components/color_range_legend/_index.scss |  1 -
 .../color_range_legend/color_range_legend.tsx | 27 +++++++++++++++++--
 4 files changed, 25 insertions(+), 22 deletions(-)
 delete mode 100644 x-pack/plugins/ml/public/application/components/color_range_legend/_color_range_legend.scss
 delete mode 100644 x-pack/plugins/ml/public/application/components/color_range_legend/_index.scss

diff --git a/x-pack/plugins/ml/public/application/_index.scss b/x-pack/plugins/ml/public/application/_index.scss
index 3025b8f7d921b..95fbbf4cb112a 100644
--- a/x-pack/plugins/ml/public/application/_index.scss
+++ b/x-pack/plugins/ml/public/application/_index.scss
@@ -11,7 +11,6 @@
   // Components
   @import 'components/annotations/annotation_description_list/index'; // SASSTODO: This file overwrites EUI directly
   @import 'components/anomalies_table/index'; // SASSTODO: This file overwrites EUI directly
-  @import 'components/color_range_legend/index';
   @import 'components/entity_cell/index';
   @import 'components/influencers_list/index';
   @import 'components/job_selector/index';
diff --git a/x-pack/plugins/ml/public/application/components/color_range_legend/_color_range_legend.scss b/x-pack/plugins/ml/public/application/components/color_range_legend/_color_range_legend.scss
deleted file mode 100644
index b164e605a2488..0000000000000
--- a/x-pack/plugins/ml/public/application/components/color_range_legend/_color_range_legend.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-/* Overrides for d3/svg default styles */
-.mlColorRangeLegend {
-  text {
-    @include fontSize($euiFontSizeXS - 2px);
-    fill: $euiColorDarkShade;
-  }
-
-  .axis path {
-    fill: none;
-    stroke: none;
-  }
-
-  .axis line {
-    fill: none;
-    stroke: $euiColorMediumShade;
-    shape-rendering: crispEdges;
-  }
-}
diff --git a/x-pack/plugins/ml/public/application/components/color_range_legend/_index.scss b/x-pack/plugins/ml/public/application/components/color_range_legend/_index.scss
deleted file mode 100644
index c7cd3faac0dcf..0000000000000
--- a/x-pack/plugins/ml/public/application/components/color_range_legend/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'color_range_legend';
diff --git a/x-pack/plugins/ml/public/application/components/color_range_legend/color_range_legend.tsx b/x-pack/plugins/ml/public/application/components/color_range_legend/color_range_legend.tsx
index f6a301f5eacce..9c121853cf6b4 100644
--- a/x-pack/plugins/ml/public/application/components/color_range_legend/color_range_legend.tsx
+++ b/x-pack/plugins/ml/public/application/components/color_range_legend/color_range_legend.tsx
@@ -7,12 +7,36 @@
 
 import type { FC } from 'react';
 import React, { useEffect, useRef } from 'react';
+import { css } from '@emotion/react';
 import d3 from 'd3';
 
 import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 
+import { euiThemeVars } from '@kbn/ui-theme';
+
 const COLOR_RANGE_RESOLUTION = 10;
 
+// Overrides for d3/svg default styles
+const cssOverride = css({
+  // Override default font size and color for axis
+  text: {
+    fontSize: `calc(${euiThemeVars.euiFontSizeXS} - 2px)`,
+    fill: euiThemeVars.euiColorDarkShade,
+  },
+  // Override default styles for axis lines
+  '.axis': {
+    path: {
+      fill: 'none',
+      stroke: 'none',
+    },
+    line: {
+      fill: 'none',
+      stroke: euiThemeVars.euiColorMediumShade,
+      shapeRendering: 'crispEdges',
+    },
+  },
+});
+
 interface ColorRangeLegendProps {
   colorRange: (d: number) => string;
   justifyTicks?: boolean;
@@ -65,7 +89,6 @@ export const ColorRangeLegend: FC<ColorRangeLegendProps> = ({
 
     const wrapper = d3
       .select(d3Container.current)
-      .classed('mlColorRangeLegend', true)
       .attr('width', wrapperWidth)
       .attr('height', wrapperHeight)
       .append('g')
@@ -144,7 +167,7 @@ export const ColorRangeLegend: FC<ColorRangeLegendProps> = ({
         </EuiText>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <svg ref={d3Container} />
+        <svg ref={d3Container} css={cssOverride} />
       </EuiFlexItem>
     </EuiFlexGroup>
   );