@gitlab/ui 38.8.2 → 38.10.1

package/src/components/base/popover/popover.vue

@@ -2,6 +2,7 @@
 import { BPopover } from 'bootstrap-vue';
 import tooltipMixin from '../../mixins/tooltip_mixin';
 import CloseButton from '../../shared_components/close_button/close_button.vue';
+import { popoverPlacements } from '../../../utils/constants';
 
 const popoverRefName = 'bPopover';
 
@@ -38,6 +39,11 @@ export default {
       required: false,
       default: false,
     },
+    placement: {
+      type: String,
+      required: false,
+      default: popoverPlacements.top,
+    },
   },
   computed: {
     customClass() {
@@ -66,6 +72,7 @@ export default {
     :custom-class="customClass"
     :triggers="triggers"
     :title="title"
+    :placement="placement"
     v-bind="$attrs"
     v-on="$listeners"
   >

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

@@ -28,10 +28,8 @@ export default {
   },
   argTypes: {
     variant: {
-      control: {
-        type: 'select',
-        options: variantOptions,
-      },
+      options: variantOptions,
+      control: 'select',
     },
   },
 };

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

@@ -92,9 +92,7 @@ export default {
   argTypes: {
     ...disableControls(['tooltipContainer']),
     historyItems: {
-      control: {
-        type: 'object',
-      },
+      control: 'object',
     },
   },
 };

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

@@ -51,9 +51,7 @@ export default {
       options: Object.values(defaultOptions)
         .filter(({ disabled }) => !disabled)
         .map(({ value }) => value),
-      control: {
-        type: 'radio',
-      },
+      control: 'radio',
       table: {
         disable: true,
       },

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

@@ -35,10 +35,8 @@ export default {
   },
   argTypes: {
     lines: {
-      control: {
-        type: 'select',
-        options: [1, 2, 3],
-      },
+      options: [1, 2, 3],
+      control: 'select',
     },
   },
 };

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

@@ -107,10 +107,8 @@ export default {
   },
   argTypes: {
     stacked: {
-      control: {
-        type: 'select',
-        options: ['sm', 'md', 'lg', 'xl', true, false],
-      },
+      options: ['sm', 'md', 'lg', 'xl', true, false],
+      control: 'select',
     },
   },
 };

package/src/components/base/toast/toast.js

@@ -50,11 +50,14 @@ function showToast(message, options = {}) {
   const toast = { id, hide };
 
   if (isFunction(options.onComplete)) {
-    this.$root.$on('bv::toast:hidden', (e) => {
+    const toastHiddenCallback = (e) => {
       if (e.componentId === id) {
+        this.$root.$off('bv::toast:hidden', toastHiddenCallback);
         options.onComplete(e);
       }
-    });
+    };
+
+    this.$root.$on('bv::toast:hidden', toastHiddenCallback);
   }
 
   this.$bvToast.toast(message, {

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

@@ -27,4 +27,46 @@ describe('GlToast', () => {
       hide: expect.any(Function),
     });
   });
+
+  describe('onComplete callback', () => {
+    let onCompleteSpy;
+    let toast;
+
+    beforeEach(() => {
+      onCompleteSpy = jest.fn();
+
+      toast = wrapper.vm.$toast.show('foo', {
+        onComplete: onCompleteSpy,
+      });
+    });
+
+    it('calls onComplete callback only when matching toast hides', () => {
+      expect(onCompleteSpy).not.toHaveBeenCalled();
+
+      // Pretend some other toast was hidden.
+      wrapper.vm.$root.$emit('bv::toast:hidden', { componentId: 'some other toast' });
+      expect(onCompleteSpy).not.toHaveBeenCalled();
+
+      // Pretend our toast was hidden.
+      wrapper.vm.$root.$emit('bv::toast:hidden', { componentId: toast.id });
+      expect(onCompleteSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('unregisters global listener when toast is hidden', () => {
+      expect(onCompleteSpy).not.toHaveBeenCalled();
+
+      // Pretend the toast was hidden. Can't seem to do this directly in jsdom,
+      // so fake it by emitting the event we listen for.
+      const event = { componentId: toast.id };
+      wrapper.vm.$root.$emit('bv::toast:hidden', event);
+      expect(onCompleteSpy).toHaveBeenCalledTimes(1);
+
+      // This event won't fire more than once in practice, as once the toast is
+      // hidden it'll be destroyed and won't show again. This is here to
+      // indirectly test that the listener was removed when the toast is
+      // hidden the first time.
+      wrapper.vm.$root.$emit('bv::toast:hidden', event);
+      expect(onCompleteSpy).toHaveBeenCalledTimes(1);
+    });
+  });
 });

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

@@ -56,20 +56,14 @@ export default {
   argTypes: {
     ...disableControls(['name']),
     labelPosition: {
-      control: {
-        type: 'select',
-        options: toggleLabelPosition,
-      },
+      options: toggleLabelPosition,
+      control: 'select',
     },
     label: {
-      control: {
-        type: 'text',
-      },
+      control: 'text',
     },
     help: {
-      control: {
-        type: 'text',
-      },
+      control: 'text',
     },
   },
 };

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

@@ -50,10 +50,8 @@ export default {
   },
   argTypes: {
     variant: {
-      control: {
-        type: 'select',
-        options: tokenVariants,
-      },
+      options: tokenVariants,
+      control: 'select',
     },
   },
 };

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

@@ -104,10 +104,8 @@ export default {
   },
   argTypes: {
     state: {
-      control: {
-        type: 'radio',
-        options: [true, false, null],
-      },
+      options: [true, false, null],
+      control: 'radio',
     },
   },
 };

package/src/components/charts/single_stat/single_stat.stories.js

@@ -74,9 +74,7 @@ export default {
   argTypes: {
     variant: {
       options: Object.values(badgeVariantOptions),
-      control: {
-        type: 'select',
-      },
+      control: 'select',
     },
     metaIcon: {
       options: iconSpriteInfo.icons,

package/src/directives/resize_observer/resize_observer.stories.js

@@ -55,9 +55,7 @@ Default.args = generateProps();
 
 const makeControl = () => ({
   options: ['100%', '75%', '50%'],
-  control: {
-    type: 'select',
-  },
+  control: 'select',
 });
 
 export default {

package/src/scss/utilities.scss

@@ -2433,6 +2433,14 @@
   color: $purple-600 !important;
 }
 
+.gl-text-purple-700 {
+  color: $purple-700;
+}
+
+.gl-text-purple-700\! {
+  color: $purple-700 !important;
+}
+
 .gl-text-theme-indigo-200 {
   color: $theme-indigo-200;
 }
@@ -4495,6 +4503,30 @@
   }
 }
 
+.gl-md-w-half {
+  @include gl-media-breakpoint-up(md) {
+    width: 50%;
+  }
+}
+
+.gl-md-w-half\! {
+  @include gl-media-breakpoint-up(md) {
+    width: 50% !important;
+  }
+}
+
+.gl-lg-w-half {
+  @include gl-media-breakpoint-up(lg) {
+    width: 50%;
+  }
+}
+
+.gl-lg-w-half\! {
+  @include gl-media-breakpoint-up(lg) {
+    width: 50% !important;
+  }
+}
+
 .gl-md-w-auto {
   @include gl-media-breakpoint-up(md) {
     width: auto;

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

@@ -185,6 +185,10 @@
   color: $purple-600;
 }
 
+@mixin gl-text-purple-700 {
+  color: $purple-700;
+}
+
 @mixin gl-text-theme-indigo-200 {
   color: $theme-indigo-200;
 }

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

@@ -234,6 +234,18 @@
   }
 }
 
+@mixin gl-md-w-half {
+  @include gl-media-breakpoint-up(md) {
+    width: 50%;
+  }
+}
+
+@mixin gl-lg-w-half {
+  @include gl-media-breakpoint-up(lg) {
+    width: 50%;
+  }
+}
+
 @mixin gl-md-w-auto {
   @include gl-media-breakpoint-up(md) {
     width: auto;

package/src/utils/constants.js

@@ -37,6 +37,7 @@ export const badgeVariantOptions = {
   success: 'success',
   warning: 'warning',
   danger: 'danger',
+  tier: 'tier',
 };
 
 export const variantCssColorMap = {
@@ -297,3 +298,8 @@ export const loadingIconSizes = {
   'lg (32x32)': 'lg',
   'xl (64x64)': 'xl',
 };
+
+export const textareaCountOptions = {
+  max: 'max',
+  recommended: 'recommended',
+};