CounterLabel should forward ref and dom props (#3291)

* add passthrough props to coutnerlabel

* changset

.changeset/twenty-tips-attend.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Counter label forwards refs and dom props

src/CounterLabel/CounterLabel.tsx

@@ -1,47 +1,49 @@
-import React from 'react'
+import React, {HTMLAttributes, forwardRef} from 'react'
 import Box from '../Box'
 import {BetterSystemStyleObject, SxProp, merge} from '../sx'
 import VisuallyHidden from '../_VisuallyHidden'
+import {defaultSxProp} from '../utils/defaultSxProp'
 
-export type CounterLabelProps = {
-  scheme?: 'primary' | 'secondary'
-} & SxProp
+export type CounterLabelProps = React.PropsWithChildren<
+  HTMLAttributes<HTMLSpanElement> & {
+    scheme?: 'primary' | 'secondary'
+  } & SxProp
+>
 
-const CounterLabel: React.FC<React.PropsWithChildren<CounterLabelProps>> = ({
-  scheme = 'secondary',
-  sx = {},
-  children,
-  ...props
-}) => {
-  return (
-    <>
-      <Box
-        as="span"
-        aria-hidden="true"
-        sx={merge<BetterSystemStyleObject>(
-          {
-            display: 'inline-block',
-            padding: '2px 5px',
-            fontSize: 0,
-            fontWeight: 'bold',
-            lineHeight: 'condensedUltra',
-            borderRadius: '20px',
-            backgroundColor: scheme === 'primary' ? 'neutral.emphasis' : 'neutral.muted',
-            color: scheme === 'primary' ? 'fg.onEmphasis' : 'fg.default',
-            '&:empty': {
-              display: 'none',
+const CounterLabel = forwardRef<HTMLSpanElement, CounterLabelProps>(
+  ({scheme = 'secondary', sx = defaultSxProp, children, ...props}, forwardedRef) => {
+    return (
+      <>
+        <Box
+          aria-hidden="true"
+          sx={merge<BetterSystemStyleObject>(
+            {
+              display: 'inline-block',
+              padding: '2px 5px',
+              fontSize: 0,
+              fontWeight: 'bold',
+              lineHeight: 'condensedUltra',
+              borderRadius: '20px',
+              backgroundColor: scheme === 'primary' ? 'neutral.emphasis' : 'neutral.muted',
+              color: scheme === 'primary' ? 'fg.onEmphasis' : 'fg.default',
+              '&:empty': {
+                display: 'none',
+              },
             },
-          },
-          sx,
-        )}
-        {...props}
-      >
-        {children}
-      </Box>
-      <VisuallyHidden>&nbsp;({children})</VisuallyHidden>
-    </>
-  )
-}
+            sx,
+          )}
+          {...props}
+          as="span"
+          // @ts-expect-error Box is expecting a divelement, but this component forces a span element
+          ref={forwardedRef}
+        >
+          {children}
+        </Box>
+        <VisuallyHidden>&nbsp;({children})</VisuallyHidden>
+      </>
+    )
+  },
+)
 
 CounterLabel.displayName = 'CounterLabel'
 

src/CounterLabel/CounterLabel.types.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useRef} from 'react'
 import CounterLabel from '../CounterLabel'
 
 export function shouldAcceptCallWithNoProps() {
@@ -9,3 +9,15 @@ export function shouldNotAcceptSystemProps() {
   // @ts-expect-error system props should not be accepted
   return <CounterLabel backgroundColor="whitesmoke" />
 }
+
+export function showAcceptARef() {
+  function Component() {
+    const ref = useRef<HTMLSpanElement>(null)
+    return <CounterLabel ref={ref} />
+  }
+  return <Component />
+}
+
+export function shouldPassThroughSpanProps() {
+  return <CounterLabel data-testid="some value" aria-label="some label" />
+}