@gitlab/ui 71.1.0 → 71.2.0

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 24 Nov 2023 01:03:35 GMT
+ * Generated on Thu, 30 Nov 2023 19:25:01 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 24 Nov 2023 01:03:35 GMT
+ * Generated on Thu, 30 Nov 2023 19:25:01 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 24 Nov 2023 01:03:35 GMT
+ * Generated on Thu, 30 Nov 2023 19:25:01 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 24 Nov 2023 01:03:35 GMT
+ * Generated on Thu, 30 Nov 2023 19:25:01 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 24 Nov 2023 01:03:35 GMT
+// Generated on Thu, 30 Nov 2023 19:25:01 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 24 Nov 2023 01:03:35 GMT
+// Generated on Thu, 30 Nov 2023 19:25:01 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "71.1.0",
+  "version": "71.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -122,7 +122,7 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
-    "cypress": "13.5.1",
+    "cypress": "13.6.0",
     "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.0.0",

package/src/components/base/badge/badge.scss

@@ -66,23 +66,38 @@
 .gl-badge {
   @include gl-display-inline-flex;
   @include gl-align-items-center;
-  @include gl-font-sm;
+  @include gl-justify-content-center;
   @include gl-font-weight-normal;
   @include gl-line-height-normal;
-  @include gl-py-2;
-  @include gl-px-3;
 
   &.sm {
     @include gl-py-0;
+    @include gl-px-3;
+    @include gl-gap-2;
+    @include gl-font-sm;
+
+    min-height: 1rem;
+    min-width: 1rem;
   }
 
   &.md {
     @include gl-py-2;
+    @include gl-px-3;
+    @include gl-gap-2;
+    @include gl-font-sm;
+
+    min-height: 1.5rem;
+    min-width: 1.5rem;
   }
 
   &.lg {
     @include gl-py-3;
+    @include gl-px-4;
+    @include gl-gap-2;
     @include gl-font-base;
+
+    min-height: 2rem;
+    min-width: 2rem;
   }
 
   .gl-badge-icon {
@@ -91,6 +106,28 @@
     @include gl-flex-shrink-0;
     @include gl-top-auto;
   }
+
+  &.gl-badge-round-icon.gl-badge-icon-only {
+    @include gl-px-0;
+  }
+
+  &.sm.gl-badge-round-icon:not(.gl-badge-icon-only) {
+    @include gl-pl-1;
+  }
+
+  &.md.gl-badge-round-icon:not(.gl-badge-icon-only) {
+    .gl-badge-icon.s12 {
+      @include gl-ml-n1;
+    }
+
+    .gl-badge-icon.s16 {
+      @include gl-ml-n2;
+    }
+  }
+
+  &.lg.gl-badge-round-icon:not(.gl-badge-icon-only) {
+    @include gl-pl-3;
+  }
 }
 
 /* Variants */

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

@@ -39,9 +39,7 @@ describe('badge', () => {
         });
 
         it('with correct class', () => {
-          const icon = findIcon();
-
-          expect(icon.classes('gl-mr-2')).toBe(hasSlot);
+          expect(wrapper.classes('gl-badge-icon-only')).toBe(!hasSlot);
         });
 
         it('with correct size', () => {
@@ -51,6 +49,16 @@ describe('badge', () => {
     });
   });
 
