From 1d1e7a75af4594253bafc120c5a1befe964a267d Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Wed, 21 Jun 2023 13:37:21 -0700
Subject: [PATCH] add badgeColor to EuiFilterButton

---
 .../src/views/badge/notification_badge.tsx    |  2 +-
 .../views/filter_group/filter_group_multi.js  |  1 +
 .../__snapshots__/filter_button.test.tsx.snap | 19 +++++++++++++++++++
 .../filter_group/filter_button.test.tsx       |  8 ++++++++
 src/components/filter_group/filter_button.tsx | 10 +++++++++-
 5 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/src-docs/src/views/badge/notification_badge.tsx b/src-docs/src/views/badge/notification_badge.tsx
index 463144309e3..14845d6dfb8 100644
--- a/src-docs/src/views/badge/notification_badge.tsx
+++ b/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>
diff --git a/src-docs/src/views/filter_group/filter_group_multi.js b/src-docs/src/views/filter_group/filter_group_multi.js
index 5ea1b757c4b..bf9be4d07c2 100644
--- a/src-docs/src/views/filter_group/filter_group_multi.js
+++ b/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}
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 25d9224e42f..53ae7242be7 100644
--- a/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
+++ b/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"
diff --git a/src/components/filter_group/filter_button.test.tsx b/src/components/filter_group/filter_button.test.tsx
index c9a2ccb83de..ca0f9d5e849 100644
--- a/src/components/filter_group/filter_button.test.tsx
+++ b/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();
+      });
+    });
   });
 });
diff --git a/src/components/filter_group/filter_button.tsx b/src/components/filter_group/filter_button.tsx
index 788744ee4f7..05cd9d4c21e 100644
--- a/src/components/filter_group/filter_button.tsx
+++ b/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}