Fix dropdowns

app/assets/javascripts/environments/components/environment_actions.vue

@@ -75,7 +75,7 @@
       </span>
     </button>
 
-    <ul class="dropdown-menu dropdown-menu-align-right">
+    <ul class="dropdown-menu dropdown-menu-right">
       <li
         v-for="(action, i) in actions"
         :key="i">

app/assets/javascripts/pipelines/components/pipelines_actions.vue

@@ -63,7 +63,7 @@
       <loading-icon v-if="isLoading" />
     </button>
 
-    <ul class="dropdown-menu dropdown-menu-align-right">
+    <ul class="dropdown-menu dropdown-menu-right">
       <li
         v-for="(action, i) in actions"
         :key="i"

app/assets/javascripts/pipelines/components/pipelines_artifacts.vue

@@ -37,7 +37,7 @@
       >
       </i>
     </button>
-    <ul class="dropdown-menu dropdown-menu-align-right">
+    <ul class="dropdown-menu dropdown-menu-right">
       <li
         v-for="(artifact, i) in artifacts"
         :key="i">

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue

@@ -131,7 +131,7 @@ export default {
             aria-hidden="true">
           </i>
         </button>
-        <ul class="dropdown-menu dropdown-menu-align-right">
+        <ul class="dropdown-menu dropdown-menu-right">
           <li>
             <a
               class="js-download-email-patches"

app/assets/stylesheets/framework/dropdowns.scss

@@ -206,11 +206,10 @@
 
 .dropdown-menu,
 .dropdown-menu-nav {
-  @include set-invisible;
+  display: none;
   position: absolute;
   width: auto;
   top: 100%;
-  left: 0;
   z-index: 300;
   min-width: 240px;
   max-width: 500px;
@@ -474,11 +473,6 @@
   }
 }
 
-.dropdown-menu-align-right {
-  left: auto;
-  right: 0;
-}
-
 .dropdown-menu-selectable {
   li {
     a,

app/assets/stylesheets/pages/groups.scss

@@ -36,7 +36,7 @@
     flex: 1;
   }
 
-  .dropdown-menu-align-right {
+  .dropdown-menu-right {
     margin-top: 0;
   }
 

app/assets/stylesheets/pages/members.scss

@@ -27,7 +27,7 @@
       display: flex;
     }
 
-    .dropdown-menu.dropdown-menu-align-right {
+    .dropdown-menu.dropdown-menu-right {
       margin-top: -2px;
     }
   }

app/assets/stylesheets/pages/notifications.scss

@@ -2,7 +2,7 @@
   line-height: 34px;
 
   .dropdown-menu {
-    @extend .dropdown-menu-align-right;
+    @extend .dropdown-menu-right;
   }
 }
 

app/assets/stylesheets/pages/projects.scss

@@ -232,7 +232,7 @@
   }
 
   .notification-dropdown .dropdown-menu {
-    @extend .dropdown-menu-align-right;
+    @extend .dropdown-menu-right;
   }
 
   .download-button {

app/views/admin/projects/index.html.haml

@@ -15,7 +15,7 @@
             - namespace = Namespace.find(params[:namespace_id])
             - toggle_text = "#{namespace.kind}: #{namespace.full_path}"
           = dropdown_toggle(toggle_text, { toggle: 'dropdown', is_filter: 'true' }, { toggle_class: 'js-namespace-select large' })
-          .dropdown-menu.dropdown-select.dropdown-menu-align-right
+          .dropdown-menu.dropdown-select.dropdown-menu-right
             = dropdown_title('Namespaces')
             = dropdown_filter("Search for Namespace")
             = dropdown_content

app/views/admin/users/_user.html.haml

@@ -21,7 +21,7 @@
         %a.dropdown-new.btn.btn-secondary#project-settings-button{ href: '#', data: { toggle: 'dropdown' } }
           = icon('cog')
           = icon('caret-down')
-        %ul.dropdown-menu.dropdown-menu-align-right
+        %ul.dropdown-menu.dropdown-menu-right
           %li.dropdown-header
             Settings
             %li

app/views/admin/users/index.html.haml

@@ -13,7 +13,7 @@
         .dropdown
           - toggle_text = if @sort.present? then sort_options_hash[@sort] else sort_title_name end
           = dropdown_toggle(toggle_text, { toggle: 'dropdown' })
-          %ul.dropdown-menu.dropdown-menu-align-right
+          %ul.dropdown-menu.dropdown-menu-right
             %li.dropdown-header
               Sort by
             %li

app/views/dashboard/todos/index.html.haml

@@ -35,7 +35,7 @@
           - if params[:project_id].present?
             = hidden_field_tag(:project_id, params[:project_id])
           = dropdown_tag(project_dropdown_label(params[:project_id], 'Project'), options: { toggle_class: 'js-project-search js-filter-submit', title: 'Filter by project', filter: true, filterInput: 'input#project-search', dropdown_class: 'dropdown-menu-selectable dropdown-menu-project js-filter-submit',
-            placeholder: 'Search projects', data: { data: todo_projects_options, default_label: 'Project' } })
+            placeholder: 'Search projects', data: { data: todo_projects_options, default_label: 'Project', display: 'static' } })
         .filter-item.inline
           - if params[:author_id].present?
             = hidden_field_tag(:author_id, params[:author_id])