+  describe('with "roundIcon" prop', () => {
+    beforeEach(() => {
+      createComponent({ propsData: { icon: 'warning', roundIcon: true } });
+    });
+
+    it('has `gl-badge-round-icon` class', () => {
+      expect(wrapper.classes()).toContain('gl-badge-round-icon');
+    });
+  });
+
   describe('without "icon" prop', () => {
     const mockSlotContent = 'slot-content';
     beforeEach(() => {

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

@@ -27,6 +27,7 @@ const generateProps = ({
   content = 'TestBadge',
   icon = '',
   iconSize = defaultValue('iconSize'),
+  roundIcon = false,
 } = {}) => ({
   variant,
   size,
@@ -34,6 +35,7 @@ const generateProps = ({
   content,
   icon,
   iconSize,
+  roundIcon,
 });
 
 const Template = (args, { argTypes }) => ({
@@ -156,6 +158,52 @@ IconOnly.args = generateProps({
   icon: 'calendar',
 });
 
+export const AllVariantsAndCategories = (args, { argTypes }) => ({
+  components: { GlBadge },
+  props: Object.keys(argTypes),
+  template: `
+  <div>
+    <div class="gl-display-flex gl-gap-3">
+      <gl-badge variant="info" size="sm" icon="terminal" iconSize="sm" />
+      <gl-badge variant="info" size="sm" icon="cancel" :roundIcon="true" iconSize="sm" />
+      <gl-badge variant="info" size="sm" icon="terminal" iconSize="sm">Small</gl-badge>
+      <gl-badge variant="info" size="sm" icon="cancel" :roundIcon="true" iconSize="sm">Small</gl-badge>
+      <gl-badge variant="info" size="sm">Small</gl-badge>
+      <gl-badge variant="info" size="sm">5</gl-badge>
+    </div>
+    <div class="gl-display-flex gl-gap-3 gl-mt-6">
+      <gl-badge variant="info" size="md" icon="terminal" iconSize="sm" />
+      <gl-badge variant="info" size="md" icon="cancel" :roundIcon="true" iconSize="sm" />
+      <gl-badge variant="info" size="md" icon="terminal" iconSize="sm">Medium</gl-badge>
+      <gl-badge variant="info" size="md" icon="cancel" :roundIcon="true" iconSize="sm">Medium</gl-badge>
+      <gl-badge variant="info" size="md">Medium</gl-badge>
+    </div>
+    <div class="gl-display-flex gl-gap-3 gl-mt-3">
+      <gl-badge variant="info" size="md" icon="terminal" iconSize="md" />
+      <gl-badge variant="info" size="md" icon="cancel" :roundIcon="true" iconSize="md" />
+      <gl-badge variant="info" size="md" icon="terminal" iconSize="md">Medium</gl-badge>
+      <gl-badge variant="info" size="md" icon="cancel" :roundIcon="true" iconSize="md">Medium</gl-badge>
+      <gl-badge variant="info" size="md">5</gl-badge>
+    </div>
+    <div class="gl-display-flex gl-gap-3 gl-mt-6">
+      <gl-badge variant="info" size="lg" icon="terminal" iconSize="md" />
+      <gl-badge variant="info" size="lg" icon="cancel" :roundIcon="true" iconSize="md" />
+      <gl-badge variant="info" size="lg" icon="terminal" iconSize="md">Large</gl-badge>
+      <gl-badge variant="info" size="lg" icon="cancel" :roundIcon="true" iconSize="md">Large</gl-badge>
+      <gl-badge variant="info" size="lg">5</gl-badge>
+      <gl-badge variant="info" size="lg">Large</gl-badge>
+    </div>
+  </div>
+  `,
+});
+AllVariantsAndCategories.argTypes = disableControls([
+  'iconSize',
+  'icon',
+  'variant',
+  'size',
+  'roundIcon',
+]);
+
 export default {
   title: 'base/badge',
   component: GlBadge,

package/src/components/base/badge/badge.vue

@@ -55,6 +55,14 @@ export default {
       validator: (value) => Object.keys(badgeIconSizeOptions).includes(value),
       required: false,
     },
+    /**
+     * Whether the `icon` is round. Affects padding around the icon.
+     */
+    roundIcon: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
   },
   computed: {
     hasIconOnly() {
@@ -72,14 +80,18 @@ export default {
 </script>
 
 <template>
-  <b-badge v-bind="$attrs" :variant="variant" :class="['gl-badge', size]" :role="role" pill>
-    <gl-icon
-      v-if="icon"
-      class="gl-badge-icon"
-      :size="iconSizeComputed"
-      :class="{ 'gl-mr-2': !hasIconOnly }"
-      :name="icon"
-    />
+  <b-badge
+    v-bind="$attrs"
+    :variant="variant"
+    :class="[
+      'gl-badge',
+      size,
+      { 'gl-badge-icon-only': hasIconOnly, 'gl-badge-round-icon': roundIcon },
+    ]"
+    :role="role"
+    pill
+  >
+    <gl-icon v-if="icon" class="gl-badge-icon" :size="iconSizeComputed" :name="icon" />
     <!-- @slot The badge content to display. -->
     <slot></slot>
   </b-badge>

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

@@ -809,7 +809,7 @@ describe('Filtered search integration tests', () => {
       wrapper.findAllComponents(GlFilteredSearchToken).wrappers.map((cmp) => cmp.props('active'))
     ).toEqual([false, false, false]);
 
-    await wrapper.find('.gl-token-close').trigger('mousedown');
+    await wrapper.find('.gl-token-close').trigger('click');
 
     expect(
       wrapper.findAllComponents(GlFilteredSearchToken).wrappers.map((cmp) => cmp.props('active'))

package/src/components/base/filtered_search/filtered_search_term.vue

@@ -125,7 +125,9 @@ export default {
       },
     },
     eventListeners() {
-      return this.viewOnly ? {} : { mousedown: this.destroyByClose };
+      return this.viewOnly
+        ? {}
+        : { mousedown: this.stopMousedownOnCloseButton, close: this.destroyByClose };
     },
   },
   methods: {
@@ -139,12 +141,14 @@ export default {
        */
       this.$emit('destroy', { intent: INTENT_ACTIVATE_PREVIOUS });
     },
-    destroyByClose(event) {
+    stopMousedownOnCloseButton(event) {
       if (event.target.closest(TOKEN_CLOSE_SELECTOR)) {
         stopEvent(event);
-        this.$emit('destroy');
       }
     },
+    destroyByClose() {
+      this.$emit('destroy');
+    },
     onComplete(type) {
       if (type === TERM_TOKEN_TYPE) {
         // We've completed this term token

package/src/components/base/filtered_search/filtered_search_token.spec.js

@@ -274,6 +274,7 @@ describe('Filtered search token', () => {
         preventDefault: preventDefaultSpy,
         stopPropagation: stopPropagationSpy,
       });
+      closeWrapper.trigger('click');
 
       expect(preventDefaultSpy).toHaveBeenCalled();
       expect(stopPropagationSpy).toHaveBeenCalled();

package/src/components/base/filtered_search/filtered_search_token.vue

@@ -2,6 +2,7 @@
 import cloneDeep from 'lodash/cloneDeep';
 import isEqual from 'lodash/isEqual';
 import GlToken from '../token/token.vue';
+import { stopEvent } from '../../../utils/utils';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment.vue';
 import { createTerm, tokenToOption, TOKEN_CLOSE_SELECTOR } from './filtered_search_utils';
 
@@ -118,7 +119,9 @@ export default {
     },
 
     eventListeners() {
-      return this.viewOnly ? {} : { mousedown: this.destroyByClose };
+      return this.viewOnly
+        ? {}
+        : { mousedown: this.stopMousedownOnCloseButton, close: this.destroyByClose };
     },
   },
   segments: {
@@ -310,13 +313,15 @@ export default {
       this.$emit('complete');
     },
 
-    destroyByClose(event) {
+    stopMousedownOnCloseButton(event) {
       if (event.target.closest(TOKEN_CLOSE_SELECTOR)) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.$emit('destroy');
+        stopEvent(event);
       }
     },
+
+    destroyByClose() {
+      this.$emit('destroy');
+    },
   },
 };
 </script>

package/src/directives/outside/outside.md

@@ -22,6 +22,32 @@ export default {
 </template>
 ```
 
+### When handler expects arguments
+
+In case a click handler expects an arument to be passed, simple `v-outside="onClick('foo')"` will
+invoke the handler instantly when mounting the component and the directive won't be active. The
+simplest solution to pass the arguments to the directive is to wrap the handler into an anonumous
+function.
+
+```html
+<script>
+import { GlOutsideDirective as Outside } from '@gitlab/ui';
+
+export default {
+  directives: { Outside },
+  methods: {
+    onClick(foo) {
+      // This
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-outside="() => onClick('foo')">Click anywhere but here</div>
+</template>
+```
+
 ## Caveats
 
 - If a click event is stopped (e.g., via `event.stopPropagation()`) before it