Use top-area component for top page navigation for pages that contains list of items

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

 - page_title "Milestones"
 - header_title "Milestones", dashboard_milestones_path
 
-.project-issuable-filter
-  .controls
-    = render 'shared/new_project_item_select', path: 'milestones/new', label: "New Milestone", include_groups: true
-
+.top-area
   = render 'shared/milestones_filter'
 
+  .nav-controls
+    = render 'shared/new_project_item_select', path: 'milestones/new', label: "New Milestone", include_groups: true
+
 .gray-content-block
   List all milestones from all projects you have access to.
 

app/views/groups/milestones/index.html.haml

 - page_title "Milestones"
 - header_title group_title(@group, "Milestones", group_milestones_path(@group))
 
-.project-issuable-filter
-  .controls
-    - if can?(current_user, :admin_milestones, @group)
-      .pull-right
-        %span.pull-right.hidden-xs
-          = link_to new_group_milestone_path(@group), class: "btn btn-new" do
-            = icon('plus')
-            New Milestone
-
+.top-area
   = render 'shared/milestones_filter'
 
+  .nav-controls
+    - if can?(current_user, :admin_milestones, @group)
+      = link_to new_group_milestone_path(@group), class: "btn btn-new" do
+        = icon('plus')
+        New Milestone
+
 .gray-content-block
   Only milestones from
   %strong #{@group.name}

app/views/help/ui.html.haml

@@ -139,7 +139,31 @@
   %h2#navs Navigation
 
   %h4
+    %code .top-area
+  %p Holder for top page navigation. Includes navigation, search field, sorting and button
+
+  .example
+    .top-area
+      %ul.nav-links
+        %li.active
+          %a Open
+        %li
+          %a Closed
+      .nav-controls
+        = text_field_tag 'sample', nil, class: 'form-control'
+        .dropdown
+          %button.dropdown-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'}
+            %span Sort by name
+            %b.caret
+          %ul.dropdown-menu
+            %li
+              %a Sort by date
+
+        = link_to 'New issue', '#', class: 'btn btn-new'
+
+  %h4
     %code .nav-links
+  %p Only nav links without button and search
   .example
     %ul.nav-links
       %li.active

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

 - page_title "Builds"
 = render "header_title"
 
-.project-issuable-filter
-  .controls
-    - if can?(current_user, :manage_builds, @project)
-      .pull-left.hidden-xs
-        - if @all_builds.running_or_pending.any?
-          = link_to 'Cancel running', cancel_all_namespace_project_builds_path(@project.namespace, @project),
-            data: { confirm: 'Are you sure?' }, class: 'btn btn-danger', method: :post
-
-        = link_to ci_lint_path, class: 'btn btn-default' do
-          = icon('wrench')
-          %span CI Lint
-
+.top-area
   %ul.nav-links
     %li{class: ('active' if @scope.nil?)}
       = link_to project_builds_path(@project) do
@@ -32,6 +21,16 @@
         %span.badge.js-running-count
           = number_with_delimiter(@all_builds.finished.count(:id))
 
+  .nav-controls
+    - if can?(current_user, :manage_builds, @project)
+      - if @all_builds.running_or_pending.any?
+        = link_to 'Cancel running', cancel_all_namespace_project_builds_path(@project.namespace, @project),
+          data: { confirm: 'Are you sure?' }, class: 'btn btn-danger', method: :post
+
+      = link_to ci_lint_path, class: 'btn btn-default' do
+        = icon('wrench')
+        %span CI Lint
+
 .gray-content-block
   #{(@scope || 'running').capitalize} builds from this project
 

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

 - page_title "Labels"
 = render "header_title"
 
-.gray-content-block.top-block
-  - if can? current_user, :admin_label, @project
-    = link_to new_namespace_project_label_path(@project.namespace, @project), class: "pull-right btn btn-new" do
-      = icon('plus')
-      New label
-  .oneline
+.top-area
+  .nav-text
     Labels can be applied to issues and merge requests.
+  .nav-controls
+    - if can? current_user, :admin_label, @project
+      = link_to new_namespace_project_label_path(@project.namespace, @project), class: "btn btn-new" do
+        = icon('plus')
+        New label
 
 .labels
   - if @labels.present?

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

@@ -2,15 +2,15 @@
 = render "header_title"
 
 
-.project-issuable-filter
-  .controls
+.top-area
+  = render 'shared/milestones_filter'
+
+  .nav-controls
     - if can?(current_user, :admin_milestone, @project)
-      = link_to new_namespace_project_milestone_path(@project.namespace, @project), class: "pull-right btn btn-new", title: "New Milestone" do
-        %i.fa.fa-plus
+      = link_to new_namespace_project_milestone_path(@project.namespace, @project), class: "btn btn-new", title: "New Milestone" do
+        = icon('plus')
         New Milestone
 
-  = render 'shared/milestones_filter'
-
 .gray-content-block
   Milestone allows you to group issues and set due date for it
 

app/views/projects/wikis/_nav.html.haml

-.project-issuable-filter
-  .controls
-    - if can?(current_user, :create_wiki, @project)
-      = link_to '#modal-new-wiki', class: "add-new-wiki btn btn-new", "data-toggle" => "modal" do
-        %i.fa.fa-plus
-        New Page
-
-      = render 'projects/wikis/new'
-
+.top-area
   %ul.nav-links
     = nav_link(html_options: {class: params[:id] == 'home' ? 'active' : '' }) do
       = link_to 'Home', namespace_project_wiki_path(@project.namespace, @project, :home)
@@ -17,3 +9,11 @@
     = nav_link(path: 'wikis#git_access') do
       = link_to namespace_project_wikis_git_access_path(@project.namespace, @project) do
         Git Access
+
+  .nav-controls
+    - if can?(current_user, :create_wiki, @project)
+      = link_to '#modal-new-wiki', class: "add-new-wiki btn btn-new", "data-toggle" => "modal" do
+        = icon('plus')
+        New Page
+
+      = render 'projects/wikis/new'

app/views/shared/_milestones_filter.html.haml

-.milestones-filters
-  %ul.nav-links
-    %li{class: ("active" if params[:state].blank? || params[:state] == 'opened')}
-      = link_to milestones_filter_path(state: 'opened') do
-        Open
-    %li{class: ("active" if params[:state] == 'closed')}
-      = link_to milestones_filter_path(state: 'closed') do
-        Closed
-    %li{class: ("active" if params[:state] == 'all')}
-      = link_to milestones_filter_path(state: 'all') do
-        All
+%ul.nav-links
+  %li{class: ("active" if params[:state].blank? || params[:state] == 'opened')}
+    = link_to milestones_filter_path(state: 'opened') do
+      Open
+  %li{class: ("active" if params[:state] == 'closed')}
+    = link_to milestones_filter_path(state: 'closed') do
+      Closed
+  %li{class: ("active" if params[:state] == 'all')}
+    = link_to milestones_filter_path(state: 'all') do
+      All