refactor(SubNav): Remove sx support from SubNav component (#6602)

Co-authored-by: Josh Black <[email protected]>
Co-authored-by: Copilot <[email protected]>

Author: 3 people

.changeset/proud-chairs-study.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": major
+---
+
+Remove sx support from SubNav component

e2e/components/SubNav.test.ts

@@ -21,24 +21,6 @@ test.describe('SubNav', () => {
     }
   })
 
-  test.describe('Dev: With Sx', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-subnav-dev--with-sx',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`SubNav.Dev.WithSx.${theme}.png`)
-        })
-      })
-    }
-  })
-
   test.describe('Dev: With CSS', () => {
     for (const theme of themes) {
       test.describe(theme, () => {
@@ -56,22 +38,4 @@ test.describe('SubNav', () => {
       })
     }
   })
-
-  test.describe('Dev: With Sx and CSS', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-subnav-dev--with-sx-and-css',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`SubNav.Dev.WithSxAndCSS.${theme}.png`)
-        })
-      })
-    }
-  })
 })

packages/react/src/SubNav/SubNav.dev.stories.tsx

@@ -27,48 +27,3 @@ export const WithCss = () => (
     </SubNav.Links>
   </SubNav>
 )
-
-export const WithSx = () => (
-  <SubNav aria-label="Main" sx={{p: 1, display: 'flex', border: '2px solid', borderColor: 'border.default'}}>
-    <SubNav.Links sx={{m: 2}}>
-      <SubNav.Link
-        href="#home"
-        selected
-        sx={{color: 'accent.fg', fontWeight: 'bold', '&:is([data-selected])': {backgroundColor: 'danger.fg'}}}
-      >
-        Home
-      </SubNav.Link>
-      <SubNav.Link href="#documentation" sx={{color: 'accent.fg', fontWeight: 'bold'}}>
-        Documentation
-      </SubNav.Link>
-      <SubNav.Link href="#support" sx={{color: 'accent.fg', fontWeight: 'bold'}}>
-        Support
-      </SubNav.Link>
-    </SubNav.Links>
-  </SubNav>
-)
-
-export const WithSxAndCSS = () => (
-  <SubNav
-    aria-label="Main"
-    sx={{p: 1, display: 'flex', border: '2px solid', borderColor: 'border.default'}}
-    className={styles.SubNavDev}
-  >
-    <SubNav.Links sx={{m: 2}} className={styles.SubNavLinksDev}>
-      <SubNav.Link
-        href="#home"
-        selected
-        className={styles.SubNavLinkDev}
-        sx={{'&:is([data-selected])': {backgroundColor: 'danger.fg'}}}
-      >
-        Home
-      </SubNav.Link>
-      <SubNav.Link href="#documentation" className={styles.SubNavLinkDev}>
-        Documentation
-      </SubNav.Link>
-      <SubNav.Link href="#support" sx={{color: 'accent.fg', fontWeight: 'bold'}} className={styles.SubNavLinkDev}>
-        Support
-      </SubNav.Link>
-    </SubNav.Links>
-  </SubNav>
-)

packages/react/src/SubNav/SubNav.tsx

@@ -1,75 +1,60 @@
 import {clsx} from 'clsx'
 import type {To} from 'history'
 import React from 'react'
-import type {ComponentProps} from '../utils/types'
 
 import styles from './SubNav.module.css'
-import type {SxProp} from '../sx'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
-type StyledSubNavProps = React.ComponentProps<'nav'> & {
+export type SubNavProps = React.ComponentProps<'nav'> & {
   actions?: React.ReactNode
   align?: 'right'
   full?: boolean
   label?: string
-} & SxProp
-type StyledSubNavLinksProps = React.ComponentProps<'div'> & SxProp
-type StyledSubNavLinkProps = React.ComponentProps<'a'> & {to?: To; selected?: boolean} & SxProp
+}
+export type SubNavLinksProps = React.ComponentProps<'div'>
+export type SubNavLinkProps = React.ComponentProps<'a'> & {to?: To; selected?: boolean}
 
-const SubNav = React.forwardRef<HTMLElement, StyledSubNavProps>(function SubNav(
+const SubNav = React.forwardRef<HTMLElement, SubNavProps>(function SubNav(
   {actions, className, children, label, ...rest},
   forwardRef,
 ) {
   return (
-    <BoxWithFallback
-      as="nav"
-      ref={forwardRef}
-      className={clsx(className, 'SubNav', styles.SubNav)}
-      aria-label={label}
-      {...rest}
-    >
+    <nav ref={forwardRef} className={clsx(className, 'SubNav', styles.SubNav)} aria-label={label} {...rest}>
       <div className={clsx('SubNav-body', styles.Body)}>{children}</div>
       {actions && <div className={clsx('SubNav-actions', styles.Actions)}>{actions}</div>}
-    </BoxWithFallback>
+    </nav>
   )
 })
 SubNav.displayName = 'SubNav'
 
 // SubNav.Links
 
-const SubNavLinks = React.forwardRef<HTMLDivElement, StyledSubNavLinksProps>(
-  ({children, className, ...rest}, forwardRef) => {
-    return (
-      <BoxWithFallback ref={forwardRef} className={clsx(className, styles.Links)} {...rest}>
-        {children}
-      </BoxWithFallback>
-    )
-  },
-)
+const SubNavLinks = React.forwardRef<HTMLDivElement, SubNavLinksProps>(({children, className, ...rest}, forwardRef) => {
+  return (
+    <div ref={forwardRef} className={clsx(className, styles.Links)} {...rest}>
+      {children}
+    </div>
+  )
+})
 SubNavLinks.displayName = 'SubNav.Links'
 
 // SubNav.Link
 
-const SubNavLink = React.forwardRef<HTMLAnchorElement, StyledSubNavLinkProps>(
+const SubNavLink = React.forwardRef<HTMLAnchorElement, SubNavLinkProps>(
   ({children, className, ...rest}, forwardRef) => {
     return (
-      <BoxWithFallback
-        as="a"
+      <a
         ref={forwardRef}
         className={clsx(className, styles.Link)}
         data-selected={rest.selected}
         aria-current={rest.selected}
         {...rest}
       >
         {children}
-      </BoxWithFallback>
+      </a>
     )
   },
 )
 
 SubNavLink.displayName = 'SubNav.Link'
 
-export type SubNavProps = ComponentProps<typeof SubNav>
-export type SubNavLinksProps = ComponentProps<typeof SubNavLinks>
-export type SubNavLinkProps = ComponentProps<typeof SubNavLink>
 export default Object.assign(SubNav, {Link: SubNavLink, Links: SubNavLinks})