@gitlab/ui 32.29.1 → 32.32.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.1",
+  "version": "32.32.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/scss_to_js/scss_variables.js

@@ -295,7 +295,6 @@ export const glIconChevronRight = '#{'data:image/svg+xml}'
 export const glIconChevronDown = '#{'data:image/svg+xml}'
 export const defaultIconSize = '1rem'
 export const glIconSizes = '8 12 14 16 24 32 48 72'
-export const glDeprecatedIconSizes = '8 12 14 16 24 32 48 72 10 18'
 export const glDropdownWidth = '15rem'
 export const glDropdownWidthNarrow = '10rem'
 export const glDropdownWidthWide = '25rem'

package/scss_to_js/scss_variables.json

@@ -1557,11 +1557,6 @@
       "value": "8 12 14 16 24 32 48 72",
       "compiledValue": "8 12 14 16 24 32 48 72"
     },
-    {
-      "name": "$gl-deprecated-icon-sizes",
-      "value": "join($gl-icon-sizes, 10 18)",
-      "compiledValue": "8 12 14 16 24 32 48 72 10 18"
-    },
     {
       "name": "$gl-dropdown-width",
       "value": "px-to-rem(240px)",

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/icon/icon.scss

@@ -1,6 +1,6 @@
 .gl-icon {
   fill: currentColor;
-  @each $size in $gl-deprecated-icon-sizes {
+  @each $size in $gl-icon-sizes {
     &.s#{$size} {
       width: #{$size}px;
       height: #{$size}px;

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

@@ -25,6 +25,7 @@ describe('Icon component', () => {
     });
   };
 
+  const validateSize = (size) => Icon.props.size.validator(size);
   const validateName = (name) => Icon.props.name.validator(name);
 
   afterEach(() => {
@@ -52,35 +53,14 @@ describe('Icon component', () => {
   });
 
   describe('size validator', () => {
-    beforeEach(() => {
-      consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
-    });
-
     const maxSize = Math.max(...iconSizeOptions);
 
-    it('fails with size outside options', async () => {
-      createComponent({
-        size: maxSize + 10,
-      });
-
-      expect(consoleSpy).toBeCalledWith(
-        `[gitlab-ui] Unexpected value '${maxSize + 10}' was provided for the icon size`
-      );
-    });
-
-    it('passes with use-deprecated-sizes', () => {
-      createComponent({
-        size: maxSize + 10,
-        useDeprecatedSizes: true,
-      });
-
-      expect(consoleSpy).not.toBeCalled();
+    it('fails with size outside options', () => {
+      expect(validateSize(maxSize + 10)).toBe(false);
     });
 
     it('passes with size in options', () => {
-      createComponent({ size: maxSize });
-
-      expect(consoleSpy).not.toBeCalled();
+      expect(validateSize(maxSize)).toBe(true);
     });
   });
 

package/src/components/base/icon/icon.vue

@@ -55,15 +55,7 @@ export default {
       type: Number,
       required: false,
       default: 16,
-    },
-    /**
-     * Is used to deprecate 10&18 icon sizes iteratively.
-     * More info here https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1232
-     */
-    useDeprecatedSizes: {
-      type: Boolean,
-      required: false,
-      default: false,
+      validator: (value) => iconSizeOptions.includes(value),
     },
   },
   computed: {
@@ -74,13 +66,6 @@ export default {
       return this.size ? `s${this.size}` : '';
     },
   },
-
-  created() {
-    if (!iconSizeOptions.includes(this.size) && !this.useDeprecatedSizes) {
-      // eslint-disable-next-line no-console
-      console.warn(`[gitlab-ui] Unexpected value '${this.size}' was provided for the icon size`);
-    }
-  },
 };
 </script>
 

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/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/scss/variables.scss

@@ -427,12 +427,7 @@ $gl-icon-chevron-down: 'data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="
 
 // Icons
 $default-icon-size: px-to-rem(16px);
-// $gl-deprecated-icon-sizes is used for css classes generation as there are still instances around codebase
-// where $gl-icon-sizes is a new list of supported icon sizes and will be used for icon size validation
-// $gl-deprecated-icon-sizes should be replaced with $gl-icon-sizes in scope
-// of this issue https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1232
 $gl-icon-sizes: 8 12 14 16 24 32 48 72;
-$gl-deprecated-icon-sizes: join($gl-icon-sizes, 10 18);
 
 // Dropdowns
 $gl-dropdown-width: px-to-rem(240px);

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');
+    });
+  });
 });