@gitlab/ui 82.1.0 → 84.0.0

package/dist/tokens/tokens_table.js

@@ -118,7 +118,7 @@ var ref_item = ref.item;
 var name = ref_item.name;
 var deprecated = ref_item.deprecated;
 var description = ref_item.description;
-return [_c('code',{staticClass:"gl-font-base gl-text-strong"},[_vm._v("\n        "+_vm._s(name)+"\n      ")]),_vm._v(" "),(deprecated)?_c('gl-badge',{attrs:{"size":"sm","variant":"danger"}},[_vm._v("Deprecated")]):_vm._e(),_vm._v(" "),(description)?_c('div',{staticClass:"gl-mt-3 gl-text-subtle"},[_vm._v("\n        "+_vm._s(description)+"\n      ")]):_vm._e()]}},{key:"cell(value)",fn:function(ref){
+return [_c('code',{staticClass:"gl-font-base gl-text-strong"},[_vm._v("\n        "+_vm._s(name)+"\n      ")]),_vm._v(" "),(deprecated)?_c('gl-badge',{attrs:{"variant":"danger"}},[_vm._v("Deprecated")]):_vm._e(),_vm._v(" "),(description)?_c('div',{staticClass:"gl-mt-3 gl-text-subtle"},[_vm._v("\n        "+_vm._s(description)+"\n      ")]):_vm._e()]}},{key:"cell(value)",fn:function(ref){
 var ref_item = ref.item;
 var type = ref_item.type;
 var value = ref_item.value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "82.1.0",
+  "version": "84.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -49,9 +49,11 @@
     "test:integration:server": "NODE_ENV=test start-test storybook:run http-get://${STORYBOOK_HOST:-localhost}:9001/iframe.html",
     "test:unit": "NODE_ENV=test jest",
     "test:unit:watch": "yarn test:unit --watch",
+    "test:unit:coverage": "yarn test:unit --coverage",
     "test:unit:debug": "NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
     "test:unit-vue3": "VUE_VERSION=3 NODE_ENV=test jest",
     "test:unit-vue3:watch": "VUE_VERSION=3 yarn test:unit --watch",
+    "test:unit-vue3:coverage": "VUE_VERSION=3 yarn test:unit --coverage",
     "test:unit-vue3:debug": "VUE_VERSION=3 NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
     "test:visual": "./bin/run-visual-tests.sh 'test-storybook --browsers firefox --verbose --url http://localhost:9001'",
     "test:visual:update": "./bin/run-visual-tests.sh 'test-storybook -u --browsers firefox --verbose --url http://localhost:9001'",
@@ -108,7 +110,7 @@
     "@gitlab/eslint-plugin": "19.5.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.1.0",
-    "@gitlab/svgs": "3.102.0",
+    "@gitlab/svgs": "3.103.0",
     "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",

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

@@ -1,3 +1,6 @@
+$badge-padding-horizontal: 0.75 * $grid-size;
+$badge-min-width: 2.5 * $grid-size;
+
 @mixin gl-badge-variant(
   $variant,
   $color,
@@ -15,7 +18,6 @@
     color: $color;
 
     .gl-badge-icon {
-      color: $icon-color;
       transition: inherit;
     }
   }
@@ -66,29 +68,18 @@
 .gl-badge {
   @include gl-display-inline-flex;
   @include gl-align-items-center;
+  @include gl-justify-content-center;
   @include gl-font-sm;
   @include gl-font-weight-normal;
   @include gl-line-height-normal;
-  @include gl-py-2;
-  @include gl-px-3;
+  gap: $gl-spacing-scale-2;
+  padding: $gl-spacing-scale-1 $badge-padding-horizontal;
+  min-width: $badge-min-width;
 
   @media (forced-colors: active) {
     border: 1px solid;
   }
 
-  &.sm {
-    @include gl-py-0;
-  }
-
-  &.md {
-    @include gl-py-2;
-  }
-
-  &.lg {
-    @include gl-py-3;
-    @include gl-font-base;
-  }
-
   .gl-badge-icon {
     @include gl-h-5;
     @include gl-w-5;
@@ -193,4 +184,11 @@
 // overriding Bootstap's `.btn .badge {top: -1px}` as the badge is not vertically centered otherwise
 .gl-button .gl-badge {
   top: 0;
+  @include gl-py-0;
+  @include gl-px-2;
+}
+
+.gl-new-dropdown-contents .gl-badge,
+.gl-tab-nav-item .gl-badge {
+  @include gl-my-n1;
 }

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

@@ -1,11 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { BBadge } from 'bootstrap-vue';
-import {
-  badgeSizeOptions,
-  badgeVariantOptions,
-  badgeIconSizeOptions,
-} from '../../../utils/constants';
+import { badgeVariantOptions, badgeIconSizeOptions } from '../../../utils/constants';
 import GlIcon from '../icon/icon.vue';
 
 export default {
@@ -16,17 +12,6 @@ export default {
   },
   inheritAttrs: false,
   props: {
-    /**
-     * The size of the badge.
-     */
-    size: {
-      type: String,
-      default: badgeSizeOptions.md,
-      validator(value) {
-        return badgeSizeOptions[value] !== undefined;
-      },
-      required: false,
-    },
     /**
      * The variant of the badge.
      */
@@ -61,6 +46,9 @@ export default {
       // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.icon && Object.keys(this.$slots).length === 0);
     },
+    isCircularIcon() {
+      return ['issue-open-m', 'issue-close'].includes(this.icon);
+    },
     role() {
       return this.hasIconOnly ? 'img' : undefined;
     },
@@ -82,7 +70,8 @@ export default {
   <b-badge
     v-bind="$attrs"
     :variant="variant"
-    :class="['gl-badge', size]"
+    class="gl-badge"
+    :class="{ 'gl-px-2!': !$scopedSlots.default }"
     :role="role"
     :aria-label="ariaLabel"
     pill
@@ -91,7 +80,7 @@ export default {
       v-if="icon"
       class="gl-badge-icon"
       :size="iconSizeComputed"
-      :class="{ 'gl-mr-2': !hasIconOnly }"
+      :class="{ '-gl-ml-2 gl-ml-n2': isCircularIcon }"
       :name="icon"
     />
     <!-- @slot The badge content to display. -->

package/src/components/base/label/label.scss

@@ -1,5 +1,7 @@
 $label-max-width: 100%;
 $label-close-button: '.gl-label-close.gl-button';
+$label-padding-horizontal: 0.75 * $grid-size;
+$label-padding-horizontal-half: 0.375 * $grid-size;
 
 .gl-label {
   @include gl-align-items-center;
@@ -45,7 +47,7 @@ $label-close-button: '.gl-label-close.gl-button';
   .gl-label-text,
   .gl-label-text-scoped {
     @include gl-display-block;
-    padding: $gl-spacing-scale-1 #{$gl-spacing-scale-3 - $gl-spacing-scale-1};
+    padding: $gl-spacing-scale-1 $label-padding-horizontal;
     @include str-truncated($label-max-width);
   }
 
@@ -54,8 +56,8 @@ $label-close-button: '.gl-label-close.gl-button';
     @include gl-display-flex;
     width: px-to-rem(14px);
     height: px-to-rem(14px);
-    margin-left: calc(#{-$gl-spacing-scale-1} - (#{$gl-spacing-scale-1} / 2));
-    margin-right: calc(#{$gl-spacing-scale-2} - (#{$gl-spacing-scale-1} / 2));
+    margin-left: -$label-padding-horizontal-half;
+    margin-right: $label-padding-horizontal-half;
     @include gl-p-0;
     @include gl-rounded-full;
     @include gl-shadow-none;
@@ -152,7 +154,7 @@ $label-close-button: '.gl-label-close.gl-button';
   }
 
   #{$label-close-button} {
-    margin-left: #{-$gl-spacing-scale-2 - $gl-spacing-scale-1};
+    margin-left: #{-$label-padding-horizontal};
 
     &:focus,
     &:hover {
@@ -172,7 +174,7 @@ $label-close-button: '.gl-label-close.gl-button';
 
   .gl-label-text-scoped {
     @include gl-text-gray-950;
-    padding-left: #{$gl-spacing-scale-3 - $gl-spacing-scale-2};
+    padding-left: $gl-spacing-scale-2;
     padding-right: $gl-spacing-scale-3;
   }
 }

package/src/components/experimental/duo/chat/duo_chat.vue

@@ -27,6 +27,7 @@ export const i18n = {
   CHAT_PROMPT_PLACEHOLDER_DEFAULT: 'GitLab Duo Chat',
   CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS: 'Type "/" for slash commands',
   CHAT_SUBMIT_LABEL: 'Send chat message.',
+  CHAT_CANCEL_LABEL: 'Cancel',
   CHAT_LEGAL_DISCLAIMER:
     "May provide inappropriate responses not representative of GitLab's views. Do not input personal data.",
   CHAT_DEFAULT_PREDEFINED_PROMPTS: [
@@ -188,6 +189,7 @@ export default {
       prompt: '',
       scrolledToBottom: true,
       activeCommandIndex: 0,
+      displaySubmitButton: true,
     };
   },
   computed: {
@@ -213,7 +215,7 @@ export default {
       );
     },
     lastMessage() {
-      return this.messages[this.messages.length - 1];
+      return this.messages?.[this.messages.length - 1];
     },
     resetDisabled() {
       if (this.isLoading || !this.hasMessages) {
@@ -221,9 +223,6 @@ export default {
       }
       return this.lastMessage?.content === CHAT_RESET_MESSAGE;
     },
-    submitDisabled() {
-      return this.isLoading || this.isStreaming;
-    },
     isStreaming() {
       return Boolean(
         (this.lastMessage?.chunks?.length > 0 && !this.lastMessage?.content) ||
@@ -256,10 +255,18 @@ export default {
     },
   },
   watch: {
-    isLoading() {
+    isLoading(newVal) {
+      if (!newVal && !this.isStreaming) {
+        this.displaySubmitButton = true; // Re-enable submit button when loading stops
+      }
       this.isHidden = false;
       this.scrollToBottom();
     },
+    isStreaming(newVal) {
+      if (!newVal && !this.isLoading) {
+        this.displaySubmitButton = true; // Re-enable submit button when streaming stops
+      }
+    },
   },
   created() {
     this.handleScrollingTrottled = throttle(this.handleScrolling, 200); // Assume a 200ms throttle for example
@@ -275,8 +282,17 @@ export default {
        */
       this.$emit('chat-hidden');
     },
+    cancelPrompt() {
+      /**
+       * Emitted when user clicks the stop button in the textarea
+       */
+
+      this.displaySubmitButton = true;
+      this.$emit('chat-cancel');
+      this.setPromptAndFocus();
+    },
     sendChatPrompt() {
-      if (this.submitDisabled) {
+      if (!this.displaySubmitButton) {
         return;
       }
       if (this.prompt) {
@@ -289,6 +305,7 @@ export default {
          * @param {String} prompt The user prompt to send.
          */
         this.$emit('send-chat-prompt', this.prompt.trim());
+        this.displaySubmitButton = false;
         this.setPromptAndFocus();
       }
     },
@@ -517,6 +534,7 @@ export default {
           </div>
           <template #append>
             <gl-button
+              v-if="displaySubmitButton"
               icon="paper-airplane"
               category="primary"
               variant="confirm"
@@ -524,7 +542,16 @@ export default {
               type="submit"
               data-testid="chat-prompt-submit-button"
               :aria-label="$options.i18n.CHAT_SUBMIT_LABEL"
-              :disabled="submitDisabled"
+            />
+            <gl-button
+              v-else
+              icon="stop"
+              category="primary"
+              variant="default"
+              class="!gl-absolute gl-bottom-2 gl-right-2 gl-rounded-base!"
+              data-testid="chat-prompt-cancel-button"
+              :aria-label="$options.i18n.CHAT_CANCEL_LABEL"
+              @click="cancelPrompt"
             />
           </template>
         </gl-form-input-group>

package/src/components/experimental/experiment_badge/experiment_badge.vue

@@ -80,7 +80,7 @@ export default {
 </script>
 
 <template>
-  <gl-badge :id="triggerId" class="gl-mx-4 gl-hover-cursor-pointer" variant="neutral" size="md">
+  <gl-badge :id="triggerId" class="gl-mx-4 gl-hover-cursor-pointer" variant="neutral">
     <span>{{ activeType.BADGE }}</span>
     <gl-popover
       triggers="click"

package/src/tokens/tokens_table.vue

@@ -142,7 +142,7 @@ export default {
         <code class="gl-font-base gl-text-strong">
           {{ name }}
         </code>
-        <gl-badge v-if="deprecated" size="sm" variant="danger">Deprecated</gl-badge>
+        <gl-badge v-if="deprecated" variant="danger">Deprecated</gl-badge>
         <div v-if="description" class="gl-mt-3 gl-text-subtle">
           {{ description }}
         </div>