Follow up: File tree design refinement

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Work on this issue
• Close this issue

Context

These are design requests for the file tree work in &17781 that were out of scope for !203513 (merged). These are low priority, but suggested refinements for a more polished and premium feeling user experience for the file tree navigation.

Design requests

1. When a directory is selected, the bottom line overlaps with the bounds of the button. This looks unpolished. Please add additional spacing below the directory button.

Current	Proposed

3. Truncation cuts off part of the text in some instances. This is a bit janky looking. Desired outcome is truncation without cutting off parts of text. Perhaps truncation by character count, instead of by width, could help.
   • Note: this may need to be updated in the MR file tree as well.

Current	Proposed

4. Remove the padding at the bottom of the file tree browser section. Instead, add an inner bottom padding inside the scrollable content. If there is vertical overflow, the padding will appear at the bottom of the scrollable content. See 1. in #567775 (comment 2744608482).
   • Use the Issues sidebar for reference (below).
   • Please use the same inner padding for the top and bottom of the scrollable content.
   • Note: the padding in the MR file tree is smaller, so this is issue is less apparent in the MR file tree. We can discuss whether or not it would be appropriate to do this in the MR file tree as well.

Current	Proposed	Reference: Issues sidebar
Source Code Merge Requests	Source Code File tree spans to the bottom of the page Padding is inside the scrollable section	issues-overflow.mov

5. Add hover state when users hover over a file or directory in the file tree, to give users interactive UI feedback.
   • Note: this may need to be updated in the MR file tree as well.
6. The file tree open/close button "jumps" when it is expanded, due to inconsistent padding above the button when it is expanded and collapsed (fixed in !203818 (merged) ✅).

Current	Expected
filetree-button-jump.mov Collapsed: 12px padding Expanded: 16px padding	The button should not jump. Please use a margin/padding of 12px above the button.

7. In the old UI, the top of the file tree browser is overlapping the separating line below the primary breadcrumbs. There should not be an overlap. #567775 (comment 2851589520)

Bar overlap
overlap.mov

8. The selected element is currently a gray rectangle with sharp corners. Selected states at GitLab typically have a border-radius of 8px. Please add rounded corners to the rectangle. #567775 (comment 2851589520)

Current	Ex: Rounded corners
Sharp corners	Rounded corners (8px)

9. Clickable items should have a hover state to hint at intractability. Please add a color for hover state when users hover over 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). See the primary nav bar for an example. #567775 (comment 2851589520)

Current	Proposed	Ex: Main nav
Selected: gray Hover: none	Selected: button.confirm.tertiary.background.color.hover (light blue) Hover: button.default.tertiary.background.color.hover (light gray)	nav-example.mov

10. When users type into the filter bar, show an X to allow users to quickly clear the text.

Current	Expected
	Pajamas example

Archive

2. When a child file is selected, the bounding box of the button overlaps with the line. Reduce the bounds of the button, so that when the button is selected, there is no overlap with the left line.
   • Note:~~ this may need to be updated in the MR file tree as well.~~
   • This proposal was redacted per discussion in #567775 (comment 2744608482)

Current	Proposed
Source Code Merge Requests