[Amsterdam theme] Fix issues Index management (elastic#103465) (elast…

…ic#104065) Co-authored-by: Elizabet Oliveira <[email protected]> Co-authored-by: Elizabet Oliveira <[email protected]>
kibanamachine · Jul 1, 2021 · 071a74e · 071a74e
1 parent 9fbf449
commit 071a74e
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 23 deletions.
diff --git a/...ation/components/component_templates/component_template_selector/component_templates.scss b/...ation/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,22 @@ $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-left: $euiBorderThin;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    box-shadow: none;
+    height: $euiSizeXXL; /* [2] */
+  }
+
   &__listWrapper {
     height: calc(100% - #{$heightHeader});
 

diff --git a/...onents/component_templates/component_template_selector/component_templates_list_item.scss b/...onents/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;

diff --git a/...ponents/component_templates/component_template_selector/components/filter_list_button.tsx b/...ponents/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>
   );
 }