<!--IssueSummary start--> <details> <summary> Everyone can contribute. [Help move this issue forward](https://handbook.gitlab.com/handbook/marketing/developer-relations/contributor-success/community-contributors-workflows/#contributor-links) while earning points, leveling up and collecting rewards. </summary> - [Work on this issue](https://contributors.gitlab.com/manage-issue?action=work&projectId=278964&issueIid=567775) - [Close this issue](https://contributors.gitlab.com/manage-issue?action=close&projectId=278964&issueIid=567775) </details> <!--IssueSummary end--> # Context These are design requests for the file tree work in https://gitlab.com/groups/gitlab-org/-/epics/17781 that were out of scope for https://gitlab.com/gitlab-org/gitlab/-/merge_requests/203513. 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 | |---------|----------| | {width="394" height="695"} | {width="386" height="680"} | 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 | |---------|----------| | {width="293" height="529"} | {width="294" height="544"} | 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 https://gitlab.com/gitlab-org/gitlab/-/issues/567775#note_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. <table> <tr> <th>Current</th> <th>Proposed</th> <th>Reference: Issues sidebar</th> </tr> <tr> <td> Source Code {width="1254" height="786"} {width="1253" height="787"} Merge Requests {width="1014" height="825"} </td> <td> Source Code {width="1257" height="748"} * File tree spans to the bottom of the page * Padding is inside the scrollable section </td> <td> {width="1012" height="826"}  </td> </tr> </table> 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 https://gitlab.com/gitlab-org/gitlab/-/merge_requests/203818 :white_check_mark:). <table> <tr> <th>Current</th> <th>Expected</th> </tr> <tr> <td>  Collapsed: 12px padding {width="1012" height="789"} Expanded: 16px padding {width="1011" height="784"} </td> <td>The button should not jump. Please use a margin/padding of 12px above the button.</td> </tr> </table> 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. https://gitlab.com/gitlab-org/gitlab/-/issues/567775#note_2851589520 <table> <tr> <th>Bar overlap</th> </tr> <tr> <td> {width="1255" height="783"}  </td> </tr> </table> 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. https://gitlab.com/gitlab-org/gitlab/-/issues/567775#note_2851589520 <table> <tr> <th>Current</th> <th>Ex: Rounded corners</th> </tr> <tr> <td> {width="270" height="168"} Sharp corners </td> <td> {width="280" height="412"} Rounded corners (8px) </td> </tr> </table> 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. https://gitlab.com/gitlab-org/gitlab/-/issues/567775#note_2851589520 <table> <tr> <th>Current</th> <th>Proposed</th> <th>Ex: Main nav</th> </tr> <tr> <td> {width="1261" height="786"} * Selected: gray * Hover: none </td> <td> {width="1253" height="782"} * Selected: `button.confirm.tertiary.background.color.hover` (light blue) * Hover: `button.default.tertiary.background.color.hover` (light gray) </td> <td>  </td> </tr> </table> 10. When users type into the filter bar, show an X to allow users to quickly clear the text. <table> <tr> <th>Current</th> <th>Expected</th> </tr> <tr> <td> {width="244" height="330"} </td> <td> {width="564" height="575"} [Pajamas example](https://design.gitlab.com/components/search) </td> </tr> </table> <details> <summary> # Archive </summary> 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 https://gitlab.com/gitlab-org/gitlab/-/issues/567775#note_2744608482 <table> <tr> <th>Current</th> <th>Proposed</th> </tr> <tr> <td> Source Code  Merge Requests {width="367" height="594"} </td> <td>  </td> </tr> </table> </details>