feat(UnderlineNav): Support `inset` and `flush` variants #5829

maraisr · 2025-03-27T00:18:41Z

Variant: flush

Variant: inset (default)

Changelog

New

Added inset and full as variant props to UnderlineNav to aid in removing horizontal spacing.

Rollout strategy

Patch release

Testing & Reviewing

Since the current behaviour is with inset spacing, the default for this new prop is also inset. So fully backwards compatible, a testing strategy is that all existing vrt tests pass.

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 · 2025-03-27T00:18:44Z

🦋 Changeset detected

Latest commit: eb68c08

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 · 2025-03-27T00:19:13Z

👋 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 · 2025-03-27T00:22:12Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	94.51 KB (+0.09% 🔺)
packages/react/dist/browser.umd.js	94.49 KB (-0.08% 🔽)

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

langermank

Heads up that we're about to remove the CSS Modules feature flag from UnderlinePanel early next week. I would hold off on this until that merges so that you don't need to extend this behavior to sx

lesliecdubs · 2025-04-26T03:42:30Z

Hey @maraisr, thanks for the PR! Is this ready for review once conflicts are resolved?

maraisr · 2025-04-28T23:34:57Z

Hi @lesliecdubs, I don't think its ready yet. Failing tests, conflicts etc. I have not had much time to get this PR up to shape, so if somebody on the team is looking to take this on, please do! 🚀 If not, I'll dedicate some time by the end of this week to wrap this up. 👍 I think its a great feature, and unlocks the removal of some sx usages in product code!

hectahertz · 2025-05-19T16:51:17Z

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

@@ -11,6 +9,11 @@
  /* using a box-shadow instead of a border to accomodate 'overflow-y: hidden' on UnderlinePanels */
  /* stylelint-disable-next-line primer/box-shadow */
  box-shadow: inset 0 -1px var(--borderColor-muted);
+
+  &:where([data-flush="false"], &[data-flush="false"] &) {


If you could add a small explanation of the selector that would be nice, not required

packages/react/src/UnderlineNav/UnderlineNav.tsx

hectahertz · 2025-05-19T16:56:16Z

@maraisr if you have some time to make those changes I'd love to get this merged!

github-actions · 2025-05-29T01:39:09Z

Uh oh! @maraisr, at least one image you shared is missing helpful alt text. Check your pull request body to fix the following violations:

Images should have meaningful alternative text (alt text) at line 5
Images should have meaningful alternative text (alt text) at line 9

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

primer-integration · 2025-05-29T02:21:48Z

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

hectahertz

This looks great! Thanks for your contribution!! 🚀

I think flush would work better, as that's what we've used in other components. If you could please change that, then we can merge this :)

Approving in advance!

hectahertz · 2025-05-29T09:43:39Z

packages/react/src/UnderlineNav/UnderlineNav.features.stories.tsx

@@ -145,3 +145,13 @@ export const CountersLoadingState = () => {
    </UnderlineNav>
  )
 }
+
+export const Full = () => {


Suggested change

export const Full = () => {

export const VariantFull = () => {

hectahertz · 2025-05-29T09:44:07Z

packages/react/src/UnderlineNav/UnderlineNav.stories.tsx


 const meta: Meta<typeof UnderlineNav> = {
  title: 'Components/UnderlineNav',
  component: UnderlineNav,
  parameters: {
    controls: {
      expanded: true,
-      // variant and size are developed in the first design iteration but then they are abondened.
+      // size and others were developed in the first design iteration but then they are abandoned.


abondened

lol

primer-integration · 2025-05-30T21:24:25Z

🔴 golden-jobs completed with status failure.

github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Mar 27, 2025

maraisr deployed to github-pages March 27, 2025 00:32 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-5829 March 27, 2025 00:32 Inactive

langermank reviewed Mar 28, 2025

View reviewed changes

packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx Outdated Show resolved Hide resolved

langermank reviewed Mar 28, 2025

View reviewed changes

maraisr force-pushed the mr/padded-tabs branch from 7e4644d to f5f8306 Compare April 8, 2025 23:48

maraisr deployed to github-pages April 9, 2025 00:06 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-5829 April 9, 2025 00:06 Inactive

hectahertz self-requested a review May 19, 2025 14:25

hectahertz requested changes May 19, 2025

View reviewed changes

hectahertz assigned hectahertz and unassigned hectahertz May 20, 2025

maraisr added 2 commits May 29, 2025 09:26

feat: support the ability to remove inline padding

93c4464

chore: use variant to remain consistent

e15cfea

maraisr force-pushed the mr/padded-tabs branch from e7865a8 to f341f19 Compare May 28, 2025 23:54

chore: consolidate on calling it inset or full

75af815

maraisr force-pushed the mr/padded-tabs branch from f341f19 to 75af815 Compare May 28, 2025 23:57

github-actions bot requested a deployment to storybook-preview-5829 May 29, 2025 00:00 Abandoned

maraisr deployed to github-pages May 29, 2025 00:13 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-5829 May 29, 2025 00:13 Inactive

maraisr added 2 commits May 29, 2025 10:37

chore: adds e2e test for the full variant

fb99031

chore: adds changeset

5f4d69f

maraisr changed the title ~~feat: support the ability to remove inline padding~~ feat(UnderlineNav): Support inset and full variants May 29, 2025

maraisr deployed to github-pages May 29, 2025 00:55 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-5829 May 29, 2025 01:37 Inactive

fix: correct css to override, than add

cbd3a71

maraisr force-pushed the mr/padded-tabs branch from f4cbeca to cbd3a71 Compare May 29, 2025 01:41

github-actions bot requested a deployment to storybook-preview-5829 May 29, 2025 01:44 Abandoned

github-actions bot removed the update snapshots label May 29, 2025

maraisr marked this pull request as ready for review May 29, 2025 01:46

maraisr requested review from a team as code owners May 29, 2025 01:46

maraisr requested review from maximedegreve and hectahertz May 29, 2025 01:46

primer bot deployed to github-pages May 29, 2025 01:58 View deployment

github-actions bot temporarily deployed to storybook-preview-5829 May 29, 2025 01:58 Inactive

github-actions bot added integration-tests: failing Changes in this PR cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels May 29, 2025

maraisr deployed to github-pages May 29, 2025 06:00 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-5829 May 29, 2025 06:01 Inactive

hectahertz approved these changes May 29, 2025

View reviewed changes

maraisr added 2 commits May 29, 2025 19:50

fix: variant is a first-class prop again for UnderlineNav

90466ee

chore: address PR feedback and settle on flush

42728e2

maraisr force-pushed the mr/padded-tabs branch from 8c87090 to 42728e2 Compare May 29, 2025 09:55

maraisr changed the title ~~feat(UnderlineNav): Support inset and full variants~~ feat(UnderlineNav): Support inset and flush variants May 29, 2025

maraisr added the update snapshots label May 29, 2025

test(vrt): update snapshots

eb68c08

github-actions bot removed the update snapshots label May 29, 2025

github-actions bot temporarily deployed to storybook-preview-5829 May 29, 2025 10:09 Inactive

primer bot deployed to github-pages May 29, 2025 10:22 View deployment

github-actions bot deployed to storybook-preview-5829 May 29, 2025 10:23 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(UnderlineNav): Support `inset` and `flush` variants #5829

feat(UnderlineNav): Support `inset` and `flush` variants #5829

Uh oh!

maraisr commented Mar 27, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Mar 27, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Mar 27, 2025

Uh oh!

github-actions bot commented Mar 27, 2025 •

edited

Loading

Uh oh!

Uh oh!

langermank left a comment

Uh oh!

lesliecdubs commented Apr 26, 2025 •

edited

Loading

Uh oh!

maraisr commented Apr 28, 2025

Uh oh!

hectahertz May 19, 2025

Uh oh!

Uh oh!

hectahertz commented May 19, 2025

Uh oh!

github-actions bot commented May 29, 2025 •

edited

Loading

Uh oh!

primer-integration bot commented May 29, 2025

Uh oh!

hectahertz left a comment

Uh oh!

hectahertz May 29, 2025

Uh oh!

hectahertz May 29, 2025

Uh oh!

primer-integration bot commented May 30, 2025

Uh oh!

Uh oh!

	export const Full = () => {
	export const VariantFull = () => {

feat(UnderlineNav): Support inset and flush variants #5829

Are you sure you want to change the base?

feat(UnderlineNav): Support inset and flush variants #5829

Uh oh!

Conversation

maraisr commented Mar 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Mar 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Mar 27, 2025

Uh oh!

github-actions bot commented Mar 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

Uh oh!

langermank left a comment

Choose a reason for hiding this comment

Uh oh!

lesliecdubs commented Apr 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

maraisr commented Apr 28, 2025

Uh oh!

hectahertz May 19, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

hectahertz commented May 19, 2025

Uh oh!

github-actions bot commented May 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

primer-integration bot commented May 29, 2025

Uh oh!

hectahertz left a comment

Choose a reason for hiding this comment

Uh oh!

hectahertz May 29, 2025

Choose a reason for hiding this comment

Uh oh!

hectahertz May 29, 2025

Choose a reason for hiding this comment

Uh oh!

primer-integration bot commented May 30, 2025

Uh oh!

Uh oh!

feat(UnderlineNav): Support `inset` and `flush` variants #5829

feat(UnderlineNav): Support `inset` and `flush` variants #5829

maraisr commented Mar 27, 2025 •

edited

Loading

changeset-bot bot commented Mar 27, 2025 •

edited

Loading

github-actions bot commented Mar 27, 2025 •

edited

Loading

lesliecdubs commented Apr 26, 2025 •

edited

Loading

github-actions bot commented May 29, 2025 •

edited

Loading