feat(TabNav): remove support for sx prop

.changeset/lucky-wasps-nail.md

@@ -0,0 +1,6 @@
+---
+"@primer/react": major
+"@primer/styled-react": patch
+---
+
+Remove support for `sx` from the `TabNav` component

packages/react/src/TabNav/TabNav.tsx

@@ -2,16 +2,14 @@ import {clsx} from 'clsx'
 import type {To} from 'history'
 import React, {useRef, useState} from 'react'
 import {FocusKeys, useFocusZone} from '../hooks/useFocusZone'
-import type {SxProp} from '../sx'
-import type {ComponentProps} from '../utils/types'
+import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 
 import styles from './TabNav.module.css'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 /**
  * @deprecated
  */
-export type TabNavProps = ComponentProps<typeof BoxWithFallback>
+export type TabNavProps = React.HTMLProps<HTMLDivElement>
 
 /**
  * @deprecated
@@ -53,13 +51,13 @@ function TabNav({children, 'aria-label': ariaLabel, ...rest}: TabNavProps) {
  )
 
  return (
- <BoxWithFallback {...rest} ref={navRef as React.RefObject<HTMLDivElement>}>
+ <div {...rest} ref={navRef as React.RefObject<HTMLDivElement>}>
  <nav aria-label={ariaLabel} className={styles.TabNavNav}>
  <div role="tablist" className={styles.TabNavTabList}>
  {children}
  </div>
  </nav>
- </BoxWithFallback>
+ </div>
  )
 }
 
@@ -73,18 +71,17 @@ export type TabNavLinkProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLA
  className?: string
  as?: React.ElementType | 'a' | 'button' | 'div'
  disabled?: boolean
-} & SxProp
+}
 
 /**
  * @deprecated
  */
-const TabNavLink = React.forwardRef<HTMLAnchorElement, TabNavLinkProps>(function TabNavLink(
- {selected, className, as = 'a', ...rest}: TabNavLinkProps,
+const TabNavLink = React.forwardRef(function TabNavLink(
+ {selected, className, as: Component = 'a', ...rest}: TabNavLinkProps,
  ref,
 ) {
  return (
- <BoxWithFallback
- as={as}
+ <Component
  ref={ref}
  role="tab"
  tabIndex={-1}
@@ -93,7 +90,7 @@ const TabNavLink = React.forwardRef<HTMLAnchorElement, TabNavLinkProps>(function
  {...rest}
  />
  )
-})
+}) as PolymorphicForwardRefComponent<'a', TabNavLinkProps>
 
 TabNavLink.displayName = 'TabNav.Link'
 

packages/styled-react/src/__tests__/primer-react-deprecated.browser.test.tsx

@@ -1,6 +1,7 @@
 import {render, screen} from '@testing-library/react'
 import {describe, expect, test} from 'vitest'
 import {Dialog, Octicon, TabNav, Tooltip} from '../deprecated'
+import {Button} from '../index'
 
 describe('@primer/react/deprecated', () => {
  test('Dialog supports `sx` prop', () => {
@@ -19,8 +20,10 @@ describe('@primer/react/deprecated', () => {
  })
 
  test('TabNav.Link supports `sx` prop', () => {
- render(<TabNav.Link data-testid="component" sx={{background: 'red'}} />)
+ render(<TabNav.Link data-testid="component" sx={{background: 'red'}} as={Button} />)
  expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+ expect(window.getComputedStyle(screen.getByRole('tab')).backgroundColor).toBe('rgb(255, 0, 0)')
+ expect(screen.getByRole('tab').tagName).toBe('BUTTON')
  })
 
  test('Tooltip supports `sx` prop', () => {

packages/styled-react/src/components/TabNav.tsx

@@ -0,0 +1,32 @@
+import {TabNav as PrimerTabNav} from '@primer/react/deprecated'
+import type {TabNavProps as PrimerTabNavProps, TabNavLinkProps as PrimerTabNavLinkProps} from '@primer/react/deprecated'
+import {sx, type SxProp} from '../sx'
+import styled from 'styled-components'
+import {type ForwardRefComponent} from '../polymorphic'
+
+type TabNavProps = PrimerTabNavProps & SxProp
+type TabNavLinkProps = PrimerTabNavLinkProps & SxProp
+
+const StyledTabNav = styled(PrimerTabNav).withConfig({
+ shouldForwardProp: prop => (prop as keyof TabNavProps) !== 'sx',
+})<TabNavProps>`
+ ${sx}
+`
+
+// @ts-ignore forwardedAs is valid here but I don't know how to fix the typescript error
+const TabNavImpl = ({as, ...props}: TabNavProps) => <StyledTabNav forwardedAs={as} {...props} />
+
+const StyledTabNavLink: ForwardRefComponent<'a', TabNavLinkProps> = styled(PrimerTabNav.Link).withConfig({
+ shouldForwardProp: prop => (prop as keyof TabNavLinkProps) !== 'sx',
+})<TabNavLinkProps>`
+ ${sx}
+`
+
+// @ts-ignore forwardedAs is valid here but I don't know how to fix the typescript error
+const TabNavLink = ({as, ...props}: TabNavLinkProps) => <StyledTabNavLink forwardedAs={as} {...props} />
+
+const TabNav = Object.assign(TabNavImpl, {
+ Link: TabNavLink,
+})
+
+export {TabNav, type TabNavProps, type TabNavLinkProps}

packages/styled-react/src/deprecated.tsx

@@ -1 +1,2 @@
-export {Dialog, Octicon, TabNav, Tooltip, type TooltipProps} from '@primer/react/deprecated'
+export {TabNav, type TabNavProps, type TabNavLinkProps} from './components/TabNav'
+export {Dialog, Octicon, Tooltip, type TooltipProps} from '@primer/react/deprecated'