@gitlab/ui 32.28.0 → 32.30.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.28.0",
+  "version": "32.30.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,12 +8,14 @@ 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,
       },
     });
@@ -24,7 +26,6 @@ describe('toggle', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   it('has role=switch', () => {
@@ -112,21 +113,25 @@ describe('toggle', () => {
 
   describe('label position', () => {
     describe.each`
-      state       | labelPosition                 | labelVisibility
-      ${'top'}    | ${toggleLabelPosition.top}    | ${true}
-      ${'left'}   | ${toggleLabelPosition.left}   | ${true}
-      ${'hidden'} | ${toggleLabelPosition.hidden} | ${false}
-    `('when $state', ({ labelPosition, labelVisibility }) => {
+      state       | labelPosition                 | hasGlSrOnlyClass
+      ${'top'}    | ${toggleLabelPosition.top}    | ${false}
+      ${'left'}   | ${toggleLabelPosition.left}   | ${false}
+      ${'hidden'} | ${toggleLabelPosition.hidden} | ${true}
+    `('when $state', ({ labelPosition, hasGlSrOnlyClass }) => {
       beforeEach(() => {
         createWrapper({ labelPosition });
       });
 
-      it(`${labelVisibility ? 'shows' : 'hides'} label`, () => {
-        expect(wrapper.find('[data-testid="toggle-label"]').exists()).toBe(labelVisibility);
+      it(`${hasGlSrOnlyClass ? 'adds' : 'does not add'} 'gl-sr-only' class to the label`, () => {
+        const cssClasses = wrapper.find('[data-testid="toggle-label"]').classes();
+
+        return hasGlSrOnlyClass
+          ? expect(cssClasses).toContain('gl-sr-only')
+          : expect(cssClasses).not.toContain('gl-sr-only');
       });
 
       it('has accessible name for the button', () => {
-        expect(findButton().attributes('aria-label')).toBe(label);
+        expect(findButton().attributes('aria-labelledby')).toBe(labelId);
       });
     });
   });

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

@@ -9,6 +9,7 @@ const generateProps = ({
   disabled = defaultValue('disabled'),
   isLoading = defaultValue('isLoading'),
   label = 'Dark mode',
+  labelId = 'dark-mode-toggle',
   help = 'Toggle dark mode for the website',
   labelPosition = defaultValue('labelPosition'),
 } = {}) => ({
@@ -16,6 +17,7 @@ const generateProps = ({
   disabled,
   isLoading,
   label,
+  labelId,
   help,
   labelPosition,
 });
@@ -29,6 +31,7 @@ const Template = (args, { argTypes }) => ({
       v-model="value"
       :disabled="disabled"
       :help="help"
+      :label-id="labelId"
       :is-loading="isLoading"
       :label="label"
       :label-position="labelPosition"

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

@@ -61,7 +61,14 @@ export default {
       default: undefined,
     },
     /**
-     * The label's position relative to the toggle.
+     * 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.
      */
     labelPosition: {
       type: String,
@@ -77,9 +84,6 @@ export default {
     icon() {
       return this.value ? 'mobile-issue-close' : 'close';
     },
-    shouldShowLabel() {
-      return this.label && this.labelPosition !== 'hidden';
-    },
     helpId() {
       return this.help ? `toggle-help-${this.uuid}` : undefined;
     },
@@ -110,38 +114,41 @@ export default {
 </script>
 
 <template>
-  <label class="gl-display-flex gl-flex-direction-column gl-mb-0 gl-w-max-content">
+  <div
+    class="gl-toggle-wrapper gl-display-flex gl-flex-direction-column gl-mb-0 gl-w-max-content"
+    :class="{ 'gl-toggle-label-inline': labelPosition === 'left', 'is-disabled': disabled }"
+  >
     <span
-      class="gl-toggle-wrapper"
-      :class="{ 'gl-toggle-label-inline': labelPosition === 'left', 'is-disabled': disabled }"
+      :id="labelId"
+      :class="{ 'gl-sr-only': labelPosition === 'hidden' }"
+      class="gl-toggle-label"
+      data-testid="toggle-label"
     >
-      <span v-if="shouldShowLabel" class="gl-toggle-label" data-testid="toggle-label">
-        <!-- @slot The toggle's label. -->
-        <slot name="label">{{ label }}</slot>
-      </span>
-      <input v-if="name" :name="name" :value="value" type="hidden" />
-      <button
-        role="switch"
-        :aria-checked="isChecked"
-        :aria-label="label"
-        :aria-describedby="helpId"
-        :class="{
-          'gl-toggle': true,
-          'is-checked': value,
-          'is-disabled': disabled,
-        }"
-        type="button"
-        @click.prevent="toggleFeature"
-      >
-        <gl-loading-icon v-if="isLoading" color="light" class="toggle-loading" />
-        <span v-else :class="{ 'toggle-icon': true, disabled: disabled }">
-          <gl-icon :name="icon" :size="16" />
-        </span>
-      </button>
+      <!-- @slot The toggle's label. -->
+      <slot name="label">{{ label }}</slot>
     </span>
+    <input v-if="name" :name="name" :value="value" type="hidden" />
+    <button
+      role="switch"
+      :aria-checked="isChecked"
+      :aria-labelledby="labelId"
+      :aria-describedby="helpId"
+      :class="{
+        'gl-toggle': true,
+        'is-checked': value,
+        'is-disabled': disabled,
+      }"
+      type="button"
+      @click.prevent="toggleFeature"
+    >
+      <gl-loading-icon v-if="isLoading" color="light" class="toggle-loading" />
+      <span v-else :class="{ 'toggle-icon': true, disabled: disabled }">
+        <gl-icon :name="icon" :size="16" />
+      </span>
+    </button>
     <span v-if="help" :id="helpId" class="gl-help-label" data-testid="toggle-help">
       <!-- @slot A help text to be shown below the toggle. -->
       <slot name="help">{{ help }}</slot>
     </span>
-  </label>
+  </div>
 </template>

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