Merge branch 'comment-action-buttons' into 'master'

Align note actions to Pajamas icon button styles

See merge request gitlab-org/gitlab!85245

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

@@ -294,14 +294,20 @@ export default {
     />
     <emoji-picker
       v-if="canAwardEmoji"
-      toggle-class="note-action-button note-emoji-button gl-text-gray-600 gl-m-3 gl-p-0! gl-shadow-none! gl-bg-transparent!"
+      toggle-class="note-action-button note-emoji-button btn-icon gl-shadow-none!"
       data-testid="note-emoji-button"
       @click="setAwardEmoji"
     >
       <template #button-content>
-        <gl-icon class="link-highlight award-control-icon-neutral gl-m-0!" name="slight-smile" />
-        <gl-icon class="link-highlight award-control-icon-positive gl-m-0!" name="smiley" />
-        <gl-icon class="link-highlight award-control-icon-super-positive gl-m-0!" name="smile" />
+        <gl-icon class="award-control-icon-neutral gl-button-icon gl-icon" name="slight-smile" />
+        <gl-icon
+          class="award-control-icon-positive gl-button-icon gl-icon gl-left-3!"
+          name="smiley"
+        />
+        <gl-icon
+          class="award-control-icon-super-positive gl-button-icon gl-icon gl-left-3!"
+          name="smile"
+        />
       </template>
     </emoji-picker>
     <reply-button

app/assets/stylesheets/framework/mixins.scss

@@ -358,8 +358,8 @@
   line-height: 1;
   padding: 0;
   min-width: 16px;
-  color: $gray-400;
-  fill: $gray-400;
+  color: $gray-500;
+  fill: $gray-500;
   svg {
     @include btn-svg;

app/views/award_emoji/_awards_block.html.haml

@@ -20,7 +20,7 @@
         %button.gl-button.btn.btn-default.award-control.has-tooltip.js-add-award{ type: 'button',
           'aria-label': _('Add reaction'),
           data: { title: _('Add reaction') } }
-          %span{ class: "award-control-icon award-control-icon-neutral" }= sprite_icon('slight-smile')
-          %span{ class: "award-control-icon award-control-icon-positive" }= sprite_icon('smiley')
-          %span{ class: "award-control-icon award-control-icon-super-positive" }= sprite_icon('smile')
+          %span{ class: "award-control-icon award-control-icon-neutral gl-icon" }= sprite_icon('slight-smile')
+          %span{ class: "award-control-icon award-control-icon-positive gl-icon" }= sprite_icon('smiley')
+          %span{ class: "award-control-icon award-control-icon-super-positive gl-icon" }= sprite_icon('smile')
     = yield

app/views/projects/notes/_actions.html.haml

@@ -9,15 +9,14 @@
 - if can?(current_user, :award_emoji, note)
   - if note.emoji_awardable?
     .note-actions-item
-      = button_tag title: 'Add reaction', class: "note-action-button note-emoji-button js-add-award js-note-emoji has-tooltip btn gl-button btn-icon btn-default-tertiary btn-transparent", data: { position: 'right', container: 'body' } do
-        = sprite_icon('slight-smile', css_class: 'link-highlight award-control-icon-neutral gl-button-icon gl-icon gl-text-gray-400')
-        = sprite_icon('smiley', css_class: 'link-highlight award-control-icon-positive gl-button-icon gl-icon gl-left-3!')
-        = sprite_icon('smile', css_class: 'link-highlight award-control-icon-super-positive gl-button-icon gl-icon gl-left-3! ')
+      = button_tag title: 'Add reaction', class: "note-action-button note-emoji-button js-add-award js-note-emoji has-tooltip btn gl-button btn-icon btn-default-tertiary", data: { position: 'right', container: 'body' } do
+        = sprite_icon('slight-smile', css_class: 'award-control-icon-neutral gl-button-icon gl-icon')
+        = sprite_icon('smiley', css_class: 'award-control-icon-positive gl-button-icon gl-icon gl-left-3!')
+        = sprite_icon('smile', css_class: 'award-control-icon-super-positive gl-button-icon gl-icon gl-left-3! ')
   - if note_editable
     .note-actions-item.gl-ml-0
-      = button_tag title: 'Edit comment', class: 'note-action-button js-note-edit has-tooltip btn gl-button btn-default-tertiary btn-transparent gl-px-2!', data: { container: 'body', qa_selector: 'edit_comment_button' } do
-        %span.link-highlight
-          = sprite_icon('pencil', css_class: 'gl-button-icon gl-icon gl-text-gray-400 s16')
+      = button_tag title: 'Edit comment', class: 'note-action-button js-note-edit has-tooltip btn gl-button btn-default-tertiary btn-icon', data: { container: 'body', qa_selector: 'edit_comment_button' } do
+        = sprite_icon('pencil', css_class: 'gl-button-icon gl-icon')
   = render 'projects/notes/more_actions_dropdown', note: note, note_editable: note_editable

app/views/projects/notes/_more_actions_dropdown.html.haml

@@ -2,8 +2,8 @@
 - if note_editable || !is_current_user
   %div{ class: "dropdown more-actions note-actions-item gl-ml-0!" }
-    = button_tag title: 'More actions', class: 'note-action-button more-actions-toggle has-tooltip btn gl-button btn-default-tertiary btn-transparent gl-pl-2! gl-pr-0!', data: { toggle: 'dropdown', container: 'body', qa_selector: 'more_actions_dropdown' } do
-      = sprite_icon('ellipsis_v', css_class: 'gl-button-icon gl-icon gl-text-gray-400')
+    = button_tag title: 'More actions', class: 'note-action-button more-actions-toggle has-tooltip btn gl-button btn-default-tertiary btn-icon', data: { toggle: 'dropdown', container: 'body', qa_selector: 'more_actions_dropdown' } do
+      = sprite_icon('ellipsis_v', css_class: 'gl-button-icon gl-icon')
     %ul.dropdown-menu.more-actions-dropdown.dropdown-open-left
       %li
         = clipboard_button(text: noteable_note_url(note), title: _('Copy reference'), button_text: _('Copy link'), class: 'btn-clipboard', hide_tooltip: true, hide_button_icon: true)

app/views/snippets/notes/_actions.html.haml

 - if current_user
   - if note.emoji_awardable?
     .note-actions-item
-      = link_to '#', title: _('Add reaction'), class: "note-action-button note-emoji-button js-add-award js-note-emoji has-tooltip", data: { position: 'right' } do
-        %span{ class: 'link-highlight award-control-icon-neutral' }= sprite_icon('slight-smile')
-        %span{ class: 'link-highlight award-control-icon-positive' }= sprite_icon('smiley')
-        %span{ class: 'link-highlight award-control-icon-super-positive' }= sprite_icon('smile')
+      = link_to '#', title: _('Add reaction'), class: "note-action-button note-emoji-button js-add-award js-note-emoji has-tooltip btn gl-button btn-icon btn-default-tertiary", data: { position: 'right' } do
+        = sprite_icon('slight-smile', css_class: 'award-control-icon-neutral gl-button-icon gl-icon')
+        = sprite_icon('smiley', css_class: 'award-control-icon-positive gl-button-icon gl-icon gl-left-3!')
+        = sprite_icon('smile', css_class: 'award-control-icon-super-positive gl-button-icon gl-icon gl-left-3! ')
   - if note_editable
-    .note-actions-item
-      = button_tag title: _('Edit comment'), class: 'note-action-button js-note-edit has-tooltip gl-button btn btn-transparent', data: { container: 'body', qa_selector: 'edit_comment_button' } do
-        %span.link-highlight
-          = custom_icon('icon_pencil')
+    .note-actions-item.gl-ml-0
+      = button_tag title: _('Edit comment'), class: 'note-action-button js-note-edit has-tooltip gl-button btn btn-default-tertiary btn-icon', data: { container: 'body', qa_selector: 'edit_comment_button' } do
+        = sprite_icon('pencil')
   = render 'projects/notes/more_actions_dropdown', note: note, note_editable: note_editable