From 4ac952d7848ae7d118450809ecf9c7ac4b650e2c Mon Sep 17 00:00:00 2001
From: andreadelrio <delrio.andre@gmail.com>
Date: Fri, 9 Jul 2021 12:43:40 -0700
Subject: [PATCH 1/3] progress

---
 .../options_list/options_list_control.scss    | 48 +++++++---
 .../options_list/options_list_control.tsx     | 96 ++++++++++++++-----
 2 files changed, 109 insertions(+), 35 deletions(-)

diff --git a/src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.scss b/src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.scss
index bd1340c454319..2b5b11b997bed 100644
--- a/src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.scss
+++ b/src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.scss
@@ -40,18 +40,31 @@
   max-width: 100%;
 }
 
-.optionsList--twoLine {
-  flex-direction: column;
-}
-
 .optionsList {
   background-color: $euiFormBackgroundColor;
-  border: 1px solid $euiFormBorderColor;
-  border-radius: $euiBorderRadius;
-  display: flex;
-  align-items: stretch;
-  font-size: $euiFontSizeS;
+  // border: 1px solid $euiFormBorderColor;
+  // border-radius: $euiBorderRadius;
+  // display: flex;
+  // align-items: stretch;
+  // font-size: $euiFontSizeS;
   width: 100%;
+  height: 100%;
+
+  &.optionsList--twoLine {
+    // background-color: $euiFormBackgroundColor;
+    border: 1px solid $euiFormBorderColor;
+    border-radius: $euiBorderRadius;
+    display: flex;
+    align-items: stretch;
+    font-size: $euiFontSizeS;
+    // width: 100%;
+    flex-direction: column;
+
+    .optionsList--control {
+      height: $euiFormControlHeight;
+      flex-direction: row;
+    }
+  }
 
   .optionsList--title {
     background-color: $euiFormBorderColor;
@@ -64,8 +77,8 @@
   .optionsList--control {
     flex-grow: 1;
     display: flex;
-    flex-direction: row;
-    height: $euiFormControlHeight;
+    // flex-direction: row;
+    // height: $euiFormControlHeight;
     align-items: center;
 
     .optionsList--selections {
@@ -87,4 +100,17 @@
       padding: $euiSizeXS;
     }
   }
+}
+
+.optionsList--formControlLayout {
+  max-width: unset;
+}
+
+.optionsList--popoverOverride {
+  width: 100%;
+  height: 100%;
+}
+
+.tempButton {
+  width: 100%;
 }
\ No newline at end of file
diff --git a/src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.tsx b/src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.tsx
index f57fded369dd4..b9ebf9fa6a2e4 100644
--- a/src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.tsx
+++ b/src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.tsx
@@ -15,6 +15,7 @@ import {
   EuiFilterSelectItem,
   EuiPopoverTitle,
   EuiSelectableProps,
+  EuiFormControlLayout,
 } from '@elastic/eui';
 
 import classNames from 'classnames';
@@ -46,7 +47,9 @@ export const OptionsListControl = ({ twoLine, title, options }: OptionsListContr
   const button = (
     <EuiButtonEmpty
       color="text"
-      className="optionsList--buttonOverride"
+      className={classNames('tempButton', {
+        'optionsList--buttonOverride': twoLine,
+      })}
       textProps={{
         className: classNames('optionsList', {
           'optionsList--twoLine': twoLine,
@@ -55,7 +58,7 @@ export const OptionsListControl = ({ twoLine, title, options }: OptionsListContr
       onClick={() => setIsPopoverOpen((open) => !open)}
       contentProps={{ className: 'optionsList--buttonContentOverride' }}
     >
-      <span className="optionsList--title">{startCase(title)}</span>
+      {twoLine ? <span className="optionsList--title">{startCase(title)}</span> : null}
       <span className="optionsList--control">
         <span
           className={classNames('optionsList--selections', {
@@ -81,28 +84,73 @@ export const OptionsListControl = ({ twoLine, title, options }: OptionsListContr
     </EuiButtonEmpty>
   );
 
+  const tempButton = <EuiButtonEmpty className="tempButton">hello</EuiButtonEmpty>;
+
   return (
-    <EuiPopover
-      id="popoverExampleMultiSelect"
-      button={button}
-      isOpen={isPopoverOpen}
-      anchorClassName="optionsList--anchorOverride"
-      closePopover={() => setIsPopoverOpen(false)}
-      panelPaddingSize="none"
-      anchorPosition="upLeft"
-      ownFocus
-      repositionOnScroll
-    >
-      <EuiPopoverTitle paddingSize="s">
-        <EuiFieldSearch compressed />
-      </EuiPopoverTitle>
-      <div className="optionsList--items">
-        {selectableOptions.map((item, index) => (
-          <EuiFilterSelectItem checked={item.checked} key={index} onClick={() => updateItem(index)}>
-            {item.label}
-          </EuiFilterSelectItem>
-        ))}
-      </div>
-    </EuiPopover>
+    <>
+      {twoLine ? (
+        <EuiPopover
+          id="popoverExampleMultiSelect"
+          button={button}
+          isOpen={isPopoverOpen}
+          anchorClassName="optionsList--anchorOverride"
+          closePopover={() => setIsPopoverOpen(false)}
+          panelPaddingSize="none"
+          anchorPosition="upLeft"
+          ownFocus
+          repositionOnScroll
+        >
+          <EuiPopoverTitle paddingSize="s">
+            <EuiFieldSearch compressed />
+          </EuiPopoverTitle>
+          <div className="optionsList--items">
+            {selectableOptions.map((item, index) => (
+              <EuiFilterSelectItem
+                checked={item.checked}
+                key={index}
+                onClick={() => updateItem(index)}
+              >
+                {item.label}
+              </EuiFilterSelectItem>
+            ))}
+          </div>
+        </EuiPopover>
+      ) : (
+        <EuiFormControlLayout
+          className="optionsList--formControlLayout"
+          prepend={
+            <EuiButtonEmpty color="text" size="s" iconSide="right">
+              {startCase(title)}
+            </EuiButtonEmpty>
+          }
+        >
+          <EuiPopover
+            id="popoverExampleMultiSelect"
+            button={button}
+            className="optionsList--popoverOverride"
+            anchorClassName="optionsList--anchorOverride"
+            isOpen={isPopoverOpen}
+            closePopover={() => setIsPopoverOpen(false)}
+            panelPaddingSize="none"
+          >
+            <EuiPopoverTitle paddingSize="s">{title}</EuiPopoverTitle>
+            <div className="optionsList--search">
+              <EuiFieldSearch compressed />
+            </div>
+            <div className="optionsList--items">
+              {selectableOptions.map((item, index) => (
+                <EuiFilterSelectItem
+                  checked={item.checked}
+                  key={index}
+                  onClick={() => updateItem(index)}
+                >
+                  {item.label}
+                </EuiFilterSelectItem>
+              ))}
+            </div>
+          </EuiPopover>
+        </EuiFormControlLayout>
+      )}
+    </>
   );
 };

From a18287c82af3a6ea668281d150dd1ae6edeb67e0 Mon Sep 17 00:00:00 2001
From: andreadelrio <delrio.andre@gmail.com>
Date: Fri, 9 Jul 2021 13:43:03 -0700
Subject: [PATCH 2/3] remove some styles

---
 .../options_list/options_list_control.scss    | 44 ++++++++++---------
 .../options_list/options_list_control.tsx     |  7 ++-
 2 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.scss b/src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.scss
index 2b5b11b997bed..b4bafe31b70a1 100644
--- a/src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.scss
+++ b/src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.scss
@@ -7,6 +7,19 @@
 }
 
 .optionsList--buttonOverride {
+  &:hover:not(:disabled),
+  &:focus:not(:disabled) {
+    // Remove underline from whole button so notifications don't get the underline
+    text-decoration: none;
+  
+    .optionsList--title {
+      // Add put it only on the actual text part
+      text-decoration: underline;
+    }
+  }
+}
+
+.optionsList--buttonOverrideTwoLine {
   height: auto !important;
   width: 100%;
 
@@ -19,16 +32,6 @@
     }
   }
 
-  &:hover:not(:disabled),
-  &:focus:not(:disabled) {
-    // Remove underline from whole button so notifications don't get the underline
-    text-decoration: none;
-
-    .optionsList--title {
-      // Add put it only on the actual text part
-      text-decoration: underline;
-    }
-  }
 }
 
 .optionsList--items {
@@ -42,22 +45,15 @@
 
 .optionsList {
   background-color: $euiFormBackgroundColor;
-  // border: 1px solid $euiFormBorderColor;
-  // border-radius: $euiBorderRadius;
-  // display: flex;
-  // align-items: stretch;
-  // font-size: $euiFontSizeS;
   width: 100%;
   height: 100%;
 
   &.optionsList--twoLine {
-    // background-color: $euiFormBackgroundColor;
     border: 1px solid $euiFormBorderColor;
     border-radius: $euiBorderRadius;
     display: flex;
     align-items: stretch;
     font-size: $euiFontSizeS;
-    // width: 100%;
     flex-direction: column;
 
     .optionsList--control {
@@ -71,15 +67,13 @@
     padding: $euiSizeXS $euiSizeS;
     display: flex;
     align-items: center;
-    font-weight: $euiFontWeightBold;
   }
 
   .optionsList--control {
     flex-grow: 1;
     display: flex;
-    // flex-direction: row;
-    // height: $euiFormControlHeight;
     align-items: center;
+    height: 100%;
 
     .optionsList--selections {
       flex: 1;
@@ -111,6 +105,14 @@
   height: 100%;
 }
 
-.tempButton {
+.optionsList--buttonOverrideSingle {
+  height: 100%;
   width: 100%;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  overflow: hidden;
+}
+
+.optionsList--search {
+  padding: $euiSizeS;
 }
\ No newline at end of file
diff --git a/src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.tsx b/src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.tsx
index b9ebf9fa6a2e4..9b25d55a657f9 100644
--- a/src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.tsx
+++ b/src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.tsx
@@ -47,8 +47,9 @@ export const OptionsListControl = ({ twoLine, title, options }: OptionsListContr
   const button = (
     <EuiButtonEmpty
       color="text"
-      className={classNames('tempButton', {
-        'optionsList--buttonOverride': twoLine,
+      className={classNames('optionsList--buttonOverride', {
+        'optionsList--buttonOverrideTwoLine': twoLine,
+        'optionsList--buttonOverrideSingle': !twoLine,
       })}
       textProps={{
         className: classNames('optionsList', {
@@ -84,8 +85,6 @@ export const OptionsListControl = ({ twoLine, title, options }: OptionsListContr
     </EuiButtonEmpty>
   );
 
-  const tempButton = <EuiButtonEmpty className="tempButton">hello</EuiButtonEmpty>;
-
   return (
     <>
       {twoLine ? (

From 869dadce6ff72c29e17e0b902e16500898fb3386 Mon Sep 17 00:00:00 2001
From: andreadelrio <delrio.andre@gmail.com>
Date: Fri, 9 Jul 2021 16:36:50 -0700
Subject: [PATCH 3/3] add label to other popover title

---
 .../input_controls/options_list/options_list_control.tsx     | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.tsx b/src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.tsx
index 9b25d55a657f9..12d4b9b4abef3 100644
--- a/src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.tsx
+++ b/src/plugins/presentation_util/public/components/input_controls/options_list/options_list_control.tsx
@@ -99,9 +99,10 @@ export const OptionsListControl = ({ twoLine, title, options }: OptionsListContr
           ownFocus
           repositionOnScroll
         >
-          <EuiPopoverTitle paddingSize="s">
+          <EuiPopoverTitle paddingSize="s">{title}</EuiPopoverTitle>
+          <div className="optionsList--search">
             <EuiFieldSearch compressed />
-          </EuiPopoverTitle>
+          </div>
           <div className="optionsList--items">
             {selectableOptions.map((item, index) => (
               <EuiFilterSelectItem