From d594861fbc658faccc8ef2cc8b92b5b5e4c74338 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Mon, 3 Jul 2023 10:29:37 -0700
Subject: [PATCH] Tweak opinionated icon styling to only affect the intended
 dropdown arrow

---
 .../filter_group/__snapshots__/filter_button.test.tsx.snap    | 2 +-
 src/components/filter_group/_filter_button.scss               | 2 +-
 src/components/filter_group/_filter_group.scss                | 4 ++++
 src/components/filter_group/filter_button.tsx                 | 3 ++-
 .../search_bar/__snapshots__/search_bar.test.tsx.snap         | 2 +-
 .../search_bar/__snapshots__/search_filters.test.tsx.snap     | 2 +-
 6 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap b/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
index 795af39c062..0b9154859cf 100644
--- a/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
+++ b/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
@@ -82,7 +82,7 @@ exports[`EuiFilterButton props grow can be turned off 1`] = `
 
 exports[`EuiFilterButton props iconType and iconSide is rendered 1`] = `
 <button
-  class="euiButtonEmpty euiFilterButton euiFilterButton--hasIcon emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text"
+  class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text"
   type="button"
 >
   <span
diff --git a/src/components/filter_group/_filter_button.scss b/src/components/filter_group/_filter_button.scss
index 3c1a6d2bdd8..c814719e45b 100644
--- a/src/components/filter_group/_filter_button.scss
+++ b/src/components/filter_group/_filter_button.scss
@@ -31,7 +31,7 @@
   font-weight: $euiFontWeightBold;
 }
 
-.euiFilterButton--hasIcon .euiButtonEmpty__content {
+.euiFilterButton--hasDropdownArrow .euiButtonEmpty__content {
   justify-content: space-between;
 }
 
diff --git a/src/components/filter_group/_filter_group.scss b/src/components/filter_group/_filter_group.scss
index 54cb4fcf428..10f276efc33 100644
--- a/src/components/filter_group/_filter_group.scss
+++ b/src/components/filter_group/_filter_group.scss
@@ -18,6 +18,10 @@
     min-width: $euiSize * 6;
   }
 
+  > .euiFilterButton--hasDropdownArrow {
+    min-width: $euiSize * 8;
+  }
+
   // Force popover anchors to expand for now
   .euiPopover__anchor {
     display: block;
diff --git a/src/components/filter_group/filter_button.tsx b/src/components/filter_group/filter_button.tsx
index fd6ac77d84b..02fe350dcf1 100644
--- a/src/components/filter_group/filter_button.tsx
+++ b/src/components/filter_group/filter_button.tsx
@@ -78,7 +78,8 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
       'euiFilterButton-isSelected': isSelected,
       'euiFilterButton-hasActiveFilters': hasActiveFilters,
       'euiFilterButton-hasNotification': numFiltersDefined,
-      'euiFilterButton--hasIcon': iconType,
+      'euiFilterButton--hasDropdownArrow':
+        iconType === 'arrowDown' && iconSide === 'right',
       'euiFilterButton--noGrow': !grow,
       'euiFilterButton--withNext': withNext,
     },
diff --git a/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap b/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap
index b834ed4e297..e0955b15850 100644
--- a/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap
+++ b/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap
@@ -164,7 +164,7 @@ exports[`SearchBar render - provided query, filters 1`] = `
           class="euiPopover__anchor css-16vtueo-render"
         >
           <button
-            class="euiButtonEmpty euiFilterButton euiFilterButton--hasIcon emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text"
+            class="euiButtonEmpty euiFilterButton euiFilterButton--hasDropdownArrow emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text"
             type="button"
           >
             <span
diff --git a/src/components/search_bar/__snapshots__/search_filters.test.tsx.snap b/src/components/search_bar/__snapshots__/search_filters.test.tsx.snap
index 6f4c6ef3667..14b1d96a2b6 100644
--- a/src/components/search_bar/__snapshots__/search_filters.test.tsx.snap
+++ b/src/components/search_bar/__snapshots__/search_filters.test.tsx.snap
@@ -38,7 +38,7 @@ exports[`EuiSearchFilters render - with filters 1`] = `
       class="euiPopover__anchor css-16vtueo-render"
     >
       <button
-        class="euiButtonEmpty euiFilterButton euiFilterButton--hasIcon emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text"
+        class="euiButtonEmpty euiFilterButton euiFilterButton--hasDropdownArrow emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text"
         type="button"
       >
         <span