@gitlab/ui 62.0.0 → 62.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "62.0.0",
+  "version": "62.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -119,7 +119,7 @@
     "bootstrap": "4.6.2",
     "cypress": "^11.2.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.37.0",
+    "eslint": "8.38.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.13.2",
     "eslint-plugin-storybook": "0.6.11",

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

@@ -56,4 +56,36 @@ describe('GlAvatar', () => {
       });
     });
   });
+
+  describe('fallbackOnError property', () => {
+    const findImage = () => wrapper.find('img');
+
+    beforeEach(() => {
+      createWrapper({ fallbackOnError: true, src: 'someproject.jpg' });
+    });
+
+    it('shows fallback identicon when image fails to load', async () => {
+      await findImage().trigger('error');
+
+      expect(findImage().exists()).toBe(false);
+      expect(wrapper.find('.gl-avatar-identicon').exists()).toBe(true);
+    });
+
+    it('emits load-error event when image fails to load', async () => {
+      await findImage().trigger('error');
+
+      expect(wrapper.emitted('load-error')).toHaveLength(1);
+    });
+
+    it('allows changing the source when initially provided image fails to load', async () => {
+      await findImage().trigger('error');
+
+      expect(findImage().exists()).toBe(false);
+
+      await wrapper.setProps({ src: 'foo.jpg' });
+
+      expect(findImage().exists()).toBe(true);
+      expect(wrapper.find('.gl-avatar-identicon').exists()).toBe(false);
+    });
+  });
 });

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

@@ -104,6 +104,22 @@ export const WithTooltip = (args, { argTypes }) => ({
 });
 WithTooltip.args = { ...generateImageProps(), ...generateTooltipProps() };
 
+export const FallbackOnAvatarLoadFailure = (args, { argTypes }) => ({
+  components,
+  props: Object.keys(argTypes),
+  template: `
+      <gl-avatar
+        :entity-name="entityName"
+        :entity-id="entityId"
+        :size="size"
+        :fallback-on-error="true"
+        src="someproject.jpg"
+        alt="Some Project"
+      />
+    `,
+});
+FallbackOnAvatarLoadFailure.args = { ...generateProjectFallbackProps(), ...generateImageProps() };
+
 export default {
   title: 'base/avatar',
   component: GlAvatar,

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

@@ -24,6 +24,14 @@ export default {
       required: false,
       default: '',
     },
+    /**
+     * Show fallback identicon when image fails to load
+     */
+    fallbackOnError: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     alt: {
       type: String,
       required: false,
@@ -56,6 +64,11 @@ export default {
       default: avatarShapeOptions.circle,
     },
   },
+  data() {
+    return {
+      imageLoadError: false,
+    };
+  },
   computed: {
     sizeClasses() {
       if (isNumber(this.size)) {
@@ -85,15 +98,38 @@ export default {
     identiconText() {
       return getAvatarChar(this.entityName);
     },
+    showImage() {
+      // Don't show when image is not present
+      if (!this.src) {
+        return false;
+      }
+      // Don't show when fallbackOnError is true and there was failure to load image
+      if (this.src && this.fallbackOnError && this.imageLoadError) {
+        return false;
+      }
+      return true;
+    },
+  },
+  watch: {
+    src(newSrc, oldSrc) {
+      if (newSrc !== oldSrc) this.imageLoadError = false;
+    },
+  },
+  methods: {
+    handleLoadError(event) {
+      this.imageLoadError = true;
+      this.$emit('load-error', event);
+    },
   },
 };
 </script>
 <template>
   <img
-    v-if="src"
+    v-if="showImage"
     :src="src"
     :alt="alt"
     :class="['gl-avatar', { 'gl-avatar-circle': isCircle }, sizeClasses]"
+    @error="handleLoadError"
   />
   <div
     v-else

package/src/scss/utilities.scss

@@ -3375,6 +3375,18 @@
   flex-wrap: nowrap !important;
 }
 
+.gl-md-flex-nowrap {
+  @include gl-media-breakpoint-up(md) {
+  flex-wrap: nowrap;
+  }
+}
+
+.gl-md-flex-nowrap\! {
+  @include gl-media-breakpoint-up(md) {
+  flex-wrap: nowrap !important;
+  }
+}
+
 .gl-sm-flex-nowrap {
   @include gl-media-breakpoint-up(sm) {
   flex-wrap: nowrap;

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

@@ -95,6 +95,12 @@
   flex-wrap: nowrap;
 }
 
+@mixin gl-md-flex-nowrap {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-flex-nowrap;
+  }
+}
+
 @mixin gl-sm-flex-nowrap {
   @include gl-media-breakpoint-up(sm) {
     @include gl-flex-nowrap;