Fix color and roundness for file tree browser file item
What does this MR do and why?
Fix color and roundness for file tree browser file item
- Update to use
gl-action-neutral-colorsfor hover state - Update to use
gl-highlight-target-xxfor selected state - Update the item to have lg border radius
- Bold file name for selected item
- Align indentation line to the file row container
- Remove
sizeprop on file icon since the number is invalid
References
- Update the selected element to have a border-radius of 8px. #567775 (comment 2851589520)
- Add hover color to a selectable line item to design token button.default.tertiary.background.color.hover (light gray), and change the color of the selected element to button.confirm.tertiary.background.color.hover (light blue). #567775 (comment 2851589520)
Screenshots or screen recordings
CleanShot 2025-11-27 at 12.28.37.mp4
How to set up and validate locally
- Enable
repository_file_tree_browserfeature flag - Go to the repository view, click on any folders/files (note, this won't show on project overview page)
- Expand the file tree browser with toggle to the left of ref selector in the header
- Observe hover and selected styling
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Edited by Chaoyue Zhao