Merge branch '287690-issue-comment-option-icons-are-not-aligned-consistently' into 'master'

Align note actions icons

See merge request gitlab-org/gitlab!53753

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

@@ -244,8 +244,8 @@ export default {
       :title="displayContributorBadgeText"
       >{{ __('Contributor') }}</span
     >
-    <div v-if="canResolve" class="gl-ml-2">
     <gl-button
+      v-if="canResolve"
       ref="resolveButton"
       v-gl-tooltip
       size="small"
@@ -259,12 +259,11 @@ export default {
       class="line-resolve-btn note-action-button"
       @click="onResolve"
     />
-    </div>
-    <div v-if="canAwardEmoji" class="gl-ml-3 gl-mr-2">
     <a
+      v-if="canAwardEmoji"
       v-gl-tooltip
       :class="{ 'js-user-authored': isAuthoredByCurrentUser }"
-        class="note-action-button note-emoji-button js-add-award js-note-emoji"
+      class="note-action-button note-emoji-button js-add-award js-note-emoji gl-text-gray-600 gl-m-2"
       href="#"
       title="Add reaction"
       data-position="right"
@@ -273,15 +272,14 @@ export default {
       <gl-icon class="link-highlight award-control-icon-positive" name="smiley" />
       <gl-icon class="link-highlight award-control-icon-super-positive" name="smile" />
     </a>
-    </div>
     <reply-button
       v-if="showReply"
       ref="replyButton"
       class="js-reply-button"
       @startReplying="$emit('startReplying')"
     />
-    <div v-if="canEdit" class="gl-ml-2">
     <gl-button
+      v-if="canEdit"
       v-gl-tooltip
       title="Edit comment"
       icon="pencil"
@@ -291,9 +289,8 @@ export default {
       data-qa-selector="note_edit_button"
       @click="onEdit"
     />
-    </div>
-    <div v-if="showDeleteAction" class="gl-ml-2">
     <gl-button
+      v-if="showDeleteAction"
       v-gl-tooltip
       title="Delete comment"
       size="small"
@@ -302,8 +299,7 @@ export default {
       class="note-action-button js-note-delete btn btn-transparent"
       @click="onDelete"
     />
-    </div>
-    <div v-else-if="shouldShowActionsDropdown" class="dropdown more-actions gl-ml-2">
+    <div v-else-if="shouldShowActionsDropdown" class="dropdown more-actions">
       <gl-button
         v-gl-tooltip
         title="More actions"

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

 <script>
 import { GlTooltipDirective, GlButton } from '@gitlab/ui';
+import { __ } from '~/locale';
 
 export default {
+  i18n: {
+    buttonText: __('Reply to comment'),
+  },
   name: 'ReplyButton',
   components: {
     GlButton,
@@ -13,7 +17,6 @@ export default {
 </script>
 
 <template>
-  <div class="gl-ml-2">
   <gl-button
     ref="button"
     v-gl-tooltip
@@ -22,9 +25,8 @@ export default {
     category="tertiary"
     size="small"
     icon="comment"
-      :title="__('Reply to comment')"
-      :aria-label="__('Reply to comment')"
+    :title="$options.i18n.buttonText"
+    :aria-label="$options.i18n.buttonText"
     @click="$emit('startReplying')"
   />
-  </div>
 </template>

changelogs/unreleased/287690-issue-comment-option-icons-are-not-aligned-consistently.yml

+---
+title: Align note actions icons
+merge_request: 53753
+author: Claudius Ellsel (@clel)
+type: fixed