Add border for epic edit button

app/assets/javascripts/issue_show/components/title.vue

@@ -79,7 +79,7 @@
       v-tooltip
       v-if="showInlineEditButton && canUpdate"
       type="button"
-      class="btn-blank btn-edit note-action-button"
+      class="btn btn-default btn-edit btn-svg"
       v-html="pencilIcon"
       title="Edit title and description"
       data-placement="bottom"

app/assets/stylesheets/framework/animations.scss

@@ -125,7 +125,7 @@
   @include transition(border-color);
 }
 
-.note-action-button .link-highlight,
+.note-action-button,
 .toolbar-btn,
 .dropdown-toggle-caret {
   @include transition(color);

app/assets/stylesheets/framework/buttons.scss

@@ -88,17 +88,6 @@
     border-color: $border-dark;
     color: $color;
   }
-
-  svg {
-
-    path {
-      fill: $color;
-    }
-
-    use {
-      stroke: $color;
-    }
-  }
 }
 
 @mixin btn-green {
@@ -142,6 +131,13 @@
   }
 }
 
+@mixin btn-svg {
+  height: $gl-padding;
+  width: $gl-padding;
+  top: 0;
+  vertical-align: text-top;
+}
+
 .btn {
   @include btn-default;
   @include btn-white;
@@ -444,3 +440,7 @@
     text-decoration: none;
   }
 }
+
+.btn-svg svg {
+  @include btn-svg;
+}

app/assets/stylesheets/pages/issuable.scss

@@ -70,14 +70,13 @@
 
   .title {
     padding: 0;
-    margin-bottom: 16px;
+    margin-bottom: $gl-padding;
     border-bottom: 0;
   }
 
   .btn-edit {
     margin-left: auto;
-    // Set height to match title height
-    height: 2em;
+    height: $gl-padding * 2;
   }
 
   // Border around images in issue and MR descriptions.

app/assets/stylesheets/pages/notes.scss

@@ -543,10 +543,7 @@ ul.notes {
   }
 
   svg {
-    height: 16px;
-    width: 16px;
-    top: 0;
-    vertical-align: text-top;
+    @include btn-svg;
   }
 
   .award-control-icon-positive,

changelogs/unreleased-ee/border-inline-edit.yml

+---
+title: Add border for epic edit button
+merge_request:
+author:
+type: other

spec/javascripts/issue_show/components/title_spec.js

@@ -80,19 +80,19 @@ describe('Title component', () => {
     });
 
     it('should not show by default', () => {
-      expect(vm.$el.querySelector('.note-action-button')).toBeNull();
+      expect(vm.$el.querySelector('.btn-edit')).toBeNull();
     });
 
     it('should not show if canUpdate is false', () => {
       vm.showInlineEditButton = true;
       vm.canUpdate = false;
-      expect(vm.$el.querySelector('.note-action-button')).toBeNull();
+      expect(vm.$el.querySelector('.btn-edit')).toBeNull();
     });
 
     it('should show if showInlineEditButton and canUpdate', () => {
       vm.showInlineEditButton = true;
       vm.canUpdate = true;
-      expect(vm.$el.querySelector('.note-action-button')).toBeDefined();
+      expect(vm.$el.querySelector('.btn-edit')).toBeDefined();
     });
 
     it('should trigger open.form event when clicked', () => {
@@ -100,7 +100,7 @@ describe('Title component', () => {
       vm.canUpdate = true;
 
       Vue.nextTick(() => {
-        vm.$el.querySelector('.note-action-button').click();
+        vm.$el.querySelector('.btn-edit').click();
         expect(eventHub.$emit).toHaveBeenCalledWith('open.form');
       });
     });