Refactor breadcrumbs to shared component - #6118
Draft
VPS-julia wants to merge 10 commits into
Draft
Conversation
Co-authored-by: Ricky James Smith <jamesricky@me.com>
…rumbs Merge `main` into `feature/admin-breadcrumbs`
## Description Mobile adaptions for the new Breadcrumbs component: - Only display current item - If there are more than one item, `. . .` should be displayed - A chevron is added - On click of the chevron or the `. . .` a menu expands, that displays all items of the breadcrumbs ## Acceptance criteria - [x] I have verified if my change requires [an example](https://github.com/vivid-planet/comet/blob/HEAD/CONTRIBUTING.md#example) - [x] I have verified if my change requires [a changeset](https://github.com/vivid-planet/comet/blob/HEAD/CONTRIBUTING.md#changeset) - [x] I have verified if my change requires [screenshots/screencasts](https://github.com/vivid-planet/comet/blob/HEAD/CONTRIBUTING.md#screenshotsscreencasts) ## Screenshots/screencasts One item: <img width="279" height="470" alt="Screenshot 2026-06-15 at 13 22 59" src="https://github.com/user-attachments/assets/c717f405-655c-45ac-ba92-1ca886c9b80f" /> Multiple items: <img width="278" height="475" alt="Screenshot 2026-06-15 at 13 19 01" src="https://github.com/user-attachments/assets/f2f1b39e-57b9-4b08-b18a-0c4ed2840aae" /> <img width="280" height="474" alt="Screenshot 2026-06-15 at 13 21 54" src="https://github.com/user-attachments/assets/9a4dc3ab-0586-48b0-ab6f-41d6179d93c8" /> ## Further information - Task: https://vivid-planet.atlassian.net/browse/COM-2716 --------- Co-authored-by: Julia Wegmayr <julia.wegmayr@vivid-planet.com> Co-authored-by: Ricky James Smith <jamesricky@me.com>
Collapse middle items into an overflow ellipsis when they don't fit, always keeping the root and the current page. Widths are measured and the fit is computed right-to-left so the current item is never clipped; it truncates when space runs out. Clicking the ellipsis opens a dropdown listing the collapsed items; on mobile the existing page-tree dropdown is unchanged. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The items were measured inside the visible container. That container is `overflow: hidden` and the current item is the only one that may shrink, so as soon as the items overflowed, the measured widths added up to exactly the container width. The overflow was therefore never detected and the current page truncated instead of collapsing its parents. Measure the items in a hidden layer with `width: max-content` instead, where nothing shrinks, and collapse them as the design requires: parent items move into the overflow menu first, the root follows once it no longer fits next to the ellipsis and the current page, and only then does the current page truncate. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The overflow menu was rendered unconditionally and merely kept closed via its `open` prop. That hid a glitch: `isOverflowMenuOpen` was never reset, so opening the menu and then widening the viewport until nothing overflows closed the menu but left the state set. Narrowing again re-opened it without any user interaction. Render the menu only when there are hidden items and reset the open state once the last item leaves the menu. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
…Breadcrumbs component Both components maintained their own breadcrumb markup, duplicating the responsive/overflow logic that the shared Breadcrumbs component already provides. Rebuild them as thin wrappers that read the stack breadcrumbs and delegate rendering to Breadcrumbs, unifying their look and behavior. To cover the two use cases, add three props to Breadcrumbs: - linkComponent (default "a") so consumers can inject a router-aware link (BreadcrumbLink) for SPA navigation; the component stays router-agnostic. This also makes the mobile overflow menu navigate instead of reloading. - startAdornment for a leading element (StackBreadcrumbs' back button), rendered outside the mobile toggle button to avoid nested interactive HTML. - overflowLabel to keep StackBreadcrumbs' overflowLinkText working. StackBreadcrumbs keeps its separator/overflowLinkText props and backButton/ backButtonSeparator slots; ToolbarBreadcrumbs keeps its iconMapping prop. Their deep slotProps/styleOverrides now use the Breadcrumbs slots; update the one in-repo consumer (AdminTabsTabContent) accordingly. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015gY3q94kFcTgFNoYMdYZUx
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
5 participants
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.
Summary
Consolidate breadcrumb implementations by extracting a shared, responsive
Breadcrumbscomponent that bothStackBreadcrumbsandToolbarBreadcrumbsnow use. This unifies their appearance and behavior while reducing code duplication.Key Changes
New shared
Breadcrumbscomponent (packages/admin/admin/src/common/breadcrumbs/Breadcrumbs.tsx):Desktop breadcrumbs (
DesktopBreadcrumbs.tsx):Mobile breadcrumbs (
MobileBreadcrumbs.tsx):Refactored
StackBreadcrumbs:Breadcrumbscomponentseparator,overflowLinkText)Refactored
ToolbarBreadcrumbs:BreadcrumbscomponenticonMapping)Extracted utilities:
useBreadcrumbsOverflowhook for calculating visible/hidden itemsgetElementOuterWidthutility moved to shared locationBreadcrumbs.slots.tsImplementation Details
iconMappingpropslotPropshttps://claude.ai/code/session_015gY3q94kFcTgFNoYMdYZUx