Chore: add new FeatureState (#101228)

add new featurestate

packages/grafana-data/src/types/app.ts

@@ -179,4 +179,6 @@ export enum FeatureState {
   privatePreview = 'private preview',
   /** used to mark features that are in public preview with low/medium risk, or as a shared badge for public and private previews */
   preview = 'preview',
+  /** used to mark new GA features */
+  new = 'new',
 }

packages/grafana-ui/src/components/Badge/Badge.tsx

@@ -79,7 +79,7 @@ const getStyles = (theme: GrafanaTheme2, color: BadgeColor) => {
       border: `1px solid ${borderColor}`,
       color: textColor,
       fontWeight: theme.typography.fontWeightRegular,
-      gap: '2px',
+      gap: theme.spacing(0.5),
       fontSize: theme.typography.bodySmall.fontSize,
       lineHeight: theme.typography.bodySmall.lineHeight,
       alignItems: 'center',

packages/grafana-ui/src/components/FeatureBadge/FeatureBadge.tsx

@@ -1,5 +1,6 @@
 import { FeatureState } from '@grafana/data';
 
+import { t } from '../../utils/i18n';
 import { Badge, BadgeProps } from '../Badge/Badge';
 
 export interface FeatureBadgeProps {
@@ -30,21 +31,28 @@ function getPanelStateBadgeDisplayModel(featureState: FeatureState): BadgeProps
 
     case FeatureState.experimental:
       return {
-        text: 'Experimental',
+        text: t('grafana-ui.feature-badge.experimental', 'Experimental'),
         icon: 'exclamation-triangle',
         color: 'orange',
       };
 
     case FeatureState.preview:
       return {
-        text: 'Preview',
+        text: t('grafana-ui.feature-badge.preview', 'Preview'),
         icon: 'rocket',
         color: 'blue',
       };
 
     case FeatureState.privatePreview:
       return {
-        text: 'Private preview',
+        text: t('grafana-ui.feature-badge.private-preview', 'Private preview'),
+        icon: 'rocket',
+        color: 'blue',
+      };
+
+    case FeatureState.new:
+      return {
+        text: t('grafana-ui.feature-badge.new', 'New!'),
         icon: 'rocket',
         color: 'blue',
       };