@@ -60,7 +60,7 @@
               - else
                 = sort_title_recently_created
               = icon('chevron-down')
-            %ul.dropdown-menu.dropdown-menu-sort
+            %ul.dropdown-menu.dropdown-menu-sort.dropdown-menu-right
               %li
                 = link_to todos_filter_path(sort: sort_value_label_priority) do
                   = sort_title_label_priority

app/views/explore/projects/_filter.html.haml

@@ -8,7 +8,7 @@
       - else
         Any
       = icon('chevron-down')
-    %ul.dropdown-menu.dropdown-menu-align-right
+    %ul.dropdown-menu.dropdown-menu-right
       %li
         = link_to filter_projects_path(visibility_level: nil) do
           Any

app/views/groups/show.html.haml

@@ -20,7 +20,7 @@
             %input.btn.btn-success.dropdown-primary.js-new-group-child{ type: "button", value: new_project_label, data: { action: "new-project" } }
             %button.btn.btn-success.dropdown-toggle.js-dropdown-toggle{ type: "button", data: { "dropdown-trigger" => "#new-project-or-subgroup-dropdown" } }
               = icon("caret-down", class: "dropdown-btn-icon")
-            %ul#new-project-or-subgroup-dropdown.dropdown-menu.dropdown-menu-align-right{ data: { dropdown: true } }
+            %ul#new-project-or-subgroup-dropdown.dropdown-menu.dropdown-menu-right{ data: { dropdown: true } }
               %li.droplab-item-selected{ role: "button", data: { value: "new-project", text: new_project_label } }
                 .menu-item
                   .icon-container

app/views/help/ui.html.haml

@@ -230,7 +230,7 @@
         %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
           Dropdown
           = icon('chevron-down')
-        %ul.dropdown-menu.dropdown-menu-align-right
+        %ul.dropdown-menu.dropdown-menu-right
           %li
             %a{ href: "#" }
               Dropdown option

app/views/layouts/header/_default.html.haml

@@ -52,7 +52,7 @@
               = link_to current_user, class: user_dropdown_class, data: { toggle: "dropdown" } do
                 = image_tag avatar_icon_for_user(current_user, 23), width: 23, height: 23, class: "header-user-avatar qa-user-avatar"
                 = sprite_icon('angle-down', css_class: 'caret-down')
-              .dropdown-menu-nav.dropdown-menu-align-right
+              .dropdown-menu.dropdown-menu-nav.dropdown-menu-right
                 %ul
                   %li.current-user
                     .user-name.bold

app/views/layouts/header/_new_dropdown.haml

@@ -2,7 +2,7 @@
   = link_to new_project_path, class: "header-new-dropdown-toggle has-tooltip qa-new-menu-toggle", title: "New...", ref: 'tooltip', aria: { label: "New..." }, data: { toggle: 'dropdown', placement: 'bottom', container: 'body' } do
     = sprite_icon('plus-square', size: 16)
     = sprite_icon('angle-down', css_class: 'caret-down')
-  .dropdown-menu-nav.dropdown-menu-align-right
+  .dropdown-menu.dropdown-menu-nav.dropdown-menu-right
     %ul
       - if @group&.persisted?
         - create_group_project = can?(current_user, :create_projects, @group)

app/views/projects/branches/index.html.haml

@@ -26,7 +26,7 @@
             %span.light
               = branches_sort_options_hash[@sort]
             = icon('chevron-down')
-          %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable
+          %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
             %li.dropdown-header
               = s_('Branches|Sort by')
             - branches_sort_options_hash.each do |value, title|

app/views/projects/buttons/_download.html.haml

@@ -7,7 +7,7 @@
       = sprite_icon('download')
       = icon("caret-down")
       %span.sr-only=  _('Select Archive Format')
