Remove support for sx and Box usage from the UnderlineNav component

.changeset/hot-mirrors-feel.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Update UnderlineNav component to no longer support sx and remove Box usage from it.

packages/react/src/UnderlineNav/UnderlineNav.docs.json

@@ -55,11 +55,6 @@
       "type": "'inset' | 'flush'",
       "defaultValue": "'inset'",
       "description": "`inset` children are offset horizontally from container edges. `flush` children are flush horizontally with container edges"
-    },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
     }
   ],
   "subcomponents": [
@@ -100,11 +95,6 @@
           "name": "as",
           "type": "React.ElementType",
           "defaultValue": "\"a\""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "passthrough": {
@@ -113,4 +103,4 @@
       }
     }
   ]
-}
+}

packages/react/src/UnderlineNav/UnderlineNav.module.css

@@ -0,0 +1,5 @@
+.MenuItemContent {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}

packages/react/src/UnderlineNav/UnderlineNav.tsx

@@ -1,8 +1,5 @@
 import type {MutableRefObject, RefObject} from 'react'
 import React, {useRef, forwardRef, useCallback, useState, useEffect} from 'react'
-import Box from '../Box'
-import type {SxProp} from '../sx'
-import sx from '../sx'
 import {UnderlineNavContext} from './UnderlineNavContext'
 import type {ResizeObserverEntry} from '../hooks/useResizeObserver'
 import {useResizeObserver} from '../hooks/useResizeObserver'
@@ -18,16 +15,15 @@ import {useOnEscapePress} from '../hooks/useOnEscapePress'
 import {useOnOutsideClick} from '../hooks/useOnOutsideClick'
 import {useId} from '../hooks/useId'
 import {ActionList} from '../ActionList'
-import {defaultSxProp} from '../utils/defaultSxProp'
 import CounterLabel from '../CounterLabel'
 import {invariant} from '../utils/invariant'
