add badgeColor to EuiFilterButton

src-docs/src/views/badge/notification_badge.tsx

@@ -7,7 +7,7 @@ import {
 } from '../../../../src/components';
 
 export default () => (
-  <EuiFlexGroup gutterSize="s">
+  <EuiFlexGroup responsive={false} gutterSize="s">
     <EuiFlexItem grow={false}>
       <EuiNotificationBadge>3</EuiNotificationBadge>
     </EuiFlexItem>

src-docs/src/views/filter_group/filter_group_multi.js

@@ -63,6 +63,7 @@ export default () => {
   const button = (
     <EuiFilterButton
       iconType="arrowDown"
+      badgeColor="success"
       onClick={onButtonClick}
       isSelected={isPopoverOpen}
       numFilters={items.filter((item) => item.checked !== 'off').length}

src/components/filter_group/__snapshots__/filter_button.test.tsx.snap

@@ -42,6 +42,25 @@ exports[`EuiFilterButton is rendered 1`] = `
 </button>
 `;
 
+exports[`EuiFilterButton props badgeColor is rendered 1`] = `
+<button
+  class="euiButtonEmpty euiFilterButton css-wvaqcf-empty-text"
+  type="button"
+>
+  <span
+    class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+  >
+    <span
+      class="euiButtonEmpty__text"
+    >
+      <span
+        class="euiFilterButton__textShift"
+      />
+    </span>
+  </span>
+</button>
+`;
+
 exports[`EuiFilterButton props grow can be turned off 1`] = `
 <button
   class="euiButtonEmpty euiFilterButton euiFilterButton--noGrow css-wvaqcf-empty-text"

src/components/filter_group/filter_button.test.tsx

@@ -103,5 +103,13 @@ describe('EuiFilterButton', () => {
         expect(component).toMatchSnapshot();
       });
     });
+
+    describe('badgeColor', () => {
+      it('is rendered', () => {
+        const component = render(<EuiFilterButton badgeColor="success" />);
+
+        expect(component).toMatchSnapshot();
+      });
+    });
   });
 });

src/components/filter_group/filter_button.tsx

@@ -16,6 +16,9 @@ import { EuiButtonEmpty, EuiButtonEmptyProps } from '../button/button_empty';
 import { useInnerText } from '../inner_text';
 import { DistributiveOmit } from '../common';
 
+export const COLORS = ['accent', 'success'] as const;
+export type BadgeNotificationColor = (typeof COLORS)[number];
+
 export type EuiFilterButtonProps = {
   /**
    * Bolds the button if true
@@ -43,6 +46,10 @@ export type EuiFilterButtonProps = {
    * Remove border after button, good for opposite filters
    */
   withNext?: boolean;
+  /**
+   * Change color of the counter badge
+   */
+  badgeColor?: BadgeNotificationColor;
 } & DistributiveOmit<EuiButtonEmptyProps, 'flush' | 'size'>;
 
 export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
@@ -51,6 +58,7 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
   iconType,
   iconSide = 'right',
   color = 'text',
+  badgeColor = 'accent',
   hasActiveFilters,
   numFilters,
   numActiveFilters,
@@ -103,7 +111,7 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
     <EuiNotificationBadge
       className="euiFilterButton__notification"
       aria-label={hasActiveFilters ? activeBadgeLabel : availableBadgeLabel}
-      color={isDisabled || !hasActiveFilters ? 'subdued' : 'accent'}
+      color={isDisabled || !hasActiveFilters ? 'subdued' : badgeColor}
       role="marquee" // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/marquee_role
     >
       {badgeCount}