@gitlab/ui 32.51.0 → 32.52.0

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.52.0",
   "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/components/base/breadcrumb/breadcrumb.md

@@ -15,15 +15,16 @@ to draw a `/`
 ```html
 <gl-breadcrumb :items="items">
   <template #avatar>
-    <img
+    <img 
+      alt=""
       class="gl-breadcrumb-avatar-tile"
-      src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=15"
-      width="15"
-      height="15"
+      src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=16"
+      width="16"
+      height="16"
     />
   </template>
   <template #separator>
-    <svg width="100" height="15">
+    <svg height="16">
       <line x1="100%" y1="0" x2="0" y2="100%" stroke="gray" />
     </svg>
   </template>

package/src/components/base/breadcrumb/breadcrumb.scss

@@ -38,7 +38,7 @@ $breadcrumb-max-width: $grid-size * 16;
   @include gl-border-1;
   @include gl-border-solid;
   @include gl-border-gray-200;
-  @include gl-rounded-full;
+  @include gl-rounded-base;
 }
 
 // bootstrap overrides

package/src/components/base/breadcrumb/breadcrumb.stories.js

@@ -6,7 +6,10 @@ const template = `
         :items="items"
     >
       <template #avatar>
-        <img class="gl-breadcrumb-avatar-tile" src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=16" width="16" height="16" />
+        <img alt=""
+            class="gl-breadcrumb-avatar-tile" src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=16"
+            width="16"
+            height="16" />
       </template>
     </gl-breadcrumb>
   `;

package/src/components/regions/empty_state/empty_state.vue

@@ -96,14 +96,22 @@ export default {
 </script>
 
 <template>
-  <section class="row" :class="{ 'empty-state text-center': !compact }">
-    <div :class="{ 'col-3 d-none d-sm-block': compact, 'col-12': !compact }">
+  <section
+    class="gl-display-flex gl-flex-wrap"
+    :class="{
+      'empty-state gl-text-center gl-flex-direction-column': !compact,
+      'gl-flex-direction-row': compact,
+    }"
+  >
+    <div
+      :class="{ 'gl-display-none gl-sm-display-block gl-px-4': compact, 'gl-max-w-full': !compact }"
+    >
       <div v-if="svgPath" :class="{ 'svg-content': !compact }" class="svg-250">
         <img :src="svgPath" alt="" role="img" class="gl-max-w-full" :height="height" />
       </div>
     </div>
-    <div :class="compact ? 'col-sm-9' : 'col-12'">
-      <div class="text-content gl-mx-auto gl-my-0" :class="{ 'gl-p-5': !compact }">
+    <div :class="compact ? 'gl-flex-grow-1 gl-flex-basis-0 gl-px-4' : 'gl-max-w-full gl-m-auto'">
+      <div class="gl-mx-auto gl-my-0" :class="{ 'gl-p-5': !compact }">
         <h1
           ref="title"
           class="gl-font-size-h-display gl-line-height-36"

package/src/scss/utilities.scss

@@ -3306,6 +3306,12 @@
   mask-position: center !important;
   mask-size: cover !important
 }
+.gl-mix-blend-mode-luminosity {
+  mix-blend-mode: luminosity
+}
+.gl-mix-blend-mode-luminosity\! {
+  mix-blend-mode: luminosity !important
+}
 .gl-opacity-0 {
   opacity: 0
 }

package/src/scss/utility-mixins/index.scss

@@ -29,6 +29,7 @@
 @import './grid';
 @import './list-style';
 @import './masks';
+@import './mix-blend-mode';
 @import './opacity';
 @import './outline';
 @import './overflow';

package/src/scss/utility-mixins/mix-blend-mode.scss

@@ -0,0 +1,3 @@
+@mixin gl-mix-blend-mode-luminosity {
+  mix-blend-mode: luminosity;
+}

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('🏴‍☠️');
+    });
   });
 });