From 9332eba5d75788f6ee44013fa1687286fa7d3b5c Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Fri, 4 Apr 2025 13:49:00 +0100
Subject: [PATCH] fix: badge dot sizes to be 8x8 (#20544)

* fix badge sizes to be 8x8

* add data-testid to dot

---------

Co-authored-by: Sean Brydon <sean@Seans-Mac-mini.local>
---
 packages/ui/components/badge/Badge.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/ui/components/badge/Badge.tsx b/packages/ui/components/badge/Badge.tsx
index eba2054b83..3d047ba36c 100644
--- a/packages/ui/components/badge/Badge.tsx
+++ b/packages/ui/components/badge/Badge.tsx
@@ -40,13 +40,16 @@ type IconOrDot =
   | {
       startIcon?: IconName;
       withDot?: never;
+      customDot?: never;
     }
-  | { startIcon?: never; withDot?: true };
+  | { startIcon?: never; withDot?: true; customDot?: never }
+  | { startIcon?: never; withDot?: never; customDot?: React.ReactNode };
 
 export type BadgeBaseProps = InferredBadgeStyles & {
   children: React.ReactNode;
   rounded?: boolean;
   customStartIcon?: React.ReactNode;
+  customDot?: React.ReactNode;
 } & IconOrDot;
 
 export type BadgeProps =
@@ -69,6 +72,7 @@ export const Badge = function Badge(props: BadgeProps) {
     withDot,
     children,
     rounded,
+    customDot,
     ...passThroughProps
   } = props;
   const isButton = "onClick" in passThroughProps && passThroughProps.onClick !== undefined;
@@ -81,10 +85,19 @@ export const Badge = function Badge(props: BadgeProps) {
 
   const Children = () => (
     <>
-      {withDot ? <Icon name="dot" data-testid="go-primitive-dot" className="h-3 w-3 stroke-[3px]" /> : null}
+      {withDot ? (
+        <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor" data-testid="go-primitive-dot">
+          <circle cx="4" cy="4" r="4" />
+        </svg>
+      ) : null}
       {customStartIcon ||
         (StartIcon ? (
-          <Icon name={StartIcon} data-testid="start-icon" className="h-3 w-3 stroke-[3px]" />
+          <Icon
+            name={StartIcon}
+            data-testid="start-icon"
+            className="stroke-[3px]"
+            style={{ width: 12, height: 12 }}
+          />
         ) : null)}
       {children}
     </>