Merge branch 'fix-mr-version-dropdowns' into 'master'

fix dropdowns for mr-versions

## What does this MR do?
Change markup of mr version dropdowns to be in line with ui guidelines so that the dropdown content is scrollable.

## Why was this MR needed?
Dropdowns were not scrolling.

## Does this MR meet the acceptance criteria?

- [ ] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [ ] Added for this feature/bug
  - [ ] All builds are passing
- [ ] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [ ] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [ ] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [ ] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?
https://gitlab.com/gitlab-org/gitlab-ce/issues/21427

cc @brycepj @dzaporozhets

See merge request !6460

1 files changed, 38 insertions, 34 deletions

diff --git a/app/views/projects/merge_requests/show/_versions.html.haml b/app/views/projects/merge_requests/show/_versions.html.haml
index 33e56d5417f..49819519759 100644
--- a/app/views/projects/merge_requests/show/_versions.html.haml
+++ b/app/views/projects/merge_requests/show/_versions.html.haml
@@ -10,23 +10,25 @@
             - else
               version #{version_index(@merge_request_diff)}
           %span.caret
-        %ul.dropdown-menu.dropdown-menu-selectable
+        .dropdown-menu.dropdown-select.dropdown-menu-selectable
           .dropdown-title
-            %span Version
-            %button.dropdown-title-button.dropdown-menu-close
+            %span Version:
+            %button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
               = icon('times', class: 'dropdown-menu-close-icon')
-          - @merge_request_diffs.each do |merge_request_diff|
-            %li
-              = link_to merge_request_version_path(@project, @merge_request, merge_request_diff), class: ('is-active' if merge_request_diff == @merge_request_diff) do
-                %strong
-                  - if merge_request_diff.latest?
-                    latest version
-                  - else
-                    version #{version_index(merge_request_diff)}
-                .monospace #{short_sha(merge_request_diff.head_commit_sha)}
-                %small
-                  #{number_with_delimiter(merge_request_diff.commits.count)} #{'commit'.pluralize(merge_request_diff.commits.count)},
-                  = time_ago_with_tooltip(merge_request_diff.created_at)
+          .dropdown-content
+            %ul
+              - @merge_request_diffs.each do |merge_request_diff|
+                %li
+                  = link_to merge_request_version_path(@project, @merge_request, merge_request_diff), class: ('is-active' if merge_request_diff == @merge_request_diff) do
+                    %strong
+                      - if merge_request_diff.latest?
+                        latest version
+                      - else
+                        version #{version_index(merge_request_diff)}
+                    .monospace #{short_sha(merge_request_diff.head_commit_sha)}
+                    %small
+                      #{number_with_delimiter(merge_request_diff.commits.count)} #{'commit'.pluralize(merge_request_diff.commits.count)},
+                      = time_ago_with_tooltip(merge_request_diff.created_at)
 
       - if @merge_request_diff.base_commit_sha
         and
@@ -38,27 +40,29 @@
               - else
                 #{@merge_request.target_branch}
             %span.caret
-          %ul.dropdown-menu.dropdown-menu-selectable
+          .dropdown-menu.dropdown-select.dropdown-menu-selectable
             .dropdown-title
-              %span Compared with
-              %button.dropdown-title-button.dropdown-menu-close
+              %span Compared with:
+              %button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
                 = icon('times', class: 'dropdown-menu-close-icon')
-            - @comparable_diffs.each do |merge_request_diff|
-              %li
-                = link_to merge_request_version_path(@project, @merge_request, @merge_request_diff, merge_request_diff.head_commit_sha), class: ('is-active' if merge_request_diff == @start_version) do
-                  %strong
-                    - if merge_request_diff.latest?
-                      latest version
-                    - else
-                      version #{version_index(merge_request_diff)}
-                  .monospace #{short_sha(merge_request_diff.head_commit_sha)}
-                  %small
-                    = time_ago_with_tooltip(merge_request_diff.created_at)
-            %li
-              = link_to merge_request_version_path(@project, @merge_request, @merge_request_diff), class: ('is-active' unless @start_sha) do
-                %strong
-                  #{@merge_request.target_branch} (base)
-                .monospace #{short_sha(@merge_request_diff.base_commit_sha)}
+            .dropdown-content
+              %ul
+                - @comparable_diffs.each do |merge_request_diff|
+                  %li
+                    = link_to merge_request_version_path(@project, @merge_request, @merge_request_diff, merge_request_diff.head_commit_sha), class: ('is-active' if merge_request_diff == @start_version) do
+                      %strong
+                        - if merge_request_diff.latest?
+                          latest version
+                        - else
+                          version #{version_index(merge_request_diff)}
+                      .monospace #{short_sha(merge_request_diff.head_commit_sha)}
+                      %small
+                        = time_ago_with_tooltip(merge_request_diff.created_at)
+                  %li
+                    = link_to merge_request_version_path(@project, @merge_request, @merge_request_diff), class: ('is-active' unless @start_sha) do
+                      %strong
+                        #{@merge_request.target_branch} (base)
+                      .monospace #{short_sha(@merge_request_diff.base_commit_sha)}
 
     - unless @merge_request_diff.latest? && !@start_sha
       .comments-disabled-notif.content-block