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

Move add reaction button of note to gl-button

See merge request gitlab-org/gitlab!53565

app/assets/javascripts/notes/components/note_actions.vue

@@ -259,19 +259,28 @@ export default {
       class="line-resolve-btn note-action-button"
       @click="onResolve"
     />
-    <a
+    <gl-button
       v-if="canAwardEmoji"
       v-gl-tooltip
       :class="{ 'js-user-authored': isAuthoredByCurrentUser }"
-      class="note-action-button note-emoji-button js-add-award js-note-emoji gl-text-gray-600 gl-m-2"
-      href="#"
+      class="note-action-button note-emoji-button add-reaction-button js-add-award js-note-emoji"
+      category="tertiary"
+      variant="default"
+      size="small"
       title="Add reaction"
       data-position="right"
+      :aria-label="__('Add reaction')"
     >
-      <gl-icon class="link-highlight award-control-icon-neutral" name="slight-smile" />
-      <gl-icon class="link-highlight award-control-icon-positive" name="smiley" />
-      <gl-icon class="link-highlight award-control-icon-super-positive" name="smile" />
-    </a>
+      <span class="reaction-control-icon reaction-control-icon-neutral">
+        <gl-icon name="slight-smile" />
+      </span>
+      <span class="reaction-control-icon reaction-control-icon-positive">
+        <gl-icon name="smiley" />
+      </span>
+      <span class="reaction-control-icon reaction-control-icon-super-positive">
+        <gl-icon name="smile" />
+      </span>
+    </gl-button>
     <reply-button
       v-if="showReply"
       ref="replyButton"

changelogs/unreleased/gl-button-reaction.yml

+---
+title: Move add reaction button of note to gl-button
+merge_request: 53565
+author: Yogi (@yo)
+type: other

spec/features/issues/user_interacts_with_awards_spec.rb

@@ -135,7 +135,7 @@ RSpec.describe 'User interacts with awards' do
 
       it 'allows adding a new emoji' do
         page.within('.note-actions') do
-          find('a.js-add-award').click
+          find('.btn.js-add-award').click
         end
         page.within('.emoji-menu-content') do
           find('gl-emoji[data-name="8ball"]').click
@@ -157,7 +157,7 @@ RSpec.describe 'User interacts with awards' do
           end
 
           page.within('.note-actions') do
-            expect(page).not_to have_css('a.js-add-award')
+            expect(page).not_to have_css('.btn.js-add-award')
           end
         end