feat: use background color to highlight the selected navigator tree#5667
Open
shreyanshkotak wants to merge 4 commits intowebstudio-is:mainfrom
Open
feat: use background color to highlight the selected navigator tree#5667shreyanshkotak wants to merge 4 commits intowebstudio-is:mainfrom
shreyanshkotak wants to merge 4 commits intowebstudio-is:mainfrom
Conversation
Highlight the selected navigator item subtree with a lighter child background so nested descendants remain easy to identify. Add a selected-descendant state to the shared tree component, tint visible descendants with a lighter blue, and keep depth bars visible with their default color while the navigator is hovered.
Disable tree depth bars when hovering the navigator while keeping the behavior navigator-specific. Add an opt-in TreeRoot prop for hover depth bars in the shared tree component, and set Navigator to keep them hidden on hover so the subtree selection highlight remains cleaner.
shreyanshkotak
temporarily deployed
to
development
GitHub Actions
Inactive
shreyanshkotak
temporarily deployed
to
development
GitHub Actions
Inactive
shreyanshkotak
temporarily deployed
to
development
GitHub Actions
Inactive
shreyanshkotak
temporarily deployed
to
development
GitHub Actions
Inactive
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
1 participant
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.
Description
This updates the navigator to use Figma-style subtree highlighting instead of relying on vertical depth lines, which makes deeply nested selections easier to follow. The selected node keeps the primary selected background, its descendant subtree gets a lighter background, and the navigator hides depth bars to reduce visual noise.
Related to (#5206)
Steps for reproduction
background.color.to.highlight.mov
Code Review
Before requesting a review
Before merging
.envfile