Merge branch 'gl-button-issues' into 'master'

Apply new GitLab UI style for todo button in the issuable sidebar

See merge request gitlab-org/gitlab!52779

app/assets/javascripts/sidebar/components/todo_toggle/todo.vue

@@ -42,7 +42,7 @@ export default {
     buttonClasses() {
       return this.collapsed
         ? 'btn-blank btn-todo sidebar-collapsed-icon dont-change-state'
-        : 'btn btn-default btn-todo issuable-header-btn float-right';
+        : 'gl-button btn btn-default btn-todo issuable-header-btn float-right';
     },
     buttonLabel() {
       return this.isTodo ? MARK_TEXT : TODO_TEXT;

app/views/shared/issuable/_sidebar_todo.html.haml

@@ -6,7 +6,7 @@
 - button_icon = has_todo ? todo_button_data[:mark_icon] : todo_button_data[:todo_icon]
 
 %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'),
+  class: (is_collapsed ? 'btn-blank sidebar-collapsed-icon dont-change-state has-tooltip' : 'gl-button btn btn-default issuable-header-btn float-right'),
   title: button_title,
   'aria-label' => button_title,
   data: todo_button_data }

changelogs/unreleased/gl-button-issues.yml

+---
+title: Apply new GitLab UI style for todo button in the issuable sidebar
+merge_request: 52779
+author: Yogi (@yo)
+type: other

spec/frontend/sidebar/__snapshots__/todo_spec.js.snap

@@ -3,7 +3,7 @@
 exports[`SidebarTodo template renders component container element with proper data attributes 1`] = `
 <button
   aria-label="Mark as done"
-  class="btn btn-default btn-todo issuable-header-btn float-right"
+  class="gl-button btn btn-default btn-todo issuable-header-btn float-right"
   data-issuable-id="1"
   data-issuable-type="epic"
   type="button"

spec/frontend/sidebar/todo_spec.js

@@ -26,7 +26,7 @@ describe('SidebarTodo', () => {
 
   it.each`
     state    | classes
-    ${false} | ${['btn', 'btn-default', 'btn-todo', 'issuable-header-btn', 'float-right']}
+    ${false} | ${['gl-button', 'btn', 'btn-default', 'btn-todo', 'issuable-header-btn', 'float-right']}
     ${true}  | ${['btn-blank', 'btn-todo', 'sidebar-collapsed-icon', 'dont-change-state']}
   `('returns todo button classes for when `collapsed` prop is `$state`', ({ state, classes }) => {
     createComponent({ collapsed: state });