Add sort direction button with sort dropdown

ee/app/assets/stylesheets/pages/roadmap.scss

@@ -4,9 +4,21 @@ $details-cell-width: 320px;
 $border-style: 1px solid $border-gray-normal;
 $roadmap-gradient-dark-gray: rgba(0, 0, 0, 0.15);
 $roadmap-gradient-gray: rgba(255, 255, 255, 0.001);
-$scroll-top-gradient: linear-gradient(to bottom, $roadmap-gradient-dark-gray 0%, $roadmap-gradient-gray 100%);
-$scroll-bottom-gradient: linear-gradient(to bottom, $roadmap-gradient-gray 0%, $roadmap-gradient-dark-gray 100%);
-$column-right-gradient: linear-gradient(to right, $roadmap-gradient-dark-gray 0%, $roadmap-gradient-gray 100%);
+$scroll-top-gradient: linear-gradient(
+  to bottom,
+  $roadmap-gradient-dark-gray 0%,
+  $roadmap-gradient-gray 100%
+);
+$scroll-bottom-gradient: linear-gradient(
+  to bottom,
+  $roadmap-gradient-gray 0%,
+  $roadmap-gradient-dark-gray 100%
+);
+$column-right-gradient: linear-gradient(
+  to right,
+  $roadmap-gradient-dark-gray 0%,
+  $roadmap-gradient-gray 100%
+);
 
 @mixin roadmap-scroll-mixin {
   height: $grid-size;
@@ -14,6 +26,27 @@ $column-right-gradient: linear-gradient(to right, $roadmap-gradient-dark-gray 0%
   pointer-events: none;
 }
 
+.epics-details-filters {
+  .btn-group {
+    .dropdown-toggle {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    .dropdown-toggle-split {
+      color: $gl-text-color-secondary;
+      border: 1px solid $border-color;
+      border-left: 0;
+      border-top-right-radius: $border-radius-base;
+      border-bottom-right-radius: $border-radius-base;
+
+      &:hover {
+        color: $gl-text-color;
+      }
+    }
+  }
+}
+
 .epics-roadmap-filters {
   .epics-details-filters {
     .btn-roadmap-preset {
@@ -269,11 +302,21 @@ $column-right-gradient: linear-gradient(to right, $roadmap-gradient-dark-gray 0%
         }
 
         &.start-date-undefined {
-          background: linear-gradient(to right, $roadmap-gradient-gray 0%, $blue-200 50%, $blue-500 100%);
+          background: linear-gradient(
+            to right,
+            $roadmap-gradient-gray 0%,
+            $blue-200 50%,
+            $blue-500 100%
+          );
         }
 
         &.end-date-undefined {
-          background: linear-gradient(to right, $blue-500 0%, $blue-200 50%, $roadmap-gradient-gray 100%);
+          background: linear-gradient(
+            to right,
+            $blue-500 0%,
+            $blue-200 50%,
+            $roadmap-gradient-gray 100%
+          );
         }
 
         &.start-date-outside {

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

 - sorted_by = sort_options_hash[@sort]
 
 .dropdown.inline.prepend-left-10
-  %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown' } }
-    = 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,     label: true), sorted_by)
-      = sortable_item(sort_title_recently_updated, page_filter_path(sort: sort_value_recently_updated, label: true), sorted_by)
-      = sortable_item(sort_title_start_date,       page_filter_path(sort: sort_value_start_date, label: true), sorted_by)
-      = sortable_item(sort_title_end_date,         page_filter_path(sort: sort_value_end_date, label: true), sorted_by)
+  .btn-group
+    %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown' } }
+      = 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,     label: true), sorted_by)
+        = sortable_item(sort_title_recently_updated, page_filter_path(sort: sort_value_recently_updated, label: true), sorted_by)
+        = sortable_item(sort_title_start_date,       page_filter_path(sort: sort_value_start_date, label: true), sorted_by)
+        = sortable_item(sort_title_end_date,         page_filter_path(sort: sort_value_end_date, label: true), sorted_by)
+    %button.dropdown-toggle-split.pt-2{ type: 'button' }
+      = sprite_icon('sort-highest', size: 16)
+      -# = sprite_icon('sort-lowest', size: 16)