Merge branch '6971-epic-sidebar-updates' into 'master'

Update epic sidebar collapse button to match issue sidebar

See merge request gitlab-org/gitlab!19656

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

@@ -59,6 +59,9 @@ export default {
     collapsedButtonIcon() {
       return this.isTodo ? 'todo-done' : 'todo-add';
     },
+    collapsedButtonIconVisible() {
+      return this.collapsed && !this.isActionActive;
+    },
   },
   methods: {
     handleButtonClick() {
@@ -82,8 +85,12 @@ export default {
     data-boundary="viewport"
     @click="handleButtonClick"
   >
-    <icon v-show="collapsed" :class="collapsedButtonIconClasses" :name="collapsedButtonIcon" />
-    <span v-show="!collapsed" class="issuable-todo-inner"> {{ buttonLabel }} </span>
+    <icon
+      v-show="collapsedButtonIconVisible"
+      :class="collapsedButtonIconClasses"
+      :name="collapsedButtonIcon"
+    />
+    <span v-show="!collapsed" class="issuable-todo-inner">{{ buttonLabel }}</span>
     <gl-loading-icon v-show="isActionActive" :inline="true" />
   </button>
 </template>

app/assets/stylesheets/framework/sidebar.scss

@@ -61,10 +61,6 @@
   padding-right: 0;
   z-index: 300;
 
-  .btn-sidebar-action {
-    display: inline-flex;
-  }
-
   @include media-breakpoint-only(sm) {
     &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper {
       padding-right: $gutter-collapsed-width;

changelogs/unreleased/6971-epic-sidebar-updates.yml

+---
+title: Vertically align collapse button on epic sidebar
+merge_request: 19656
+author:
+type: fixed

ee/app/assets/stylesheets/pages/epics.scss

@@ -28,7 +28,7 @@
     color: $gl-text-color-secondary;
   }
 
-  .btn-sidebar-action {
+  .btn-sidebar-action.btn-link {
     line-height: $gl-font-size;
   }
 

spec/frontend/sidebar/todo_spec.js

@@ -89,5 +89,11 @@ describe('SidebarTodo', () => {
 
       expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
     });
+
+    it('hides button icon when `isActionActive` prop is true', () => {
+      createComponent({ collapsed: true, isActionActive: true });
+
+      expect(wrapper.find(Icon).isVisible()).toBe(false);
+    });
   });
 });