Merge branch '32959-update-todo-icon' into 'master'

Update Todo icons in collapsed sidebar for Issues and MRs

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

4 files changed, 17 insertions, 8 deletions

diff --git a/app/helpers/issuables_helper.rb b/app/helpers/issuables_helper.rb
index 97406fefd43..6069640b9c8 100644
--- a/app/helpers/issuables_helper.rb
+++ b/app/helpers/issuables_helper.rb
@@ -386,8 +386,8 @@ module IssuablesHelper
     {
       todo_text: "Add todo",
       mark_text: "Mark todo as done",
-      todo_icon: (is_collapsed ? icon('plus-square') : nil),
-      mark_icon: (is_collapsed ? icon('check-square', class: 'todo-undone') : nil),
+      todo_icon: (is_collapsed ? sprite_icon('todo-add') : nil),
+      mark_icon: (is_collapsed ? sprite_icon('todo-done', css_class: 'todo-undone') : nil),
       issuable_id: issuable.id,
       issuable_type: issuable.class.name.underscore,
       url: project_todos_path(@project),
diff --git a/app/views/shared/issuable/_sidebar_todo.html.haml b/app/views/shared/issuable/_sidebar_todo.html.haml
index 583b33a8a1b..660ee6d5777 100644
--- a/app/views/shared/issuable/_sidebar_todo.html.haml
+++ b/app/views/shared/issuable/_sidebar_todo.html.haml
@@ -1,6 +1,6 @@
 - is_collapsed = local_assigns.fetch(:is_collapsed, false)
-- mark_content = is_collapsed ? icon('check-square', class: 'todo-undone') : _('Mark todo as done')
-- todo_content = is_collapsed ? icon('plus-square') : _('Add todo')
+- mark_content = is_collapsed ? sprite_icon('todo-done', css_class: 'todo-undone') : _('Mark todo as done')
+- todo_content = is_collapsed ? sprite_icon('todo-add') : _('Add todo')
 
 %button.issuable-todo-btn.js-issuable-todo{ type: 'button',
   class: (is_collapsed ? 'btn-blank sidebar-collapsed-icon dont-change-state has-tooltip' : 'btn btn-default issuable-header-btn float-right'),
diff --git a/changelogs/unreleased/32959-update-todo-icon.yml b/changelogs/unreleased/32959-update-todo-icon.yml
new file mode 100644
index 00000000000..f08fd6aa89f
--- /dev/null
+++ b/changelogs/unreleased/32959-update-todo-icon.yml
@@ -0,0 +1,5 @@
+---
+title: Update Todo icons in collapsed sidebar for Issues and MRs
+merge_request: 22534
+author:
+type: changed
diff --git a/spec/javascripts/collapsed_sidebar_todo_spec.js b/spec/javascripts/collapsed_sidebar_todo_spec.js
index bdee85f90b1..dc5737558c0 100644
--- a/spec/javascripts/collapsed_sidebar_todo_spec.js
+++ b/spec/javascripts/collapsed_sidebar_todo_spec.js
@@ -45,8 +45,10 @@ describe('Issuable right sidebar collapsed todo toggle', () => {
     expect(document.querySelector('.js-issuable-todo.sidebar-collapsed-icon')).not.toBeNull();
 
     expect(
-      document.querySelector('.js-issuable-todo.sidebar-collapsed-icon .fa-plus-square'),
-    ).not.toBeNull();
+      document
+        .querySelector('.js-issuable-todo.sidebar-collapsed-icon svg use')
+        .getAttribute('xlink:href'),
+    ).toContain('todo-add');
 
     expect(
       document.querySelector('.js-issuable-todo.sidebar-collapsed-icon .todo-undone'),
@@ -68,8 +70,10 @@ describe('Issuable right sidebar collapsed todo toggle', () => {
       ).not.toBeNull();
 
       expect(
-        document.querySelector('.js-issuable-todo.sidebar-collapsed-icon .fa-check-square'),
-      ).not.toBeNull();
+        document
+          .querySelector('.js-issuable-todo.sidebar-collapsed-icon svg.todo-undone use')
+          .getAttribute('xlink:href'),
+      ).toContain('todo-done');
 
       done();
     });