From 27d64f5baa3c05d39e8b8e0827df3bd1f39539b5 Mon Sep 17 00:00:00 2001
From: Clement Ho <ClemMakesApps@gmail.com>
Date: Tue, 28 Nov 2017 13:07:25 -0600
Subject: [PATCH] Backport border inline edit

---
 .../javascripts/issue_show/components/title.vue       |  2 +-
 app/assets/stylesheets/framework/animations.scss      |  2 +-
 app/assets/stylesheets/framework/buttons.scss         | 11 +++++++++++
 app/assets/stylesheets/pages/issuable.scss            |  5 ++---
 app/assets/stylesheets/pages/notes.scss               |  5 +----
 spec/javascripts/issue_show/components/title_spec.js  |  8 ++++----
 6 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/issue_show/components/title.vue b/app/assets/javascripts/issue_show/components/title.vue
index 00002709ac6..a363d06d950 100644
--- a/app/assets/javascripts/issue_show/components/title.vue
+++ b/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"
diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index 374988bb590..728f9a27aca 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/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);
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index fcb6611ae31..cdc2aa196dd 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -131,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;
@@ -429,3 +436,7 @@
     text-decoration: none;
   }
 }
+
+.btn-svg svg {
+  @include btn-svg;
+}
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 7131c18ce3d..63c51747f92 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/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.
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 9d5930e3966..4fe182c9fce 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/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,
diff --git a/spec/javascripts/issue_show/components/title_spec.js b/spec/javascripts/issue_show/components/title_spec.js
index c1edc785d0f..5370f4e1fea 100644
--- a/spec/javascripts/issue_show/components/title_spec.js
+++ b/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');
       });
     });