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-colors for hover state
  • Update to use gl-highlight-target-xx for 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 size prop 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_browser feature 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

Merge request reports

Loading