-    %ul.dropdown-menu.dropdown-menu-align-right{ role: 'menu' }
+    %ul.dropdown-menu.dropdown-menu-right{ role: 'menu' }
       %li.dropdown-header
         #{ _('Source code') }
       %li

app/views/projects/buttons/_dropdown.html.haml

@@ -11,7 +11,7 @@
     %a.btn.dropdown-toggle.has-tooltip{ href: '#', title: _('Create new...'), 'data-toggle' => 'dropdown', 'data-container' => 'body', 'aria-label' => _('Create new...') }
       = icon('plus')
       = icon("caret-down")
-    %ul.dropdown-menu.dropdown-menu-align-right.project-home-dropdown
+    %ul.dropdown-menu.dropdown-menu-right.project-home-dropdown
       - if can_create_issue || merge_project || can_create_project_snippet
         %li.dropdown-header= _('This project')
 

app/views/projects/commit/_commit_box.html.haml

@@ -30,7 +30,7 @@
       %a.btn.btn-secondary.dropdown-toggle{ data: { toggle: "dropdown" } }
         %span= _('Options')
         = icon('caret-down')
-      %ul.dropdown-menu.dropdown-menu-align-right
+      %ul.dropdown-menu.dropdown-menu-right
         %li.d-block.d-sm-none.d-md-none
           = link_to project_tree_path(@project, @commit) do
             #{ _('Browse Files') }

app/views/projects/cycle_analytics/show.html.haml

@@ -22,7 +22,7 @@
                 %button.dropdown-menu-toggle{ "data-toggle" => "dropdown", :type => "button" }
                   %span.dropdown-label {{ n__('Last %d day', 'Last %d days', 30) }}
                   %i.fa.fa-chevron-down
-                %ul.dropdown-menu.dropdown-menu-align-right
+                %ul.dropdown-menu.dropdown-menu-right
                   %li
                     %a{ "href" => "#", "data-value" => "7" }
                       {{ n__('Last %d day', 'Last %d days', 7) }}

app/views/projects/deployments/_actions.haml

@@ -6,7 +6,7 @@
         %button.dropdown.dropdown-new.btn.btn-secondary{ type: 'button', 'data-toggle' => 'dropdown' }
           = custom_icon('icon_play')
           = icon('caret-down')
-        %ul.dropdown-menu.dropdown-menu-align-right
+        %ul.dropdown-menu.dropdown-menu-right
           - actions.each do |action|
             - next unless can?(current_user, :update_build, action)
             %li

app/views/projects/forks/index.html.haml

@@ -16,7 +16,7 @@
         - else
           = sort_title_recently_created
         = icon('chevron-down')
-      %ul.dropdown-menu.dropdown-menu-align-right
+      %ul.dropdown-menu.dropdown-menu-right
         %li
           - excluded_filters = [:state, :scope, :label_name, :milestone_id, :assignee_id, :author_id]
           = link_to page_filter_path(sort: sort_value_recently_created, without: excluded_filters) do

app/views/projects/issues/_new_branch.html.haml

@@ -22,7 +22,7 @@
         = icon('caret-down')
 
       .droplab-dropdown
-        %ul#create-merge-request-dropdown.create-merge-request-dropdown-menu.dropdown-menu.dropdown-menu-align-right.gl-show-field-errors{ data: { dropdown: true } }
+        %ul#create-merge-request-dropdown.create-merge-request-dropdown-menu.dropdown-menu.dropdown-menu-right.gl-show-field-errors{ data: { dropdown: true } }
           - if can_create_merge_request
             %li.droplab-item-selected{ role: 'button', data: { value: 'create-mr', text: _('Create merge request') } }
               .menu-item

app/views/projects/issues/show.html.haml

@@ -34,7 +34,7 @@
       %button.btn.btn-secondary.float-left.d-md-none.d-lg-none.d-xl-none{ type: "button", data: { toggle: "dropdown" } }
         Options
         = icon('caret-down')
-      .dropdown-menu.dropdown-menu-align-right.d-lg-none.d-xl-none
+      .dropdown-menu.dropdown-menu-right.d-lg-none.d-xl-none
         %ul
           - unless current_user == @issue.author
             %li= link_to 'Report abuse', new_abuse_report_path(user_id: @issue.author.id, ref_url: issue_url(@issue))

app/views/projects/merge_requests/_mr_title.html.haml

@@ -24,7 +24,7 @@
       %button.btn.btn-secondary.float-left.d-md-none.d-lg-none.d-xl-none{ type: "button", data: { toggle: "dropdown" } }
         Options
         = icon('caret-down')
