add success color to notification badge

elastic · Jun 21, 2023 · 7bb2222 · 7bb2222
1 parent 1341b12
commit 7bb2222
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 4 deletions.
diff --git a/src-docs/src/views/badge/notification_badge.tsx b/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 gutterSize="s">
+    <EuiFlexItem grow={false}>
+      <EuiNotificationBadge>3</EuiNotificationBadge>
+    </EuiFlexItem>
+    <EuiFlexItem grow={false}>
+      <EuiNotificationBadge color="success">3</EuiNotificationBadge>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);
diff --git a/src/components/badge/notification_badge/__snapshots__/badge_notification.test.tsx.snap b/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"

diff --git a/src/components/badge/notification_badge/badge_notification.styles.ts b/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)}
     `,

diff --git a/src/components/badge/notification_badge/badge_notification.tsx b/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;