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.

https://github.com/user-attachments/assets/810fb91e-fa0e-41d6-b14b-ae257cf93a60

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
• [X] 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
• [X] Added/updated documentation
• [X] Added/updated previews (Storybook)
• [X] Changes are SSR compatible
• [X] Tested in Chrome
• [X] Tested in Firefox
• [X] 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[bot]]

🦋 Changeset detected

Latest commit: c25ad3ab13620e061b117d29bc4782e6f8174116

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[bot]]

:wave: 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[bot]]

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% 🔺)

[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.

[hectahertz]

Addressed in https://github.com/primer/react/pull/5829