-      .dropdown-menu.dropdown-menu-align-right.d-lg-none.d-xl-none
+      .dropdown-menu.dropdown-menu-right.d-lg-none.d-xl-none
         %ul
           - if can_update_merge_request
             %li= link_to 'Edit', edit_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)

app/views/projects/tags/index.html.haml

@@ -16,7 +16,7 @@
           %span.light
             = tags_sort_options_hash[@sort]
           = icon('chevron-down')
-        %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable
+        %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
           %li.dropdown-header
             = s_('TagsPage|Sort by')
           - tags_sort_options_hash.each do |value, title|

app/views/search/_filter.html.haml

@@ -11,7 +11,7 @@
       - else
         Any
     = icon("chevron-down")
-  .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-align-right
+  .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-right
     = dropdown_title("Filter results by group")
     = dropdown_filter("Search groups")
     = dropdown_content
@@ -26,7 +26,7 @@
       - else
         Any
     = icon("chevron-down")
-  .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-align-right
+  .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-right
     = dropdown_title("Filter results by project")
     = dropdown_filter("Search projects")
     = dropdown_content

app/views/shared/_label.html.haml

@@ -12,7 +12,7 @@
     %button.btn.btn-secondary.label-options-toggle{ type: 'button', data: { toggle: "dropdown" } }
       Options
       = icon('caret-down')
-    .dropdown-menu.dropdown-menu-align-right
+    .dropdown-menu.dropdown-menu-right
       %ul
         - if show_label_merge_requests_link
           %li

app/views/shared/_milestones_sort_dropdown.html.haml

@@ -6,7 +6,7 @@
     - else
       = sort_title_due_date_soon
     = icon('chevron-down')
-  %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-sort
+  %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-sort
     %li
       = link_to page_filter_path(sort: sort_value_due_date_soon, label: true) do
         = sort_title_due_date_soon

app/views/shared/_ref_switcher.html.haml

@@ -9,7 +9,7 @@
     = hidden_field_tag key, value, id: nil
   .dropdown
     = dropdown_toggle dropdown_toggle_text, { toggle: "dropdown", selected: dropdown_toggle_text, ref: @ref, refs_url: refs_project_path(@project, sort: 'updated_desc'), field_name: 'ref', submit_form_on_click: true, visit: true }, { toggle_class: "js-project-refs-dropdown" }
-    .dropdown-menu.dropdown-menu-selectable.git-revision-dropdown.dropdown-menu-paging{ class: ("dropdown-menu-align-right" if local_assigns[:align_right]) }
+    .dropdown-menu.dropdown-menu-selectable.git-revision-dropdown.dropdown-menu-paging{ class: ("dropdown-menu-right" if local_assigns[:align_right]) }
       .dropdown-page-one
         = dropdown_title _("Switch branch/tag")
         = dropdown_filter _("Search branches and tags")

app/views/shared/_sort_dropdown.html.haml

@@ -2,10 +2,10 @@
 - viewing_issues = controller.controller_name == 'issues' || controller.action_name == 'issues'
 
 .dropdown.inline.prepend-left-10
-  %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown' } }
+  %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' } }
     = sorted_by
     = icon('chevron-down')
-  %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable.dropdown-menu-sort
+  %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
     %li
       = sortable_item(sort_title_priority,         page_filter_path(sort: sort_value_priority,         label: true), sorted_by)
       = sortable_item(sort_title_created_date,     page_filter_path(sort: sort_value_created_date,     label: true), sorted_by)

app/views/shared/groups/_dropdown.html.haml

@@ -13,7 +13,7 @@
     %span.dropdown-label
       = options_hash[default_sort_by]
     = icon('chevron-down')
-  %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable
+  %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
     %li.dropdown-header
       = _("Sort by")
     - options_hash.each do |value, title|

app/views/shared/issuable/_search_bar.html.haml

@@ -107,7 +107,7 @@
               .dropdown.prepend-left-10#js-add-list
                 %button.btn.btn-create.btn-inverted.js-new-board-list{ type: "button", data: board_list_data }
                   Add list
-                .dropdown-menu.dropdown-menu-paging.dropdown-menu-align-right.dropdown-menu-issues-board-new.dropdown-menu-selectable
+                .dropdown-menu.dropdown-menu-paging.dropdown-menu-right.dropdown-menu-issues-board-new.dropdown-menu-selectable
                   = render partial: "shared/issuable/label_page_default", locals: { show_footer: true, show_create: true, show_boards_content: true, title: "Add list" }
                   - if can?(current_user, :admin_label, board.parent)
                     = render partial: "shared/issuable/label_page_create"

