feat(beta_badge): support warning color value

weronikaolejniczak · weronikaolejniczak · commit ab932f47cd72 · 2024-11-22T12:15:35.000+01:00
closes #8138
diff --git a/packages/eui/changelogs/upcoming/8177.md b/packages/eui/changelogs/upcoming/8177.md
@@ -0,0 +1 @@
+- Added a new color variant of the EuiBetaBadge component: `warning`. It can be set using the `color` prop: `<EuiBetaBadge color="warning" />`.
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 @@`
	`1`	+- Added a new color variant of the EuiBetaBadge component: `warning`. It can be set using the `color` prop: `<EuiBetaBadge color="warning" />`.