Add className support to UnderlineNav.Item component

[Copilot]

Changes

The UnderlineNav.Item component was not properly combining custom className props with the default styling. This PR fixes the issue by:

1. Modifying the UnderlineItem component in UnderlineTabbedInterface.tsx to:

   • Accept the className prop
   • Use clsx to combine the default className with any user-provided className

2. Added a test case to verify that className props are correctly combined with the default classes

This change aligns with our contribution guidelines:

Each component should accept a prop called className that allows for consumers to pass along a custom class. Only pass a className to the top level dom element of each component and sub component.

For multiple classnames, use clsx to merge them together.

Before

<UnderlineNav.Item className="my-custom-class">
  Item
</UnderlineNav.Item>
// Only renders with default class, ignores "my-custom-class"

After

<UnderlineNav.Item className="my-custom-class">
  Item
</UnderlineNav.Item>
// Renders with both default class and "my-custom-class"

Fixes #6128.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[changeset-bot]

🦋 Changeset detected

Latest commit: 37a7ff6

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

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

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 fixes the issue where passing a className to UnderlineNav.Item wasn’t merged with the default styling. It updates the internal UnderlineItem component to use clsx for class merging and adds a test to verify the behavior.

• Use clsx to combine classes.UnderlineItem with any passed className
• Added a test in UnderlineNav.test.tsx to assert both default and custom classes are applied

Reviewed Changes

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

File	Description
packages/react/src/internal/components/UnderlineTabbedInterface.tsx	Destructure and merge className using clsx
packages/react/src/UnderlineNav/UnderlineNav.test.tsx	New test asserting className is combined properly

Comments suppressed due to low confidence (2)

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

• Ensure that clsx is imported at the top of this file (e.g., import clsx from 'clsx';), otherwise the build will fail.

className={clsx(classes.UnderlineItem, className)}

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

• Consider updating the UnderlineItemProps TypeScript definition or JSDoc for this component to explicitly include className, so IDE users know it’s supported.

className,

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	94.43 KB (-0.04% 🔽)
packages/react/dist/browser.umd.js	94.56 KB (+0.03% 🔺)

[jonrohan]

@copilot Can you fix these lint and format CI errors?

[Copilot]

@copilot Can you fix these lint and format CI errors?

Fixed the lint and format errors. The issues were prettier formatting violations (missing trailing comma and improper indentation). All linting tools now pass successfully. (2334668)

[francinelucca]

@copilot fix the broken test

[primer-integration]

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

[primer-integration]

🔴 golden-jobs completed with status failure.