fix: simplify badge children type

twilio-labs · Jan 25, 2022 · 59e8e78 · 59e8e78
1 parent c25e29a
commit 59e8e78
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 14 deletions.
diff --git a/packages/paste-core/components/badge/src/hooks.tsx b/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: React.ReactNode): React.ReactNode => {
   const seed = useUIDSeed();
 
   if (!Array.isArray(children)) {

diff --git a/packages/paste-core/components/badge/src/index.tsx b/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

diff --git a/packages/paste-core/components/badge/src/types.ts b/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> & {

diff --git a/packages/paste-website/src/pages/components/badge/index.mdx b/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` |