Add className back to TokenBase (#5420)

* Add className back to TokenBase

* Adding tests and fixing implementation

* Create dirty-wasps-behave.md

---------

Co-authored-by: Marie Lucca <[email protected]>

Author: TylerDixon

.changeset/dirty-wasps-behave.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add className back to TokenBase

packages/react/src/Token/AvatarToken.tsx

@@ -70,6 +70,7 @@ const AvatarToken = forwardRef(({avatarSrc, id, size = defaultTokenSize, classNa
       sx={{
         paddingLeft: get('space.1'),
       }}
+      className={className}
       {...rest}
       ref={forwardedRef}
     />

packages/react/src/Token/IssueLabelToken.tsx

@@ -180,6 +180,7 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => {
       text={text}
       size={size}
       sx={labelStyles}
+      className={className}
       {...(!hasMultipleActionTargets ? interactiveTokenProps : {})}
       {...rest}
       ref={forwardedRef}

packages/react/src/Token/Token.tsx

@@ -136,6 +136,7 @@ const Token = forwardRef((props, forwardedRef) => {
       text={text}
       size={size}
       sx={mergedSx}
+      className={className}
       {...(!hasMultipleActionTargets ? interactiveTokenProps : {})}
       {...rest}
       ref={forwardedRef}

packages/react/src/Token/TokenBase.tsx

@@ -173,6 +173,7 @@ const TokenBase = React.forwardRef<HTMLButtonElement | HTMLAnchorElement | HTMLS
             onRemove()
           }
         }}
+        className={className}
         id={id?.toString()}
         size={size}
         {...rest}

packages/react/src/Token/__tests__/Token.test.tsx

@@ -77,6 +77,13 @@ const testTokenComponent = (Component: React.ComponentType<React.PropsWithChildr
     expect(onRemoveMock).toHaveBeenCalled()
   })
 
+  it('adds className to rendered component', () => {
+    const {getByText} = HTMLRender(<Component text="token" className="testing-class" />)
+    const domNode = getByText('token')
+
+    expect(domNode.parentElement).toHaveClass('testing-class')
+  })
+
   it('should have no axe violations', async () => {
     const {container} = HTMLRender(<Component text="token" />)
     const results = await axe.run(container)