[EuiSearchBar] Export EuiSearchBarFilters; [EuiFilterButton] Fix icon…

… display (#6900)

* Expose EuiSearchFilters component

* Fix styling for filter buttons with icon

* Tweak opinionated icon styling to only affect the intended dropdown arrow

* Revert "Tweak opinionated icon styling to only affect the intended dropdown arrow"

This reverts commit d594861.

* [PR feedback] Namespacing

- to make it clearer that the new export is intended to be a subcomponent of `EuiSearchBar`

* chagnelog

---------

Co-authored-by: Cee Chen <constance.chen@elastic.co>

src/components/filter_group/_filter_group.scss

@@ -18,10 +18,6 @@
     min-width: $euiSize * 6;
   }
 
-  > .euiFilterButton--hasIcon {
-    min-width: $euiSize * 8;
-  }
-
   // Force popover anchors to expand for now
   .euiPopover__anchor {
     display: block;

src/components/search_bar/__snapshots__/search_filters.test.tsx.snap

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiSearchFilters render - no filters 1`] = `
+exports[`EuiSearchBarFilters render - no filters 1`] = `
 <div
   class="euiFilterGroup"
 />
 `;
 
-exports[`EuiSearchFilters render - with filters 1`] = `
+exports[`EuiSearchBarFilters render - with filters 1`] = `
 <div
   class="euiFilterGroup"
 >

src/components/search_bar/index.ts

@@ -12,5 +12,6 @@ export type {
   QueryType,
 } from './search_bar';
 export { EuiSearchBar, Query, Ast } from './search_bar';
+export { EuiSearchBarFilters } from './search_filters';
 export type { SearchFilterConfig } from './search_filters';
 export type { FieldValueOptionType } from './filters/field_value_selection_filter';

src/components/search_bar/search_bar.tsx

@@ -12,7 +12,7 @@ import { htmlIdGenerator } from '../../services/accessibility';
 import { isString } from '../../services/predicate';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
 import { EuiSearchBox, SchemaType } from './search_box';
-import { EuiSearchFilters, SearchFilterConfig } from './search_filters';
+import { EuiSearchBarFilters, SearchFilterConfig } from './search_filters';
 import { Query } from './query';
 import { CommonProps } from '../common';
 import { EuiFieldSearchProps } from '../form/field_search';
@@ -255,7 +255,7 @@ export class EuiSearchBar extends Component<EuiSearchBarProps, State> {
 
     const filtersBar = !filters ? undefined : (
       <EuiFlexItem className="euiSearchBar__filtersHolder" grow={false}>
-        <EuiSearchFilters
+        <EuiSearchBarFilters
           filters={filters}
           query={query}
           onChange={this.onFiltersChange}

src/components/search_bar/search_filters.test.tsx

@@ -10,10 +10,10 @@ import React from 'react';
 import { render } from '../../test/rtl';
 import { requiredProps } from '../../test';
 
-import { EuiSearchFilters, SearchFilterConfig } from './search_filters';
+import { EuiSearchBarFilters, SearchFilterConfig } from './search_filters';
 import { Query } from './query';
 
-describe('EuiSearchFilters', () => {
+describe('EuiSearchBarFilters', () => {
   test('render - no filters', () => {
     const props = {
       ...requiredProps,
@@ -22,7 +22,7 @@ describe('EuiSearchFilters', () => {
       filters: [],
     };
 
-    const { container } = render(<EuiSearchFilters {...props} />);
+    const { container } = render(<EuiSearchBarFilters {...props} />);
 
     expect(container.firstChild).toMatchSnapshot();
   });
@@ -49,7 +49,7 @@ describe('EuiSearchFilters', () => {
       filters,
     };
 
-    const { container } = render(<EuiSearchFilters {...props} />);
+    const { container } = render(<EuiSearchBarFilters {...props} />);
 
     expect(container.firstChild).toMatchSnapshot();
   });

src/components/search_bar/search_filters.tsx

@@ -13,15 +13,15 @@ import { EuiFilterGroup } from '../filter_group';
 
 export type { SearchFilterConfig } from './filters';
 
-interface EuiSearchFiltersProps {
+interface EuiSearchBarFiltersProps {
   query: Query;
   onChange: (query: Query) => void;
   filters: SearchFilterConfig[];
 }
 
-type DefaultProps = Pick<EuiSearchFiltersProps, 'filters'>;
+type DefaultProps = Pick<EuiSearchBarFiltersProps, 'filters'>;
 
-export class EuiSearchFilters extends Component<EuiSearchFiltersProps> {
+export class EuiSearchBarFilters extends Component<EuiSearchBarFiltersProps> {
   static defaultProps: DefaultProps = {
     filters: [],
   };

upcoming_changelogs/6900.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiFilterButton` icon display