@gitlab/ui 32.29.0 → 32.31.0

package/dist/utils/string_utils.js

@@ -60,5 +60,20 @@ const splitAfterSymbols = (symbols, string) => {
 
   return textParts;
 };
+const getAvatarChar = name => {
+  if (name) {
+    // Check if first character is an emjoi
+    const match = name.match(/^\p{Emoji}/u);
 
-export { splitAfterSymbols };
+    if (match) {
+      // Return the first match
+      return match[0];
+    }
+
+    return name.charAt(0).toUpperCase();
+  }
+
+  return '';
+};
+
+export { getAvatarChar, splitAfterSymbols };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.29.0",
+  "version": "32.31.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -43,6 +43,26 @@ function generateProjectFallbackProps() {
   return props;
 }
 
+function generateEmojiProjectProps() {
+  const defaultSize = avatarSizeOptions[1];
+  const props = {
+    entityId: {
+      type: Number,
+      default: number('entityId', 123),
+    },
+    entityName: {
+      type: String,
+      default: text('entityName', '🦊Tanuki'),
+    },
+    size: {
+      type: Number,
+      default: select('size', avatarSizeOptions, defaultSize),
+    },
+  };
+
+  return props;
+}
+
 function generateTooltipProps() {
   const props = {
     tooltipText: {
@@ -80,6 +100,16 @@ documentedStoriesOf('base/avatar', readme)
         shape="rect" />
     `,
   }))
+  .add('emoji-project-name', () => ({
+    props: generateEmojiProjectProps(),
+    template: `
+      <gl-avatar
+        :entity-name="entityName"
+        :entity-id="entityId"
+        :size="size"
+        shape="rect" />
+    `,
+  }))
   .add('with-tooltip', () => ({
     props: {
       ...generateImageProps(),

package/src/components/base/avatar/avatar.vue

@@ -1,5 +1,6 @@
 <script>
 import { avatarShapeOptions, avatarSizeOptions } from '../../../utils/constants';
+import { getAvatarChar } from '../../../utils/string_utils';
 
 const IDENTICON_BG_COUNT = 7;
 
@@ -62,7 +63,7 @@ export default {
       return `gl-avatar-identicon-bg${type}`;
     },
     identiconText() {
-      return this.entityName ? this.entityName.charAt(0).toUpperCase() : '';
+      return getAvatarChar(this.entityName);
     },
   },
 };

package/src/components/base/toggle/toggle.spec.js

@@ -8,14 +8,12 @@ describe('toggle', () => {
   let wrapper;
 
   const label = 'toggle label';
-  const labelId = 'toggle-label-id';
   const helpText = 'help text';
 
   const createWrapper = (props = {}) => {
     wrapper = shallowMount(Toggle, {
       propsData: {
         label,
-        labelId,
         ...props,
       },
     });
@@ -131,7 +129,7 @@ describe('toggle', () => {
       });
 
       it('has accessible name for the button', () => {
-        expect(findButton().attributes('aria-labelledby')).toBe(labelId);
+        expect(findButton().attributes('aria-labelledby')).toBeDefined();
       });
     });
   });

package/src/components/base/toggle/toggle.vue

@@ -1,4 +1,6 @@
 <script>
+import { uniqueId } from 'lodash';
+
 import { toggleLabelPosition } from '../../../utils/constants';
 import GlIcon from '../icon/icon.vue';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
@@ -60,13 +62,6 @@ export default {
       required: false,
       default: undefined,
     },
-    /**
-     * The id for the label. This id is used by the aria-labelledby attribute on the toggle button.
-     */
-    labelId: {
-      type: String,
-      required: true,
-    },
     /**
      * The label's position relative to the toggle. If 'hidden', the toggle will add the .gl-sr-only class so the label is still accessible to screen readers.
      */
@@ -79,7 +74,11 @@ export default {
       },
     },
   },
-
+  data() {
+    return {
+      labelId: uniqueId('toggle-label-'),
+    };
+  },
   computed: {
     icon() {
       return this.value ? 'mobile-issue-close' : 'close';

package/src/scss/mixins.scss

@@ -78,7 +78,7 @@
 @mixin gl-media-breakpoint-up($name) {
   $min: map-get($breakpoints, $name);
   @if $min == null {
-    @error;
+    @error "#{$name} is not a valid breakpoint for this @media query.";
   }
   @if $min != 0 {
     @media (min-width: $min) {
@@ -103,7 +103,7 @@
 @mixin gl-media-breakpoint-down($name) {
   $max: map-get($breakpoints, $name);
   @if ($max == null or $max == 0) {
-    @error;
+    @error "#{$name} is not a valid breakpoint for this @media query.";
   }
   // The maximum value is reduced by 0.02px to work around the limitations of
   // `min-` and `max-` prefixes and with fractional viewport sizes.

package/src/scss/utilities.scss

@@ -889,6 +889,38 @@
   border-style: solid !important;
 }
 
+.gl-border-dashed {
+  border-style: dashed;
+}
+
+.gl-hover-border-dashed:hover {
+  border-style: dashed;
+}
+
+.gl-border-dashed\! {
+  border-style: dashed !important;
+}
+
+.gl-hover-border-dashed\!:hover {
+  border-style: dashed !important;
+}
+
+.gl-border-dotted {
+  border-style: dotted;
+}
+
+.gl-hover-border-dotted:hover {
+  border-style: dotted;
+}
+
+.gl-border-dotted\! {
+  border-style: dotted !important;
+}
+
+.gl-hover-border-dotted\!:hover {
+  border-style: dotted !important;
+}
+
 .gl-border-t-solid {
   border-top-style: solid;
 }

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

@@ -15,6 +15,14 @@
   border-style: solid;
 }
 
+@mixin gl-border-dashed($hover: true) {
+  border-style: dashed;
+}
+
+@mixin gl-border-dotted($hover: true) {
+  border-style: dotted;
+}
+
 @mixin gl-border-t-solid($hover: true) {
   border-top-style: solid;
 }

package/src/utils/string_utils.js

@@ -59,3 +59,17 @@ export const splitAfterSymbols = (symbols, string) => {
 
   return textParts;
 };
+
+export const getAvatarChar = (name) => {
+  if (name) {
+    // Check if first character is an emjoi
+    const match = name.match(/^\p{Emoji}/u);
+    if (match) {
+      // Return the first match
+      return match[0];
+    }
+    return name.charAt(0).toUpperCase();
+  }
+
+  return '';
+};

package/src/utils/string_utils.spec.js

@@ -1,4 +1,4 @@
-import { splitAfterSymbols } from './string_utils';
+import { splitAfterSymbols, getAvatarChar } from './string_utils';
 
 describe('string utils', () => {
   describe('splitAfterSymbols', () => {
@@ -27,4 +27,22 @@ describe('string utils', () => {
       expect(actual.join('')).toEqual(string);
     });
   });
+
+  describe('Avatar name parsing', () => {
+    it('Returns first character of name', () => {
+      expect(getAvatarChar('Some Project')).toBe('S');
+    });
+
+    it('Returns empty if name is empty', () => {
+      expect(getAvatarChar('')).toBe('');
+    });
+
+    it('Returns emoji if it is first character in name', () => {
+      expect(getAvatarChar('🦊Tanuki')).toBe('🦊');
+    });
+
+    it('Returns first character if emoji is not first in name', () => {
+      expect(getAvatarChar('tanuki🦊')).toBe('T');
+    });
+  });
 });