Allow React.ReactNode as Token content (#2954)

* Allow `React.ReactNode` as `Token` content * Create .changeset/strong-doors-begin.md * Update snapshots
primer · Mar 1, 2023 · 041dd15 · 041dd15
1 parent eff43b0
commit 041dd15
Show file tree

Hide file tree

Showing 8 changed files with 2,001 additions and 849 deletions.
diff --git a/.changeset/strong-doors-begin.md b/.changeset/strong-doors-begin.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Allow `React.ReactNode` as `Token` content
diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/examples/nextjs/package-lock.json b/examples/nextjs/package-lock.json
diff --git a/src/Token/Token.tsx b/src/Token/Token.tsx
@@ -6,6 +6,7 @@ import TokenBase, {defaultTokenSize, isTokenInteractive, TokenBaseProps} from '.
 import RemoveTokenButton from './_RemoveTokenButton'
 import TokenTextContainer from './_TokenTextContainer'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
+import VisuallyHidden from '../_VisuallyHidden'
 
 // Omitting onResize and onResizeCapture because seems like React 18 types includes these menthod in the expansion but React 17 doesn't.
 // TODO: This is a temporary solution until we figure out why these methods are causing type errors.
@@ -94,6 +95,7 @@ const Token = forwardRef((props, forwardedRef) => {
         </LeadingVisualContainer>
       ) : null}
       <TokenTextContainer {...(hasMultipleActionTargets ? interactiveTokenProps : {})}>{text}</TokenTextContainer>
+      {onRemove && <VisuallyHidden> (press backspace or delete to remove)</VisuallyHidden>}
       {!hideRemoveButton && onRemove ? (
         <RemoveTokenButton
           borderOffset={tokenBorderWidthPx}

diff --git a/src/Token/TokenBase.tsx b/src/Token/TokenBase.tsx
@@ -40,7 +40,7 @@ export interface TokenBaseProps
   /**
    * The text label inside the token
    */
-  text: string
+  text: React.ReactNode
   /**
    * A unique identifier that can be associated with the token
    */
@@ -126,25 +126,22 @@ const StyledTokenBase = styled.span<
   ${sx}
 `
 
-const TokenBase = React.forwardRef(
-  ({text, onRemove, onKeyDown, id, size = defaultTokenSize, ...rest}, forwardedRef) => {
-    return (
-      <StyledTokenBase
-        onKeyDown={(event: KeyboardEvent<HTMLSpanElement & HTMLAnchorElement & HTMLButtonElement>) => {
-          onKeyDown && onKeyDown(event)
+const TokenBase = React.forwardRef(({onRemove, onKeyDown, id, size = defaultTokenSize, ...rest}, forwardedRef) => {
+  return (
+    <StyledTokenBase
+      onKeyDown={(event: KeyboardEvent<HTMLSpanElement & HTMLAnchorElement & HTMLButtonElement>) => {
+        onKeyDown && onKeyDown(event)
 
-          if ((event.key === 'Backspace' || event.key === 'Delete') && onRemove) {
-            onRemove()
-          }
-        }}
-        aria-label={onRemove ? `${text}, press backspace or delete to remove` : undefined}
-        id={id?.toString()}
-        size={size}
-        {...rest}
-        ref={forwardedRef}
-      />
-    )
-  },
-) as PolymorphicForwardRefComponent<'span' | 'a' | 'button', TokenBaseProps & SxProp>
+        if ((event.key === 'Backspace' || event.key === 'Delete') && onRemove) {
+          onRemove()
+        }
+      }}
+      id={id?.toString()}
+      size={size}
+      {...rest}
+      ref={forwardedRef}
+    />
+  )
+}) as PolymorphicForwardRefComponent<'span' | 'a' | 'button', TokenBaseProps & SxProp>
 
 export default TokenBase
diff --git a/src/__tests__/TextInputWithTokens.test.tsx b/src/__tests__/TextInputWithTokens.test.tsx
@@ -495,7 +495,7 @@ describe('TextInputWithTokens', () => {
       jest.runAllTimers()
     })
 
-    expect(document.activeElement?.textContent).toBe(mockTokens[1].text)
+    expect(document.activeElement?.textContent).toContain(mockTokens[1].text)
 
     jest.useRealTimers()
   })