Tweak opinionated icon styling to only affect the intended dropdown a…

…rrow
thomheymann · Jul 3, 2023 · d594861 · d594861
1 parent 6c14536
commit d594861
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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