From f32c334ad24f105b973e2572c9214cf0d125b413 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Fri, 29 Oct 2021 13:52:39 -0700
Subject: [PATCH] [Controls] Post integration design cleanup (#116511)

---
 .../component/control_group_component.tsx     | 10 ++++---
 .../component/control_group_sortable_item.tsx |  8 ++++--
 .../controls/control_group/control_group.scss | 26 ++++++-------------
 .../control_group/editor/control_editor.tsx   | 25 +++++++++---------
 .../options_list/options_list.scss            | 15 ++++++-----
 .../options_list/options_list_component.tsx   |  4 +--
 .../options_list/options_list_editor.tsx      |  2 +-
 .../options_list_popover_component.tsx        | 10 +++----
 .../options_list/options_list_strings.ts      |  4 +++
 .../data_view_picker/data_view_picker.tsx     |  2 +-
 .../components/field_picker/field_picker.scss |  4 +--
 .../components/field_picker/field_search.tsx  | 17 ++++++++----
 12 files changed, 68 insertions(+), 59 deletions(-)

diff --git a/src/plugins/presentation_util/public/components/controls/control_group/component/control_group_component.tsx b/src/plugins/presentation_util/public/components/controls/control_group/component/control_group_component.tsx
index 16ae4c185866..22b97b6f6b0d 100644
--- a/src/plugins/presentation_util/public/components/controls/control_group/component/control_group_component.tsx
+++ b/src/plugins/presentation_util/public/components/controls/control_group/component/control_group_component.tsx
@@ -108,11 +108,15 @@ export const ControlGroup = () => {
     return null;
   }
 
+  let panelBg: 'subdued' | 'primary' | 'success' = 'subdued';
+  if (emptyState) panelBg = 'primary';
+  if (draggingId) panelBg = 'success';
+
   return (
     <EuiPanel
       borderRadius="m"
-      color={emptyState ? 'subdued' : undefined}
-      paddingSize={emptyState ? 'none' : 's'}
+      color={panelBg}
+      paddingSize={emptyState ? 's' : 'none'}
       className={classNames('controlsWrapper', {
         'controlsWrapper--empty': emptyState,
         'controlsWrapper--twoLine': controlStyle === 'twoLine',
@@ -141,7 +145,7 @@ export const ControlGroup = () => {
                 <EuiFlexGroup
                   className={classNames('controlGroup', { 'controlGroup-isDragging': draggingId })}
                   alignItems="center"
-                  gutterSize={'m'}
+                  gutterSize="s"
                   wrap={true}
                 >
                   {idsInOrder.map(
diff --git a/src/plugins/presentation_util/public/components/controls/control_group/component/control_group_sortable_item.tsx b/src/plugins/presentation_util/public/components/controls/control_group/component/control_group_sortable_item.tsx
index 3ec553e5aa7d..0ef9c4b7f115 100644
--- a/src/plugins/presentation_util/public/components/controls/control_group/component/control_group_sortable_item.tsx
+++ b/src/plugins/presentation_util/public/components/controls/control_group/component/control_group_sortable_item.tsx
@@ -116,11 +116,15 @@ export const ControlClone = ({ draggingId }: { draggingId: string }) => {
       })}
     >
       {controlStyle === 'twoLine' ? <EuiFormLabel>{title}</EuiFormLabel> : undefined}
-      <EuiFlexGroup gutterSize="none" className={'controlFrame__draggable'}>
+      <EuiFlexGroup responsive={false} gutterSize="none" className={'controlFrame__draggable'}>
         <EuiFlexItem grow={false}>
           <EuiIcon type="grabHorizontal" className="controlFrame__dragHandle" />
         </EuiFlexItem>
-        {controlStyle === 'oneLine' ? <EuiFlexItem>{title}</EuiFlexItem> : undefined}
+        {controlStyle === 'oneLine' ? (
+          <EuiFlexItem>
+            <label className="controlFrameCloneWrapper__label">{title}</label>
+          </EuiFlexItem>
+        ) : undefined}
       </EuiFlexGroup>
     </EuiFlexItem>
   );
diff --git a/src/plugins/presentation_util/public/components/controls/control_group/control_group.scss b/src/plugins/presentation_util/public/components/controls/control_group/control_group.scss
index c69674df2961..e595bc245e31 100644
--- a/src/plugins/presentation_util/public/components/controls/control_group/control_group.scss
+++ b/src/plugins/presentation_util/public/components/controls/control_group/control_group.scss
@@ -4,7 +4,6 @@ $largeControl: $euiSize * 50;
 $controlMinWidth: $euiSize * 14;
 
 .controlGroup {
-  overflow-x: clip; // sometimes when using auto width, removing a control can cause a horizontal scrollbar to appear.
   min-height: $euiSize * 4;
 }
 
@@ -40,10 +39,6 @@ $controlMinWidth: $euiSize * 14;
 .controlFrameCloneWrapper {
   width: max-content;
 
-  .euiFormLabel {
-    padding-bottom: $euiSizeXS;
-  }
-
   &--small {
     width: $smallControl;
   }
@@ -60,7 +55,7 @@ $controlMinWidth: $euiSize * 14;
     margin-top: -$euiSize * 1.25;
   }
 
-  .euiFormLabel, div {
+  &__label {
     cursor: grabbing !important; // prevents cursor flickering while dragging the clone
   }
 
@@ -69,20 +64,14 @@ $controlMinWidth: $euiSize * 14;
     height: $euiButtonHeight;
     align-items: center;
     border-radius: $euiBorderRadius;
-    @include euiFontSizeS;
     font-weight: $euiFontWeightSemiBold;
     @include euiFormControlDefaultShadow;
     background-color: $euiFormInputGroupLabelBackground;
     min-width: $controlMinWidth;
+    @include euiFontSizeXS;
   }
 
   .controlFrame__formControlLayout, .controlFrame__draggable {
-    &-clone {
-      box-shadow: 0 0 0 1px $euiShadowColor,
-        0 1px 6px 0 $euiShadowColor;
-      cursor: grabbing !important;
-    }
-
     .controlFrame__dragHandle {
       cursor: grabbing;
     }
@@ -92,7 +81,6 @@ $controlMinWidth: $euiSize * 14;
 .controlFrameWrapper {
   flex-basis: auto;
   position: relative;
-  display: block;
 
   .controlFrame__formControlLayout {
     width: 100%;
@@ -102,6 +90,7 @@ $controlMinWidth: $euiSize * 14;
     &Label {
       @include euiTextTruncate;
       max-width: 50%;
+      border-radius: $euiBorderRadius;
     }
 
     &:not(.controlFrame__formControlLayout-clone) {
@@ -148,19 +137,20 @@ $controlMinWidth: $euiSize * 14;
       border-radius: $euiBorderRadius;
       top: 0;
       bottom: 0;
-      width: 2px;
+      width: $euiSizeXS * .5;
     }
   }
 
   &--insertBefore {
     .controlFrame__formControlLayout:after {
-      left: -$euiSizeS;
+      left: -$euiSizeXS - 1;
+
     }
   }
 
   &--insertAfter {
     .controlFrame__formControlLayout:after {
-      right: -$euiSizeS;
+      right: -$euiSizeXS - 1;
     }
   }
 
@@ -202,7 +192,7 @@ $controlMinWidth: $euiSize * 14;
       opacity: 0;
     }
     .controlFrame__formControlLayout {
-      background-color: $euiColorEmptyShade !important;
+      background-color: tintOrShade($euiColorSuccess, 90%, 70%);
       color: transparent !important;
       box-shadow: none;
 
diff --git a/src/plugins/presentation_util/public/components/controls/control_group/editor/control_editor.tsx b/src/plugins/presentation_util/public/components/controls/control_group/editor/control_editor.tsx
index 0fdcba570c94..c31a8397fa23 100644
--- a/src/plugins/presentation_util/public/components/controls/control_group/editor/control_editor.tsx
+++ b/src/plugins/presentation_util/public/components/controls/control_group/editor/control_editor.tsx
@@ -88,19 +88,6 @@ export const ControlEditor = ({
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
         <EuiForm>
-          <EuiFormRow label={ControlGroupStrings.manageControl.getWidthInputTitle()}>
-            <EuiButtonGroup
-              color="primary"
-              legend={ControlGroupStrings.management.controlWidth.getWidthSwitchLegend()}
-              options={CONTROL_WIDTH_OPTIONS}
-              idSelected={currentWidth}
-              onChange={(newWidth: string) => {
-                setCurrentWidth(newWidth as ControlWidth);
-                updateWidth(newWidth as ControlWidth);
-              }}
-            />
-          </EuiFormRow>
-
           <EuiSpacer size="l" />
           {ControlTypeEditor && (
             <ControlTypeEditor
@@ -126,6 +113,18 @@ export const ControlEditor = ({
               }}
             />
           </EuiFormRow>
+          <EuiFormRow label={ControlGroupStrings.manageControl.getWidthInputTitle()}>
+            <EuiButtonGroup
+              color="primary"
+              legend={ControlGroupStrings.management.controlWidth.getWidthSwitchLegend()}
+              options={CONTROL_WIDTH_OPTIONS}
+              idSelected={currentWidth}
+              onChange={(newWidth: string) => {
+                setCurrentWidth(newWidth as ControlWidth);
+                updateWidth(newWidth as ControlWidth);
+              }}
+            />
+          </EuiFormRow>
           <EuiSpacer size="l" />
           {removeControl && (
             <EuiButtonEmpty
diff --git a/src/plugins/presentation_util/public/components/controls/control_types/options_list/options_list.scss b/src/plugins/presentation_util/public/components/controls/control_types/options_list/options_list.scss
index e9a4ef215733..51ad9dc6610a 100644
--- a/src/plugins/presentation_util/public/components/controls/control_types/options_list/options_list.scss
+++ b/src/plugins/presentation_util/public/components/controls/control_types/options_list/options_list.scss
@@ -1,13 +1,13 @@
-.optionsList--anchorOverride {
+.optionsList__anchorOverride {
   display:block;
 }
 
-.optionsList--popoverOverride {
+.optionsList__popoverOverride {
   width: 100%;
   height: 100%;
 }
 
-.optionsList--items {
+.optionsList__items {
   @include euiScrollBar;
 
   overflow-y: auto;
@@ -16,15 +16,18 @@
   max-width: 100%;
 }
 
+.optionsList__actions {
+  padding: $euiSizeS;
+  border-bottom: $euiBorderThin;
+  border-color: darken($euiColorLightestShade, 2%);
+}
+
 .optionsList--filterBtn {
   .euiFilterButton__text-hasNotification {
     flex-grow: 1;
     justify-content: space-between;
     width: 0;
   }
-  &.optionsList--filterBtnSingle {
-    width: 100%;
-  }
   &.optionsList--filterBtnPlaceholder {
     .euiFilterButton__textShift {
       color: $euiTextSubduedColor;
diff --git a/src/plugins/presentation_util/public/components/controls/control_types/options_list/options_list_component.tsx b/src/plugins/presentation_util/public/components/controls/control_types/options_list/options_list_component.tsx
index 9c8af47a1f59..43026a67eb94 100644
--- a/src/plugins/presentation_util/public/components/controls/control_types/options_list/options_list_component.tsx
+++ b/src/plugins/presentation_util/public/components/controls/control_types/options_list/options_list_component.tsx
@@ -108,8 +108,8 @@ export const OptionsListComponent = ({
       <EuiPopover
         button={button}
         isOpen={isPopoverOpen}
-        className="optionsList--popoverOverride"
-        anchorClassName="optionsList--anchorOverride"
+        className="optionsList__popoverOverride"
+        anchorClassName="optionsList__anchorOverride"
         closePopover={() => setIsPopoverOpen(false)}
         panelPaddingSize="none"
         anchorPosition="downCenter"
diff --git a/src/plugins/presentation_util/public/components/controls/control_types/options_list/options_list_editor.tsx b/src/plugins/presentation_util/public/components/controls/control_types/options_list/options_list_editor.tsx
index 86623980cfc4..86f4f85b3b0b 100644
--- a/src/plugins/presentation_util/public/components/controls/control_types/options_list/options_list_editor.tsx
+++ b/src/plugins/presentation_util/public/components/controls/control_types/options_list/options_list_editor.tsx
@@ -70,7 +70,7 @@ export const OptionsListEditor = ({
   const { dataView, fieldName } = state;
   return (
     <>
-      <EuiFormRow fullWidth label={OptionsListStrings.editor.getIndexPatternTitle()}>
+      <EuiFormRow fullWidth label={OptionsListStrings.editor.getDataViewTitle()}>
         <DataViewPicker
           dataViews={state.dataViewListItems}
           selectedDataViewId={dataView?.id}
diff --git a/src/plugins/presentation_util/public/components/controls/control_types/options_list/options_list_popover_component.tsx b/src/plugins/presentation_util/public/components/controls/control_types/options_list/options_list_popover_component.tsx
index eb9829cd7884..90f92e30c32c 100644
--- a/src/plugins/presentation_util/public/components/controls/control_types/options_list/options_list_popover_component.tsx
+++ b/src/plugins/presentation_util/public/components/controls/control_types/options_list/options_list_popover_component.tsx
@@ -45,7 +45,7 @@ export const OptionsListPopover = ({
   } = useReduxEmbeddableContext<OptionsListEmbeddableInput, typeof optionsListReducers>();
 
   const dispatch = useEmbeddableDispatch();
-  const { selectedOptions, singleSelect } = useEmbeddableSelector((state) => state);
+  const { selectedOptions, singleSelect, title } = useEmbeddableSelector((state) => state);
 
   // track selectedOptions in a set for more efficient lookup
   const selectedOptionsSet = useMemo(() => new Set<string>(selectedOptions), [selectedOptions]);
@@ -53,7 +53,8 @@ export const OptionsListPopover = ({
 
   return (
     <>
-      <EuiPopoverTitle paddingSize="s">
+      <EuiPopoverTitle paddingSize="s">{title}</EuiPopoverTitle>
+      <div className="optionsList__actions">
         <EuiFormRow>
           <EuiFlexGroup gutterSize="xs" direction="row" justifyContent="spaceBetween">
             <EuiFlexItem>
@@ -100,9 +101,8 @@ export const OptionsListPopover = ({
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFormRow>
-      </EuiPopoverTitle>
-
-      <div className="optionsList--items">
+      </div>
+      <div className="optionsList__items">
         {!showOnlySelected && (
           <>
             {availableOptions?.map((availableOption, index) => (
diff --git a/src/plugins/presentation_util/public/components/controls/control_types/options_list/options_list_strings.ts b/src/plugins/presentation_util/public/components/controls/control_types/options_list/options_list_strings.ts
index 52b5dc6d4491..dee0d4e7e180 100644
--- a/src/plugins/presentation_util/public/components/controls/control_types/options_list/options_list_strings.ts
+++ b/src/plugins/presentation_util/public/components/controls/control_types/options_list/options_list_strings.ts
@@ -24,6 +24,10 @@ export const OptionsListStrings = {
       i18n.translate('presentationUtil.controls.optionsList.editor.indexPatternTitle', {
         defaultMessage: 'Index pattern',
       }),
+    getDataViewTitle: () =>
+      i18n.translate('presentationUtil.controls.optionsList.editor.dataViewTitle', {
+        defaultMessage: 'Data view',
+      }),
     getNoDataViewTitle: () =>
       i18n.translate('presentationUtil.controls.optionsList.editor.noDataViewTitle', {
         defaultMessage: 'Select data view',
diff --git a/src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.tsx b/src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.tsx
index 237a9666deb3..7b285944840c 100644
--- a/src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.tsx
+++ b/src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.tsx
@@ -67,7 +67,7 @@ export function DataViewPicker({
         panelPaddingSize="s"
         ownFocus
       >
-        <div>
+        <div style={{ width: 368 }}>
           <EuiPopoverTitle>
             {i18n.translate('presentationUtil.dataViewPicker.changeDataViewTitle', {
               defaultMessage: 'Data view',
diff --git a/src/plugins/presentation_util/public/components/field_picker/field_picker.scss b/src/plugins/presentation_util/public/components/field_picker/field_picker.scss
index eac1979fd003..a06c469e713b 100644
--- a/src/plugins/presentation_util/public/components/field_picker/field_picker.scss
+++ b/src/plugins/presentation_util/public/components/field_picker/field_picker.scss
@@ -1,7 +1,5 @@
 .presFieldPicker__fieldButton {
-  box-shadow: 0 .8px .8px rgba(0,0,0,.04),0 2.3px 2px rgba(0,0,0,.03);
-  background: #FFF;
-  border: 1px dashed transparent;
+  background: $euiColorEmptyShade;
 }
 
 .presFieldPickerFieldButtonActive {
diff --git a/src/plugins/presentation_util/public/components/field_picker/field_search.tsx b/src/plugins/presentation_util/public/components/field_picker/field_search.tsx
index d3c6c728b3d0..f3988167c131 100644
--- a/src/plugins/presentation_util/public/components/field_picker/field_search.tsx
+++ b/src/plugins/presentation_util/public/components/field_picker/field_search.tsx
@@ -19,6 +19,7 @@ import {
   EuiOutsideClickDetector,
   EuiFilterButton,
   EuiSpacer,
+  EuiPopoverTitle,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { FieldIcon } from '../../../../kibana_react/public';
@@ -87,7 +88,6 @@ export function FieldSearch({
           <EuiPopover
             panelClassName="euiFilterGroup__popoverPanel"
             panelPaddingSize="none"
-            anchorPosition="rightUp"
             display="block"
             isOpen={isPopoverOpen}
             closePopover={() => {
@@ -95,6 +95,11 @@ export function FieldSearch({
             }}
             button={buttonContent}
           >
+            <EuiPopoverTitle paddingSize="s">
+              {i18n.translate('presentationUtil.fieldSearch.filterByTypeLabel', {
+                defaultMessage: 'Filter by type',
+              })}
+            </EuiPopoverTitle>
             <EuiContextMenuPanel
               watchedItemProps={['icon', 'disabled']}
               items={(availableFieldTypes as string[]).map((type) => (
@@ -110,10 +115,12 @@ export function FieldSearch({
                     }
                   }}
                 >
-                  <span>
-                    <FieldIcon type={type} label={type} />
-                    {type}
-                  </span>
+                  <EuiFlexGroup gutterSize="xs" responsive={false}>
+                    <EuiFlexItem grow={false}>
+                      <FieldIcon type={type} label={type} />
+                    </EuiFlexItem>
+                    <EuiFlexItem>{type}</EuiFlexItem>
+                  </EuiFlexGroup>
                 </EuiContextMenuItem>
               ))}
             />