Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(web): shared breadcrumbs component for folders and tags #12215

Merged
merged 2 commits into from
Sep 2, 2024

Conversation

ben-basten
Copy link
Member

@ben-basten ben-basten commented Sep 1, 2024

Description

Create a shared Breadcrumbs component that both Tags and Folders use to show hierarchy.

Benefits of the new breadcrumbs component include:

  • Consistent UX for both folders and tags. For example, both experiences now have a button to navigate up one level.
  • All breadcrumbs are links instead of buttons, to give users better indication of what they do.
  • The breadcrumb for the current page is not clickable, because a link is not needed for the user's current page.
  • Horizontal scrolling within breadcrumbs container when the length of the breadcrumbs overflows the width of the page.
  • Wrap the breadcrumbs in a nav component, to create a "navigation" landmark region on the page that's easy for screen reader users to find.
  • All the breadcrumbs are inside of an ordered list, to show hierarchy.
  • Using CircleIconButton for all buttons with an icon in them, for better accessibility and consistent look+feel with other buttons in immich.

Other changes include:

  • Hiding "Edit tag" button on the root tags page

How Has This Been Tested?

  • Navigate from the root of the tree all the way to leaves in both the /folders and /tags pages
  • Use both the breadcrumbs and the "Go to parent" button to navigate up the tree
  • Use the root directory button to get to the base folders/tags pages

Screenshots

Breadcrumbs for nested tags

nested-breadcrumbs

Overflowing breadcrumbs

overflowing-breadcrumbs

@ben-basten ben-basten marked this pull request as ready for review September 1, 2024 18:24
@alextran1502 alextran1502 merged commit d8b602f into main Sep 2, 2024
26 checks passed
@alextran1502 alextran1502 deleted the feat/breadcrumbs branch September 2, 2024 19:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants