Merge branch 'emoji-picker-button-migration' into 'master'

Emoji group picker: Migrate button to GlButton

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/134111



Merged-by: Paulina Sedlak-Jakubowska <psedlak-jakubowska@gitlab.com>
Approved-by: Ammar Alakkad <aalakkad@gitlab.com>
Approved-by: Paulina Sedlak-Jakubowska <psedlak-jakubowska@gitlab.com>
Reviewed-by: Sascha Eggenberger <seggenberger@gitlab.com>
Co-authored-by: Sascha Eggenberger <seggenberger@gitlab.com>

app/assets/javascripts/emoji/components/category.vue

@@ -52,7 +52,7 @@ export default {
         :key="index"
         :emojis="emojiGroup"
         :render-group="renderGroup"
-        :click-emoji="(emoji) => onClick(emoji)"
+        @emoji-click="onClick"
       />
     </template>
     <p v-else>

app/assets/javascripts/emoji/components/emoji_group.vue

 <script>
-import { compatFunctionalMixin } from '~/lib/utils/vue3compat/compat_functional_mixin';
+import { GlButton } from '@gitlab/ui';
 
 export default {
-  // Temporary mixin for migration from Vue.js 2 to @vue/compat
-  mixins: [compatFunctionalMixin],
-
+  components: {
+    GlButton,
+  },
   props: {
     emojis: {
       type: Array,
@@ -14,28 +14,33 @@ export default {
       type: Boolean,
       required: true,
     },
-    clickEmoji: {
-      type: Function,
-      required: true,
+  },
+  methods: {
+    clickEmoji(emoji) {
+      this.$emit('emoji-click', emoji);
     },
   },
 };
 </script>
 
-<!-- eslint-disable-next-line vue/no-deprecated-functional-template -->
-<template functional>
+<template>
   <div class="gl-display-flex gl-flex-wrap gl-mb-2">
-    <template v-if="props.renderGroup">
-      <button
-        v-for="emoji in props.emojis"
+    <template v-if="renderGroup">
+      <gl-button
+        v-for="emoji in emojis"
         :key="emoji"
         type="button"
-        class="gl-border-0 gl-bg-transparent gl-px-0 gl-py-2 gl-text-center emoji-picker-emoji"
+        category="tertiary"
+        class="emoji-picker-emoji"
+        :aria-label="emoji"
         data-testid="emoji-button"
-        @click="props.clickEmoji(emoji)"
+        button-text-classes="gl-display-none!"
+        @click="clickEmoji(emoji)"
       >
-        <gl-emoji :data-name="emoji" />
-      </button>
+        <template #emoji>
+          <gl-emoji :data-name="emoji" class="gl-mr-0!" />
+        </template>
+      </gl-button>
     </template>
   </div>
 </template>

app/assets/stylesheets/framework/emojis.scss

@@ -41,6 +41,16 @@ gl-emoji {
   &:focus {
     transform: scale(1.3);
   }
+
+  &:focus {
+    @include gl-z-index-2;
+    mix-blend-mode: normal !important;
+  }
+
+  gl-emoji {
+    width: px-to-rem($gl-padding);
+    top: -1px;
+  }
 }
 
 .emoji-picker .gl-dropdown .dropdown-menu {

spec/frontend/emoji/components/emoji_group_spec.js

 import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
+import { GlButton } from '@gitlab/ui';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import EmojiGroup from '~/emoji/components/emoji_group.vue';
 
@@ -10,6 +11,9 @@ function factory(propsData = {}) {
   wrapper = extendedWrapper(
     shallowMount(EmojiGroup, {
       propsData,
+      stubs: {
+        GlButton,
+      },
     }),
   );
 }
@@ -19,7 +23,6 @@ describe('Emoji group component', () => {
     factory({
       emojis: [],
       renderGroup: false,
-      clickEmoji: jest.fn(),
     });
 
     expect(wrapper.findByTestId('emoji-button').exists()).toBe(false);
@@ -29,24 +32,20 @@ describe('Emoji group component', () => {
     factory({
       emojis: ['thumbsup', 'thumbsdown'],
       renderGroup: true,
-      clickEmoji: jest.fn(),
     });
 
     expect(wrapper.findAllByTestId('emoji-button').exists()).toBe(true);
     expect(wrapper.findAllByTestId('emoji-button').length).toBe(2);
   });
 
-  it('calls clickEmoji', () => {
-    const clickEmoji = jest.fn();
-
+  it('emits emoji-click', () => {
     factory({
       emojis: ['thumbsup', 'thumbsdown'],
       renderGroup: true,
-      clickEmoji,
     });
 
-    wrapper.findByTestId('emoji-button').trigger('click');
+    wrapper.findComponent(GlButton).vm.$emit('click');
 
-    expect(clickEmoji).toHaveBeenCalledWith('thumbsup');
+    expect(wrapper.emitted('emoji-click')).toStrictEqual([['thumbsup']]);
   });
 });