@gitlab/ui 32.51.0 → 32.51.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [32.51.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.51.0...v32.51.1) (2022-01-05)
+
+
+### Bug Fixes
+
+* **Avatar:** Add support for multiple-character emojis ([f3fcb2f](https://gitlab.com/gitlab-org/gitlab-ui/commit/f3fcb2ff5a2e74f77b3a96dc8922a3821c86e2fa))
+
 # [32.51.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.50.0...v32.51.0) (2021-12-29)
 
 

package/dist/utils/string_utils.js

@@ -1,3 +1,5 @@
+import emojiRegexFactory from 'emoji-regex';
+
 /**
  * Split the given string after each occurrence of each of the given symbols.
  *
@@ -16,6 +18,7 @@
  * @param {string} string The string to split.
  * @returns {string[]} The resulting strings.
  */
+
 const splitAfterSymbols = (symbols, string) => {
   const textParts = [];
   let textPartStartIndex = 0;
@@ -60,10 +63,11 @@ const splitAfterSymbols = (symbols, string) => {
 
   return textParts;
 };
+const startsWithEmojiRegex = `^(${emojiRegexFactory().source})`;
 const getAvatarChar = name => {
   if (name) {
-    // Check if first character is an emjoi
-    const match = name.match(/^\p{Emoji}/u);
+    // Check if string starts with an emoji (which could be multiple characters and zero-width joined)
+    const match = name.match(startsWithEmojiRegex);
 
     if (match) {
       // Return the first match

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.51.0",
+  "version": "32.51.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -72,6 +72,7 @@
   },
   "peerDependencies": {
     "@gitlab/svgs": "^1.116.0 || ^2.0.0",
+    "emoji-regex": ">=10.0.0",
     "bootstrap": "4.5.3",
     "pikaday": "^1.8.0",
     "vue": "^2.6.10"
@@ -107,6 +108,7 @@
     "babel-preset-vue": "^2.0.2",
     "bootstrap": "4.5.3",
     "cypress": "^6.6.0",
+    "emoji-regex": "^10.0.0",
     "eslint": "7.32.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",

package/src/utils/string_utils.js

@@ -1,3 +1,5 @@
+import emojiRegexFactory from 'emoji-regex';
+
 /**
  * Split the given string after each occurrence of each of the given symbols.
  *
@@ -60,10 +62,12 @@ export const splitAfterSymbols = (symbols, string) => {
   return textParts;
 };
 
+const startsWithEmojiRegex = `^(${emojiRegexFactory().source})`;
+
 export const getAvatarChar = (name) => {
   if (name) {
-    // Check if first character is an emjoi
-    const match = name.match(/^\p{Emoji}/u);
+    // Check if string starts with an emoji (which could be multiple characters and zero-width joined)
+    const match = name.match(startsWithEmojiRegex);
     if (match) {
       // Return the first match
       return match[0];

package/src/utils/string_utils.spec.js

@@ -44,5 +44,13 @@ describe('string utils', () => {
     it('Returns first character if emoji is not first in name', () => {
       expect(getAvatarChar('tanuki🦊')).toBe('T');
     });
+
+    it('Returns zero-width joined emoji if the name starts with it', () => {
+      expect(getAvatarChar('🏴‍☠️Zero-width join')).toBe('🏴‍☠️');
+    });
+
+    it('Returns only first emoji if the name starts with multiple', () => {
+      expect(getAvatarChar('🏴‍☠️🙂Multiple Emoji')).toBe('🏴‍☠️');
+    });
   });
 });