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]>
primer · Dec 12, 2024 · f2d188f · f2d188f
1 parent b2e1fa5
commit f2d188f
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 0 deletions.
diff --git a/.changeset/dirty-wasps-behave.md b/.changeset/dirty-wasps-behave.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add className back to TokenBase
diff --git a/packages/react/src/Token/AvatarToken.tsx b/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}
     />

diff --git a/packages/react/src/Token/IssueLabelToken.tsx b/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}

diff --git a/packages/react/src/Token/Token.tsx b/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}

diff --git a/packages/react/src/Token/TokenBase.tsx b/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}

diff --git a/packages/react/src/Token/__tests__/Token.test.tsx b/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)