Revert "Change controls invalid warning token to EuiIcon"

This reverts commit 0e436bd.
elastic · Dec 18, 2024 · 32472f4 · 32472f4
1 parent 9ff35ef
commit 32472f4
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git a/...ls/public/controls/data_controls/options_list_control/components/options_list_control.tsx b/...ls/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/...ins/controls/public/controls/data_controls/range_slider/components/range_slider.styles.ts b/...ins/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/...s/controls/public/controls/data_controls/range_slider/components/range_slider_control.tsx b/...s/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>