Tweak opinionated icon styling to only affect the intended dropdown arrow

cee-chen · cee-chen · commit d594861fbc65 · 2023-07-03T10:29:37.000-07:00
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

Original file line number	Diff line number	Diff line change
@@ -82,7 +82,7 @@ exports[`EuiFilterButton props grow can be turned off 1`] = `
`82`	`82`
`83`	`83`	exports[`EuiFilterButton props iconType and iconSide is rendered 1`] = `
`84`	`84`	`<button`
`85`		`- class="euiButtonEmpty euiFilterButton euiFilterButton--hasIcon emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text"`
	`85`	`+ class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text"`
`86`	`86`	`type="button"`
`87`	`87`	`>`
`88`	`88`	`<span`
Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@`
`31`	`31`	`font-weight: $euiFontWeightBold;`
`32`	`32`	`}`
`33`	`33`
`34`		`-.euiFilterButton--hasIcon .euiButtonEmpty__content {`
	`34`	`+.euiFilterButton--hasDropdownArrow .euiButtonEmpty__content {`
`35`	`35`	`justify-content: space-between;`
`36`	`36`	`}`
`37`	`37`
Original file line number	Diff line number	Diff line change
@@ -164,7 +164,7 @@ exports[`SearchBar render - provided query, filters 1`] = `
`164`	`164`	`class="euiPopover__anchor css-16vtueo-render"`
`165`	`165`	`>`
`166`	`166`	`<button`
`167`		`- class="euiButtonEmpty euiFilterButton euiFilterButton--hasIcon emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text"`
	`167`	`+ class="euiButtonEmpty euiFilterButton euiFilterButton--hasDropdownArrow emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text"`
`168`	`168`	`type="button"`
`169`	`169`	`>`
`170`	`170`	`<span`
Original file line number	Diff line number	Diff line change
@@ -38,7 +38,7 @@ exports[`EuiSearchFilters render - with filters 1`] = `
`38`	`38`	`class="euiPopover__anchor css-16vtueo-render"`
`39`	`39`	`>`
`40`	`40`	`<button`
`41`		`- class="euiButtonEmpty euiFilterButton euiFilterButton--hasIcon emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text"`
	`41`	`+ class="euiButtonEmpty euiFilterButton euiFilterButton--hasDropdownArrow emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text"`
`42`	`42`	`type="button"`
`43`	`43`	`>`
`44`	`44`	`<span`