Add variant no-horizontal-padding to UnderlineNav

[hectahertz]

Closes https://github.com/github/primer/issues/4607

Continued from https://github.com/primer/react/pull/5829v

This pull request introduces a new variant prop to the UnderlineNav component, allowing removal of the horizontal padding for tabs.

Screen.Recording.2025-05-20.at.20.36.16.mov

Changelog

Changed

Component Enhancements:

• Added a new variant prop to UnderlineNav with options 'default' and 'no-horizontal-padding' to control horizontal padding.

Storybook Updates:

• Added the variant prop to the Storybook controls for UnderlineNav, allowing users to toggle between the two variants in the Storybook UI.
• Added an extra story to demonstrate the new prop value.

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: c25ad3a

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	Minor

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!

[github-actions]

size-limit report 📦

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

[Copilot]

Pull Request Overview

This PR adds a new variant prop to the UnderlineNav component, letting consumers disable its default horizontal padding.

• Introduces variant prop with 'default' and 'no-horizontal-padding' options
• Applies conditional padding in CSS based on data-variant
• Updates Storybook with controls and a dedicated “No Horizontal Padding” story

Reviewed Changes

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

File	Description
packages/react/src/internal/components/UnderlineTabbedInterface.module.css	Removes default padding and adds conditional rules for the default variant
packages/react/src/UnderlineNav/UnderlineNav.tsx	Defines variant prop, defaults it, and sets data-variant attribute
packages/react/src/UnderlineNav/UnderlineNav.stories.tsx	Adds Storybook control for variant and default arg
packages/react/src/UnderlineNav/UnderlineNav.features.stories.tsx	Adds a “No Horizontal Padding” feature story

Comments suppressed due to low confidence (2)

packages/react/src/internal/components/UnderlineTabbedInterface.module.css:9

• Typo in comment: accomodate should be spelled accommodate.

/* using a box-shadow instead of a border to accomodate 'overflow-y: hidden' on UnderlinePanels */

packages/react/src/UnderlineNav/UnderlineNav.tsx:39

• New variant prop controls padding behavior but lacks corresponding unit or integration tests; consider adding tests to verify both variants (default and no-horizontal-padding) render correctly.

variant?: 'default' | 'no-horizontal-padding'

[joshblack]

One question I had was if we want the no padding case to be the default in the future or no 🤔 Put another way, is the default case that people should be removing this padding or not.

This came up when using components like Stack because it doesn't seem like most of the time you wouldn't want that padding in there. At a higher level, it's almost like we need a bleed concept aka https://github.com/github/primer/issues/786 for these types of moments

[hectahertz]

One question I had was if we want the no padding case to be the default in the future or no 🤔 Put another way, is the default case that people should be removing this padding or not.

This came up when using components like Stack because it doesn't seem like most of the time you wouldn't want that padding in there. At a higher level, it's almost like we need a bleed concept aka github/primer#786 for these types of moments

100%; I'm gonna change the variant 'default' value for now to indicate that it has padding, so we avoid future refactors no matter what we end up going for.

If we end up going for a bleed component I'd be interested to debate the implementation, negative margins might make things messy.