Repository navigation
fix(Breadcrumbs): let the nav shrink in a flex row so menu modes collapse - #8750
Draft
mattcosta7 wants to merge 2 commits into
Draft
mattcosta7 wants to merge 2 commits into
mattcosta7 wants to merge 2 commits into
Conversation
…apse Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
🦋 Changeset detectedLatest commit: e82a581 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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
added
the
integration-tests: recommended
Contributor
|
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #
In
menuandmenu-with-rootmodes, Breadcrumbs collapsed late, and at different widths depending on crumb length, when placed in a flex row beside other content, as in the github/github-ui global header (ContextRegioninsideTopNav.Center).The
<nav>is a flex item with the defaultmin-width: auto, so it can't shrink below its crumbs. Its siblings absorb the squeeze first, the crumbs keep measuring as fitting, and nothing collapses until those siblings reach their minimum widths. Longer repo names reach that point at a wider viewport. Narrowing and widening also disagreed, by about 150px for long names.This sets
min-width: 0on the nav in the menu modes, so the crumbs are fitted to the width the parent actually offers.Measured in a Storybook mock of the header layout (not github-ui itself). Each cell is the header width where the collapse changes, narrowing / widening:
reactgithub-uiprimer-design-system-componentsa-very-long-repository-name-for-testingThis is not a regression from #8683 or #8748. The implementation before #8683 never collapsed in this layout, and its crumbs spilled up to 249px outside the nav. A per-frame resize harness showed no change in collapse timing or frame times across before #8683, current
main, and this branch.Changelog
New
Changed
overflow="menu"/"menu-with-root"): the nav can shrink below its content as a flex item, so crumbs collapse as soon as they stop fitting.Removed
Rollout strategy
Testing & Reviewing
npx vitest run --project '@primer/react' packages/react/src/Breadcrumbs: passed (3 files, 53 tests). The new test fails without the CSS change (expected [ 'owner', 'repository' ] to deeply equal [ 'repository' ]).npx stylelint -q --rd packages/react/src/Breadcrumbs/Breadcrumbs.module.css: passed.npx eslint packages/react/src/Breadcrumbs/__tests__/BreadcrumbsOverflow.test.tsx: passed.npx prettier --checkon changed files: passed.npm test,npm run type-check, VRT, and the github-ui integration workflow.Risk: any consumer that relied on a menu-mode nav refusing to shrink in a flex row will now see crumbs collapse earlier. A github-ui integration run would confirm the header behaves as in the mock.