Remove sx from UnderlinePanels

[pksjce]

Closes ##6804

Changelog

New

Changed

Removed

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: 4962e4f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@primer/react	Major
@primer/styled-react	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

[Copilot]

Pull Request Overview

This PR removes the sx prop and SxProp type dependencies from the UnderlinePanels component, replacing the styled BoxWithFallback components with standard HTML elements (div). This change is part of a larger effort to remove the sx prop system from Primer React components.

Key changes:

• Replaces BoxWithFallback usage with native HTML elements
• Updates type definitions to remove SxProp dependencies
• Improves type safety with better generic constraints for polymorphic components

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
packages/react/src/internal/components/UnderlineTabbedInterface.tsx	Removes SxProp imports and BoxWithFallback usage, replaces with standard div elements and improves TypeScript generics
packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx	Updates Panel component to use div instead of BoxWithFallback and removes BoxProps dependency

[Copilot]

[nitpick] The forwardRef should include proper TypeScript generics and parameter names for better type inference and debugging. Consider using the same pattern as UnderlineWrapper with explicit generic parameters.

See below for a potential fix:

export const UnderlineItem = React.forwardRef<
  HTMLElement,
  UnderlineItemProps<ElementType>
>(
  (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>
          ) : (
            <span data-component="counter">
              <CounterLabel>{counter}</CounterLabel>
            </span>
          )
        ) : null}
      </Component>
    )
  }
)

[Copilot]

The type assertion uses ElementType as both the constraint and the argument, which may not provide the intended polymorphic behavior. Consider using a more specific constraint like keyof JSX.IntrinsicElements | React.ComponentType<any> to ensure proper component props are inferred.

Suggested change

	}) as PolymorphicForwardRefComponent<ElementType, UnderlineItemProps<ElementType>>
	}) as PolymorphicForwardRefComponent<keyof JSX.IntrinsicElements | React.ComponentType<any>, UnderlineItemProps<any>>

[pksjce]

I understand this PR deals somewhat with UnderlineNav too due to the internal component. The prop sx for UnderlineNav is removed, but styled components usage still exists.

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[primer-integration]

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/3379

[primer-integration]

🟢 ci completed with status success.