Merge branch 'add-outlines-to-issue-sidebar-links' into 'master'

Add outlines to issue right sidebar links

See merge request gitlab-org/gitlab!25633

app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue

@@ -106,17 +106,17 @@ export default {
 
     <div class="title hide-collapsed">
       {{ sprintf(__('Lock %{issuableDisplayName}'), { issuableDisplayName: issuableDisplayName }) }}
-      <button
+      <a
         v-if="isEditable"
         class="float-right lock-edit"
-        type="button"
+        href="#"
         data-track-event="click_edit_button"
         data-track-label="right_sidebar"
         data-track-property="lock_issue"
         @click.prevent="toggleForm"
       >
         {{ __('Edit') }}
-      </button>
+      </a>
     </div>
 
     <div class="value sidebar-item-value hide-collapsed">

app/assets/javascripts/sidebar/components/participants/participants.vue

@@ -127,7 +127,7 @@ export default {
     <div v-if="hasMoreParticipants" class="participants-more hide-collapsed">
       <button
         type="button"
-        class="btn-transparent btn-blank js-toggle-participants-button"
+        class="btn-transparent btn-link js-toggle-participants-button"
         @click="toggleMoreParticipants"
       >
         {{ toggleLabel }}

app/assets/stylesheets/framework/buttons.scss

@@ -447,6 +447,7 @@
   font-weight: normal;
   border-radius: 0;
   border-color: transparent;
+  border-width: 0;
 
   &:hover,
   &:active,

app/assets/stylesheets/pages/issuable.scss

@@ -187,7 +187,6 @@
 
   .btn-link {
     color: inherit;
-    outline: none;
   }
 
   .issuable-header-text {
@@ -261,15 +260,10 @@
       color: rgba($gray-normal, 0.2);
     }
 
-    .lock-edit, // uses same style, different js behaviour
+    .confidential-edit,
+    .lock-edit,
     .edit-link {
-      @extend .btn-blank;
-      color: $gl-text-color;
-
-      &:hover {
-        text-decoration: underline;
-        color: $blue-800;
-      }
+      @extend .btn-link;
     }
   }
 
@@ -689,7 +683,6 @@
   }
 
   .btn-link {
-    outline: none;
     padding: 0;
   }
 

ee/app/assets/javascripts/sidebar/components/weight/weight.vue

@@ -173,7 +173,7 @@ export default {
       <gl-loading-icon v-if="fetching || loading" :inline="true" class="js-weight-loading-icon" />
       <a
         v-if="editable"
-        class="float-right js-weight-edit-link"
+        class="float-right edit-link js-weight-edit-link"
         data-qa-selector="edit_weight_link"
         href="#"
         @click.prevent="onEditClick(!shouldShowEditField)"

ee/app/assets/javascripts/vue_shared/components/sidebar/epics_select/dropdown_title.vue

@@ -32,7 +32,7 @@ export default {
     </div>
     <template v-if="canEdit">
       <gl-link
-        class="btn btn-blank float-right sidebar-dropdown-toggle"
+        class="edit-link float-right sidebar-dropdown-toggle"
         @click="$emit('onClickEdit', $event)"
         >{{ __('Edit') }}</gl-link
       >