feat(beta_badge): support warning color value (#8177)

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
elastic · Nov 22, 2024 · cb1325b · cb1325b
1 parent df7a98f
commit cb1325b
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 4 deletions.
diff --git a/packages/eui/changelogs/upcoming/8177.md b/packages/eui/changelogs/upcoming/8177.md
@@ -0,0 +1 @@
+- Updated `EuiBetaBadge` with a new `warning` color variant
diff --git a/packages/eui/src-docs/src/views/badge/beta_badge.tsx b/packages/eui/src-docs/src/views/badge/beta_badge.tsx
@@ -3,7 +3,7 @@ import { css } from '@emotion/react';
 
 import { EuiBetaBadge, EuiSpacer, EuiTitle } from '../../../../src/components';
 
-const colors = ['hollow', 'accent', 'subdued'] as const;
+const colors = ['hollow', 'accent', 'subdued', 'warning'] as const;
 
 export default () => (
   <>

diff --git a/packages/eui/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap b/packages/eui/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap
@@ -68,6 +68,17 @@ exports[`EuiBetaBadge props color subdued is rendered 1`] = `
 </span>
 `;
 
+exports[`EuiBetaBadge props color warning is rendered 1`] = `
+<span>
+  <span
+    class="euiBetaBadge emotion-euiBetaBadge-warning-m-baseline"
+    title="Beta"
+  >
+    Beta
+  </span>
+</span>
+`;
+
 exports[`EuiBetaBadge props iconType 1`] = `
 <span>
   <span

diff --git a/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts b/packages/eui/src/components/badge/beta_badge/beta_badge.styles.ts
@@ -49,6 +49,7 @@ export const euiBetaBadgeStyles = (euiThemeContext: UseEuiTheme) => {
       box-shadow: inset 0 0 0 ${euiTheme.border.width.thin}
         ${badgeColors.hollow.borderColor};
     `,
+    warning: css(badgeColors.warning),
     // Font sizes
     m: css`
       font-size: ${euiFontSizeFromScale('xs', euiTheme)};

diff --git a/packages/eui/src/components/badge/beta_badge/beta_badge.tsx b/packages/eui/src/components/badge/beta_badge/beta_badge.tsx
@@ -22,7 +22,7 @@ import { EuiIcon, IconType } from '../../icon';
 
 import { euiBetaBadgeStyles } from './beta_badge.styles';
 
-export const COLORS = ['accent', 'subdued', 'hollow'] as const;
+export const COLORS = ['accent', 'subdued', 'hollow', 'warning'] as const;
 export type BetaBadgeColor = (typeof COLORS)[number];
 
 export const SIZES = ['s', 'm'] as const;
@@ -109,7 +109,7 @@ type BadgeProps = {
    */
   title?: string;
   /**
-   * Accepts accent, subdued and hollow.
+   * Accepts accent, subdued, hollow and warning.
    */
   color?: BetaBadgeColor;
   size?: BetaBadgeSize;

diff --git a/packages/website/docs/components/display/badge.mdx b/packages/website/docs/components/display/badge.mdx
@@ -323,7 +323,7 @@ import React from 'react';
 import { EuiBetaBadge, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { css } from '@emotion/react';
 
-const colors = ['hollow', 'accent', 'subdued'] as const;
+const colors = ['hollow', 'accent', 'subdued', 'warning'] as const;
 
 export default () => (
   <>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		- Updated `EuiBetaBadge` with a new `warning` color variant