Remove sx prop in UnderlinePanels

.changeset/cool-tips-argue.md

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

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

@@ -11,21 +11,13 @@ 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 = {
   /**
@@ -52,7 +44,7 @@ export type UnderlinePanelsProps = {
    * Class name for custom styling
    */
   className?: string
-} & SxProp
+}
 
 export type TabProps = PropsWithChildren<{
   /**
@@ -71,10 +63,9 @@ export type TabProps = PropsWithChildren<{
    *  Icon rendered before the tab text label
    */
   icon?: FC<IconProps>
-}> &
-  SxProp
+}>
 
-export type PanelProps = Omit<BoxProps, 'as'>
+export type PanelProps = React.HTMLAttributes<HTMLDivElement>
 
 const TabContainerComponent = createComponent(TabContainerElement, 'tab-container')
 
@@ -104,12 +95,14 @@ const UnderlinePanels: FC<UnderlinePanelsProps> = ({
     let panelIndex = 0
 
     const childrenWithProps = Children.map(children, child => {
-      if (isValidElement<UnderlineItemProps>(child) && child.type === Tab) {
+      if (isValidElement(child) && child.type === 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++}`})
+        return cloneElement(child as React.ReactElement, {
+          'aria-labelledby': `${parentId}-tab-${panelIndex++}`,
+        })
       }
       return child
     })
@@ -221,8 +214,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,16 +1,14 @@
 // Used for UnderlineNav and UnderlinePanels components
 
-import type React from 'react'
-import {forwardRef, type FC, type PropsWithChildren} from 'react'
+import React from 'react'
+import {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
@@ -19,15 +17,15 @@ type UnderlineWrapperProps = {
   slot?: string
   as?: React.ElementType
   className?: string
-  ref?: React.Ref<unknown>
-} & SxProp
+  ref?: React.Ref<HTMLDivElement>
+}
 
-export const UnderlineWrapper = forwardRef(
-  ({children, className, ...rest}: PropsWithChildren<UnderlineWrapperProps>, forwardedRef) => {
+export const UnderlineWrapper = forwardRef<HTMLDivElement, PropsWithChildren<UnderlineWrapperProps>>(
+  ({children, className, ...rest}, forwardedRef) => {
     return (
-      <BoxWithFallback className={clsx(classes.UnderlineWrapper, className)} ref={forwardedRef} {...rest}>
+      <div className={clsx(classes.UnderlineWrapper, className)} ref={forwardedRef} {...rest}>
         {children}
-      </BoxWithFallback>
+      </div>
     )
   },
 )
@@ -44,51 +42,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>>