Merge branch '223101-follow-up-from-replace-double-angle-icons-with-chevron' into 'master'

Replace double angle icons with GitLab SVG in issuables sidebar

See merge request gitlab-org/gitlab!43655

app/assets/javascripts/behaviors/collapse_sidebar_on_window_resize.js

@@ -8,7 +8,6 @@ import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
  * @sentrify
  */
 export default () => {
-  const $sidebarGutterToggle = $('.js-sidebar-toggle');
   let bootstrapBreakpoint = bp.getBreakpointSize();
 
   $(window).on('resize.app', () => {
@@ -19,8 +18,13 @@ export default () => {
       const breakpointSizes = ['md', 'sm', 'xs'];
 
       if (breakpointSizes.includes(bootstrapBreakpoint)) {
-        const $gutterIcon = $sidebarGutterToggle.find('i');
-        if ($gutterIcon.hasClass('fa-angle-double-right')) {
+        const $toggleContainer = $('.js-sidebar-toggle-container');
+        const isExpanded = $toggleContainer.data('is-expanded');
+        const $expandIcon = $('.js-sidebar-expand');
+
+        if (isExpanded) {
+          const $sidebarGutterToggle = $expandIcon.closest('.js-sidebar-toggle');
+
           $sidebarGutterToggle.trigger('click');
         }
 

app/assets/javascripts/right_sidebar.js

@@ -43,13 +43,17 @@ Sidebar.prototype.addEventListeners = function() {
 
 Sidebar.prototype.sidebarToggleClicked = function(e, triggered) {
   const $this = $(this);
-  const isExpanded = $this.find('i').hasClass('fa-angle-double-right');
+  const $collapseIcon = $('.js-sidebar-collapse');
+  const $expandIcon = $('.js-sidebar-expand');
+  const $toggleContainer = $('.js-sidebar-toggle-container');
+  const isExpanded = $toggleContainer.data('is-expanded');
   const tooltipLabel = isExpanded ? __('Expand sidebar') : __('Collapse sidebar');
-  const $allGutterToggleIcons = $('.js-sidebar-toggle i');
   e.preventDefault();
 
   if (isExpanded) {
-    $allGutterToggleIcons.removeClass('fa-angle-double-right').addClass('fa-angle-double-left');
+    $toggleContainer.data('is-expanded', false);
+    $collapseIcon.addClass('hidden');
+    $expandIcon.removeClass('hidden');
     $('aside.right-sidebar')
       .removeClass('right-sidebar-expanded')
       .addClass('right-sidebar-collapsed');
@@ -57,7 +61,9 @@ Sidebar.prototype.sidebarToggleClicked = function(e, triggered) {
       .removeClass('right-sidebar-expanded')
       .addClass('right-sidebar-collapsed');
   } else {
-    $allGutterToggleIcons.removeClass('fa-angle-double-left').addClass('fa-angle-double-right');
+    $toggleContainer.data('is-expanded', true);
+    $expandIcon.addClass('hidden');
+    $collapseIcon.removeClass('hidden');
     $('aside.right-sidebar')
       .removeClass('right-sidebar-collapsed')
       .addClass('right-sidebar-expanded');

app/helpers/issuables_helper.rb

@@ -4,7 +4,10 @@ module IssuablesHelper
   include GitlabRoutingHelper
 
   def sidebar_gutter_toggle_icon
-    sidebar_gutter_collapsed? ? icon('angle-double-left', { 'aria-hidden': 'true' }) : icon('angle-double-right', { 'aria-hidden': 'true' })
+    content_tag(:span, class: 'js-sidebar-toggle-container', data: { is_expanded: !sidebar_gutter_collapsed? }) do
+      sprite_icon('chevron-double-lg-left', css_class: "js-sidebar-expand #{'hidden' unless sidebar_gutter_collapsed?}") +
+      sprite_icon('chevron-double-lg-right', css_class: "js-sidebar-collapse #{'hidden' if sidebar_gutter_collapsed?}")
+    end
   end
 
   def sidebar_gutter_collapsed_class

changelogs/unreleased/223101-follow-up-from-replace-double-angle-icons-with-chevron.yml

+---
+title: Replace double angle icons with GitLab SVG in issuables sidebar
+merge_request: 43655
+author:
+type: changed

spec/frontend/right_sidebar_spec.js

@@ -6,7 +6,9 @@ import Sidebar from '~/right_sidebar';
 
 let $aside = null;
 let $toggle = null;
-let $icon = null;
+let $toggleContainer = null;
+let $expandIcon = null;
+let $collapseIcon = null;
 let $page = null;
 let $labelsIcon = null;
 
@@ -15,10 +17,11 @@ const assertSidebarState = state => {
   const shouldBeCollapsed = state === 'collapsed';
   expect($aside.hasClass('right-sidebar-expanded')).toBe(shouldBeExpanded);
   expect($page.hasClass('right-sidebar-expanded')).toBe(shouldBeExpanded);
-  expect($icon.hasClass('fa-angle-double-right')).toBe(shouldBeExpanded);
+  expect($toggleContainer.data('is-expanded')).toBe(shouldBeExpanded);
+  expect($expandIcon.hasClass('hidden')).toBe(shouldBeExpanded);
   expect($aside.hasClass('right-sidebar-collapsed')).toBe(shouldBeCollapsed);
   expect($page.hasClass('right-sidebar-collapsed')).toBe(shouldBeCollapsed);
-  expect($icon.hasClass('fa-angle-double-left')).toBe(shouldBeCollapsed);
+  expect($collapseIcon.hasClass('hidden')).toBe(shouldBeCollapsed);
 };
 
 describe('RightSidebar', () => {
@@ -33,7 +36,9 @@ describe('RightSidebar', () => {
       new Sidebar(); // eslint-disable-line no-new
       $aside = $('.right-sidebar');
       $page = $('.layout-page');
-      $icon = $aside.find('i');
+      $toggleContainer = $('.js-sidebar-toggle-container');
+      $expandIcon = $aside.find('.js-sidebar-expand');
+      $collapseIcon = $aside.find('.js-sidebar-collapse');
       $toggle = $aside.find('.js-sidebar-toggle');
       $labelsIcon = $aside.find('.sidebar-collapsed-icon');
     });