Adds util function to account for SX dependent components (#5821)

Author: jamieshark

.changeset/spotty-streets-flash.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Adds util function to swap out SX enabled components.

packages/react/src/internal/utils/__tests__/toggleSxComponent.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import {render} from '@testing-library/react'
+import {toggleSxComponent} from '../toggleSxComponent'
+
+const customSx = {color: 'red', p: 2}
+
+describe('toggleSxComponent', () => {
+  test('renders the plain component when no sx', () => {
+    const TestComponent = toggleSxComponent({}, 'span')
+    const {container} = render(<TestComponent />)
+    expect(container.firstChild).toBeInstanceOf(HTMLSpanElement)
+  })
+
+  test('renders Box with `as` if `sx` is provided', () => {
+    const TestComponent = toggleSxComponent(customSx, 'div')
+    const {container} = render(<TestComponent as="button" sx={{color: 'red'}} />)
+
+    expect(container.firstChild).toBeInstanceOf(HTMLButtonElement)
+    expect(container.firstChild).toHaveStyle('color: red')
+  })
+
+  test('swaps out component if `sx` is not the default', () => {
+    const Label = toggleSxComponent(customSx, 'label') as React.ComponentType<{htmlFor: string}>
+    const {container} = render(<Label htmlFor="bloop" />)
+
+    expect(container.firstChild).toBeInstanceOf(HTMLLabelElement)
+    expect(container.firstChild).toHaveAttribute('for', 'bloop')
+  })
+
+  test('passes down other props', () => {
+    const TestComponent = toggleSxComponent(customSx, 'div')
+    const {container} = render(<TestComponent as="button" sx={{color: 'red'}} data-foo="bar" />)
+
+    expect(container.firstChild).toBeInstanceOf(HTMLButtonElement)
+    expect(container.firstChild).toHaveStyle('color: red')
+    expect(container.firstChild).toHaveAttribute('data-foo', 'bar')
+  })
+})

packages/react/src/internal/utils/toggleSxComponent.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import Box from '../../Box'
+import {defaultSxProp} from '../../utils/defaultSxProp'
+import type {BetterSystemStyleObject} from '../../sx'
+
+type CSSModulesProps = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  as?: string | React.ComponentType<any>
+  sx?: React.CSSProperties
+}
+
+/**
+ * Utility to toggle rendering a Box component that receives sx props
+ * or a "plain" component based on the provided `as` prop. Other props will be passed through to an element or component created with the `as` prop.
+ *
+ * @param sx - the sx prop to check against the default sx prop
+ * @param defaultAs - the default component to use when `as` is not provided
+ */
+export function toggleSxComponent<T, P extends CSSModulesProps>(
+  sx: BetterSystemStyleObject,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  defaultAs: string | React.ComponentType<any>,
+) {
+  const Wrapper = React.forwardRef<T, P>(function Wrapper(
+    {as: BaseComponent = defaultAs, sx: sxProp = sx, ...rest},
+    ref,
+  ) {
+    if (sxProp !== defaultSxProp) {
+      return <Box as={BaseComponent} {...rest} sx={sxProp} ref={ref} />
+    }
+    return <BaseComponent {...rest} ref={ref} />
+  })
+
+  return Wrapper
+}