@gitlab/ui 61.3.0 → 62.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "61.3.0",
+  "version": "62.1.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/components/base/daterange_picker/daterange_picker.vue

@@ -8,7 +8,7 @@ const CONTAINER_CLASSES = [
   'gl-display-flex',
   'gl-align-items-baseline',
   'gl-flex-wrap',
-  'gl-sm-flex-wrap-nowrap',
+  'gl-sm-flex-nowrap',
   'gl-sm-gap-3',
 ];
 

package/src/components/base/token_selector/token_container.vue

@@ -128,7 +128,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-display-flex gl-flex-wrap-nowrap gl-align-items-flex-start gl-w-full">
+  <div class="gl-display-flex gl-flex-nowrap gl-align-items-flex-start gl-w-full">
     <div
       ref="tokenContainer"
       class="gl-display-flex gl-flex-wrap gl-align-items-center gl-my-n1 gl-mx-n1 gl-w-full"

package/src/scss/utilities.scss

@@ -3387,78 +3387,6 @@
   }
 }
 
-.gl-flex-wrap-wrap {
-  flex-wrap: wrap;
-}
-
-.gl-flex-wrap-wrap\! {
-  flex-wrap: wrap !important;
-}
-
-.gl-lg-flex-wrap-wrap {
-  @include gl-media-breakpoint-up(lg) {
-  flex-wrap: wrap;
-  }
-}
-
-.gl-lg-flex-wrap-wrap\! {
-  @include gl-media-breakpoint-up(lg) {
-  flex-wrap: wrap !important;
-  }
-}
-
-.gl-xl-flex-wrap-wrap {
-  @include gl-media-breakpoint-up(xl) {
-  flex-wrap: wrap;
-  }
-}
-
-.gl-xl-flex-wrap-wrap\! {
-  @include gl-media-breakpoint-up(xl) {
-  flex-wrap: wrap !important;
-  }
-}
-
-.gl-sm-flex-wrap-wrap {
-  @include gl-media-breakpoint-up(sm) {
-  flex-wrap: wrap;
-  }
-}
-
-.gl-sm-flex-wrap-wrap\! {
-  @include gl-media-breakpoint-up(sm) {
-  flex-wrap: wrap !important;
-  }
-}
-
-.gl-flex-wrap-wrap-reverse {
-  flex-wrap: wrap-reverse;
-}
-
-.gl-flex-wrap-wrap-reverse\! {
-  flex-wrap: wrap-reverse !important;
-}
-
-.gl-flex-wrap-nowrap {
-  flex-wrap: nowrap;
-}
-
-.gl-flex-wrap-nowrap\! {
-  flex-wrap: nowrap !important;
-}
-
-.gl-sm-flex-wrap-nowrap {
-  @include gl-media-breakpoint-up(sm) {
-  flex-wrap: nowrap;
-  }
-}
-
-.gl-sm-flex-wrap-nowrap\! {
-  @include gl-media-breakpoint-up(sm) {
-  flex-wrap: nowrap !important;
-  }
-}
-
 .gl-flex-direction-column {
   flex-direction: column;
 }

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

@@ -101,47 +101,6 @@
   }
 }
 
-/**
-* `gl-*flex-wrap-wrap` is deprecated; use `gl-*flex-wrap` instead.
-* TODO: delete `gl-*flex-wrap-wrap` utilities classes, see
-* https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2204
-*/
-@mixin gl-flex-wrap-wrap {
-  flex-wrap: wrap;
-}
-
-@mixin gl-lg-flex-wrap-wrap {
-  @include gl-media-breakpoint-up(lg) {
-    @include gl-flex-wrap-wrap;
-  }
-}
-
-@mixin gl-xl-flex-wrap-wrap {
-  @include gl-media-breakpoint-up(xl) {
-    @include gl-flex-wrap-wrap;
-  }
-}
-
-@mixin gl-sm-flex-wrap-wrap {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-flex-wrap-wrap;
-  }
-}
-
-@mixin gl-flex-wrap-wrap-reverse {
-  flex-wrap: wrap-reverse;
-}
-
-@mixin gl-flex-wrap-nowrap {
-  flex-wrap: nowrap;
-}
-
-@mixin gl-sm-flex-wrap-nowrap {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-flex-wrap-nowrap;
-  }
-}
-
 @mixin gl-flex-direction-column {
   flex-direction: column;
 }