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,66 +244,62 @@ export default {
       :title="displayContributorBadgeText"
       >{{ __('Contributor') }}</span
     >
-    <div v-if="canResolve" class="gl-ml-2">
-      <gl-button
-        ref="resolveButton"
-        v-gl-tooltip
-        size="small"
-        category="tertiary"
-        :variant="resolveVariant"
-        :class="{ 'is-disabled': !resolvable, 'is-active': isResolved }"
-        :title="resolveButtonTitle"
-        :aria-label="resolveButtonTitle"
-        :icon="resolveIcon"
-        :loading="isResolving"
-        class="line-resolve-btn note-action-button"
-        @click="onResolve"
-      />
-    </div>
-    <div v-if="canAwardEmoji" class="gl-ml-3 gl-mr-2">
-      <a
-        v-gl-tooltip
-        :class="{ 'js-user-authored': isAuthoredByCurrentUser }"
-        class="note-action-button note-emoji-button js-add-award js-note-emoji"
-        href="#"
-        title="Add reaction"
-        data-position="right"
-      >
-        <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>
-    </div>
+    <gl-button
+      v-if="canResolve"
+      ref="resolveButton"
+      v-gl-tooltip
+      size="small"
+      category="tertiary"
+      :variant="resolveVariant"
+      :class="{ 'is-disabled': !resolvable, 'is-active': isResolved }"
+      :title="resolveButtonTitle"
+      :aria-label="resolveButtonTitle"
+      :icon="resolveIcon"
+      :loading="isResolving"
+      class="line-resolve-btn note-action-button"
+      @click="onResolve"
+    />
+    <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 gl-text-gray-600 gl-m-2"
+      href="#"
+      title="Add reaction"
+      data-position="right"
+    >
+      <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>
     <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-gl-tooltip
-        title="Edit comment"
-        icon="pencil"
-        size="small"
-        category="tertiary"
-        class="note-action-button js-note-edit btn btn-transparent"
-        data-qa-selector="note_edit_button"
-        @click="onEdit"
-      />
-    </div>
-    <div v-if="showDeleteAction" class="gl-ml-2">
-      <gl-button
-        v-gl-tooltip
-        title="Delete comment"
-        size="small"
-        icon="remove"
-        category="tertiary"
-        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">
+    <gl-button
+      v-if="canEdit"
+      v-gl-tooltip
+      title="Edit comment"
+      icon="pencil"
+      size="small"
+      category="tertiary"
+      class="note-action-button js-note-edit btn btn-transparent"
+      data-qa-selector="note_edit_button"
+      @click="onEdit"
+    />
+    <gl-button
+      v-if="showDeleteAction"
+      v-gl-tooltip
+      title="Delete comment"
+      size="small"
+      icon="remove"
+      category="tertiary"
+      class="note-action-button js-note-delete btn btn-transparent"
+      @click="onDelete"
+    />
+    <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,18 +17,16 @@ export default {
 </script>
 
 <template>
-  <div class="gl-ml-2">
-    <gl-button
-      ref="button"
-      v-gl-tooltip
-      data-track-event="click_button"
-      data-track-label="reply_comment_button"
-      category="tertiary"
-      size="small"
-      icon="comment"
-      :title="__('Reply to comment')"
-      :aria-label="__('Reply to comment')"
-      @click="$emit('startReplying')"
-    />
-  </div>
+  <gl-button
+    ref="button"
+    v-gl-tooltip
+    data-track-event="click_button"
+    data-track-label="reply_comment_button"
+    category="tertiary"
+    size="small"
+    icon="comment"
+    :title="$options.i18n.buttonText"
+    :aria-label="$options.i18n.buttonText"
+    @click="$emit('startReplying')"
+  />
 </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