+import classes from './UnderlineNav.module.css'
 
 export type UnderlineNavProps = {
   children: React.ReactNode
   'aria-label'?: React.AriaAttributes['aria-label']
   as?: React.ElementType
   className?: string
-  sx?: SxProp['sx']
   /**
    * loading state for all counters. It displays loading animation for individual counters (UnderlineNav.Item) until all are resolved. It is needed to prevent multiple layout shift.
    */
@@ -45,11 +41,6 @@ export const MORE_BTN_WIDTH = 86
 // The height is needed to make sure we don't have a layout shift when the more button is the only item in the nav.
 const MORE_BTN_HEIGHT = 45
 
-// Needed this because passing a ref using HTMLULListElement to `Box` causes a type error
-export const NavigationList = styled.ul`
-  ${sx};
-`
-
 export const MoreMenuListItem = styled.li`
   display: flex;
   align-items: center;
@@ -145,7 +136,6 @@ export const UnderlineNav = forwardRef(
     {
       as = 'nav',
       'aria-label': ariaLabel,
-      sx: sxProp = defaultSxProp,
       loadingCounters = false,
       variant = 'inset',
       className,
@@ -316,19 +306,12 @@ export const UnderlineNav = forwardRef(
         }}
       >
         {ariaLabel && <VisuallyHidden as="h2">{`${ariaLabel} navigation`}</VisuallyHidden>}
-        <UnderlineWrapper
-          as={as}
-          aria-label={ariaLabel}
-          className={className}
-          ref={navRef}
-          sx={sxProp}
-          data-variant={variant}
-        >
+        <UnderlineWrapper as={as} aria-label={ariaLabel} className={className} ref={navRef} data-variant={variant}>
           <UnderlineItemList ref={listRef} role="list">
             {listItems}
             {menuItems.length > 0 && (
               <MoreMenuListItem ref={moreMenuRef}>
-                {!onlyMenuVisible && <Box sx={getDividerStyle(theme)}></Box>}
+                {!onlyMenuVisible && <div style={getDividerStyle(theme)}></div>}
                 <Button
                   ref={moreMenuBtnRef}
                   sx={moreBtnStyles}
@@ -337,7 +320,7 @@ export const UnderlineNav = forwardRef(
                   onClick={onAnchorClick}
                   trailingAction={TriangleDownIcon}
                 >
-                  <Box as="span">
+                  <span>
                     {onlyMenuVisible ? (
                       <>
                         <VisuallyHidden as="span">{`${ariaLabel}`}&nbsp;</VisuallyHidden>Menu
@@ -347,7 +330,7 @@ export const UnderlineNav = forwardRef(
                         More<VisuallyHidden as="span">&nbsp;{`${ariaLabel} items`}</VisuallyHidden>
                       </>
                     )}
-                  </Box>
+                  </span>
                 </Button>
                 <ActionList
                   selectionVariant="single"
@@ -398,18 +381,18 @@ export const UnderlineNav = forwardRef(
                         }}
                         {...menuItemProps}
                       >
-                        <Box as="span" sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
+                        <span className={classes.MenuItemContent}>
                           {menuItemChildren}
                           {loadingCounters ? (
                             <LoadingCounter />
                           ) : (
                             counter !== undefined && (
-                              <Box as="span" data-component="counter">
+                              <span data-component="counter">
                                 <CounterLabel>{counter}</CounterLabel>
-                              </Box>
+                              </span>
                             )
                           )}
-                        </Box>
+                        </span>
                       </ActionList.LinkItem>
                     )
                   })}

packages/react/src/UnderlineNav/UnderlineNavItem.module.css

@@ -0,0 +1,5 @@
+.UnderlineNavItem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}

packages/react/src/UnderlineNav/UnderlineNavItem.tsx

@@ -1,13 +1,11 @@
 import type {MutableRefObject, RefObject} from 'react'
 import React, {forwardRef, useRef, useContext} from 'react'
-import Box from '../Box'
-import type {SxProp} from '../sx'
 import type {IconProps} from '@primer/octicons-react'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {UnderlineNavContext} from './UnderlineNavContext'
 import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
-import {defaultSxProp} from '../utils/defaultSxProp'
 import {UnderlineItem} from '../internal/components/UnderlineTabbedInterface'
+import classes from './UnderlineNavItem.module.css'
 
 // adopted from React.AnchorHTMLAttributes
 export type LinkProps = {
@@ -47,22 +45,11 @@ export type UnderlineNavItemProps = {
    * Counter
    */
   counter?: number | string
-} & SxProp &
-  LinkProps
+} & LinkProps
 
 export const UnderlineNavItem = forwardRef(
   (
-    {
-      sx: sxProp = defaultSxProp,
-      as: Component = 'a',
-      href = '#',
-      children,
-      counter,
-      onSelect,
-      'aria-current': ariaCurrent,
-      icon: Icon,
-      ...props
-    },
+    {as: Component = 'a', href = '#', children, counter, onSelect, 'aria-current': ariaCurrent, icon: Icon, ...props},
     forwardedRef,
   ) => {
     const backupRef = useRef<HTMLElement>(null)
@@ -111,7 +98,7 @@ export const UnderlineNavItem = forwardRef(
     )
 
     return (
-      <Box as="li" sx={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
+      <li className={classes.UnderlineNavItem}>
         <UnderlineItem
           ref={ref}
           as={Component}
@@ -123,12 +110,11 @@ export const UnderlineNavItem = forwardRef(
           icon={Icon}
           loadingCounters={loadingCounters}
           iconsVisible={iconsVisible}
-          sx={sxProp}
           {...props}
         >
           {children}
         </UnderlineItem>
-      </Box>
+      </li>
     )
   },
 ) as PolymorphicForwardRefComponent<'a', UnderlineNavItemProps>

packages/react/src/UnderlineNav/styles.ts

@@ -7,7 +7,7 @@ export const getDividerStyle = (theme?: Theme) => ({
   borderLeft: '1px solid',
   width: '1px',
   borderLeftColor: `${theme?.colors.border.muted}`,
-  marginRight: 1,
+  marginRight: '4px',
   height: '24px', // The height of the divider - reference from Figma
 })
 

packages/styled-react/src/index.tsx

@@ -18,8 +18,12 @@ import {
   SegmentedControl as PrimerSegmentedControl,
   type SegmentedControlButtonProps as PrimerSegmentedControlButtonProps,
   type SegmentedControlIconButtonProps as PrimerSegmentedControlIconButtonProps,
+  UnderlineNav as PrimerUnderlineNav,
+  type UnderlineNavProps as PrimerUnderlineNavProps,
+  type UnderlineNavItemProps as PrimerUnderlineNavItemProps,
+  sx,
 } from '@primer/react'
-import React, {forwardRef, type PropsWithChildren} from 'react'
+import React, {type PropsWithChildren, forwardRef} from 'react'
 import type {
   BackgroundProps,
   BorderProps,
@@ -32,6 +36,8 @@ import type {
   SpaceProps,
   TypographyProps,
 } from 'styled-system'
+import styled from 'styled-components'
+import type {ForwardRefComponent} from './polymorphic'
 import {LinkButton, type LinkButtonProps} from './components/LinkButton'
 
 type StyledProps = SxProp &
@@ -107,7 +113,37 @@ const ToggleSwitch = forwardRef<HTMLButtonElement, ToggleSwitchProps>(function T
   return <Box as={PrimerToggleSwitch} ref={ref} {...props} />
 })
 
-export {LinkButton, type LinkButtonProps, Checkbox, CounterLabel, SegmentedControl, StateLabel, SubNav, ToggleSwitch}
+type UnderlineNavProps = PrimerUnderlineNavProps & SxProp
+
+const UnderlineNavImpl = forwardRef<HTMLElement, UnderlineNavProps>(function UnderlineNav(props, ref) {
+  return <Box as={PrimerUnderlineNav} ref={ref} {...props} />
+})
+
+type UnderlineNavItemProps = PrimerUnderlineNavItemProps & SxProp
+
+const UnderlineNavItem: ForwardRefComponent<'a', UnderlineNavItemProps> = styled(
+  PrimerUnderlineNav.Item,
+).withConfig<UnderlineNavItemProps>({
+  shouldForwardProp: prop => prop !== 'sx',
+})`
+  ${sx}
+`
+
+const UnderlineNav = Object.assign(UnderlineNavImpl, {
+  Item: UnderlineNavItem,
+})
+
+export {
+  LinkButton,
+  type LinkButtonProps,
+  Checkbox,
+  CounterLabel,
+  SegmentedControl,
+  StateLabel,
+  SubNav,
+  ToggleSwitch,
+  UnderlineNav,
+}
 
 export {
   ActionList,
@@ -145,7 +181,6 @@ export {
   type TokenProps,
   Tooltip,
   Truncate,
-  UnderlineNav,
 
   // styled-components components or types
   Box,