Simplify arguments for toggle component helper function (#5861)

Author: jamieshark

.changeset/old-lemons-film.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Changes argument signature for toggleSxComponent to simplify

packages/react/src/FormControl/FormControlCaption.tsx

@@ -13,7 +13,7 @@ type FormControlCaptionProps = React.PropsWithChildren<
   } & SxProp
 >
 
-const Caption = toggleSxComponent({}, Text) as React.ComponentType<FormControlCaptionProps>
+const Caption = toggleSxComponent(Text) as React.ComponentType<FormControlCaptionProps>
 
 function FormControlCaption({id, children, sx, className}: FormControlCaptionProps) {
   const {captionId, disabled} = useFormControlContext()

packages/react/src/internal/components/InputLabel.tsx

@@ -26,7 +26,7 @@ export type LegendOrSpanProps = BaseProps & {
 
 type Props = React.PropsWithChildren<LabelProps | LegendOrSpanProps>
 
-const Label = toggleSxComponent({}, 'label') as React.ComponentType<Props>
+const Label = toggleSxComponent('label') as React.ComponentType<Props>
 
 function InputLabel({
   children,

packages/react/src/internal/components/UnderlineTabbedInterface.tsx

@@ -22,7 +22,7 @@ type UnderlineWrapperProps = {
   ref?: React.Ref<unknown>
 } & SxProp
 
-const UnderlineWrapperComponent = toggleSxComponent({}, 'div') as React.ComponentType<
+const UnderlineWrapperComponent = toggleSxComponent('div') as React.ComponentType<
   PropsWithChildren<UnderlineWrapperProps>
 >
 
@@ -99,7 +99,7 @@ export type UnderlineItemProps = {
   ref?: React.Ref<unknown>
 } & SxProp
 
-const UnderlineComponent = toggleSxComponent({}, 'a') as React.ComponentType<PropsWithChildren<UnderlineItemProps>>
+const UnderlineComponent = toggleSxComponent('a') as React.ComponentType<PropsWithChildren<UnderlineItemProps>>
 
 export const UnderlineItem = forwardRef(
   (

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

@@ -6,30 +6,30 @@ const customSx = {color: 'red', p: 2}
 
 describe('toggleSxComponent', () => {
   test('renders the plain component when no sx', () => {
-    const TestComponent = toggleSxComponent({}, 'span')
+    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'}} />)
+    const TestComponent = toggleSxComponent('div')
+    const {container} = render(<TestComponent as="button" sx={customSx} />)
 
     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 Label = toggleSxComponent('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" />)
+    const TestComponent = toggleSxComponent('div')
+    const {container} = render(<TestComponent as="button" sx={customSx} data-foo="bar" />)
 
     expect(container.firstChild).toBeInstanceOf(HTMLButtonElement)
     expect(container.firstChild).toHaveStyle('color: red')

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

@@ -1,7 +1,6 @@
 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
@@ -17,12 +16,11 @@ type CSSModulesProps = {
  * @param defaultAs - the default component to use when `as` is not provided
  */
 export function toggleSxComponent<T, P extends CSSModulesProps>(
-  sx: BetterSystemStyleObject | undefined,
   // 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},
+    {as: BaseComponent = defaultAs, sx: sxProp = defaultSxProp, ...rest},
     ref,
   ) {
     if (sxProp !== defaultSxProp) {