Breadcrumbs powered by useMatches()
#2531
Merged
Conversation
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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
This is pretty good, though there are still a few weird things, mostly around route tabs. Also edit and create forms. I think we could do without crumbs for those. I just didn't want to change the route config too much yet. 2024-11-01-matches-breadcrumbs.mp4Route tabs already had crumbs defined so they would show up in the page title. We can easily remove them, and I tried that, but then you end up with this weirdness with nested ones, where you can click into the router detail, where you clearly want the crumb, and then when you click back up, the crumb disappears: 2024-11-01-tab-breadcrumb-nesting.mp4 |
charliepark
approved these changes
Nov 1, 2024
david-crespo
added a commit
that referenced
this pull request
Nov 10, 2024
* Most of the work to get breadcrumbs in place of top bar pickers * Bot commit: format with prettier * Refactor; add System page breadcrumbs * proper arrow; spacing tweaks * Tighten top bar by a few pixels * No back arrow on root pages; no white link when only one item on page * Update tests * Style tweaks * Fix current selected item icon alignment * Cleanup * Breadcrumbs powered by `useMatches()` (#2531) * first pass at matches-based breadcrumbs. route config changes required * kinda fix things in the route config * use-title.ts -> use-crumbs.ts * Update import --------- Co-authored-by: Charlie Park <[email protected]> * Update expected strings in e2e tests * Fix multiple locator match issue, though we might change text on button * use main to select connect button instead of connect breadcrumb * slight refactor on system/silos crumb * move Breadcrumbs into TopBar * prop name systemOrSilo * adjust main pane / footer height on serial console * add titleOnly concept for form crumbs, apply to all routes * --top-bar-height CSS var * fix ssh keys and floating IP edit crumbs * fix z-index on modal dialog overlay so it covers topbar * Bot commit: format with prettier * fix crumbs of pageless route nodes, very zany snapshot test for the crumbs * use helpers to make everything a little cleaner * write a test, find a bug! funny how that works --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Benjamin Leonard <[email protected]> Co-authored-by: David Crespo <[email protected]> Co-authored-by: David Crespo <[email protected]>
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.
This more or less works already, but needs some tweaks to the route config to make it produce the correct results. The route config changes are simple, but they change the indentation, so the whitespace-hidden diff is much better.
useMatches()thing works