[Controls] Migrate range slider to EuiDualRange and make styling consistent across all controls

src/plugins/controls/public/control_group/component/control_group_sortable_item.tsx

@@ -93,6 +93,7 @@ const SortableControlInner = forwardRef<
         data-test-subj={`control-frame`}
         data-render-complete="true"
         className={classNames('controlFrameWrapper', {
+          'controlFrameWrapper--grow': grow,
           'controlFrameWrapper-isDragging': isDragging,
           'controlFrameWrapper-isEditable': isEditable,
           'controlFrameWrapper--small': width === 'small',

src/plugins/controls/public/control_group/control_group.scss

@@ -74,23 +74,17 @@ $controlMinWidth: $euiSize * 14;
   }
 }
 
-.controlFrame__labelToolTip {
-  max-width: 40%;
-}
-
 .controlFrameWrapper {
   flex-basis: auto;
   position: relative;
 
-  &.controlFrameWrapper-isEditable {
-    .controlFrame__formControlLayoutLabel {
-      padding-left: 0;
-    }
+  .controlFrame__labelToolTip {
+    max-width: 40%;
   }
 
-  &:not(.controlFrameWrapper-isEditable) {
-    .controlFrameFormControlLayout--twoLine .euiFormControlLayout__childrenWrapper {
-      border-radius: $euiBorderRadius 0 0 $euiBorderRadius;
+  &-isEditable {
+    .controlFrame__formControlLayoutLabel {
+      padding-left: 0;
     }
   }
 
@@ -113,10 +107,9 @@ $controlMinWidth: $euiSize * 14;
     .controlFrame__control {
       height: 100%;
       transition: opacity .1s;
+      background-color: $euiFormBackgroundColor !important;
 
-      &.controlFrame--twoLine {
-        width: 100%;
-      }
+      @include euiFormControlSideBorderRadius($euiFormControlBorderRadius, $side: 'right', $internal: true);
     }
 
     .controlFrame--controlLoading {
@@ -130,6 +123,12 @@ $controlMinWidth: $euiSize * 14;
   &--small {
     width: $smallControl;
     min-width: $smallControl;
+
+    &:not(.controlFrameWrapper--grow) {
+      .controlFrame__labelToolTip {
+        max-width: 20%;
+      }
+    }
   }
 
   &--medium {

src/plugins/controls/public/options_list/components/options_list.scss

@@ -1,117 +1,101 @@
-.optionsList__anchorOverride {
-  display:block;
-}
-
-.optionsList__popoverOverride {
+.optionsList--filterGroup {
   width: 100%;
-  height: 100%;
-}
+  height: $euiSizeXXL;
+  background-color: transparent;
 
-.optionsList__actions {
-  padding: $euiSizeS;
-  padding-bottom: 0;
-  border-bottom: $euiBorderThin;
-  border-color: darken($euiColorLightestShade, 2%);
+  box-shadow: none;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-top-right-radius: $euiBorderRadius - 1px;
+  border-bottom-right-radius: $euiBorderRadius - 1px;
 
-  .optionsList__actionsRow {
-    margin: ($euiSizeS / 2) 0 !important;
+  .optionsList--filterBtn {
+    border-radius: 0 !important;
+    height: $euiButtonHeight;
 
-    .optionsList__actionBarDivider {
-      height: $euiSize;
-      border-right: $euiBorderThin;
+    &.optionsList--filterBtnPlaceholder {
+      color: $euiTextSubduedColor;
+      font-weight: $euiFontWeightRegular;
     }
-  }
-}
 
-.optionsList__popoverTitle {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
+    .optionsList__filterInvalid {
+      color: $euiTextSubduedColor;
+      text-decoration: line-through;
+      margin-left: $euiSizeS;
+      font-weight: $euiFontWeightRegular;
+    }
 
-.optionsList__filterInvalid {
-  color: $euiTextSubduedColor;
-  text-decoration: line-through;
-  margin-left: $euiSizeS;
-  font-weight: $euiFontWeightRegular;
-}
+    .optionsList__negateLabel {
+      font-weight: bold;
+      font-size: $euiSizeM;
+      color: $euiColorDanger;
+    }
 
-.optionsList__existsFilter {
-  font-style: italic;
+    .euiFilterButton__text-hasNotification {
+      flex-grow: 1;
+      justify-content: space-between;
+      width: 0;
+    }
+  }
 }
 
-.optionsList__loadMore {
-  font-style: italic;
+.optionsList--sortPopover {
+  width: $euiSizeXL * 7;
 }
 
-.optionsList__negateLabel {
-  font-weight: bold;
-  font-size: $euiSizeM;
-  color: $euiColorDanger;
+.optionsList__existsFilter {
+  font-style: italic;
 }
 
-.optionsList__actionBarFirstBadge {
-  margin-left: $euiSizeS;
+.optionsList__popoverOverride {
+  @include euiBottomShadowMedium;
+  filter: none; // overwrite the default popover shadow
+  transform: translateY(-$euiSizeS) translateX(0); // prevent "slide in" animation on open/close
 }
 
-.optionsList-control-ignored-selection-title {
-  padding-left: $euiSizeS;
-}
+.optionsList__popover {
+  .optionsList__actions {
+    padding: $euiSizeS;
+    padding-bottom: 0;
+    border-bottom: $euiBorderThin;
+    border-color: darken($euiColorLightestShade, 2%);
 
-.optionsList__selectionInvalid {
-  text-decoration: line-through;
-  color: $euiTextSubduedColor;
-}
+    .optionsList__sortButton {
+      box-shadow: inset 0 0 0 $euiBorderWidthThin $euiFormBorderColor;
+      background-color: $euiFormBackgroundColor;
+    }
 
-.optionsList--filterBtnWrapper {
-  height: 100%;
-}
+    .optionsList__actionsRow {
+      margin: ($euiSizeS / 2) 0 !important;
 
-.optionsList--filterBtn {
-  .euiFilterButton__text-hasNotification {
-    flex-grow: 1;
-    justify-content: space-between;
-    width: 0;
-  }
-  &.optionsList--filterBtnPlaceholder {
-    .euiFilterButton__textShift {
-      color: $euiTextSubduedColor;
+      .optionsList__actionBarDivider {
+        height: $euiSize;
+        border-right: $euiBorderThin;
+      }
     }
   }
-}
-
-.optionsList--filterGroupSingle {
-  box-shadow: none;
-  height: 100%;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  border-top-right-radius: $euiBorderRadius - 1px;
-  border-bottom-right-radius: $euiBorderRadius - 1px;
-}
-
-.optionsList--filterGroup {
-  width: 100%;
-}
 
-.optionsList--hiddenEditorForm {
-  margin-left: $euiSizeXXL + $euiSizeM;
-}
+  .optionsList-control-ignored-selection-title {
+    padding-left: $euiSizeS;
+  }
 
-.optionsList--sortPopover {
-  width: $euiSizeXL * 7;
-}
+  .optionsList__selectionInvalid {
+    text-decoration: line-through;
+    color: $euiTextSubduedColor;
+  }
 
-.optionslist--loadingMoreGroupLabel {
-  text-align: center;
-  padding: $euiSizeM;
-  font-style: italic;
-  height:  $euiSizeXXL !important;
-}
+  .optionslist--loadingMoreGroupLabel {
+    text-align: center;
+    padding: $euiSizeM;
+    font-style: italic;
+    height:  $euiSizeXXL !important;
+  }
 
-.optionslist--endOfOptionsGroupLabel {
-  text-align: center;
-  font-size: $euiSizeM;
-  height:  auto !important;
-  color: $euiTextSubduedColor;
-  padding: $euiSizeM;
-}
+  .optionslist--endOfOptionsGroupLabel {
+    text-align: center;
+    font-size: $euiSizeM;
+    height:  auto !important;
+    color: $euiTextSubduedColor;
+    padding: $euiSizeM;
+  }
+}

src/plugins/controls/public/options_list/components/options_list_control.tsx

@@ -157,15 +157,15 @@ export const OptionsListControl = ({
       <EuiPopover
         ownFocus
         button={button}
+        hasArrow={false}
         repositionOnScroll
         isOpen={isPopoverOpen}
         panelPaddingSize="none"
         anchorPosition="downCenter"
         initialFocus={'[data-test-subj=optionsList-control-search-input]'}
-        className="optionsList__popoverOverride"
         closePopover={() => optionsList.dispatch.setPopoverOpen(false)}
-        anchorClassName="optionsList__anchorOverride"
         aria-label={OptionsListStrings.popover.getAriaLabel(fieldName)}
+        panelClassName="optionsList__popoverOverride"
       >
         <OptionsListPopover
           width={dimensions.width}

src/plugins/controls/public/options_list/components/options_list_popover.tsx

@@ -6,16 +6,15 @@
  * Side Public License, v 1.
  */
 
-import React, { useState } from 'react';
 import { isEmpty } from 'lodash';
+import React, { useState } from 'react';
 
 import { OptionsListStrings } from './options_list_strings';
-import { OptionsListPopoverTitle } from './options_list_popover_title';
+import { useOptionsList } from '../embeddable/options_list_embeddable';
 import { OptionsListPopoverFooter } from './options_list_popover_footer';
 import { OptionsListPopoverActionBar } from './options_list_popover_action_bar';
 import { OptionsListPopoverSuggestions } from './options_list_popover_suggestions';
 import { OptionsListPopoverInvalidSelections } from './options_list_popover_invalid_selections';
-import { useOptionsList } from '../embeddable/options_list_embeddable';
 
 export interface OptionsListPopoverProps {
   width: number;
@@ -47,12 +46,11 @@ export const OptionsListPopover = ({
     <>
       <div
         id={`control-popover-${id}`}
+        className={'optionsList__popover'}
         style={{ width, minWidth: 300 }}
         data-test-subj={`optionsList-control-popover`}
         aria-label={OptionsListStrings.popover.getAriaLabel(fieldName)}
       >
-        <OptionsListPopoverTitle />
-
         {field?.type !== 'boolean' && !hideActionBar && (
           <OptionsListPopoverActionBar
             showOnlySelected={showOnlySelected}

src/plugins/controls/public/options_list/components/options_list_popover_action_bar.tsx

@@ -41,18 +41,17 @@ export const OptionsListPopoverActionBar = ({
   const searchString = optionsList.select((state) => state.componentState.searchString);
   const invalidSelections = optionsList.select((state) => state.componentState.invalidSelections);
 
+  const hideSort = optionsList.select((state) => state.explicitInput.hideSort);
   const searchTechnique = optionsList.select((state) => state.explicitInput.searchTechnique);
 
   const allowExpensiveQueries = optionsList.select(
     (state) => state.componentState.allowExpensiveQueries
   );
 
-  const hideSort = optionsList.select((state) => state.explicitInput.hideSort);
-
   return (
     <div className="optionsList__actions">
       <EuiFormRow fullWidth>
-        <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
+        <EuiFlexGroup className="optionsList__searchSortRow" gutterSize="xs" responsive={false}>
           <EuiFlexItem grow={true}>
             <EuiFieldSearch
               isInvalid={!searchString.valid}
@@ -68,7 +67,7 @@ export const OptionsListPopoverActionBar = ({
             />
           </EuiFlexItem>
           {!hideSort && (
-            <EuiFlexItem grow={false}>
+            <EuiFlexItem className="optionsList__sortButtonWrapper" grow={false}>
               <OptionsListPopoverSortingButton showOnlySelected={showOnlySelected} />
             </EuiFlexItem>
           )}