From 62d14251c0a2f801710100e854284d52565b4bd7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81bastien=20Loix?= <sabee77@gmail.com>
Date: Thu, 24 Jun 2021 15:34:11 +0100
Subject: [PATCH 1/4] Fix filter button of component template

---
 .../component_templates.scss                  | 12 +++++
 .../components/filter_list_button.tsx         | 46 ++++++++++---------
 2 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss
index c603224394919..c47ad0ead2cdf 100644
--- a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss
+++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss
@@ -1,6 +1,7 @@
 
 /**
  * [1] Will center vertically the empty search result
+ * [2] Align the height with the search input height
  */
 
 $heightHeader: $euiSizeL * 2;
@@ -22,10 +23,21 @@ $heightHeader: $euiSizeL * 2;
   &__searchBox {
     border-bottom: $euiBorderThin;
     border-top: $euiBorderThin;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
     box-shadow: none;
     max-width: initial;
   }
 
+  &__filterListButton {
+    border-bottom: $euiBorderThin;
+    border-top: $euiBorderThin;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    box-shadow: none;
+    height: 40px; /* [2] */
+  }
+
   &__listWrapper {
     height: calc(100% - #{$heightHeader});
 
diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/filter_list_button.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/filter_list_button.tsx
index 522725ac679e2..ce7b164eb7995 100644
--- a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/filter_list_button.tsx
+++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/filter_list_button.tsx
@@ -7,7 +7,7 @@
 
 import React, { useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiFilterButton, EuiPopover, EuiFilterSelectItem } from '@elastic/eui';
+import { EuiFilterButton, EuiPopover, EuiFilterSelectItem, EuiFilterGroup } from '@elastic/eui';
 
 interface Filter {
   name: string;
@@ -67,26 +67,28 @@ export function FilterListButton({ onChange, filters }: Props) {
   );
 
   return (
-    <EuiPopover
-      ownFocus
-      button={button}
-      isOpen={isPopoverOpen}
-      closePopover={closePopover}
-      panelPaddingSize="none"
-      data-test-subj="filterList"
-    >
-      <div className="euiFilterSelect__items">
-        {Object.entries(filters).map(([filter, item], index) => (
-          <EuiFilterSelectItem
-            checked={(item as Filter).checked}
-            key={index}
-            onClick={() => toggleFilter(filter)}
-            data-test-subj="filterItem"
-          >
-            {(item as Filter).name}
-          </EuiFilterSelectItem>
-        ))}
-      </div>
-    </EuiPopover>
+    <EuiFilterGroup className="componentTemplates__filterListButton">
+      <EuiPopover
+        ownFocus
+        button={button}
+        isOpen={isPopoverOpen}
+        closePopover={closePopover}
+        panelPaddingSize="none"
+        data-test-subj="filterList"
+      >
+        <div className="euiFilterSelect__items">
+          {Object.entries(filters).map(([filter, item], index) => (
+            <EuiFilterSelectItem
+              checked={(item as Filter).checked}
+              key={index}
+              onClick={() => toggleFilter(filter)}
+              data-test-subj="filterItem"
+            >
+              {(item as Filter).name}
+            </EuiFilterSelectItem>
+          ))}
+        </div>
+      </EuiPopover>
+    </EuiFilterGroup>
   );
 }

From f115260245126203c6b9df4bdd093a732bba6cf6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81bastien=20Loix?= <sabee77@gmail.com>
Date: Mon, 28 Jun 2021 12:19:17 +0100
Subject: [PATCH 2/4] Fix background color for dark theme

---
 .../component_templates_list_item.scss                          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.scss b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.scss
index 44ba20eed44ae..cff38f115258d 100644
--- a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.scss
+++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.scss
@@ -1,5 +1,5 @@
 .componentTemplatesListItem {
-  background-color: $euiColorGhost;
+  background-color: $euiPageBackgroundColor;
   padding: $euiSizeM;
   border-bottom: $euiBorderThin;
   position: relative;

From 6c5ba05ea950052475b4427c04fdc733fa220d7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81bastien=20Loix?= <sabee77@gmail.com>
Date: Tue, 29 Jun 2021 10:57:33 +0100
Subject: [PATCH 3/4] Add border left to filter button

---
 .../component_template_selector/component_templates.scss         | 1 +
 1 file changed, 1 insertion(+)

diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss
index c47ad0ead2cdf..f2ff3343a5722 100644
--- a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss
+++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss
@@ -32,6 +32,7 @@ $heightHeader: $euiSizeL * 2;
   &__filterListButton {
     border-bottom: $euiBorderThin;
     border-top: $euiBorderThin;
+    border-left: $euiBorderThin;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     box-shadow: none;

From 4ed4bac0690f0bbc98133cf4215aa3f542edfbd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Loix?= <sabee77@gmail.com>
Date: Wed, 30 Jun 2021 10:53:01 +0100
Subject: [PATCH 4/4] Update
 x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss

Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co>
---
 .../component_template_selector/component_templates.scss        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss
index f2ff3343a5722..53636603fbe36 100644
--- a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss
+++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss
@@ -36,7 +36,7 @@ $heightHeader: $euiSizeL * 2;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     box-shadow: none;
-    height: 40px; /* [2] */
+    height: $euiSizeXXL; /* [2] */
   }
 
   &__listWrapper {