Merge branch 'icons-update-nav-bars' into 'master'

Updated All Navigation Icons to Sprite_Icons

See merge request gitlab-org/gitlab-ce!14559

app/assets/images/icons.json

-{"iconCount":134,"icons":["abuse","account","admin","angle-double-left","angle-down","angle-left","angle-right","angle-up","appearance","applications","approval","arrow-right","assignee","bold","book","branch","calendar","cancel","chevron-down","chevron-left","chevron-right","chevron-up","clock","code","comment-dots","comment-next","comment","comments","commit","credit-card","disk","doc_code","doc_image","doc_text","download","duplicate","earth","eye-slash","eye","file-additions","file-deletion","file-modified","filter","folder","fork","geo-nodes","git-merge","group","history","home","hook","issue-block","issue-child","issue-close","issue-duplicate","issue-new","issue-open-m","issue-open","issue-parent","issues","key-2","key","label","labels","leave","level-up","license","link","list-bulleted","list-numbered","location-dot","location","lock-open","lock","log","mail","merge-request-close-m","merge-request-close","messages","mobile-issue-close","monitor","more","notifications-off","notifications","overview","pencil","pipeline","play","plus-square-o","plus-square","plus","preferences","profile","project","push-rules","question-o","question","quote","redo","remove","repeat","retry","scale","screen-full","screen-normal","search","settings","shield","slight-frown","slight-smile","smile","smiley","snippet","spam","star-o","star","stop","talic","task-done","template","thump-down","thump-up","timer","todo-add","todo-done","token","unapproval","unassignee","unlink","user","users","volume-up","warning","work"]}
\ No newline at end of file
+{"iconCount":135,"spriteSize":58718,"icons":["abuse","account","admin","angle-double-left","angle-double-right","angle-down","angle-left","angle-right","angle-up","appearance","applications","approval","arrow-right","assignee","bold","book","branch","calendar","cancel","chevron-down","chevron-left","chevron-right","chevron-up","clock","close","code","comment-dots","comment-next","comment","comments","commit","credit-card","disk","doc_code","doc_image","doc_text","download","duplicate","earth","eye-slash","eye","file-additions","file-deletion","file-modified","filter","folder","fork","geo-nodes","git-merge","group","history","home","hook","issue-block","issue-child","issue-close","issue-duplicate","issue-new","issue-open-m","issue-open","issue-parent","issues","key-2","key","label","labels","leave","level-up","license","link","list-bulleted","list-numbered","location-dot","location","lock-open","lock","log","mail","merge-request-close","messages","mobile-issue-close","monitor","more","notifications-off","notifications","overview","pencil","pipeline","play","plus-square-o","plus-square","plus","preferences","profile","project","push-rules","question-o","question","quote","redo","remove","repeat","retry","scale","screen-full","screen-normal","search","settings","shield","slight-frown","slight-smile","smile","smiley","snippet","spam","star-o","star","stop","talic","task-done","template","thump-down","thump-up","timer","todo-add","todo-done","token","unapproval","unassignee","unlink","user","users","volume-up","warning","work"]}
\ No newline at end of file

app/assets/javascripts/search_autocomplete.js

@@ -287,6 +287,7 @@ import { isInGroupsPage, isInProjectPage, getGroupSlug, getProjectSlug } from '.
 
     onClearInputClick(e) {
       e.preventDefault();
+      this.wrap.toggleClass('has-value', !!e.target.value);
       return this.searchInput.val('').focus();
     }
 

app/assets/stylesheets/framework/gitlab-theme.scss

@@ -126,7 +126,7 @@
     .search-input-wrap {
       .search-icon,
       .clear-icon {
-        color: rgba($color-200, .8);
+        fill: rgba($color-200, .8);
       }
     }
 
@@ -141,7 +141,7 @@
 
       .search-input-wrap {
         .search-icon {
-          color: rgba($color-200, .8);
+          fill: rgba($color-200, .8);
         }
       }
     }
