Skip to content

Display current and default branch at the top of the branch selector

Design questions

  • How is the dropdown in the branch selector organized?
  • Would it be useful to display the current branch at the top?
  • Would it be useful to display the default branch at the top, when users are not on the default branch?
Current: Default branch does not appear at the top
default-branch.mov
Current: Selected branch does not appear the top
selected.mov

Design recommendation

See #518021 (comment 2482397152).

This design recommendation will address the following issues related to the repository branch selector:

Non-default branch selected Default branch selected Copy button toast
recommendation.jpg default branch selected.jpg copy toast.jpg

Design details

  • Default branch should be at the top of the "Branches" section (unless the default branch is already selected)

    • If the default branch is selected and appears in the "Selected" section, the default branch does not need to be duplicated at the top of the "Branches" section.
  • Currently selected branch should go in the "Selected" section (new). The copy button will allow users to copy the full branch name to address user needs in #346777 (closed).

  • After the user presses the "Copy" button in the disclosure, show a toast confirmation "Branch name copied to clipboard."

  • Branch field should be much larger. I will leave it up to front-end to advise on how best to do this. Perhaps #438154 (comment 2347281243) will help:

    Dropdowns have a fluid-width option which could be useful here, as branch names can be pretty long.

    This lets the dropdown expand based on the inner content, between a min and max width (this is documented in the Component Library file, but not Pajamas). But it's just adding fluid-width somewhere here.

    image (7).png

Edited by 🤖 GitLab Bot 🤖