[EuiNotificationBadge] Add success color

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

@@ -1,5 +1,18 @@
 import React from 'react';
 
-import { EuiNotificationBadge } from '../../../../src/components/badge/notification_badge';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiNotificationBadge,
+} from '../../../../src/components';
 
-export default () => <EuiNotificationBadge>3</EuiNotificationBadge>;
+export default () => (
+  <EuiFlexGroup responsive={false} gutterSize="s">
+    <EuiFlexItem grow={false}>
+      <EuiNotificationBadge>3</EuiNotificationBadge>
+    </EuiFlexItem>
+    <EuiFlexItem grow={false}>
+      <EuiNotificationBadge color="success">3</EuiNotificationBadge>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);

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/badge/notification_badge/__snapshots__/badge_notification.test.tsx.snap

@@ -26,6 +26,14 @@ exports[`EuiNotificationBadge props color subdued is rendered 1`] = `
 </span>
 `;
 
+exports[`EuiNotificationBadge props color success is rendered 1`] = `
+<span
+  class="euiNotificationBadge emotion-euiNotificationBadge-s-success"
+>
+  5
+</span>
+`;
+
 exports[`EuiNotificationBadge props size m is rendered 1`] = `
 <span
   class="euiNotificationBadge emotion-euiNotificationBadge-m-accent"

src/components/badge/notification_badge/badge_notification.styles.ts

@@ -15,7 +15,7 @@ import {
   mathWithUnits,
 } from '../../../global_styling';
 import { UseEuiTheme, tint } from '../../../services';
-
+import { euiButtonFillColor } from '../../../themes/amsterdam/global_styling/mixins';
 import { getBadgeColors } from '../beta_badge/beta_badge.styles';
 
 export const euiNotificationBadgeStyles = (euiThemeContext: UseEuiTheme) => {
@@ -57,6 +57,11 @@ export const euiNotificationBadgeStyles = (euiThemeContext: UseEuiTheme) => {
     accent: css`
       ${getBadgeColors(euiTheme.colors.accentText, euiThemeContext)}
     `,
+    success: css`
+      background-color: ${euiButtonFillColor(euiThemeContext, 'success')
+        .backgroundColor};
+      color: ${euiTheme.colors.ink};
+    `,
     subdued: css`
       ${getBadgeColors(tint(euiTheme.colors.lightShade, 0.3), euiThemeContext)}
     `,

src/components/badge/notification_badge/badge_notification.tsx

@@ -13,7 +13,7 @@ import { useEuiTheme } from '../../../services';
 
 import { euiNotificationBadgeStyles } from './badge_notification.styles';
 
-export const COLORS = ['accent', 'subdued'] as const;
+export const COLORS = ['accent', 'subdued', 'success'] as const;
 export type BadgeNotificationColor = (typeof COLORS)[number];
 
 export const SIZES = ['s', 'm'] as const;

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}

upcoming_changelogs/6864.md

@@ -0,0 +1,2 @@
+- Added success color `EuiNotificationBadge`
+- Added `badgeColor` prop to `EuiFilterButton`