@gitlab/ui 71.1.1 → 71.3.0

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 28 Nov 2023 15:59:58 GMT
+// Generated on Mon, 04 Dec 2023 02:31:35 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;
@@ -71,3 +71,124 @@ $blue-100: #064787;
 $blue-50: #033464;
 $white: #333238;
 $black: #fff;
+$theme-light-red-950: #faf2f1;
+$theme-light-red-900: #f6d9d5;
+$theme-light-red-800: #ebada2;
+$theme-light-red-700: #e07f6f;
+$theme-light-red-600: #d36250;
+$theme-light-red-500: #c24b38;
+$theme-light-red-400: #b53a26;
+$theme-light-red-300: #a02e1c;
+$theme-light-red-200: #8b2212;
+$theme-light-red-100: #751709;
+$theme-light-red-50: #5c1105;
+$theme-red-950: #f4e9e7;
+$theme-red-900: #ecd3d0;
+$theme-red-800: #e3bab5;
+$theme-red-700: #d59086;
+$theme-red-600: #c66e60;
+$theme-red-500: #ad4a3b;
+$theme-red-400: #a13322;
+$theme-red-300: #8f2110;
+$theme-red-200: #761405;
+$theme-red-100: #580d02;
+$theme-red-50: #380700;
+$theme-green-950: #dde9de;
+$theme-green-900: #b1d6b5;
+$theme-green-800: #8cc497;
+$theme-green-700: #69af7d;
+$theme-green-600: #499767;
+$theme-green-500: #308258;
+$theme-green-400: #25744c;
+$theme-green-300: #1b653f;
+$theme-green-200: #155635;
+$theme-green-100: #0e4328;
+$theme-green-50: #052e19;
+$theme-light-blue-950: #dde6ee;
+$theme-light-blue-900: #c1d4e6;
+$theme-light-blue-800: #a0bedc;
+$theme-light-blue-700: #74a3d3;
+$theme-light-blue-600: #4f8bc7;
+$theme-light-blue-500: #3476b9;
+$theme-light-blue-400: #2268ae;
+$theme-light-blue-300: #145aa1;
+$theme-light-blue-200: #0e4d8d;
+$theme-light-blue-100: #0c4277;
+$theme-light-blue-50: #0a3764;
+$theme-blue-950: #cdd8e3;
+$theme-blue-900: #b9cadc;
+$theme-blue-800: #a6bdd5;
+$theme-blue-700: #81a5c9;
+$theme-blue-600: #628eb9;
+$theme-blue-500: #4977a5;
+$theme-blue-400: #346596;
+$theme-blue-300: #235180;
+$theme-blue-200: #153c63;
+$theme-blue-100: #0b2640;
+$theme-blue-50: #04101c;
+$theme-indigo-950: #f1f1ff;
+$theme-indigo-900: #dbdbf8;
+$theme-indigo-800: #c7c7f2;
+$theme-indigo-700: #a2a2e6;
+$theme-indigo-600: #8181d7;
+$theme-indigo-500: #6666c4;
+$theme-indigo-400: #5252b5;
+$theme-indigo-300: #41419f;
+$theme-indigo-200: #303083;
+$theme-indigo-100: #222261;
+$theme-indigo-50: #14143d;
+$data-viz-orange-950: #fae8d1;
+$data-viz-orange-900: #f5d6b3;
+$data-viz-orange-800: #eebd8c;
+$data-viz-orange-700: #e99b60;
+$data-viz-orange-600: #e07e41;
+$data-viz-orange-500: #c95d2e;
+$data-viz-orange-400: #b14f18;
+$data-viz-orange-300: #92430a;
+$data-viz-orange-200: #6f3500;
+$data-viz-orange-100: #5e2f05;
+$data-viz-orange-50: #4b2707;
+$data-viz-magenta-950: #ffe3eb;
+$data-viz-magenta-900: #ffccdb;
+$data-viz-magenta-800: #fcacc5;
+$data-viz-magenta-700: #f88aaf;
+$data-viz-magenta-600: #e86e9a;
+$data-viz-magenta-500: #cf4d81;
+$data-viz-magenta-400: #b93d71;
+$data-viz-magenta-300: #9a2e5d;
+$data-viz-magenta-200: #7c214f;
+$data-viz-magenta-100: #661e3a;
+$data-viz-magenta-50: #541d31;
+$data-viz-blue-950: #e9ebff;
+$data-viz-blue-900: #d2dcff;
+$data-viz-blue-800: #b7c6ff;
+$data-viz-blue-700: #97acff;
+$data-viz-blue-600: #7992f5;
+$data-viz-blue-500: #617ae2;
+$data-viz-blue-400: #4e65cd;
+$data-viz-blue-300: #3f51ae;
+$data-viz-blue-200: #374291;
+$data-viz-blue-100: #303470;
+$data-viz-blue-50: #2a2b59;
+$data-viz-aqua-950: #b5fefd;
+$data-viz-aqua-900: #93f2ef;
+$data-viz-aqua-800: #5edee3;
+$data-viz-aqua-700: #32c5d2;
+$data-viz-aqua-600: #00acc4;
+$data-viz-aqua-500: #0090b1;
+$data-viz-aqua-400: #007b9b;
+$data-viz-aqua-300: #006381;
+$data-viz-aqua-200: #00516c;
+$data-viz-aqua-100: #004059;
+$data-viz-aqua-50: #00344b;
+$data-viz-green-950: #ddfab7;
+$data-viz-green-900: #c6ed94;
+$data-viz-green-800: #b0d97b;
+$data-viz-green-700: #94c25e;
+$data-viz-green-600: #81ac41;
+$data-viz-green-500: #619025;
+$data-viz-green-400: #4e7f0e;
+$data-viz-green-300: #366800;
+$data-viz-green-200: #275600;
+$data-viz-green-100: #1a4500;
+$data-viz-green-50: #133a03;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 28 Nov 2023 15:59:58 GMT
+// Generated on Mon, 04 Dec 2023 02:31:35 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.1",
+  "version": "71.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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/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