chore: prop adjustment for single character Badges (nodejs#8564)

chore: follow up pr for nodejs#8561

Author: canerakdas

packages/ui-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@node-core/ui-components",
-  "version": "1.5.7",
+  "version": "1.5.8",
   "type": "module",
   "exports": {
     "./*": [

packages/ui-components/src/Common/Badge/index.stories.tsx

@@ -49,7 +49,6 @@ export const Medium: Story = {
 
 export const Circular: Story = {
   args: {
-    circular: true,
     children: 'D',
     size: 'small',
     kind: 'error',
@@ -58,7 +57,6 @@ export const Circular: Story = {
 
 export const MediumCircular: Story = {
   args: {
-    circular: true,
     children: 'E',
     kind: 'warning',
   },

packages/ui-components/src/Common/Badge/index.tsx

@@ -10,13 +10,11 @@ type BadgeSize = 'small' | 'medium';
 type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
   size?: BadgeSize;
   kind?: BadgeKind;
-  circular?: boolean;
 };
 
 const Badge: FC<PropsWithChildren<BadgeProps>> = ({
   kind = 'default',
   size = 'medium',
-  circular = false,
   className,
   children,
   ...props
@@ -26,7 +24,10 @@ const Badge: FC<PropsWithChildren<BadgeProps>> = ({
       styles.badge,
       styles[kind],
       styles[size],
-      { [styles.circular]: circular },
+      {
+        [styles.circular]:
+          typeof children === 'string' && children.length === 1,
+      },
       className
     )}
     {...props}