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

# Backport This will backport the following commits from `main` to `9.0`: - [[Controls] Fix control styles and invalid selection icon for Borealis (#213851)](https://github.com/elastic/kibana/pull/213851)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: Catherine Liu <catherine.liu@elastic.co>
2025-04-23 17:28:26 -04:00 · 2025-04-01 04:06:47 +02:00 · 2025-04-01 04:06:47 +02:00 · effc619a2a
commit effc619a2a
parent 2a61432655
9 changed files with 11 additions and 23 deletions
--- 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;
  }
--- 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;
--- 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(
--- 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()}
              />
--- 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"
            />
--- 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};
        }
      `,
--- 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()}
--- 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}
--- 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,10 +5,6 @@
  }
 }

-.timeSlider-prependButton {
-  background-color: transparent !important;
-}
-
 .timeSlider__anchor {
  width: 100%;
  height: 100%;
@ -16,8 +12,6 @@
  overflow: hidden;

  .euiText {
-    background-color: transparent !important;
-
    &:hover {
      text-decoration: underline;
    }