From 40673415443ca318f238abe6500fd462cc0b2d94 Mon Sep 17 00:00:00 2001
From: xiyu95 <xiyu.chen@grafana.com>
Date: Fri, 9 May 2025 10:47:50 -0700
Subject: [PATCH] chore: add variant prop to Counter (#105141)

* chore: add className prop to counter

* chore: make className optional

* chore: wrap in cx

* chore: add variant to counter

* chore: run prettier fix
---
 packages/grafana-ui/src/components/Tabs/Counter.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-ui/src/components/Tabs/Counter.tsx b/packages/grafana-ui/src/components/Tabs/Counter.tsx
index c224e3d129d..093fe5c2b55 100644
--- a/packages/grafana-ui/src/components/Tabs/Counter.tsx
+++ b/packages/grafana-ui/src/components/Tabs/Counter.tsx
@@ -4,22 +4,24 @@ import { GrafanaTheme2, locale } from '@grafana/data';
 
 import { useStyles2 } from '../../themes';
 
+type CounterVariant = 'primary' | 'secondary';
 export interface CounterProps {
   value: number;
+  variant?: CounterVariant;
 }
 
-export const Counter = ({ value }: CounterProps) => {
-  const styles = useStyles2(getStyles);
+export const Counter = ({ value, variant = 'secondary' }: CounterProps) => {
+  const styles = useStyles2(getStyles, variant);
 
   return <span className={styles.counter}>{locale(value, 0).text}</span>;
 };
 
-const getStyles = (theme: GrafanaTheme2) => ({
+const getStyles = (theme: GrafanaTheme2, variant: CounterVariant) => ({
   counter: css({
     label: 'counter',
     marginLeft: theme.spacing(1),
     borderRadius: theme.spacing(3),
-    backgroundColor: theme.colors.action.hover,
+    backgroundColor: variant === 'primary' ? theme.colors.primary.main : theme.colors.action.hover,
     padding: theme.spacing(0.25, 1),
     color: theme.colors.text.secondary,
     fontWeight: theme.typography.fontWeightMedium,