forward Underline.Tab, Underline.Panels from @primer/react (#6931)

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

Author: francinelucca

.changeset/chilly-lemons-promise.md

@@ -2,4 +2,4 @@
 "@primer/react": major
 ---
 
-Remove sx from UnderlinePanels
+Remove sx from UnderlinePanels

.changeset/rude-windows-bathe.md

@@ -0,0 +1,6 @@
+---
+"@primer/react": patch
+"@primer/styled-react": patch
+---
+
+use UnderlinePanels.Tab, UnderlinePanels.Panel from @primer/react

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

@@ -7,11 +7,17 @@ import React, {
   type FC,
   type PropsWithChildren,
   useEffect,
+  type ElementType,
 } from '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} from '../../internal/components/UnderlineTabbedInterface'
+import {
+  UnderlineItemList,
+  UnderlineWrapper,
+  UnderlineItem,
+  type UnderlineItemProps,
+} from '../../internal/components/UnderlineTabbedInterface'
 import {useId} from '../../hooks'
 import {invariant} from '../../utils/invariant'
 import {type SxProp} from '../../sx'
@@ -97,44 +103,24 @@ const UnderlinePanels: FC<UnderlinePanelsProps> = ({
     let panelIndex = 0
 
     const childrenWithProps = Children.map(children, child => {
-      if (
-        isValidElement(child) &&
-        (typeof child.type === 'function' || typeof child.type === 'object') &&
-        'displayName' in child.type &&
-        child.type.displayName === 'UnderlinePanels.Tab'
-      ) {
+      if (isValidElement<UnderlineItemProps<ElementType>>(child) && child.type === Tab) {
         return cloneElement(child, {id: `${parentId}-tab-${tabIndex++}`, loadingCounters, iconsVisible})
       }
 
-      if (
-        isValidElement(child) &&
-        (typeof child.type === 'function' || typeof child.type === 'object') &&
-        'displayName' in child.type &&
-        child.type.displayName === 'UnderlinePanels.Panel'
-      ) {
+      if (isValidElement<PanelProps>(child) && child.type === 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) &&
-        (typeof child.type === 'function' || typeof child.type === 'object') &&
-        'displayName' in child.type &&
-        child.type.displayName === 'UnderlinePanels.Tab'
-      )
+      return isValidElement(child) && child.type === Tab
     })
 
-    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'
-      )
-    })
+    const newTabPanels = Children.toArray(childrenWithProps).filter(
+      child => isValidElement(child) && child.type === Panel,
+    )
 
     setTabs(newTabs)
     setTabPanels(newTabPanels)

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

@@ -37,16 +37,4 @@ describe('@primer/react/experimental', () => {
     )
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
   })
-
-  test('UnderlinePanels.Panel supports `sx` prop', () => {
-    render(
-      <UnderlinePanels>
-        <UnderlinePanels.Tab>tab</UnderlinePanels.Tab>
-        <UnderlinePanels.Panel data-testid="component" sx={{background: 'red'}}>
-          panel
-        </UnderlinePanels.Panel>
-      </UnderlinePanels>,
-    )
-    expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
-  })
 })

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

@@ -1,8 +1,8 @@
 import {
   UnderlinePanels as PrimerUnderlinePanels,
   type UnderlinePanelsProps as PrimerUnderlinePanelsProps,
-  type UnderlinePanelsPanelProps as PrimerUnderlinePanelsPanelProps,
-  type UnderlinePanelsTabProps as PrimerUnderlinePanelsTabProps,
+  type UnderlinePanelsPanelProps,
+  type UnderlinePanelsTabProps,
 } from '@primer/react/experimental'
 import styled from 'styled-components'
 import {sx, type SxProp} from '../sx'
@@ -22,38 +22,9 @@ const UnderlinePanelsImpl = ({as, ...props}: UnderlinePanelsProps) => (
 
 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,
+  Tab: PrimerUnderlinePanels.Tab,
+  Panel: PrimerUnderlinePanels.Panel,
 })
 
 export {UnderlinePanels, type UnderlinePanelsProps, type UnderlinePanelsTabProps, type UnderlinePanelsPanelProps}

packages/styled-react/src/experimental.tsx

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