fix(badge): simplify children type

.changeset/tidy-feet-wash.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/badge': patch
+'@twilio-paste/core': patch
+---
+
+[Badge] Fixed the type of the children prop

packages/paste-core/components/badge/__tests__/index.spec.tsx

@@ -7,10 +7,11 @@ import {InformationIcon} from '@twilio-paste/icons/esm/InformationIcon';
 // @ts-ignore
 import axe from '../../../../../.jest/axe-helper';
 import {Badge} from '../src';
-import type {NamedChild} from '../src/types';
 import {isFocusableElement, getBadgeSpanProps} from '../src/utils';
 import {useResizeChildIcons} from '../src/hooks';
 
+type NamedChild = React.ReactElement<Record<string, any>, React.NamedExoticComponent>;
+
 describe('Badge', () => {
   describe('Utils', () => {
     describe('isFocusableElement', () => {

packages/paste-core/components/badge/src/hooks.tsx

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import {useUIDSeed} from '@twilio-paste/uid-library';
 
-import type {BadgeChildren} from './types';
-
 const DEFAULT_ICON_SIZE = 'sizeIcon10';
 
-export const useResizeChildIcons = (children: BadgeChildren): BadgeChildren => {
+export const useResizeChildIcons = (children: NonNullable<React.ReactNode>): NonNullable<React.ReactNode> => {
   const seed = useUIDSeed();
 
   if (!Array.isArray(children)) {

packages/paste-core/components/badge/src/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import {Box} from '@twilio-paste/box';
 
-import type {BadgeProps, BadgeVariants, BadgeChildren} from './types';
+import type {BadgeProps, BadgeVariants} from './types';
 import {useResizeChildIcons} from './hooks';
 import {badgeFocusableStyles, badgeVariantStyles} from './styles';
 import {getBadgeSpanProps, isFocusableElement} from './utils';
@@ -51,12 +51,7 @@ export const Badge = React.forwardRef<HTMLElement, BadgeProps>(
 Badge.displayName = 'Badge';
 
 Badge.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.arrayOf(PropTypes.string),
-    PropTypes.element,
-    PropTypes.arrayOf(PropTypes.element),
-  ]).isRequired as PropTypes.Validator<BadgeChildren>,
+  children: PropTypes.node.isRequired,
   element: PropTypes.string,
   variant: PropTypes.oneOf(['info', 'default', 'warning', 'error', 'success', 'new'] as BadgeVariants[]).isRequired,
   // @ts-expect-error type unions are a little too much for prop types inferred types to handle

packages/paste-core/components/badge/src/types.ts

@@ -1,12 +1,10 @@
 import type {ButtonProps} from '@twilio-paste/button';
 import type {BoxProps} from '@twilio-paste/box';
 
-export type NamedChild = React.ReactElement<Record<string, any>, React.NamedExoticComponent>;
-export type BadgeChildren = NamedChild | React.ReactText | (React.ReactText | NamedChild)[];
 export type BadgeVariants = 'info' | 'default' | 'warning' | 'error' | 'success' | 'new';
 
 type BadgeBaseProps = Pick<BoxProps, 'element'> & {
-  children: BadgeChildren;
+  children: NonNullable<React.ReactNode>;
   variant: BadgeVariants;
 };
 type BadgeAsSpanProps = React.HTMLAttributes<HTMLSpanElement> & {

packages/paste-website/src/pages/components/badge/index.mdx

@@ -398,7 +398,7 @@ const BadgeExample = () => (
 
 | Prop     | Type                                   | Description                                                        | Default     |
 | -------- | -------------------------------------- | ------------------------------------------------------------------ | ----------- |
-| children | `BadgeChildren`                        |                                                                    | `null`      |
+| children | `NonNullable<React.ReactNode>`         |                                                                    | `null`      |
 | variant  | `BadgeVariants`                        | `default`, `info`, `success`, `warning`, `error`, `new`            | `null`      |
 | as       | `BadgeBaseElements`                    | The HTML tag to use as base. -`span`, `button`, `a`                | `null`      |
 | href?    | `string`                               | A URL to route to. Must use `as="a"` for this prop to work.        | `undefined` |