[8.18] [Controls] Fix control styles and invalid selection icon for Borealis (#213851) (#216567)

kibanamachine · cqliu1 · web-flow · commit 4d99120a390c · 2025-04-01T02:50:16.000+01:00
# Backport This will backport the following commits from `main` to `8.18`: - [[Controls] Fix control styles and invalid selection icon for Borealis (#213851)](#213851)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: Catherine Liu <catherine.liu@elastic.co>
diff --git a/src/platform/plugins/shared/controls/public/control_group/components/control_panel.scss b/src/platform/plugins/shared/controls/public/control_group/components/control_panel.scss
@@ -8,7 +8,6 @@ $controlMinWidth: $euiSize * 14;
   max-inline-size: 100% !important;
   height: $euiButtonHeightSmall;
   box-shadow: none !important;
-  background-color: $euiFormBackgroundColor !important;
   border-radius: 0 $euiBorderRadius $euiBorderRadius 0 !important;
 
   &--roundedBorders {
@@ -89,7 +88,6 @@ $controlMinWidth: $euiSize * 14;
     .controlFrame__formControlLayout:after {
       content: '';
       position: absolute;
-      background-color: transparentize($euiColorPrimary, .5);
       border-radius: $euiBorderRadius;
       top: 0;
       bottom: 0;
@@ -217,7 +215,6 @@ $controlMinWidth: $euiSize * 14;
     border-radius: $euiBorderRadius;
     font-weight: $euiFontWeightSemiBold;
     border: $euiBorderWidthThin solid $euiFormBorderColor;
-    background-color: $euiFormInputGroupLabelBackground;
     min-width: $controlMinWidth;
     @include euiFontSizeXS;
   }
diff --git a/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list.scss b/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list.scss
@@ -69,10 +69,6 @@
     padding-left: $euiSizeM;
   }
 
-  .optionsList__selectionInvalid {
-    color: $euiColorWarningText;
-  }
-
   .optionslist--loadingMoreGroupLabel {
     text-align: center;
     padding: $euiSizeM;
diff --git a/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx b/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx
@@ -125,7 +125,7 @@ export const OptionsListControl = ({
                   tabIndex={0}
                   iconType="alert"
                   size="s"
-                  color="euiColorVis5"
+                  color="euiColorVis9"
                   shape="square"
                   fill="dark"
                   title={OptionsListStrings.control.getInvalidSelectionWarningLabel(
diff --git a/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_popover_footer.tsx b/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_popover_footer.tsx
@@ -18,6 +18,7 @@ import {
   EuiProgress,
   useEuiBackgroundColor,
   useEuiPaddingSize,
+  useEuiTheme,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { useBatchedPublishingSubjects } from '@kbn/presentation-publishing';
@@ -39,6 +40,7 @@ const aggregationToggleButtons = [
 ];
 
 export const OptionsListPopoverFooter = () => {
+  const { euiTheme } = useEuiTheme();
   const { api, stateManager } = useOptionsListContext();
 
   const [exclude, loading, allowExpensiveQueries] = useBatchedPublishingSubjects(
@@ -88,7 +90,7 @@ export const OptionsListPopoverFooter = () => {
             <EuiFlexItem data-test-subj="optionsList-allow-expensive-queries-warning" grow={false}>
               <EuiIconTip
                 type="warning"
-                color="warning"
+                color={euiTheme.colors.textWarning}
                 content={OptionsListStrings.popover.getAllowExpensiveQueriesWarning()}
                 aria-label={OptionsListStrings.popover.getAllowExpensiveQueriesWarning()}
               />
diff --git a/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_popover_invalid_selections.tsx b/src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_popover_invalid_selections.tsx
@@ -71,7 +71,6 @@ export const OptionsListPopoverInvalidSelections = () => {
           <EuiFlexItem grow={false}>
             <EuiIcon
               type="warning"
-              color="warning"
               title={OptionsListStrings.popover.getInvalidSelectionScreenReaderText()}
               size="s"
             />
diff --git a/src/platform/plugins/shared/controls/public/controls/data_controls/range_slider/components/range_slider.styles.ts b/src/platform/plugins/shared/controls/public/controls/data_controls/range_slider/components/range_slider.styles.ts
@@ -30,7 +30,6 @@ export const rangeSliderControlStyles = (euiThemeContext: UseEuiTheme) => {
       }
 
       .euiFormControlLayout {
-        background-color: transparent;
         border: none;
         border-radius: 0;
       }
@@ -45,11 +44,11 @@ export const rangeSliderControlStyles = (euiThemeContext: UseEuiTheme) => {
 
       /* Stretch the underline across the entire __childrenWrapper and set it to a custom warning color */
       background-size: 100% 100%;
-      --euiFormControlStateColor: ${euiTheme.colors.warning};
+      --euiFormControlStateColor: ${euiTheme.colors.textWarning};
 
       /* But restore the danger color for truly invalid inputs (e.g. min larger than max) */
       &:has(input:invalid) {
-        --euiFormControlStateColor: ${euiTheme.colors.danger};
+        --euiFormControlStateColor: ${euiTheme.colors.textDanger};
       }
 
       /* Remove the append background so the caution icon looks more natural */
@@ -62,7 +61,6 @@ export const rangeSliderControlStyles = (euiThemeContext: UseEuiTheme) => {
     fieldNumbers: {
       rangeSliderFieldNumber: css`
         font-weight: ${euiTheme.font.weight.medium};
-        background-color: transparent;
 
         &:placeholder-shown,
         &::placeholder {
@@ -72,9 +70,11 @@ export const rangeSliderControlStyles = (euiThemeContext: UseEuiTheme) => {
       `,
       invalid: css`
         &:not(:invalid) {
+          --euiFormControlStateColor: ${euiTheme.colors.textWarning};
           color: ${euiTheme.colors.textWarning};
         }
         &:invalid {
+          --euiFormControlStateColor: ${euiTheme.colors.textDanger};
           color: ${euiTheme.colors.textDanger};
         }
       `,
diff --git a/src/platform/plugins/shared/controls/public/controls/data_controls/range_slider/components/range_slider_control.tsx b/src/platform/plugins/shared/controls/public/controls/data_controls/range_slider/components/range_slider_control.tsx
@@ -216,7 +216,7 @@ export const RangeSliderControl: FC<Props> = ({
                   tabIndex={0}
                   iconType="alert"
                   size="s"
-                  color="euiColorVis5"
+                  color="euiColorVis9"
                   shape="square"
                   fill="dark"
                   title={RangeSliderStrings.control.getInvalidSelectionWarningLabel()}
diff --git a/src/platform/plugins/shared/controls/public/controls/data_controls/range_slider/get_range_slider_control_factory.tsx b/src/platform/plugins/shared/controls/public/controls/data_controls/range_slider/get_range_slider_control_factory.tsx
@@ -218,7 +218,7 @@ export const getRangesliderControlFactory = (): DataControlFactory<
       return {
         api,
         Component: ({ className: controlPanelClassName }) => {
-          const [dataLoading, fieldFormatter, max, min, selectionHasNotResults, step, value] =
+          const [dataLoading, fieldFormatter, max, min, selectionHasNoResults, step, value] =
             useBatchedPublishingSubjects(
               dataLoading$,
               dataControl.api.fieldFormatter,
@@ -243,7 +243,7 @@ export const getRangesliderControlFactory = (): DataControlFactory<
             <RangeSliderControl
               controlPanelClassName={controlPanelClassName}
               fieldFormatter={fieldFormatter}
-              isInvalid={selectionHasNotResults}
+              isInvalid={Boolean(value) && selectionHasNoResults}
               isLoading={typeof dataLoading === 'boolean' ? dataLoading : false}
               max={max}
               min={min}
diff --git a/src/platform/plugins/shared/controls/public/controls/timeslider_control/components/index.scss b/src/platform/plugins/shared/controls/public/controls/timeslider_control/components/index.scss
@@ -5,19 +5,13 @@
   }
 }
 
-.timeSlider-prependButton {
-  background-color: transparent !important;
-}
-
 .timeSlider__anchor {
   width: 100%;
   height: 100%;
   box-shadow: none;
   overflow: hidden;
 
   .euiText {
-    background-color: transparent !important;
-
     &:hover {
       text-decoration: underline;
     }

Original file line number	Diff line number	Diff line change
`@@ -5,19 +5,13 @@`
`5`	`5`	`}`
`6`	`6`	`}`
`7`	`7`
`8`		`-.timeSlider-prependButton {`
`9`		`- background-color: transparent !important;`
`10`		`-}`
`11`		`-`
`12`	`8`	`.timeSlider__anchor {`
`13`	`9`	`width: 100%;`
`14`	`10`	`height: 100%;`
`15`	`11`	`box-shadow: none;`
`16`	`12`	`overflow: hidden;`
`17`	`13`
`18`	`14`	`.euiText {`
`19`		`- background-color: transparent !important;`
`20`		`-`
`21`	`15`	`&:hover {`
`22`	`16`	`text-decoration: underline;`
`23`	`17`	`}`