app/views/shared/members/_group.html.haml

@@ -23,7 +23,7 @@
           %span.dropdown-toggle-text
             = group_link.human_access
           = icon("chevron-down")
-        .dropdown-menu.dropdown-select.dropdown-menu-align-right.dropdown-menu-selectable
+        .dropdown-menu.dropdown-select.dropdown-menu-right.dropdown-menu-selectable
           = dropdown_title("Change permissions")
           .dropdown-content
             %ul

app/views/shared/members/_member.html.haml

@@ -65,7 +65,7 @@
                 %span.dropdown-toggle-text
                   = member.human_access
                 = icon("chevron-down")
-              .dropdown-menu.dropdown-select.dropdown-menu-align-right.dropdown-menu-selectable
+              .dropdown-menu.dropdown-select.dropdown-menu-right.dropdown-menu-selectable
                 = dropdown_title("Change permissions")
                 .dropdown-content
                   %ul

app/views/shared/members/_sort_dropdown.html.haml

 .dropdown.inline.member-sort-dropdown
   = dropdown_toggle(member_sort_options_hash[@sort], { toggle: 'dropdown' })
-  %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable
+  %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
     %li.dropdown-header
       Sort by
     - member_sort_options_hash.each do |value, title|

app/views/shared/projects/_dropdown.html.haml

 - @sort ||= sort_value_latest_activity
 .dropdown.js-project-filter-dropdown-wrap
   - toggle_text = projects_sort_options_hash[@sort]
-  = dropdown_toggle(toggle_text, { toggle: 'dropdown' }, { id: 'sort-projects-dropdown' })
-  %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable
+  = dropdown_toggle(toggle_text, { toggle: 'dropdown', display: 'static' }, { id: 'sort-projects-dropdown' })
+  %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
     %li.dropdown-header
       Sort by
     - projects_sort_options_hash.each do |value, title|

app/views/shared/web_hooks/_test_button.html.haml

@@ -6,7 +6,7 @@
   %button.btn{ 'data-toggle' => 'dropdown', class: button_class }
     Test
     = icon('caret-down')
-  %ul.dropdown-menu.dropdown-menu-align-right{ role: 'menu' }
+  %ul.dropdown-menu.dropdown-menu-right{ role: 'menu' }
     - triggers.each_value do |event|
       %li
         = link_to_test_hook(hook, event)

features/steps/shared/issuable.rb

@@ -108,7 +108,7 @@ module SharedIssuable
   step 'I sort the list by "Least popular"' do
     find('button.dropdown-toggle').click
 
-    page.within('.content ul.dropdown-menu.dropdown-menu-align-right li') do
+    page.within('.content ul.dropdown-menu.dropdown-menu-right li') do
       click_link 'Least popular'
     end
   end

spec/features/projects/issues/user_sorts_issues_spec.rb

@@ -18,7 +18,7 @@ describe "User sorts issues" do
   it "sorts by popularity" do
     find("button.dropdown-toggle").click
 
-    page.within(".content ul.dropdown-menu.dropdown-menu-align-right li") do
+    page.within(".content ul.dropdown-menu.dropdown-menu-right li") do
       click_link("Popularity")
     end
 

spec/features/projects/merge_requests/user_sorts_merge_requests_spec.rb

@@ -18,7 +18,7 @@ describe 'User sorts merge requests' do
   it 'keeps the sort option' do
     find('button.dropdown-toggle').click
 
-    page.within('.content ul.dropdown-menu.dropdown-menu-align-right li') do
+    page.within('.content ul.dropdown-menu.dropdown-menu-right li') do
       click_link('Last updated')
     end
 
@@ -43,7 +43,7 @@ describe 'User sorts merge requests' do
     it 'sorts by popularity' do
       find('button.dropdown-toggle').click
 
-      page.within('.content ul.dropdown-menu.dropdown-menu-align-right li') do
+      page.within('.content ul.dropdown-menu.dropdown-menu-right li') do
         click_link('Popularity')
       end
 

spec/support/helpers/features/sorting_helpers.rb

@@ -15,7 +15,7 @@ module Spec
           def sort_by(value)
             find('button.dropdown-toggle').click
 
-            page.within('.content ul.dropdown-menu.dropdown-menu-align-right li') do
+            page.within('.content ul.dropdown-menu.dropdown-menu-right li') do
               click_link(value)
             end
           end