@@ -252,7 +252,7 @@ body {
 
       .search-input-wrap {
         .search-icon {
-          color: $theme-gray-200;
+          fill: $theme-gray-200;
         }
 
         .search-input {

app/assets/stylesheets/framework/header.scss

@@ -109,8 +109,7 @@ header {
 
       .user-counter {
         svg {
-          height: 16px;
-          width: 23px;
+          margin-right: 3px;
         }
       }
 
@@ -133,16 +132,16 @@ header {
   }
 
   &.navbar-gitlab-new {
-    .fa-times {
+    .close-icon {
       display: none;
     }
 
     .menu-expanded {
-      .fa-ellipsis-v {
+      .more-icon {
         display: none;
       }
 
-      .fa-times {
+      .close-icon {
         display: block;
       }
     }

app/assets/stylesheets/framework/images.scss

@@ -27,7 +27,9 @@
 }
 
 svg {
+  &.s8 { @include svg-size(8px); }
   &.s16 { @include svg-size(16px); }
+  &.s18 { @include svg-size(18px); }
   &.s24 { @include svg-size(24px); }
   &.s32 { @include svg-size(32px); }
   &.s48 { @include svg-size(48px); }

app/assets/stylesheets/framework/new-nav.scss

@@ -120,17 +120,24 @@ header.navbar-gitlab-new {
   .container-fluid {
     .navbar-toggle {
       min-width: 45px;
-      padding: 4px $gl-padding;
+      padding: 0 $gl-padding;
       margin-right: -7px;
-      font-size: 14px;
       text-align: center;
       color: currentColor;
 
+      svg {
+        fill: currentColor;
+      }
+
       &:hover,
       &:focus,
       &.active {
         color: currentColor;
         background-color: transparent;
+
+        svg {
+          fill: currentColor;
+        }
       }
     }
 
@@ -279,10 +286,6 @@ header.navbar-gitlab-new {
   }
 }
 
-.admin-icon i {
-  font-size: 18px;
-}
-
 .caret-down {
   height: 11px;
   width: 11px;

app/assets/stylesheets/framework/new-sidebar.scss

@@ -56,8 +56,8 @@ $new-sidebar-collapsed-width: 50px;
     color: $hover-color;
 
     .settings-avatar {
-      i {
-        color: $hover-color;
+      svg {
+        fill: $hover-color;
       }
     }
   }
@@ -76,12 +76,9 @@ $new-sidebar-collapsed-width: 50px;
 .settings-avatar {
   background-color: $white-light;
 
-  i {
-    font-size: 20px;
-    width: 100%;
-    color: $gl-text-color-secondary;
-    text-align: center;
-    align-self: center;
+  svg {
+    fill: $gl-text-color-secondary;
+    margin: auto;
   }
 }
 
@@ -177,16 +174,16 @@ $new-sidebar-collapsed-width: 50px;
   .nav-icon-container {
     display: flex;
     margin-right: 8px;
-
-    svg {
-      height: 16px;
-      width: 16px;
-    }
   }
 
   .fly-out-top-item {
     display: none;
   }
+
+  svg {
+    height: 16px;
+    width: 16px;
+  }
 }
 
 .nav-sidebar-inner-scroll {
@@ -354,18 +351,22 @@ $new-sidebar-collapsed-width: 50px;
   display: flex;
   align-items: center;
 
-  i {
-    font-size: 20px;
+  svg {
+    fill: $gl-text-color-secondary;
     margin-right: 8px;
   }
 
-  .fa-angle-double-right {
+  .icon-angle-double-right {
     display: none;
   }
 
   &:hover {
     background-color: $border-color;
     color: $gl-text-color;
+
+    svg {
+      fill: $gl-text-color;
+    }
   }
 }
 
@@ -407,15 +408,16 @@ $new-sidebar-collapsed-width: 50px;
 
   .toggle-sidebar-button {
     width: $new-sidebar-collapsed-width - 2px;
-    padding: 16px 18px;
+    padding: 16px;
 
     .collapse-text,
-    .fa-angle-double-left {
+    .icon-angle-double-left {
       display: none;
     }
 
-    .fa-angle-double-right {
+    .icon-angle-double-right {
       display: block;
+      margin: 0;
     }
   }
 }

app/assets/stylesheets/pages/search.scss

@@ -81,17 +81,10 @@ input[type="checkbox"]:hover {
     .clear-icon {
       position: absolute;
       right: 5px;
-      top: 0;
-
-      &::before {
-        font-family: FontAwesome;
-        font-weight: $gl-font-weight-normal;
-        font-style: normal;
-      }
+      top: 4px;
     }
 
     .search-icon {
-      @extend .fa-search;
       transition: color $default-transition-duration;
       -webkit-user-select: none;
       -moz-user-select: none;
@@ -99,7 +92,6 @@ input[type="checkbox"]:hover {
     }
 
     .clear-icon {
-      @extend .fa-times;
       display: none;
     }
 

app/helpers/breadcrumbs_helper.rb

@@ -21,7 +21,7 @@ module BreadcrumbsHelper
 
   def breadcrumb_list_item(link)
     content_tag "li" do
-      link + icon("angle-right", class: "breadcrumbs-list-angle")
+      link + sprite_icon("angle-right", size: 8, css_class: "breadcrumbs-list-angle")
     end
   end
 

app/helpers/icons_helper.rb

@@ -24,9 +24,9 @@ module IconsHelper
   end
 
   def sprite_icon(icon_name, size: nil, css_class: nil)
-    css_classes = size ? "s#{size}" : nil
+    css_classes = size ? "s#{size}" : ""
     css_classes << " #{css_class}" unless css_class.blank?
-    content_tag(:svg, content_tag(:use, "", { "xlink:href" => "#{image_path('icons.svg')}##{icon_name}" } ), class: css_classes)
+    content_tag(:svg, content_tag(:use, "", { "xlink:href" => "#{image_path('icons.svg')}##{icon_name}" } ), class: css_classes.empty? ? nil : css_classes)
   end
 
   def audit_icon(names, options = {})

app/views/layouts/_search.html.haml

@@ -21,8 +21,8 @@
                   %a
                     Loading...
             = dropdown_loading
-          %i.search-icon
-          %i.clear-icon.js-clear-input
+          = sprite_icon('search', size: 16, css_class: 'search-icon')
+          = sprite_icon('close', size: 16, css_class: 'clear-icon js-clear-input')
 
     = hidden_field_tag :group_id, @group.try(:id), class: 'js-search-group-options', data: group_data_attrs
 

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

@@ -22,29 +22,29 @@
             = render 'layouts/search' unless current_controller?(:search)
           %li.visible-sm-inline-block.visible-xs-inline-block
             = link_to search_path, title: 'Search', aria: { label: "Search" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
-              = icon('search')
+              = sprite_icon('search', size: 16)
           - if current_user
             = nav_link(path: 'dashboard#issues', html_options: { class: "user-counter" }) do
               = link_to assigned_issues_dashboard_path, title: 'Issues', class: 'dashboard-shortcuts-issues', aria: { label: "Issues" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
-                = custom_icon('issues')
+                = sprite_icon('issues', size: 16)
                 - issues_count = assigned_issuables_count(:issues)
                 %span.badge.issues-count{ class: ('hidden' if issues_count.zero?) }
                   = number_with_delimiter(issues_count)
             = nav_link(path: 'dashboard#merge_requests', html_options: { class: "user-counter" }) do
               = link_to assigned_mrs_dashboard_path, title: 'Merge requests', class: 'dashboard-shortcuts-merge_requests', aria: { label: "Merge requests" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
-                = custom_icon('mr_bold')
+                = sprite_icon('git-merge', size: 16)
                 - merge_requests_count = assigned_issuables_count(:merge_requests)
                 %span.badge.merge-requests-count{ class: ('hidden' if merge_requests_count.zero?) }
                   = number_with_delimiter(merge_requests_count)
             = nav_link(controller: 'dashboard/todos', html_options: { class: "user-counter" }) do
               = link_to dashboard_todos_path, title: 'Todos', aria: { label: "Todos" }, class: 'shortcuts-todos', data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
-                = custom_icon('todo_done')
+                = sprite_icon('todo-done', size: 16)
                 %span.badge.todos-count{ class: ('hidden' if todos_pending_count.zero?) }
                   = todos_count_format(todos_pending_count)
             %li.header-user.dropdown
               = link_to current_user, class: user_dropdown_class, data: { toggle: "dropdown" } do
                 = image_tag avatar_icon(current_user, 23), width: 23, height: 23, class: "header-user-avatar"
-                = custom_icon('caret_down')
+                = sprite_icon('angle-down', css_class: 'caret-down')
               .dropdown-menu-nav.dropdown-menu-align-right
                 %ul
                   %li.current-user
@@ -73,7 +73,7 @@
 
       %button.navbar-toggle.hidden-sm.hidden-md.hidden-lg{ type: 'button' }
         %span.sr-only Toggle navigation
-        = icon('ellipsis-v', class: 'js-navbar-toggle-right')
-        = icon('times', class: 'js-navbar-toggle-left')
+        = sprite_icon('more', size: 16, css_class: 'more-icon js-navbar-toggle-right')
+        = sprite_icon('close', size: 16, css_class: 'close-icon js-navbar-toggle-left')
 
 = render 'shared/outdated_browser'

app/views/layouts/header/_new_dropdown.haml

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

app/views/layouts/nav/_dashboard.html.haml

@@ -2,7 +2,7 @@
   = nav_link(path: ['root#index', 'projects#trending', 'projects#starred', 'dashboard/projects#index'], html_options: { id: 'nav-projects-dropdown', class: "home dropdown header-projects" }) do
     %a{ href: "#", data: { toggle: "dropdown" } }
       Projects
-      = custom_icon('caret_down')
+      = sprite_icon('angle-down', css_class: 'caret-down')
     .dropdown-menu.projects-dropdown-menu
       = render "layouts/nav/projects_dropdown/show"
 
@@ -25,7 +25,7 @@
   %li.header-more.dropdown.hidden-lg
     %a{ href: "#", data: { toggle: "dropdown" } }
       More
-      = custom_icon('caret_down')
+      = sprite_icon('angle-down', css_class: 'caret-down')
     .dropdown-menu
       %ul
         = nav_link(controller: ['dashboard/groups', 'explore/groups'], html_options: { class: "visible-xs" }) do
@@ -54,7 +54,7 @@
   - if current_user.admin?
     = nav_link(controller: 'admin/dashboard') do
       = link_to admin_root_path, class: 'admin-icon', title: 'Admin area', aria: { label: "Admin area" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
-        = icon('wrench fw')
+        = sprite_icon('admin', size: 18)
   - if Gitlab::Sherlock.enabled?
     %li
       = link_to sherlock_transactions_path, class: 'admin-icon', title: 'Sherlock Transactions',

app/views/layouts/nav/breadcrumbs/_collapsed_dropdown.html.haml

@@ -4,7 +4,7 @@
   %li.dropdown
     %button.text-expander.has-tooltip.js-breadcrumbs-collapsed-expander{ type: "button", data: { toggle: "dropdown", container: "body" }, "aria-label": button_tooltip, title: button_tooltip }
       = icon("ellipsis-h")
-    = icon("angle-right", class: "breadcrumbs-list-angle")
+    = sprite_icon("angle-right", css_class: "breadcrumbs-list-angle")
     .dropdown-menu
       %ul
         - @breadcrumb_dropdown_links[dropdown_location].each_with_index do |link, index|

app/views/layouts/nav/sidebar/_admin.html.haml

@@ -3,7 +3,7 @@
     .context-header
       = link_to admin_root_path, title: 'Admin Overview' do
         .avatar-container.s40.settings-avatar
-          = icon('wrench')
+          = sprite_icon('admin', size: 24)
         .sidebar-context-title Admin Area
     %ul.sidebar-top-level-items
       = nav_link(controller: %w(dashboard admin projects users groups jobs runners cohorts conversational_development_index), html_options: {class: 'home'}) do
@@ -12,7 +12,6 @@
             = sprite_icon('overview')
           %span.nav-item-name
             Overview
-
         %ul.sidebar-sub-level-items
           = nav_link(controller: %w(dashboard admin projects users groups jobs runners cohorts conversational_development_index), html_options: { class: "fly-out-top-item" } ) do
             = link_to admin_root_path do

app/views/layouts/nav/sidebar/_profile.html.haml

@@ -3,7 +3,7 @@
     .context-header
       = link_to profile_path, title: 'Profile Settings' do
         .avatar-container.s40.settings-avatar
-          = icon('user')
+          = sprite_icon('user', size: 24)
         .sidebar-context-title User Settings
     %ul.sidebar-top-level-items
       = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do

app/views/shared/_sidebar_toggle_button.html.haml

 %a.toggle-sidebar-button.js-toggle-sidebar{ role: "button", type: "button", title: "Toggle sidebar" }
-  = icon('angle-double-left')
-  = icon('angle-double-right')
+  = sprite_icon('angle-double-left', css_class: 'icon-angle-double-left')
+  = sprite_icon('angle-double-right', css_class: 'icon-angle-double-right')
   %span.collapse-text Collapse sidebar
 
 = button_tag class: 'close-nav-button', type: 'button' do
-  = icon ('times')
+  = sprite_icon('close', size: 16)
   %span.collapse-text Close sidebar

yarn.lock

@@ -2714,7 +2714,7 @@ getpass@^0.1.1:
 
 "gitlab-svgs@https://gitlab.com/gitlab-org/gitlab-svgs.git":
   version "1.0.2"
-  resolved "https://gitlab.com/gitlab-org/gitlab-svgs.git#7f36f3951dd08904761780da48efcd639f34c3af"
+  resolved "https://gitlab.com/gitlab-org/gitlab-svgs.git#e7621d7b028607ae9c69f8b496cd49b42fe607e4"
 
 glob-base@^0.3.0:
   version "0.3.0"