Merge branch 'cngo-make-tribute-mentions-autocomplete-bigger' into 'master'

Make tribute mentions autocomplete avatar and text bigger

See merge request gitlab-org/gitlab!52124

app/assets/javascripts/vue_shared/components/gfm_autocomplete/utils.js

@@ -84,7 +84,7 @@ export const tributeConfig = {
         value.type === groupType ? last(value.name.split(' / ')) : `${value.name}${value.username}`,
       menuItemLimit: memberLimit,
       menuItemTemplate: ({ original }) => {
-        const commonClasses = 'gl-avatar gl-avatar-s24 gl-flex-shrink-0';
+        const commonClasses = 'gl-avatar gl-avatar-s32 gl-flex-shrink-0';
         const noAvatarClasses = `${commonClasses} gl-rounded-small
         gl-display-flex gl-align-items-center gl-justify-content-center`;
 
@@ -111,7 +111,7 @@ export const tributeConfig = {
         return `
         <div class="gl-display-flex gl-align-items-center">
           ${avatar}
-          <div class="gl-font-sm gl-line-height-normal gl-ml-3">
+          <div class="gl-line-height-normal gl-ml-4">
             <div>${escape(displayName)}${count}</div>
             <div class="gl-text-gray-700">${escape(parentGroupOrUsername)}</div>
           </div>

spec/frontend/vue_shared/components/gfm_autocomplete/__snapshots__/utils_spec.js.snap

@@ -21,10 +21,10 @@ exports[`gfm_autocomplete/utils labels config shows the title in the menu item 1
 exports[`gfm_autocomplete/utils members config shows an avatar character, name, parent name, and count in the menu item for a group 1`] = `
 "
         <div class=\\"gl-display-flex gl-align-items-center\\">
-          <div class=\\"gl-avatar gl-avatar-s24 gl-flex-shrink-0 gl-rounded-small
+          <div class=\\"gl-avatar gl-avatar-s32 gl-flex-shrink-0 gl-rounded-small
         gl-display-flex gl-align-items-center gl-justify-content-center\\" aria-hidden=\\"true\\">
             G</div>
-          <div class=\\"gl-font-sm gl-line-height-normal gl-ml-3\\">
+          <div class=\\"gl-line-height-normal gl-ml-4\\">
             <div>1-1s &lt;script&gt;alert(&#39;hi&#39;)&lt;/script&gt; (2)</div>
             <div class=\\"gl-text-gray-700\\">GitLab Support Team</div>
           </div>
@@ -36,8 +36,8 @@ exports[`gfm_autocomplete/utils members config shows an avatar character, name,
 exports[`gfm_autocomplete/utils members config shows the avatar, name and username in the menu item for a user 1`] = `
 "
         <div class=\\"gl-display-flex gl-align-items-center\\">
-          <img class=\\"gl-avatar gl-avatar-s24 gl-flex-shrink-0 gl-avatar-circle\\" src=\\"/uploads/-/system/user/avatar/123456/avatar.png\\" alt=\\"\\" />
-          <div class=\\"gl-font-sm gl-line-height-normal gl-ml-3\\">
+          <img class=\\"gl-avatar gl-avatar-s32 gl-flex-shrink-0 gl-avatar-circle\\" src=\\"/uploads/-/system/user/avatar/123456/avatar.png\\" alt=\\"\\" />
+          <div class=\\"gl-line-height-normal gl-ml-4\\">
             <div>My Name &lt;script&gt;alert(&#39;hi&#39;)&lt;/script&gt;</div>
             <div class=\\"gl-text-gray-700\\">@myusername</div>
           </div>