Merge branch 'revert-fb408baa' into 'master'

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

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



Merged-by: Tomas Bulva <tbulva@gitlab.com>
Approved-by: Tomas Bulva <tbulva@gitlab.com>
Co-authored-by: Paulina Sedlak-Jakubowska <psedlak-jakubowska@gitlab.com>

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

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

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

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

app/assets/stylesheets/framework/emojis.scss

@@ -41,16 +41,6 @@ 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';
 
@@ -11,9 +10,6 @@ function factory(propsData = {}) {
   wrapper = extendedWrapper(
     shallowMount(EmojiGroup, {
       propsData,
-      stubs: {
-        GlButton,
-      },
     }),
   );
 }
@@ -23,6 +19,7 @@ describe('Emoji group component', () => {
     factory({
       emojis: [],
       renderGroup: false,
+      clickEmoji: jest.fn(),
     });
 
     expect(wrapper.findByTestId('emoji-button').exists()).toBe(false);
@@ -32,20 +29,24 @@ 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('emits emoji-click', () => {
+  it('calls clickEmoji', () => {
+    const clickEmoji = jest.fn();
+
     factory({
       emojis: ['thumbsup', 'thumbsdown'],
       renderGroup: true,
+      clickEmoji,
     });
 
-    wrapper.findComponent(GlButton).vm.$emit('click');
+    wrapper.findByTestId('emoji-button').trigger('click');
 
-    expect(wrapper.emitted('emoji-click')).toStrictEqual([['thumbsup']]);
+    expect(clickEmoji).toHaveBeenCalledWith('thumbsup');
   });
 });