Skip to content

Commit

Permalink
Allow React.ReactNode as Token content (#2954)
Browse files Browse the repository at this point in the history
* Allow `React.ReactNode` as `Token` content

* Create .changeset/strong-doors-begin.md

* Update snapshots
  • Loading branch information
iansan5653 authored Mar 1, 2023
1 parent eff43b0 commit 041dd15
Show file tree
Hide file tree
Showing 8 changed files with 2,001 additions and 849 deletions.
5 changes: 5 additions & 0 deletions .changeset/strong-doors-begin.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": patch
---

Allow `React.ReactNode` as `Token` content
173 changes: 34 additions & 139 deletions docs/package-lock.json

Large diffs are not rendered by default.

280 changes: 167 additions & 113 deletions examples/nextjs/package-lock.json

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions src/Token/Token.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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}
Expand Down
37 changes: 17 additions & 20 deletions src/Token/TokenBase.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down Expand Up @@ -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
2 changes: 1 addition & 1 deletion src/__tests__/TextInputWithTokens.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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()
})
Expand Down
Loading

0 comments on commit 041dd15

Please sign in to comment.