Support passing arrays as Badge children (#1443)

.changeset/early-seahorses-wash.md

@@ -0,0 +1,21 @@
+---
+'braid-design-system': patch
+---
+
+---
+updated:
+  - Badge
+---
+
+**Badge**: Allow `Badge` to take arrays of values
+
+Previously, `Badge` only accepted a `string` as children, to prevent the use of other components inside a `Badge`.
+
+However, when a variable is included with text inside the `Badge`, the children property is interpreted as an array. This prevents a very reasonable use case from being allowed:
+
+```tsx
+<Badge>{jobs.length} Jobs</Badge>
+// Error: Type '{ children: string[]; }' is not assignable to type 'BadgeProps'.
+```
+
+This change allows `Badge` to accept a string, number, or array thereof.

packages/braid-design-system/src/lib/components/Badge/Badge.tsx

@@ -7,6 +7,8 @@ import buildDataAttributes, {
 } from '../private/buildDataAttributes';
 import { Bleed } from '../Bleed/Bleed';
 
+type ValueOrArray<T> = T | T[];
+
 const validTones = [
   'promote',
   'info',
@@ -22,7 +24,7 @@ export interface BadgeProps {
   weight?: BadgeWeight;
   bleedY?: boolean;
   title?: string;
-  children: string;
+  children: ValueOrArray<string | number>;
   id?: string;
   data?: DataAttributeMap;
   tabIndex?: BoxProps['tabIndex'];
@@ -40,6 +42,18 @@ const lightModeBackgroundForTone = {
 
 const verticalPadding = 'xxsmall';
 
+const stringifyChildren = (children: BadgeProps['children']): string => {
+  if (typeof children === 'string') {
+    return children;
+  }
+
+  if (typeof children === 'number') {
+    return children.toString();
+  }
+
+  return children.join('');
+};
+
 export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
   (
     {
@@ -81,7 +95,10 @@ export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
           ref={ref}
           tabIndex={tabIndex}
           aria-describedby={ariaDescribedBy}
-          title={title ?? (!ariaDescribedBy ? children : undefined)}
+          title={
+            title ??
+            (!ariaDescribedBy ? stringifyChildren(children) : undefined)
+          }
           background={
             weight === 'strong' ? tone : lightModeBackgroundForTone[tone]
           }

packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap

@@ -158,7 +158,10 @@ exports[`Badge 1`] = `
   props: {
     aria-describedby?: string
     bleedY?: boolean
-    children: string
+    children: 
+        | (string | number)[]
+        | number
+        | string
     data?: DataAttributeMap
     id?: string
     ref?: