Breadcrumb overflow styling #6728

langermank · 2025-09-04T22:46:53Z

Adds a variant prop to handle the two styles
CSS cleanup and consolidation
More feature stories

changeset-bot · 2025-09-04T22:46:57Z

🦋 Changeset detected

Latest commit: 3c3fdd5

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	Patch
@primer/styled-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-09-04T22:47:24Z

👋 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-09-04T22:51:29Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	90.78 KB (+0.04% 🔺)
packages/react/dist/browser.umd.js	90.99 KB (+0.15% 🔺)

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

pksjce · 2025-09-05T07:45:27Z

Thanks for this!
I made the following tweaks

Got the stories back to state where I can flick the FF from the top menu
Made variant to be applicable only with new ff. The old one can remain as is.

Add a changeset for breadcrumb overflow styling.

pksjce · 2025-09-05T08:04:43Z

@copilot fix the lint error

Copilot · 2025-09-05T08:04:53Z

@pksjce I've opened a new pull request, #6730, to work on those changes. Once the pull request is ready, I'll request review from you.

langermank · 2025-09-05T21:25:45Z

packages/react/src/Breadcrumbs/Breadcrumbs.tsx

-        [SELECTED_CLASS]: selected,
-        [classes.ItemSelected]: selected,
-      })}
+      className={clsx(className, classes.Item, selected && 'selected')}


@pksjce I just moved all selected logic into aria-current in CSS, so we don't need that ItemSelected class. No idea what selected is doing, probably something in dotcom

pksjce · 2025-09-08T02:00:11Z

packages/react/src/Breadcrumbs/Breadcrumbs.module.css

@@ -153,6 +136,7 @@
    & summary {
      list-style: none;
      cursor: pointer;
+      outline: none;


This makes the focus outline around the menu button go away. Since button + summary is same element. When you tab along, there is no focus outline.

clean up styling

3b97e60

Copilot AI review requested due to automatic review settings September 4, 2025 22:46

langermank requested a review from a team as a code owner September 4, 2025 22:46

langermank requested a review from hectahertz September 4, 2025 22:46

langermank changed the base branch from main to pk/breadcrumbs-with-overflow-menu September 4, 2025 22:47

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 Sep 4, 2025

langermank changed the title ~~Style prop~~ Breadcrumb overflow styling Sep 4, 2025

langermank deployed to github-pages September 4, 2025 22:56 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6728 September 4, 2025 22:56 Inactive

Copilot AI reviewed Sep 4, 2025

View reviewed changes

Fix some minor issues with FF

8046e55

pksjce added 2 commits September 5, 2025 17:51

Add a couple of tests

2038470

Create changeset for breadcrumb overflow styling

c38dda8

Add a changeset for breadcrumb overflow styling.

primer deleted a comment from github-actions bot Sep 5, 2025

github-actions bot temporarily deployed to storybook-preview-6728 September 5, 2025 07:53 Inactive

Test case lint

6d6c918

github-actions bot requested a deployment to storybook-preview-6728 September 5, 2025 08:00 Abandoned

Copilot AI mentioned this pull request Sep 5, 2025

[WIP] Address lint error in Breadcrumb overflow styling PR #6730

Closed

4 tasks

pksjce deployed to github-pages September 5, 2025 08:08 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6728 September 5, 2025 08:09 Inactive

pksjce approved these changes Sep 5, 2025

View reviewed changes

put back ff stories + expose variant

895a8df

langermank deployed to github-pages September 5, 2025 21:20 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6728 September 5, 2025 21:20 Inactive

fix selected

3334fe4

langermank commented Sep 5, 2025

View reviewed changes

langermank deployed to github-pages September 5, 2025 21:42 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6728 September 5, 2025 21:42 Inactive

langermank added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Sep 5, 2025

test(vrt): update snapshots

5a4343b

primer bot requested a review from a team as a code owner September 5, 2025 21:59

primer bot requested a review from mperrotti September 5, 2025 21:59

github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Sep 5, 2025

primer bot deployed to github-pages September 5, 2025 22:08 View deployment

github-actions bot temporarily deployed to storybook-preview-6728 September 5, 2025 22:08 Inactive

fix

3c3fdd5

langermank deployed to github-pages September 5, 2025 23:02 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-6728 September 5, 2025 23:03 View deployment

pksjce reviewed Sep 8, 2025

View reviewed changes

pksjce merged commit c247260 into pk/breadcrumbs-with-overflow-menu Sep 8, 2025
40 checks passed

pksjce deleted the style-prop branch September 8, 2025 02:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Breadcrumb overflow styling #6728

Breadcrumb overflow styling #6728

Uh oh!

langermank commented Sep 4, 2025

Uh oh!

changeset-bot bot commented Sep 4, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Sep 4, 2025

Uh oh!

github-actions bot commented Sep 4, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

pksjce commented Sep 5, 2025 •

edited

Loading

Uh oh!

pksjce commented Sep 5, 2025

Uh oh!

Copilot AI commented Sep 5, 2025

Uh oh!

langermank Sep 5, 2025

Uh oh!

pksjce Sep 8, 2025

Uh oh!

Uh oh!

Uh oh!

Breadcrumb overflow styling #6728

Breadcrumb overflow styling #6728

Uh oh!

Conversation

langermank commented Sep 4, 2025

Uh oh!

changeset-bot bot commented Sep 4, 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 Sep 4, 2025

Uh oh!

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

Uh oh!

size-limit report 📦

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

pksjce commented Sep 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pksjce commented Sep 5, 2025

Uh oh!

Copilot AI commented Sep 5, 2025

Uh oh!

langermank Sep 5, 2025

Choose a reason for hiding this comment

Uh oh!

pksjce Sep 8, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

changeset-bot bot commented Sep 4, 2025 •

edited

Loading

github-actions bot commented Sep 4, 2025 •

edited

Loading

pksjce commented Sep 5, 2025 •

edited

Loading