Remove sx from UnderlinePanels (#6874)

Co-authored-by: Marie Lucca <francinelucca@github.com>
Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com>

Author: pksjce

.changeset/chilly-lemons-promise.md

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

packages/react/src/UnderlineNav/UnderlineNav.tsx

@@ -1,4 +1,4 @@
-import type {MutableRefObject, RefObject} from 'react'
+import type {RefObject} from 'react'
 import React, {useRef, forwardRef, useCallback, useState, useEffect} from 'react'
 import {UnderlineNavContext} from './UnderlineNavContext'
 import type {ResizeObserverEntry} from '../hooks/useResizeObserver'
@@ -144,7 +144,7 @@ export const UnderlineNav = forwardRef(
     forwardedRef,
   ) => {
     const backupRef = useRef<HTMLElement>(null)
-    const navRef = (forwardedRef ?? backupRef) as MutableRefObject<HTMLElement>
+    const navRef = (forwardedRef ?? backupRef) as RefObject<HTMLElement>
     const listRef = useRef<HTMLUListElement>(null)
     const moreMenuRef = useRef<HTMLLIElement>(null)
     const moreMenuBtnRef = useRef<HTMLButtonElement>(null)
@@ -205,7 +205,7 @@ export const UnderlineNav = forwardRef(
       const widthToFitIntoList = getItemsWidth(prospectiveListItem.props.children)
       // Check if there is any empty space on the right side of the list
       const availableSpace =
-        navRef.current.getBoundingClientRect().width - (listRef.current?.getBoundingClientRect().width ?? 0)
+        (navRef.current?.getBoundingClientRect().width ?? 0) - (listRef.current?.getBoundingClientRect().width ?? 0)
 
       // Calculate how many items need to be pulled in to the menu to make room for the selected menu item
       // I.e. if we need to pull 2 items in (index 0 and index 1), breakpoint (index) will return 1.

packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx

@@ -11,21 +11,14 @@ import React, {
 import {TabContainerElement} from '@github/tab-container-element'
 import type {IconProps} from '@primer/octicons-react'
 import {createComponent} from '../../utils/create-component'
-import {
-  UnderlineItemList,
-  UnderlineWrapper,
-  UnderlineItem,
-  type UnderlineItemProps,
-} from '../../internal/components/UnderlineTabbedInterface'
-import {type BoxProps} from '../../Box'
+import {UnderlineItemList, UnderlineWrapper, UnderlineItem} from '../../internal/components/UnderlineTabbedInterface'
 import {useId} from '../../hooks'
 import {invariant} from '../../utils/invariant'
 import {type SxProp} from '../../sx'
 import {useResizeObserver, type ResizeObserverEntry} from '../../hooks/useResizeObserver'
 import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect'
 import classes from './UnderlinePanels.module.css'
 import {clsx} from 'clsx'
-import {BoxWithFallback} from '../../internal/components/BoxWithFallback'
 
 export type UnderlinePanelsProps = {
   /**
@@ -74,7 +67,7 @@ export type TabProps = PropsWithChildren<{
 }> &
   SxProp
 
-export type PanelProps = Omit<BoxProps, 'as'>
+export type PanelProps = React.HTMLAttributes<HTMLDivElement>
 
 const TabContainerComponent = createComponent(TabContainerElement, 'tab-container')
 
@@ -104,23 +97,44 @@ const UnderlinePanels: FC<UnderlinePanelsProps> = ({
     let panelIndex = 0
 
     const childrenWithProps = Children.map(children, child => {
-      if (isValidElement<UnderlineItemProps>(child) && child.type === Tab) {
+      if (
+        isValidElement(child) &&
+        (typeof child.type === 'function' || typeof child.type === 'object') &&
+        'displayName' in child.type &&
+        child.type.displayName === 'UnderlinePanels.Tab'
+      ) {
         return cloneElement(child, {id: `${parentId}-tab-${tabIndex++}`, loadingCounters, iconsVisible})
       }
 
-      if (isValidElement<PanelProps>(child) && child.type === Panel) {
-        return cloneElement(child, {'aria-labelledby': `${parentId}-tab-${panelIndex++}`})
+      if (
+        isValidElement(child) &&
+        (typeof child.type === 'function' || typeof child.type === 'object') &&
+        'displayName' in child.type &&
+        child.type.displayName === 'UnderlinePanels.Panel'
+      ) {
+        const childPanel = child as React.ReactElement<PanelProps>
+        return cloneElement(childPanel, {'aria-labelledby': `${parentId}-tab-${panelIndex++}`})
       }
       return child
     })
 
     const newTabs = Children.toArray(childrenWithProps).filter(child => {
-      return isValidElement(child) && child.type === Tab
+      return (
+        isValidElement(child) &&
+        (typeof child.type === 'function' || typeof child.type === 'object') &&
+        'displayName' in child.type &&
+        child.type.displayName === 'UnderlinePanels.Tab'
+      )
     })
 
-    const newTabPanels = Children.toArray(childrenWithProps).filter(
-      child => isValidElement(child) && child.type === Panel,
-    )
+    const newTabPanels = Children.toArray(childrenWithProps).filter(child => {
+      return (
+        isValidElement(child) &&
+        (typeof child.type === 'function' || typeof child.type === 'object') &&
+        'displayName' in child.type &&
+        child.type.displayName === 'UnderlinePanels.Panel'
+      )
+    })
 
     setTabs(newTabs)
     setTabPanels(newTabPanels)
@@ -221,8 +235,12 @@ const Tab: FC<TabProps> = ({'aria-selected': ariaSelected, onSelect, ...props})
 
 Tab.displayName = 'UnderlinePanels.Tab'
 
-const Panel: FC<PanelProps> = props => {
-  return <BoxWithFallback as="div" role="tabpanel" {...props} />
+const Panel: FC<PanelProps> = ({children, ...rest}) => {
+  return (
+    <div role="tabpanel" {...rest}>
+      {children}
+    </div>
+  )
 }
 
 Panel.displayName = 'UnderlinePanels.Panel'

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

@@ -1,36 +1,37 @@
 // Used for UnderlineNav and UnderlinePanels components
 
-import type React from 'react'
-import {forwardRef, type FC, type PropsWithChildren} from 'react'
+import React from 'react'
+import {type ForwardedRef, forwardRef, type FC, type PropsWithChildren, type ElementType} from 'react'
 import {isElement} from 'react-is'
 import type {IconProps} from '@primer/octicons-react'
 import CounterLabel from '../../CounterLabel'
-import {type SxProp} from '../../sx'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../../utils/polymorphic'
 
 import classes from './UnderlineTabbedInterface.module.css'
 import {clsx} from 'clsx'
-import {BoxWithFallback} from './BoxWithFallback'
 
 // The gap between the list items. It is a constant because the gap is used to calculate the possible number of items that can fit in the container.
 export const GAP = 8
 
-type UnderlineWrapperProps = {
+type UnderlineWrapperProps<As extends React.ElementType> = {
   slot?: string
-  as?: React.ElementType
+  as?: As
   className?: string
-  ref?: React.Ref<unknown>
-} & SxProp
+  ref?: React.Ref<HTMLElement>
+}
 
-export const UnderlineWrapper = forwardRef(
-  ({children, className, ...rest}: PropsWithChildren<UnderlineWrapperProps>, forwardedRef) => {
-    return (
-      <BoxWithFallback className={clsx(classes.UnderlineWrapper, className)} ref={forwardedRef} {...rest}>
-        {children}
-      </BoxWithFallback>
-    )
-  },
-)
+export const UnderlineWrapper = forwardRef((props, ref) => {
+  const {children, className, as: Component = 'nav', ...rest} = props
+  return (
+    <Component
+      className={clsx(classes.UnderlineWrapper, className)}
+      ref={ref as ForwardedRef<HTMLDivElement>}
+      {...rest}
+    >
+      {children}
+    </Component>
+  )
+}) as PolymorphicForwardRefComponent<ElementType, UnderlineWrapperProps<ElementType>>
 
 export const UnderlineItemList = forwardRef(({children, ...rest}: PropsWithChildren, forwardedRef) => {
   return (
@@ -44,51 +45,38 @@ export const LoadingCounter = () => {
   return <span className={classes.LoadingCounter} />
 }
 
-export type UnderlineItemProps = {
-  as?: React.ElementType | 'a' | 'button'
+export type UnderlineItemProps<As extends React.ElementType> = {
+  as?: As | 'a' | 'button'
   className?: string
   iconsVisible?: boolean
   loadingCounters?: boolean
   counter?: number | string
   icon?: FC<IconProps> | React.ReactElement
   id?: string
   ref?: React.Ref<unknown>
-} & SxProp
+} & React.ComponentPropsWithoutRef<As extends 'a' ? 'a' : As extends 'button' ? 'button' : As>
 
-export const UnderlineItem = forwardRef(
-  (
-    {
-      as = 'a',
-      children,
-      counter,
-      icon: Icon,
-      iconsVisible,
-      loadingCounters,
-      className,
-      ...rest
-    }: PropsWithChildren<UnderlineItemProps>,
-    forwardedRef,
-  ) => {
-    return (
-      <BoxWithFallback ref={forwardedRef} as={as} className={clsx(classes.UnderlineItem, className)} {...rest}>
-        {iconsVisible && Icon && <span data-component="icon">{isElement(Icon) ? Icon : <Icon />}</span>}
-        {children && (
-          <span data-component="text" data-content={children}>
-            {children}
+export const UnderlineItem = React.forwardRef((props, ref) => {
+  const {as: Component = 'a', children, counter, icon: Icon, iconsVisible, loadingCounters, className, ...rest} = props
+  return (
+    <Component {...rest} ref={ref} className={clsx(classes.UnderlineItem, className)}>
+      {iconsVisible && Icon && <span data-component="icon">{isElement(Icon) ? Icon : <Icon />}</span>}
+      {children && (
+        <span data-component="text" data-content={children}>
+          {children}
+        </span>
+      )}
+      {counter !== undefined ? (
+        loadingCounters ? (
+          <span data-component="counter">
+            <LoadingCounter />
           </span>
-        )}
-        {counter !== undefined ? (
-          loadingCounters ? (
-            <span data-component="counter">
-              <LoadingCounter />
-            </span>
-          ) : (
-            <span data-component="counter">
-              <CounterLabel>{counter}</CounterLabel>
-            </span>
-          )
-        ) : null}
-      </BoxWithFallback>
-    )
-  },
-) as PolymorphicForwardRefComponent<'a', UnderlineItemProps>
+        ) : (
+          <span data-component="counter">
+            <CounterLabel>{counter}</CounterLabel>
+          </span>
+        )
+      ) : null}
+    </Component>
+  )
+}) as PolymorphicForwardRefComponent<ElementType, UnderlineItemProps<ElementType>>

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

@@ -13,17 +13,19 @@ const StyledTabNav = styled(PrimerTabNav).withConfig({
   ${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 TabNavImpl = ({as, ...props}: TabNavProps) => {
+  return <StyledTabNav {...props} {...(as ? {forwardedAs: as as React.ElementType} : {})} />
+}
 
 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 TabNavLink = ({as, ...props}: TabNavLinkProps) => (
+  <StyledTabNavLink {...props} {...(as ? {forwardedAs: as} : {})} />
+)
 
 const TabNav = Object.assign(TabNavImpl, {
   Link: TabNavLink,

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

@@ -0,0 +1,59 @@
+import {
+  UnderlinePanels as PrimerUnderlinePanels,
+  type UnderlinePanelsProps as PrimerUnderlinePanelsProps,
+  type UnderlinePanelsPanelProps as PrimerUnderlinePanelsPanelProps,
+  type UnderlinePanelsTabProps as PrimerUnderlinePanelsTabProps,
+} from '@primer/react/experimental'
+import styled from 'styled-components'
+import {sx, type SxProp} from '../sx'
+
+type UnderlinePanelsProps = PrimerUnderlinePanelsProps & SxProp
+
+const StyledUnderlinePanels = styled(PrimerUnderlinePanels).withConfig<UnderlinePanelsProps>({
+  shouldForwardProp: prop => prop !== 'sx',
+})`
+  ${sx}
+`
+
+// @ts-ignore forwardedAs is valid here but I don't know how to fix the typescript error
+const UnderlinePanelsImpl = ({as, ...props}: UnderlinePanelsProps) => (
+  <StyledUnderlinePanels forwardedAs={as} {...props} />
+)
+
+UnderlinePanelsImpl.displayName = 'UnderlinePanels'
+
+type UnderlinePanelsPanelProps = PrimerUnderlinePanelsPanelProps & SxProp
+
+const StyledUnderlinePanelsPanel = styled(PrimerUnderlinePanels.Panel).withConfig<UnderlinePanelsPanelProps>({
+  shouldForwardProp: prop => prop !== 'sx',
+})`
+  ${sx}
+`
+
+// @ts-ignore forwardedAs is valid here but I don't know how to fix the typescript error
+const UnderlinePanelsPanel = ({as, ...props}: UnderlinePanelsPanelProps) => {
+  return <StyledUnderlinePanelsPanel forwardedAs={as} {...props} />
+}
+
+UnderlinePanelsPanel.displayName = 'UnderlinePanels.Panel'
+
+type UnderlinePanelsTabProps = PrimerUnderlinePanelsTabProps & SxProp
+
+const StyledUnderlinePanelsTab = styled(PrimerUnderlinePanels.Tab).withConfig<UnderlinePanelsTabProps>({
+  shouldForwardProp: prop => prop !== 'sx',
+})`
+  ${sx}
+`
+// @ts-ignore forwardedAs is valid here but I don't know how to fix the typescript error
+const UnderlinePanelsTab = ({as, ...props}: UnderlinePanelsTabProps) => (
+  <StyledUnderlinePanelsTab forwardedAs={as} {...props} />
+)
+
+UnderlinePanelsTab.displayName = 'UnderlinePanels.Tab'
+
+const UnderlinePanels = Object.assign(UnderlinePanelsImpl, {
+  Tab: UnderlinePanelsTab,
+  Panel: UnderlinePanelsPanel,
+})
+
+export {UnderlinePanels, type UnderlinePanelsProps, type UnderlinePanelsTabProps, type UnderlinePanelsPanelProps}

packages/styled-react/src/experimental.tsx

@@ -1,8 +1,16 @@
 export {Dialog, type DialogProps} from './components/Dialog'
+
 export {
   PageHeader,
   type PageHeaderProps,
   type PageHeaderActionsProps,
   type PageHeaderTitleProps,
 } from './components/PageHeader'
-export {Table, Tooltip, UnderlinePanels} from '@primer/react/experimental'
+
+export {
+  UnderlinePanels,
+  type UnderlinePanelsProps,
+  type UnderlinePanelsTabProps,
+  type UnderlinePanelsPanelProps,
+} from './components/UnderlinePanels'
+export {Table, Tooltip} from '@primer/react/experimental'