Style Dropdown Buttons with New Button Stylesstyle-dropdown-buttons

These dropdown buttons were missing the `btn` class, and were missing
the new button styles.

35 files changed, 66 insertions, 47 deletions

diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.vue b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
index 3fbe8fe1be7..dc07eaf7f59 100644
--- a/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
+++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
@@ -27,7 +27,12 @@ export default {
 </script>
 <template>
   <div class="dropdown inline">
-    <button class="dropdown-menu-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
+    <button
+      class="btn btn-default dropdown-menu-toggle"
+      type="button"
+      data-toggle="dropdown"
+      aria-expanded="false"
+    >
       <span :style="{ backgroundColor: selected.label.color }" class="dropdown-label-box"> </span>
       {{ selected.title }} <icon name="chevron-down" />
     </button>
diff --git a/app/assets/javascripts/boards/components/project_select.vue b/app/assets/javascripts/boards/components/project_select.vue
index a1cf1866faf..d193b75d217 100644
--- a/app/assets/javascripts/boards/components/project_select.vue
+++ b/app/assets/javascripts/boards/components/project_select.vue
@@ -85,7 +85,7 @@ export default {
     <label class="label-bold prepend-top-10">{{ __('Project') }}</label>
     <div ref="projectsDropdown" class="dropdown dropdown-projects">
       <button
-        class="dropdown-menu-toggle wide"
+        class="btn btn-default dropdown-menu-toggle wide"
         type="button"
         data-toggle="dropdown"
         aria-expanded="false"
diff --git a/app/assets/javascripts/ide/components/file_templates/bar.vue b/app/assets/javascripts/ide/components/file_templates/bar.vue
index d459e3b43d3..ec71c10ce14 100644
--- a/app/assets/javascripts/ide/components/file_templates/bar.vue
+++ b/app/assets/javascripts/ide/components/file_templates/bar.vue
@@ -65,7 +65,12 @@ export default {
       @click="selectTemplate"
     />
     <transition name="fade">
-      <button v-show="updateSuccess" type="button" class="btn btn-default" @click="undo">
+      <button
+        v-show="updateSuccess"
+        type="button"
+        class="js-undo-btn btn btn-default"
+        @click="undo"
+      >
         {{ __('Undo') }}
       </button>
     </transition>
diff --git a/app/assets/javascripts/issue_show/components/fields/description_template.vue b/app/assets/javascripts/issue_show/components/fields/description_template.vue
index 6f955928d8e..ac950b455f8 100644
--- a/app/assets/javascripts/issue_show/components/fields/description_template.vue
+++ b/app/assets/javascripts/issue_show/components/fields/description_template.vue
@@ -50,7 +50,7 @@ export default {
       :data-namespace-path="projectNamespace"
       :data-project-path="projectPath"
       :data-data="issuableTemplatesJson"
-      class="dropdown-menu-toggle js-issuable-selector"
+      class="btn btn-default dropdown-menu-toggle js-issuable-selector"
       type="button"
       data-field-name="issuable_template"
       data-selected="null"
diff --git a/app/assets/javascripts/jobs/components/stages_dropdown.vue b/app/assets/javascripts/jobs/components/stages_dropdown.vue
index 6e92b599b0a..89160891cad 100644
--- a/app/assets/javascripts/jobs/components/stages_dropdown.vue
+++ b/app/assets/javascripts/jobs/components/stages_dropdown.vue
@@ -83,7 +83,7 @@ export default {
     <button
       type="button"
       data-toggle="dropdown"
-      class="js-selected-stage dropdown-menu-toggle prepend-top-8"
+      class="js-selected-stage btn btn-default dropdown-menu-toggle prepend-top-8"
     >
       {{ selectedStage }} <i class="fa fa-chevron-down"></i>
     </button>
diff --git a/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue b/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue
index ebd7a17040a..1679654a421 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue
@@ -65,7 +65,7 @@ export default {
       type="button"
       data-toggle="dropdown"
       data-display="static"
-      class="dropdown-menu-toggle build-content"
+      class="btn btn-default dropdown-menu-toggle build-content"
     >
       <ci-icon :status="group.status" />
 
diff --git a/app/assets/javascripts/set_status_modal/set_status_modal_trigger.vue b/app/assets/javascripts/set_status_modal/set_status_modal_trigger.vue
index 0e8b6d93f42..a82e9c8edf6 100644
--- a/app/assets/javascripts/set_status_modal/set_status_modal_trigger.vue
+++ b/app/assets/javascripts/set_status_modal/set_status_modal_trigger.vue
@@ -23,5 +23,5 @@ export default {
 </script>
 
 <template>
-  <button type="button" class="btn menu-item" @click="openModal">{{ buttonText }}</button>
+  <button type="button" class="menu-item" @click="openModal">{{ buttonText }}</button>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
index 22f370c4bca..5c36a06561a 100644
--- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
+++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
@@ -29,7 +29,7 @@ export default {
 <template>
   <button
     :disabled="isDisabled || isLoading"
-    class="dropdown-menu-toggle dropdown-menu-full-width"
+    class="btn btn-default dropdown-menu-toggle dropdown-menu-full-width btn"
     type="button"
     data-toggle="dropdown"
     aria-expanded="false"
diff --git a/app/assets/javascripts/vue_shared/components/pikaday.vue b/app/assets/javascripts/vue_shared/components/pikaday.vue
index 8104d919bf6..ff781a5a69d 100644
--- a/app/assets/javascripts/vue_shared/components/pikaday.vue
+++ b/app/assets/javascripts/vue_shared/components/pikaday.vue
@@ -64,7 +64,12 @@ export default {
 <template>
   <div class="pikaday-container">
     <div class="dropdown open">
-      <button type="button" class="dropdown-menu-toggle" data-toggle="dropdown" @click="toggled">
+      <button
+        type="button"
+        class="btn btn-default dropdown-menu-toggle"
+        data-toggle="dropdown"
+        @click="toggled"
+      >
         <span class="dropdown-toggle-text"> {{ label }} </span>
         <i class="fa fa-chevron-down" aria-hidden="true"> </i>
       </button>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue
index 1eed8907bb7..f874da3e60b 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue
@@ -74,7 +74,7 @@ export default {
     :data-scoped-labels="enableScopedLabels"
     :data-scoped-labels-documentation-link="scopedLabelsDocumentationLink"
     type="button"
-    class="dropdown-menu-toggle wide js-label-select js-multiselect js-context-config-modal"
+    class="btn btn-default dropdown-menu-toggle wide js-label-select js-multiselect js-context-config-modal"
     data-toggle="dropdown"
   >
     <span class="dropdown-toggle-text"> {{ dropdownToggleText }} </span>
diff --git a/app/views/admin/runners/_sort_dropdown.html.haml b/app/views/admin/runners/_sort_dropdown.html.haml
index 4f4f0a543e0..520b11962b2 100644
--- a/app/views/admin/runners/_sort_dropdown.html.haml
+++ b/app/views/admin/runners/_sort_dropdown.html.haml
@@ -1,11 +1,10 @@
 - sorted_by = sort_options_hash[@sort]
 
 .dropdown.inline.prepend-left-10
-  %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' } }
+  %button.btn.btn-default.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' } }
     = sorted_by
     = icon('chevron-down')
   %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
     %li
       = sortable_item(sort_title_created_date,   page_filter_path(sort: sort_value_created_date),   sorted_by)
       = sortable_item(sort_title_contacted_date, page_filter_path(sort: sort_value_contacted_date), sorted_by)
-
diff --git a/app/views/clusters/clusters/gcp/_form.html.haml b/app/views/clusters/clusters/gcp/_form.html.haml
index 4d3e3359ea0..176a984dc5b 100644
--- a/app/views/clusters/clusters/gcp/_form.html.haml
+++ b/app/views/clusters/clusters/gcp/_form.html.haml
@@ -31,7 +31,7 @@
       .js-gcp-project-id-dropdown-entry-point{ data: { docsUrl: 'https://console.cloud.google.com/home/dashboard' } }
         = provider_gcp_field.hidden_field :gcp_project_id
         .dropdown
-          %button.dropdown-menu-toggle.dropdown-menu-full-width{ type: 'button', disabled: true }
+          %button.btn.btn-default.dropdown-menu-toggle.dropdown-menu-full-width{ type: 'button', disabled: true }
             %span.dropdown-toggle-text
               = _('Select project')
             = icon('chevron-down')
@@ -42,7 +42,7 @@
       .js-gcp-zone-dropdown-entry-point
         = provider_gcp_field.hidden_field :zone
         .dropdown
-          %button.dropdown-menu-toggle.dropdown-menu-full-width{ type: 'button', disabled: true }
+          %button.btn.btn-default.dropdown-menu-toggle.dropdown-menu-full-width{ type: 'button', disabled: true }
             %span.dropdown-toggle-text
               = _('Select project to choose zone')
             = icon('chevron-down')
@@ -58,7 +58,7 @@
       .js-gcp-machine-type-dropdown-entry-point
         = provider_gcp_field.hidden_field :machine_type
         .dropdown
-          %button.dropdown-menu-toggle.dropdown-menu-full-width{ type: 'button', disabled: true }
+          %button.btn.btn-default.dropdown-menu-toggle.dropdown-menu-full-width{ type: 'button', disabled: true }
             %span.dropdown-toggle-text
               = _('Select project and zone to choose machine type')
             = icon('chevron-down')
diff --git a/app/views/dashboard/todos/index.html.haml b/app/views/dashboard/todos/index.html.haml
index 731e763f2be..72ad6a7e1a1 100644
--- a/app/views/dashboard/todos/index.html.haml
+++ b/app/views/dashboard/todos/index.html.haml
@@ -64,7 +64,7 @@
               data: { data: todo_actions_options, default_label: 'Action' } })
         .filter-item.sort-filter
           .dropdown
-            %button.dropdown-menu-toggle.dropdown-menu-toggle-sort{ type: 'button', 'data-toggle' => 'dropdown' }
+            %button.btn.btn-default.dropdown-menu-toggle.dropdown-menu-toggle-sort{ type: 'button', 'data-toggle' => 'dropdown' }
               %span.light
               - if @sort.present?
                 = sort_options_hash[@sort]
diff --git a/app/views/explore/projects/_filter.html.haml b/app/views/explore/projects/_filter.html.haml
index d00a3d266d8..f11501e69e7 100644
--- a/app/views/explore/projects/_filter.html.haml
+++ b/app/views/explore/projects/_filter.html.haml
@@ -3,7 +3,7 @@
 
 - if current_user
   .dropdown.js-project-filter-dropdown-wrap{ class: ('d-flex flex-grow-1 flex-shrink-1' if feature_project_list_filter_bar) }
-    %button.dropdown-menu-toggle{ href: '#', "data-toggle" => "dropdown", 'data-display' => 'static' }
+    %button.btn.btn-default.dropdown-menu-toggle{ href: '#', "data-toggle" => "dropdown", 'data-display' => 'static' }
       - unless has_label
         = icon('globe', class: 'mt-1')
         %span.light.ml-3= _("Visibility:")
diff --git a/app/views/help/ui.html.haml b/app/views/help/ui.html.haml
index cdc894ee5a0..fe0873fba1b 100644
--- a/app/views/help/ui.html.haml
+++ b/app/views/help/ui.html.haml
@@ -182,7 +182,7 @@
       .nav-controls
         = text_field_tag 'sample', nil, class: 'form-control'
         .dropdown
-          %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
+          %button.btn.btn-default.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
             %span Sort by name
             = icon('chevron-down')
           %ul.dropdown-menu
@@ -218,7 +218,7 @@
   .example
     .clearfix
       .dropdown.inline.float-left
-        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
+        %button.btn.btn-default.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
           Dropdown
           = icon('chevron-down')
         %ul.dropdown-menu
@@ -226,7 +226,7 @@
             %a{ href: "#" }
               Dropdown option
       .dropdown.inline.float-right
-        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
+        %button.btn.btn-default.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
           Dropdown
           = icon('chevron-down')
         %ul.dropdown-menu.dropdown-menu-right
@@ -236,7 +236,7 @@
   .example
     %div
       .dropdown.inline
-        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
+        %button.btn.btn-default.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
           Dropdown
           = icon('chevron-down')
         %ul.dropdown-menu.dropdown-menu-selectable
@@ -246,7 +246,7 @@
   .example
     %div
       .dropdown.inline
-        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
+        %button.btn.btn-default.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
           Dropdown
           = icon('chevron-down')
         .dropdown-menu.dropdown-select.dropdown-menu-selectable
@@ -285,7 +285,7 @@
             %strong Tip:
             If an author is not a member of this project, you can still filter by his name while using the search field.
       .dropdown.inline
-        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
+        %button.btn.btn-default.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
           Dropdown loading
           = icon('chevron-down')
         .dropdown-menu.dropdown-select.dropdown-menu-selectable.is-loading
@@ -329,7 +329,7 @@
   .example
     %div
       .dropdown.inline
-        %button.dropdown-menu-toggle{ type: 'button', data: {toggle: 'dropdown' } }
+        %button.btn.btn-default.dropdown-menu-toggle{ type: 'button', data: {toggle: 'dropdown' } }
           Dropdown user
           = icon('chevron-down')
         .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user
@@ -353,7 +353,7 @@
   .example
     %div
       .dropdown.inline
-        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
+        %button.btn.btn-default.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
           Dropdown page 2
           = icon('chevron-down')
         .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user.dropdown-menu-paging.is-page-two
@@ -392,7 +392,7 @@
   .example
     %div
       .dropdown.inline
-        %button#js-project-dropdown.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
+        %button#js-project-dropdown.btn.btn-default.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
           Projects
           = icon('chevron-down')
         .dropdown-menu.dropdown-select.dropdown-menu-selectable
diff --git a/app/views/projects/branches/index.html.haml b/app/views/projects/branches/index.html.haml
index 11340d12423..7b51c5fd32e 100644
--- a/app/views/projects/branches/index.html.haml
+++ b/app/views/projects/branches/index.html.haml
@@ -23,7 +23,7 @@
 
       - unless @mode == 'overview'
         .dropdown.inline>
-          %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
+          %button.btn.btn-default.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
             %span.light
               = branches_sort_options_hash[@sort]
             = icon('chevron-down')
diff --git a/app/views/projects/branches/new.html.haml b/app/views/projects/branches/new.html.haml
index af8887b0c39..dd0d47d74f4 100644
--- a/app/views/projects/branches/new.html.haml
+++ b/app/views/projects/branches/new.html.haml
@@ -20,7 +20,7 @@
     .col-sm-10.create-from
       .dropdown
         = hidden_field_tag :ref, default_ref
-        = button_tag type: 'button', title: default_ref, class: 'dropdown-menu-toggle wide js-branch-select monospace', required: true, data: { toggle: 'dropdown', selected: default_ref, field_name: 'ref' } do
+        = button_tag type: 'button', title: default_ref, class: 'btn btn-default dropdown-menu-toggle wide js-branch-select monospace', required: true, data: { toggle: 'dropdown', selected: default_ref, field_name: 'ref' } do
           .text-left.dropdown-toggle-text= default_ref
           = icon('chevron-down')
         = render 'shared/ref_dropdown', dropdown_class: 'wide'
diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml
index 59f0afd59e6..7af22936a16 100644
--- a/app/views/projects/cycle_analytics/show.html.haml
+++ b/app/views/projects/cycle_analytics/show.html.haml
@@ -19,7 +19,7 @@
               %p.text {{ item.title }}
             .col-sm-3.col-12.column
               .dropdown.inline.js-ca-dropdown
-                %button.dropdown-menu-toggle{ "data-toggle" => "dropdown", :type => "button" }
+                %button.btn.btn-default.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-right
diff --git a/app/views/projects/forks/index.html.haml b/app/views/projects/forks/index.html.haml
index 0397a7034c7..63da6a4f437 100644
--- a/app/views/projects/forks/index.html.haml
+++ b/app/views/projects/forks/index.html.haml
@@ -9,7 +9,7 @@
         spellcheck: false, data: { 'filter-selector' => 'span.namespace-name' }
 
     .dropdown
-      %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
+      %button.btn.btn-default.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
         %span.light= _("sort:")
         - if @sort.present?
           = sort_options_hash[@sort]
diff --git a/app/views/projects/tags/index.html.haml b/app/views/projects/tags/index.html.haml
index 1f0de1e2603..5a3cb80c157 100644
--- a/app/views/projects/tags/index.html.haml
+++ b/app/views/projects/tags/index.html.haml
@@ -14,7 +14,7 @@
         = search_field_tag :search, params[:search], { placeholder: s_('TagsPage|Filter by tag name'), id: 'tag-search', class: 'form-control search-text-input input-short', spellcheck: false }
 
       .dropdown
-        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown'} }
+        %button.btn.btn-default.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown'} }
           %span.light
             = tags_sort_options_hash[@sort]
           = icon('chevron-down')
diff --git a/app/views/projects/tags/new.html.haml b/app/views/projects/tags/new.html.haml
index 5e6d06d980e..13cf20479ae 100644
--- a/app/views/projects/tags/new.html.haml
+++ b/app/views/projects/tags/new.html.haml
@@ -20,7 +20,7 @@
     .col-sm-10.create-from
       .dropdown
         = hidden_field_tag :ref, default_ref
-        = button_tag type: 'button', title: default_ref, class: 'dropdown-menu-toggle wide js-branch-select monospace', required: true, data: { toggle: 'dropdown', selected: default_ref, field_name: 'ref' } do
+        = button_tag type: 'button', title: default_ref, class: 'btn btn-default dropdown-menu-toggle wide js-branch-select monospace', required: true, data: { toggle: 'dropdown', selected: default_ref, field_name: 'ref' } do
           .text-left.dropdown-toggle-text= default_ref
           = icon('chevron-down')
         = render 'shared/ref_dropdown', dropdown_class: 'wide'
diff --git a/app/views/search/_filter.html.haml b/app/views/search/_filter.html.haml
index c8b6a3258ab..f5613f8ac8f 100644
--- a/app/views/search/_filter.html.haml
+++ b/app/views/search/_filter.html.haml
@@ -3,7 +3,7 @@
 - if params[:project_id].present?
   = hidden_field_tag :project_id, params[:project_id]
 .dropdown
-  %button.dropdown-menu-toggle.js-search-group-dropdown{ type: "button", data: { toggle: "dropdown", default_label: _('Group:'), group_id: params[:group_id] } }
+  %button.btn.btn-default.dropdown-menu-toggle.js-search-group-dropdown{ type: "button", data: { toggle: "dropdown", default_label: _('Group:'), group_id: params[:group_id] } }
     %span.dropdown-toggle-text
       = _("Group:")
       - if @group.present?
@@ -18,7 +18,7 @@
     = dropdown_loading
 
 .dropdown.project-filter
-  %button.dropdown-menu-toggle.js-search-project-dropdown{ type: "button", data: { toggle: "dropdown", default_label: _('Project:') } }
+  %button.btn.btn-default.dropdown-menu-toggle.js-search-project-dropdown{ type: "button", data: { toggle: "dropdown", default_label: _('Project:') } }
     %span.dropdown-toggle-text
       = _("Project:")
       - if @project.present?
diff --git a/app/views/shared/_milestones_sort_dropdown.html.haml b/app/views/shared/_milestones_sort_dropdown.html.haml
index 9a1db831ad3..3576943f210 100644
--- a/app/views/shared/_milestones_sort_dropdown.html.haml
+++ b/app/views/shared/_milestones_sort_dropdown.html.haml
@@ -1,5 +1,5 @@
 .dropdown.inline.prepend-left-10
-  %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
+  %button.btn.btn-default.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
     %span.light
     - if @sort.present?
       = milestone_sort_options_hash[@sort]
diff --git a/app/views/shared/boards/components/sidebar/_assignee.html.haml b/app/views/shared/boards/components/sidebar/_assignee.html.haml
index af6a519a967..d9bea22a87c 100644
--- a/app/views/shared/boards/components/sidebar/_assignee.html.haml
+++ b/app/views/shared/boards/components/sidebar/_assignee.html.haml
@@ -20,7 +20,7 @@
         ":data-username" => "assignee.username" }
       .dropdown
         - dropdown_options = assignees_dropdown_options('issue')
-        %button.dropdown-menu-toggle.js-user-search.js-author-search.js-multiselect.js-save-user-data.js-issue-board-sidebar{ type: 'button', ref: 'assigneeDropdown', data: board_sidebar_user_data,
+        %button.btn.btn-default.dropdown-menu-toggle.js-user-search.js-author-search.js-multiselect.js-save-user-data.js-issue-board-sidebar{ type: 'button', ref: 'assigneeDropdown', data: board_sidebar_user_data,
           ":data-issuable-id" => "issue.iid" }
           = dropdown_options[:title]
           = icon("chevron-down")
diff --git a/app/views/shared/boards/components/sidebar/_due_date.html.haml b/app/views/shared/boards/components/sidebar/_due_date.html.haml
index 117d56b30f5..0d78a0650ae 100644
--- a/app/views/shared/boards/components/sidebar/_due_date.html.haml
+++ b/app/views/shared/boards/components/sidebar/_due_date.html.haml
@@ -21,7 +21,7 @@
         name: "issue[due_date]",
         ":value" => "issue.dueDate" }
       .dropdown
-        %button.dropdown-menu-toggle.js-due-date-select.js-issue-boards-due-date{ type: 'button',
+        %button.btn.btn-default.dropdown-menu-toggle.js-due-date-select.js-issue-boards-due-date{ type: 'button',
           data: { toggle: 'dropdown', field_name: "issue[due_date]", ability_name: "issue" } }
           %span.dropdown-toggle-text= _("Due date")
           = icon('chevron-down')
diff --git a/app/views/shared/boards/components/sidebar/_labels.html.haml b/app/views/shared/boards/components/sidebar/_labels.html.haml
index c50826a7cda..928c7e62bb0 100644
--- a/app/views/shared/boards/components/sidebar/_labels.html.haml
+++ b/app/views/shared/boards/components/sidebar/_labels.html.haml
@@ -25,7 +25,7 @@
         "v-for" => "label in issue.labels",
         ":value" => "label.id" }
       .dropdown
-        %button.dropdown-menu-toggle.js-label-select.js-multiselect.js-issue-board-sidebar{ type: "button",
+        %button.btn.btn-default.dropdown-menu-toggle.js-label-select.js-multiselect.js-issue-board-sidebar{ type: "button",
           ":data-selected" => "selectedLabels",
           ":data-labels" => "issue.assignableLabelsEndpoint",
           data: label_dropdown_data(@project, namespace_path: @namespace_path, field_name: "issue[label_names][]") }
diff --git a/app/views/shared/boards/components/sidebar/_milestone.html.haml b/app/views/shared/boards/components/sidebar/_milestone.html.haml
index b15d60002fc..bcd3d1d2781 100644
--- a/app/views/shared/boards/components/sidebar/_milestone.html.haml
+++ b/app/views/shared/boards/components/sidebar/_milestone.html.haml
@@ -16,7 +16,7 @@
         name: "issue[milestone_id]",
         "v-if" => "issue.milestone" }
       .dropdown
-        %button.dropdown-menu-toggle.js-milestone-select.js-issue-board-sidebar{ type: "button", data: { toggle: "dropdown", show_no: "true", field_name: "issue[milestone_id]", milestones: milestones_filter_path(format: :json), ability_name: "issue", use_id: "true", default_no: "true" },
+        %button.btn.btn-default.dropdown-menu-toggle.js-milestone-select.js-issue-board-sidebar{ type: "button", data: { toggle: "dropdown", show_no: "true", field_name: "issue[milestone_id]", milestones: milestones_filter_path(format: :json), ability_name: "issue", use_id: "true", default_no: "true" },
           ":data-selected" => "milestoneTitle",
           ":data-issuable-id" => "issue.iid" }
           = _("Milestone")
diff --git a/app/views/shared/groups/_dropdown.html.haml b/app/views/shared/groups/_dropdown.html.haml
index f4915440cb2..d6c1e35dfd1 100644
--- a/app/views/shared/groups/_dropdown.html.haml
+++ b/app/views/shared/groups/_dropdown.html.haml
@@ -9,7 +9,7 @@
     - default_sort_by = sort_value_recently_created
 
 .dropdown.inline.js-group-filter-dropdown-wrap.append-right-10
-  %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
+  %button.btn.btn-default.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
     %span.dropdown-label
       = options_hash[default_sort_by]
     = icon('chevron-down')
diff --git a/app/views/shared/issuable/_label_dropdown.html.haml b/app/views/shared/issuable/_label_dropdown.html.haml
index 483652852b6..8386208043d 100644
--- a/app/views/shared/issuable/_label_dropdown.html.haml
+++ b/app/views/shared/issuable/_label_dropdown.html.haml
@@ -20,7 +20,7 @@
     = hidden_field_tag data_options[:field_name], use_id ? label.try(:id) : label.try(:title), id: nil
 
 .dropdown
-  %button.dropdown-menu-toggle.js-label-select.js-multiselect.qa-issuable-label{ class: classes.join(' '), type: "button", data: dropdown_data }
+  %button.btn.btn-default.dropdown-menu-toggle.js-label-select.js-multiselect.qa-issuable-label{ class: classes.join(' '), type: "button", data: dropdown_data }
     - apply_is_default_styles = (selected.nil? || selected.empty?) && !no_default_styles
     %span.dropdown-toggle-text{ class: ("is-default" if apply_is_default_styles) }
       = multi_label_name(selected, label_name)
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index b4f8377c008..150575360f7 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -83,7 +83,7 @@
             .selectbox.hide-collapsed
               = f.hidden_field :due_date, value: issuable_sidebar[:due_date].try(:strftime, 'yy-mm-dd')
               .dropdown
-                %button.dropdown-menu-toggle.js-due-date-select{ type: 'button', data: { toggle: 'dropdown', field_name: "#{issuable_type}[due_date]", ability_name: issuable_type, issue_update: issuable_sidebar[:issuable_json_path], display: 'static' } }
+                %button.btn.btn-default.dropdown-menu-toggle.js-due-date-select{ type: 'button', data: { toggle: 'dropdown', field_name: "#{issuable_type}[due_date]", ability_name: issuable_type, issue_update: issuable_sidebar[:issuable_json_path], display: 'static' } }
                   %span.dropdown-toggle-text
                     = _('Due date')
                   = icon('chevron-down', 'aria-hidden': 'true')
@@ -114,7 +114,7 @@
           - selected_labels.each do |label|
             = hidden_field_tag "#{issuable_type}[label_names][]", label[:id], id: nil
           .dropdown
-            %button.dropdown-menu-toggle.js-label-select.js-multiselect.js-label-sidebar-dropdown{ type: "button", data: sidebar_label_dropdown_data(issuable_type, issuable_sidebar) }
+            %button.btn.btn-default.dropdown-menu-toggle.js-label-select.js-multiselect.js-label-sidebar-dropdown{ type: "button", data: sidebar_label_dropdown_data(issuable_type, issuable_sidebar) }
               %span.dropdown-toggle-text{ class: ("is-default" if selected_labels.empty?) }
                 = multi_label_name(selected_labels, "Labels")
               = icon('chevron-down', 'aria-hidden': 'true')
diff --git a/app/views/shared/labels/_sort_dropdown.html.haml b/app/views/shared/labels/_sort_dropdown.html.haml
index 07e96eea062..6b0ae5c5ea6 100644
--- a/app/views/shared/labels/_sort_dropdown.html.haml
+++ b/app/views/shared/labels/_sort_dropdown.html.haml
@@ -1,6 +1,6 @@
 - sort_title = label_sort_options_hash[@sort] || sort_title_name_desc
 .dropdown.inline
-  %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
+  %button.btn.btn-default.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
     = sort_title
     = icon('chevron-down')
   %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-sort
diff --git a/app/views/shared/members/_group.html.haml b/app/views/shared/members/_group.html.haml
index e83ca5eaab8..5446cd4ff79 100644
--- a/app/views/shared/members/_group.html.haml
+++ b/app/views/shared/members/_group.html.haml
@@ -20,7 +20,7 @@
     = form_tag project_group_link_path(@project, group_link), method: :put, remote: true, class: 'js-edit-member-form form-group d-sm-flex' do
       = hidden_field_tag "group_link[group_access]", group_link.group_access
       .member-form-control.dropdown.mr-sm-2.d-sm-inline-block
-        %button.dropdown-menu-toggle.js-member-permissions-dropdown{ type: "button",
+        %button.btn.btn-default.dropdown-menu-toggle.js-member-permissions-dropdown{ type: "button",
           disabled: !can_admin_member,
           data: { toggle: "dropdown", field_name: "group_link[group_access]" } }
           %span.dropdown-toggle-text
diff --git a/app/views/shared/members/_member.html.haml b/app/views/shared/members/_member.html.haml
index 331283f7eec..1f3cd456d06 100644
--- a/app/views/shared/members/_member.html.haml
+++ b/app/views/shared/members/_member.html.haml
@@ -70,7 +70,7 @@
           = form_for member, remote: true, html: { class: "js-edit-member-form form-group #{'d-sm-flex' unless force_mobile_view}" } do |f|
             = f.hidden_field :access_level
             .member-form-control.dropdown{ class: [("mr-sm-2 d-sm-inline-block" unless force_mobile_view)] }
-              %button.dropdown-menu-toggle.js-member-permissions-dropdown{ type: "button",
+              %button.btn.btn-default.dropdown-menu-toggle.js-member-permissions-dropdown{ type: "button",
                 disabled: member.can_override? && !override,
                 data: { toggle: "dropdown", field_name: "#{f.object_name}[access_level]" } }
                 %span.dropdown-toggle-text
diff --git a/changelogs/unreleased/style-dropdown-buttons.yml b/changelogs/unreleased/style-dropdown-buttons.yml
new file mode 100644
index 00000000000..6899096ed64
--- /dev/null
+++ b/changelogs/unreleased/style-dropdown-buttons.yml
@@ -0,0 +1,5 @@
+---
+title: Style Dropdown Buttons with New Button Styles
+merge_request: 30806
+author:
+type: fixed
diff --git a/spec/javascripts/ide/components/file_templates/bar_spec.js b/spec/javascripts/ide/components/file_templates/bar_spec.js
index a688f7f69a6..00277b205e1 100644
--- a/spec/javascripts/ide/components/file_templates/bar_spec.js
+++ b/spec/javascripts/ide/components/file_templates/bar_spec.js
@@ -92,7 +92,7 @@ describe('IDE file templates bar component', () => {
   it('calls undoFileTemplate when clicking undo button', () => {
     spyOn(vm, 'undoFileTemplate').and.stub();
 
-    vm.$el.querySelector('.btn-default').click();
+    vm.$el.querySelector('.js-undo-btn').click();
 
     expect(vm.undoFileTemplate).toHaveBeenCalled();
   });