Apply GitLab UI button styles to buttons in ee/app/views/shared/epic directory

ee/app/helpers/ee/sorting_helper.rb

@@ -72,7 +72,7 @@ module EE
 
       link_to sprite_icon(sort_icon),
               page_filter_path(sort: opposite_sorting_param),
-              class: "btn btn-default has-tooltip qa-reverse-sort btn-sort-direction",
+              class: "btn gl-button btn-default btn-icon has-tooltip qa-reverse-sort btn-sort-direction",
               title: _("Sort direction")
     end
   end

ee/app/views/shared/epic/_search_bar.html.haml

@@ -11,13 +11,13 @@
   .epics-details-filters.filtered-search-block.d-flex.flex-column.flex-md-row.row-content-block.second-block
     - if show_roadmap_presets
       .btn-group.btn-group-toggle.gl-mr-3.js-btn-roadmap-presets{ data: { toggle: 'buttons' } }
-        %label.btn.btn-default.btn-roadmap-preset{ class: ("active" if is_quarters) }
+        %label.btn.gl-button.btn-secondary.btn-roadmap-preset{ class: ("active" if is_quarters) }
           %input{ type: 'radio', name: 'presetType', autocomplete: 'off', checked: ("checked" if is_quarters), value: 'QUARTERS' }
             = _('Quarters')
-        %label.btn.btn-default.btn-roadmap-preset{ class: ("active" if is_months) }
+        %label.btn.gl-button.btn-secondary.btn-roadmap-preset{ class: ("active" if is_months) }
           %input{ type: 'radio', name: 'presetType', autocomplete: 'off', checked: ("checked" if is_months), value: 'MONTHS' }
             = _('Months')
-        %label.btn.btn-default.btn-roadmap-preset{ class: ("active" if is_weeks) }
+        %label.btn.gl-button.btn-secondary.btn-roadmap-preset{ class: ("active" if is_weeks) }
           %input{ type: 'radio', name: 'presetType', autocomplete: 'off', checked: ("checked" if is_weeks), value: 'WEEKS' }
             = _('Weeks')
       .filter-dropdown-container.gl-mr-3

ee/app/views/shared/epic/_sort_dropdown.html.haml

 - hide_extra_sort_options = local_assigns.fetch(:hide_extra_sort_options, false)
 - sorted_by = epics_sort_options_hash[@sort]
 
-.dropdown.gl-ml-3
+.dropdown.gl-new-dropdown.gl-ml-3
   .btn-group.d-flex.d-md-inline-flex
-    %button.btn.dropdown-toggle.epics-sort-btn{ type: 'button', data: { toggle: 'dropdown' } }
-      = sorted_by
-      = sprite_icon('chevron-down', css_class: 'gl-text-gray-200')
-    %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
-      %li
-        - if !hide_extra_sort_options
-          = sortable_item(sort_title_created_date, page_filter_path(sort: sort_value_recently_created), sorted_by)
-          = sortable_item(sort_title_recently_updated, page_filter_path(sort: sort_value_recently_updated), sorted_by)
-        = sortable_item(sort_title_start_date, page_filter_path(sort: sort_value_start_date_soon), sorted_by)
-        = sortable_item(sort_title_end_date, page_filter_path(sort: sort_value_end_date), sorted_by)
+    .btn-group
+      %button.btn.gl-button.btn-default.dropdown-toggle.epics-sort-btn{ type: 'button', data: { toggle: 'dropdown' } }
+        %span.gl-new-dropdown-button-text
+          = sorted_by
+        = sprite_icon('chevron-down', css_class: 'gl-button-icon dropdown-chevron gl-icon s16')
+      %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
+        .gl-new-dropdown-inner
+          %li
+            - if !hide_extra_sort_options
+              = sortable_item(sort_title_created_date, page_filter_path(sort: sort_value_recently_created), sorted_by)
+              = sortable_item(sort_title_recently_updated, page_filter_path(sort: sort_value_recently_updated), sorted_by)
+            = sortable_item(sort_title_start_date, page_filter_path(sort: sort_value_start_date_soon), sorted_by)
+            = sortable_item(sort_title_end_date, page_filter_path(sort: sort_value_end_date), sorted_by)
     = sort_order_button(@sort)

ee/app/views/shared/epic/_state_dropdown.html.haml

-.dropdown.inline.dropdown-epics-state
-  %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown' } }
+.dropdown.gl-new-dropdown.inline.dropdown-epics-state
+  %button.btn.gl-button.btn-default.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown' } }
     = epic_state_title(@epics_state)
-    = sprite_icon('chevron-down', css_class: 'gl-text-gray-200')
+    = sprite_icon('chevron-down', css_class: 'gl-button-icon gl-icon dropdown-chevron' )
   %ul.dropdown-menu.dropdown-menu-selectable
-    %li
-      = epic_state_dropdown_link('all', @epics_state)
-    .dropdown-divider
-    %li
-      = epic_state_dropdown_link('opened', @epics_state)
-    %li
-      = epic_state_dropdown_link('closed', @epics_state)
+    .gl-new-dropdown-inner
+      %li
+        = epic_state_dropdown_link('all', @epics_state)
+      .dropdown-divider
+      %li
+        = epic_state_dropdown_link('opened', @epics_state)
+      %li
+        = epic_state_dropdown_link('closed', @epics_state)

ee/changelogs/unreleased/231131-apply-gitlab-ui-button-styles-to-buttons-in-ee-app-views-shared.yml

+---
+title: Apply GitLab UI button and dropdown styles to buttons in ee/app/views/shared/epic
+  directory
+merge_request: 56729
+author:
+type: other