From 32472f4f3590f9a8fd31d9ebb9e4fcd14f9642b3 Mon Sep 17 00:00:00 2001
From: Catherine Liu <catherine.liu@elastic.co>
Date: Wed, 18 Dec 2024 17:23:19 -0500
Subject: [PATCH] Revert "Change controls invalid warning token to EuiIcon"

This reverts commit 0e436bda388b095740962257fb7b7c7df99799fc.
---
 .../components/options_list_control.tsx               | 11 +++++++----
 .../range_slider/components/range_slider.styles.ts    |  6 ++++++
 .../range_slider/components/range_slider_control.tsx  | 10 ++++++----
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx b/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx
index 38d3a54412885..ebb5458478531 100644
--- a/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx
+++ b/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx
@@ -15,8 +15,8 @@ import {
   EuiFilterGroup,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiIcon,
   EuiInputPopover,
+  EuiToken,
   EuiToolTip,
   htmlIdGenerator,
 } from '@elastic/eui';
@@ -121,15 +121,18 @@ export const OptionsListControl = ({
                 )}
                 delay="long"
               >
-                <EuiIcon
+                <EuiToken
                   tabIndex={0}
-                  type="warningFilled"
+                  iconType="alert"
                   size="s"
-                  color="warning"
+                  color="euiColorVis5"
+                  shape="square"
+                  fill="dark"
                   title={OptionsListStrings.control.getInvalidSelectionWarningLabel(
                     invalidSelections.size
                   )}
                   data-test-subj={`optionsList__invalidSelectionsToken-${api.uuid}`}
+                  css={{ verticalAlign: 'text-bottom' }} // Align with the notification badge
                 />
               </EuiToolTip>
             </EuiFlexItem>
diff --git a/src/plugins/controls/public/controls/data_controls/range_slider/components/range_slider.styles.ts b/src/plugins/controls/public/controls/data_controls/range_slider/components/range_slider.styles.ts
index 848449509b1b8..384b79d103f9b 100644
--- a/src/plugins/controls/public/controls/data_controls/range_slider/components/range_slider.styles.ts
+++ b/src/plugins/controls/public/controls/data_controls/range_slider/components/range_slider.styles.ts
@@ -30,6 +30,7 @@ export const rangeSliderControlStyles = (euiThemeContext: UseEuiTheme) => {
       }
 
       .euiFormControlLayout {
+        background-color: transparent;
         border: none;
         border-radius: 0;
       }
@@ -50,6 +51,11 @@ export const rangeSliderControlStyles = (euiThemeContext: UseEuiTheme) => {
       &:has(input:invalid) {
         --euiFormControlStateColor: ${euiTheme.colors.danger};
       }
+
+      /* Remove the append background so the caution icon looks more natural */
+      .euiFormControlLayout__append {
+        background-color: transparent;
+      }
     `,
 
     // Inputs
diff --git a/src/plugins/controls/public/controls/data_controls/range_slider/components/range_slider_control.tsx b/src/plugins/controls/public/controls/data_controls/range_slider/components/range_slider_control.tsx
index d371c18b4c360..a05957d083086 100644
--- a/src/plugins/controls/public/controls/data_controls/range_slider/components/range_slider_control.tsx
+++ b/src/plugins/controls/public/controls/data_controls/range_slider/components/range_slider_control.tsx
@@ -13,9 +13,9 @@ import {
   EuiRangeTick,
   EuiDualRange,
   EuiDualRangeProps,
+  EuiToken,
   EuiToolTip,
   useEuiTheme,
-  EuiIcon,
 } from '@elastic/eui';
 import { RangeValue } from '../types';
 import { MIN_POPOVER_WIDTH } from '../../../constants';
@@ -212,11 +212,13 @@ export const RangeSliderControl: FC<Props> = ({
                 content={RangeSliderStrings.control.getInvalidSelectionWarningLabel()}
                 delay="long"
               >
-                <EuiIcon
+                <EuiToken
                   tabIndex={0}
-                  type="warningFilled"
+                  iconType="alert"
                   size="s"
-                  color="warning"
+                  color="euiColorVis5"
+                  shape="square"
+                  fill="dark"
                   title={RangeSliderStrings.control.getInvalidSelectionWarningLabel()}
                 />
               </EuiToolTip>