@gitlab/ui 94.4.2 → 94.6.0

package/src/components/base/form/form_checkbox/form_checkbox.scss

@@ -47,7 +47,7 @@
   .custom-control-input:disabled,
   .custom-control-input:disabled ~ .custom-control-label,
   .custom-control-input:disabled ~ .custom-control-label > .help-text {
-    @include gl-cursor-not-allowed;
+    @apply gl-cursor-not-allowed;
     color: var(--gl-text-color-disabled);
   }
 
@@ -55,7 +55,7 @@
     @apply gl-pl-5;
 
     .custom-control-input ~ .custom-control-label {
-      @include gl-cursor-pointer;
+      @apply gl-cursor-pointer;
       @apply gl-pl-3;
       @apply gl-mb-3;
 
@@ -171,10 +171,10 @@
     }
 
     .custom-control-input:disabled ~ .custom-control-label {
-      @include gl-cursor-not-allowed;
+      @apply gl-cursor-not-allowed;
 
       &::before {
-        @include gl-pointer-events-auto;
+        @apply gl-pointer-events-auto;
         background-color: var(--gl-control-background-color-disabled);
         border-color: var(--gl-control-border-color-disabled);
 

package/src/components/base/form/form_input/form_input.scss

@@ -1,6 +1,6 @@
 .gl-form-input,
 .gl-form-input.form-control {
-  @include gl-font-regular;
+  @apply gl-font-regular;
   @apply gl-text-base;
   @apply gl-leading-normal;
   @apply gl-py-3;
@@ -28,7 +28,7 @@
   }
 
   &:disabled {
-    @include gl-cursor-not-allowed;
+    @apply gl-cursor-not-allowed;
     background: var(--gl-control-background-color-disabled);
     box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-disabled);
     color: var(--gl-text-color-disabled);
@@ -53,7 +53,7 @@
   }
 
   &.form-control-plaintext {
-    @include gl-shadow-none;
+    @apply gl-shadow-none;
   }
 }
 

package/src/components/base/form/form_select/form_select.scss

@@ -10,8 +10,8 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
 /* stylelint-disable property-no-vendor-prefix */
 .gl-form-select {
   @apply gl-text-base;
-  @include gl-font-regular;
-  @include gl-opacity-10;
+  @apply gl-font-regular;
+  @apply gl-opacity-10;
   @apply gl-leading-normal;
   @apply gl-py-3;
   @apply gl-pl-4;
@@ -42,7 +42,7 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
   }
 
   &:disabled {
-    @include gl-cursor-not-allowed;
+    @apply gl-cursor-not-allowed;
     color: var(--gl-text-color-disabled);
     background-color: var(--gl-control-background-color-disabled);
     box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-disabled);

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

@@ -10,7 +10,7 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
   @apply gl-inline-flex;
   @apply gl-rounded-pill;
   position: relative;
-  @include gl-max-w-full;
+  @apply gl-max-w-full;
   @apply gl-text-sm;
   @apply gl-leading-normal;
   box-shadow: var(--label-inset-border) !important;
@@ -32,13 +32,13 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
     @apply gl-font-normal;
     @apply gl-overflow-hidden;
     @apply gl-text-inherit;
-    @include gl-max-w-full;
+    @apply gl-max-w-full;
 
     &:hover,
     &:focus,
     &:focus:active {
       @apply gl-text-inherit;
-      @include gl-shadow-none;
+      @apply gl-shadow-none;
       @include gl-outline-none;
     }
   }
@@ -72,7 +72,7 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
     margin-right: $label-padding-horizontal-half;
     @apply gl-p-0;
     @apply gl-rounded-full;
-    @include gl-shadow-none;
+    @apply gl-shadow-none;
 
     &:focus,
     &:active {

package/src/components/base/loading_icon/loading_icon.scss

@@ -38,7 +38,7 @@ $gl-loader-dots-size-xl: 1rem;
   @apply gl-inline-flex;
   @apply gl-rounded-full;
   @apply gl-border-solid;
-  @include gl-mx-auto;
+  @apply gl-mx-auto;
   @apply gl-my-0;
   @apply gl-text-base;
 

package/src/components/base/markdown/markdown.scss

@@ -2,7 +2,7 @@
   @apply gl-text-lg;
   @apply gl-leading-24;
   color: $gl-text-color;
-  @include gl-font-regular;
+  @apply gl-font-regular;
   @apply gl-font-normal;
 
   :first-child {
@@ -68,7 +68,7 @@
 
   .monospace,
   code {
-    @include gl-font-monospace;
+    @apply gl-font-monospace;
   }
 
   blockquote {
@@ -211,7 +211,7 @@
 
   .monospace,
   code {
-    @include gl-font-monospace;
+    @apply gl-font-monospace;
   }
 
   table {

package/src/components/base/markdown/markdown_typescale_demo.html

@@ -135,15 +135,15 @@
 </p>
 <p>Code block</p>
 <pre class="code"><code>pre {
-  @include gl-py-4;
-  @include gl-px-6;
+  @apply gl-py-4;
+  @apply gl-px-6;
 
   code {
     @apply gl-bg-white;
     @apply gl-rounded-none;
     @apply gl-text-gray-900;
-    @include gl-px-0;
-    @include gl-py-0;
+    @apply gl-px-0;
+    @apply gl-py-0;
   }
 }
 </code></pre>

package/src/components/base/modal/modal.scss

@@ -120,7 +120,7 @@ body.modal-open {
 
   @include media-breakpoint-up(sm) {
     .modal-dialog {
-      @include gl-mx-auto;
+      @apply gl-mx-auto;
       @apply gl-my-0;
       @apply gl-flex;
       @apply gl-items-center;

package/src/components/base/new_dropdowns/dropdown.scss

@@ -4,7 +4,7 @@
 
   .gl-new-dropdown-custom-toggle {
     *:first-child {
-      @include gl-cursor-pointer;
+      @apply gl-cursor-pointer;
 
       &:focus {
         @apply gl-focus;
@@ -17,7 +17,7 @@
     @apply gl-bg-white;
     @apply gl-border-1 gl-border-solid gl-border-gray-200;
     @apply gl-rounded-lg;
-    @include gl-shadow-md;
+    @apply gl-shadow-md;
     top: 0;
     left: 0;
     min-width: $gl-new-dropdown-min-width;
@@ -71,7 +71,7 @@
   }
 
   .gl-new-dropdown-button-text {
-    @include gl-mr-auto;
+    @apply gl-mr-auto;
     @apply gl-overflow-hidden;
     @apply gl-text-ellipsis;
   }

package/src/components/base/new_dropdowns/dropdown_item.scss

@@ -1,5 +1,5 @@
 .gl-new-dropdown-item {
-  @include gl-cursor-pointer;
+  @apply gl-cursor-pointer;
   @apply gl-px-2;
   @apply gl-my-1;
 
@@ -109,7 +109,7 @@
     }
 
     .gl-new-dropdown-item-text-wrapper {
-      @include gl-min-w-0;
+      @apply gl-min-w-0;
       @apply gl-grow;
       @apply gl-py-3;
     }

package/src/components/base/pagination/pagination.scss

@@ -51,7 +51,7 @@
       @apply gl-border-blue-500;
       @apply gl-text-white;
       @apply gl-z-2;
-      @include gl-shadow-none;
+      @apply gl-shadow-none;
 
       &:focus {
         @include gl-focus();

package/src/components/base/path/path.scss

@@ -41,7 +41,7 @@ $path-chevron-right-margin: px-to-rem(14px);
   }
 
   .gl-path-nav-list-item {
-    @include gl-min-w-fit-content;
+    @apply gl-min-w-fit;
     padding-top: 1px;
     padding-bottom: 1px;
 
@@ -56,7 +56,7 @@ $path-chevron-right-margin: px-to-rem(14px);
     @apply gl-py-3;
     @apply gl-flex;
     @apply gl-text-base;
-    @include gl-z-index-0;
+    @apply gl-z-0;
     @apply gl-font-bold;
     @apply gl-leading-normal;
     @apply gl-rounded-tl-base;
@@ -120,7 +120,7 @@ $path-chevron-right-margin: px-to-rem(14px);
     }
 
     &:disabled {
-      @include gl-cursor-not-allowed;
+      @apply gl-cursor-not-allowed;
       background-color: var(--gl-color-alpha-0);
       box-shadow: none;
       color: var(--gl-action-disabled-foreground-color);

package/src/components/base/popover/popover.scss

@@ -5,7 +5,7 @@ $gl-popover-max-width: $grid-size * 35;
 .gl-popover {
   max-width: $gl-popover-max-width;
   @apply gl-border-none;
-  @include gl-shadow-md;
+  @apply gl-shadow-md;
   @apply gl-text-sm;
 
   &,

package/src/components/base/search_box_by_type/search_box_by_type.scss

@@ -43,7 +43,7 @@ $gl-search-box-by-type-input-padding: 3.5 * $grid-size;
   @apply gl-leading-normal;
   @apply gl-pl-7;
   @apply gl-py-4;
-  @include gl-shadow-none;
+  @apply gl-shadow-none;
   @apply gl-w-full;
   border-radius: 0;
   padding-right: calc(#{$gl-spacing-scale-6} + #{$gl-spacing-scale-2});

package/src/components/base/segmented_control/segmented_control.scss

@@ -29,7 +29,7 @@
 
 .gl-segmented-control {
   label:not(.disabled) {
-    @include gl-cursor-pointer;
+    @apply gl-cursor-pointer;
   }
 
   .btn-gl-segmented-button {
@@ -86,8 +86,8 @@
     &[disabled]:hover {
       @apply gl-text-gray-400;
       @include gl-inset-border-y-1-gray-200;
-      @include gl-z-index-0;
-      @include gl-cursor-not-allowed;
+      @apply gl-z-0;
+      @apply gl-cursor-not-allowed;
 
       &:first-child {
         @include gl-btn-gl-segmented-button-first;

package/src/components/base/skeleton_loader/skeleton_loader.scss

@@ -4,7 +4,7 @@
 
 .gl-skeleton-loader {
   stop {
-    @include gl-opacity-10;
+    @apply gl-opacity-10;
   }
 
   .background-stop {

package/src/components/base/tabs/tabs/tabs.scss

@@ -47,12 +47,12 @@
   }
 
   &.disabled {
-    @include gl-pointer-events-auto;
-    @include gl-cursor-not-allowed;
+    @apply gl-pointer-events-auto;
+    @apply gl-cursor-not-allowed;
     color: var(--gl-action-disabled-foreground-color);
 
     &:hover {
-      @include gl-shadow-none;
+      @apply gl-shadow-none;
     }
   }
 
@@ -160,5 +160,5 @@
 .gl-scrollable-tabs-nav {
   @apply gl-overflow-hidden;
   position: relative;
-  @include gl-flex-nowrap;
+  @apply gl-flex-nowrap;
 }

package/src/components/base/toast/toast.scss

@@ -52,7 +52,7 @@
     @apply gl-text-base;
     @apply gl-whitespace-nowrap;
     @apply gl-font-bold;
-    @include gl-cursor-pointer;
+    @apply gl-cursor-pointer;
   }
 
   .gl-toast-close-button {

package/src/components/base/toggle/toggle.scss

@@ -28,10 +28,10 @@ $toggle-height: 2.5 * $grid-size;
   @apply gl-inline-flex;
 
   &.is-disabled {
-    @include gl-cursor-not-allowed;
+    @apply gl-cursor-not-allowed;
 
     .gl-toggle {
-      @include gl-cursor-not-allowed;
+      @apply gl-cursor-not-allowed;
       @apply gl-bg-gray-200;
 
       .toggle-icon > svg {
@@ -85,7 +85,7 @@ $toggle-height: 2.5 * $grid-size;
   @apply gl-items-center;
   @apply gl-justify-center;
   @apply gl-border-0;
-  @include gl-cursor-pointer;
+  @apply gl-cursor-pointer;
   @apply gl-bg-gray-600;
   position: relative;
   width: $toggle-width;

package/src/components/charts/heatmap/heatmap.scss

@@ -2,6 +2,6 @@
   position: relative;
 
   .gl-legend-inline-series {
-    @include gl-pointer-events-none;
+    @apply gl-pointer-events-none;
   }
 }

package/src/components/charts/legend/legend.scss

@@ -29,7 +29,7 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
 
 .gl-legend-inline {
     @apply gl-flex;
-    @include gl-flex-wrap;
+    @apply gl-flex-wrap;
     @apply gl-shrink-0;
 
   .gl-legend-inline-series {
@@ -40,7 +40,7 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
     @apply gl-pr-5;
 
     &:hover {
-      @include gl-cursor-pointer;
+      @apply gl-cursor-pointer;
       @apply gl-underline;
     }
 

package/src/components/charts/tooltip/tooltip.scss

@@ -2,7 +2,7 @@
   position: absolute;
 
   > .popover {
-    @include gl-min-w-0;
+    @apply gl-min-w-0;
     @apply gl-w-max;
     max-width: $chart-tooltip-max-width;
   }

package/src/components/experimental/duo/chat/components/duo_chat_context/constants.js

@@ -1,3 +1,7 @@
 export const CONTEXT_ITEM_CATEGORY_ISSUE = 'issue';
 export const CONTEXT_ITEM_CATEGORY_MERGE_REQUEST = 'merge_request';
 export const CONTEXT_ITEM_CATEGORY_FILE = 'file';
+export const CONTEXT_ITEM_CATEGORY_LOCAL_GIT = 'local_git';
+
+export const CONTEXT_ITEM_LOCAL_GIT_COMMIT = 'commit';
+export const CONTEXT_ITEM_LOCAL_GIT_DIFF = 'diff';

package/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_item.vue

@@ -1,21 +1,25 @@
 <script>
 import GlDuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover.vue';
+import GlTruncate from '../../../../../../utilities/truncate/truncate.vue';
 import GlIcon from '../../../../../../base/icon/icon.vue';
 import {
   categoryValidator,
   contextItemValidator,
+  formatGitItemSecondaryText,
   formatIssueId,
   formatMergeRequestId,
+  getContextItemIcon,
 } from '../utils';
 import {
+  CONTEXT_ITEM_CATEGORY_FILE,
   CONTEXT_ITEM_CATEGORY_ISSUE,
+  CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
   CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
-  CONTEXT_ITEM_CATEGORY_FILE,
 } from '../constants';
 
 export default {
   name: 'GlDuoChatContextItemMenuSearchItem',
-  components: { GlIcon, GlDuoChatContextItemPopover },
+  components: { GlTruncate, GlIcon, GlDuoChatContextItemPopover },
   props: {
     category: {
       type: Object,
@@ -40,18 +44,23 @@ export default {
           return formatIssueId(this.contextItem.metadata.iid);
         case CONTEXT_ITEM_CATEGORY_MERGE_REQUEST:
           return formatMergeRequestId(this.contextItem.metadata.iid);
+        case CONTEXT_ITEM_CATEGORY_LOCAL_GIT:
+          return formatGitItemSecondaryText(this.contextItem);
         default:
           return '';
       }
     },
+    icon() {
+      return getContextItemIcon(this.contextItem, this.category);
+    },
   },
 };
 </script>
 <template>
   <div class="gl-flex gl-flex-col">
     <div class="gl-flex gl-items-center">
-      <gl-icon :name="category.icon" class="gl-mr-2 gl-shrink-0" data-testid="category-icon" />
-      <span>{{ title }}</span>
+      <gl-icon :name="icon" class="gl-mr-2 gl-shrink-0" data-testid="category-icon" />
+      <gl-truncate :text="title" class="gl-min-w-0" data-testid="item-title" />
       <gl-icon
         :id="`info-icon-${contextItem.id}`"
         name="information-o"
@@ -64,8 +73,12 @@ export default {
         placement="left"
       />
     </div>
-    <div class="gl-mt-1 gl-shrink-0 gl-whitespace-nowrap gl-text-secondary">
-      {{ secondaryText }}
+    <div
+      v-if="secondaryText"
+      class="gl-mt-1 gl-shrink-0 gl-whitespace-nowrap gl-text-secondary"
+      data-testid="item-secondary-text"
+    >
+      <gl-truncate :text="secondaryText" />
     </div>
   </div>
 </template>

package/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_popover/duo_chat_context_item_popover.vue

@@ -1,18 +1,27 @@
 <script>
-import GlPopover from '../../../../../../base/popover/popover.vue';
+import GlAlert from '../../../../../../base/alert/alert.vue';
 import GlIcon from '../../../../../../base/icon/icon.vue';
+import GlPopover from '../../../../../../base/popover/popover.vue';
+import GlTruncate from '../../../../../../utilities/truncate/truncate.vue';
 import { translate } from '../../../../../../../utils/i18n';
 import {
+  CONTEXT_ITEM_CATEGORY_FILE,
   CONTEXT_ITEM_CATEGORY_ISSUE,
+  CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
   CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
-  CONTEXT_ITEM_CATEGORY_FILE,
 } from '../constants';
-import { formatIssueId, formatMergeRequestId } from '../utils';
-import GlAlert from '../../../../../../base/alert/alert.vue';
+import {
+  formatGitItemSecondaryText,
+  formatIssueId,
+  formatMergeRequestId,
+  getContextItemIcon,
+  getContextItemTypeLabel,
+} from '../utils';
 
 export default {
   name: 'DuoChatContextItemPopover',
   components: {
+    GlTruncate,
     GlAlert,
     GlIcon,
     GlPopover,
@@ -69,6 +78,11 @@ export default {
     filePathArray() {
       return this.filePath?.split('/');
     },
+    gitDetails() {
+      return this.contextItem.category === CONTEXT_ITEM_CATEGORY_LOCAL_GIT
+        ? formatGitItemSecondaryText(this.contextItem)
+        : null;
+    },
     isEnabled() {
       return this.contextItem.metadata.enabled !== false;
     },
@@ -79,24 +93,10 @@ export default {
         : translate('DuoChatContextItemPopover.DisabledReason', 'This item is disabled');
     },
     iconName() {
-      switch (this.contextItem.category) {
-        case 'merge_request':
-          return 'merge-request';
-        case 'issue':
-          return 'issues';
-        default:
-          return 'project';
-      }
+      return getContextItemIcon(this.contextItem);
     },
     itemTypeLabel() {
-      switch (this.contextItem.category) {
-        case 'merge_request':
-          return translate('DuoChatContextItemPopover.MergeRequest', 'Merge request');
-        case 'issue':
-          return translate('DuoChatContextItemPopover.Issue', 'Issue');
-        default:
-          return translate('DuoChatContextItemPopover.File', 'Project file');
-      }
+      return getContextItemTypeLabel(this.contextItem);
     },
   },
   methods: {
@@ -118,25 +118,27 @@ export default {
           class="gl-heading-3 gl-mb-1 gl-mt-2 gl-leading-1"
           data-testid="chat-context-popover-title"
         >
-          {{ contextItem.metadata.title }}
+          {{ title }}
         </div>
-        <div class="gl-font-normal gl-text-subtle">{{ itemTypeLabel }}</div>
+        <div v-if="itemTypeLabel" class="gl-font-normal gl-text-subtle">{{ itemTypeLabel }}</div>
       </div>
     </template>
     <div>
-      <div v-if="filePath !== null">
-        <gl-icon name="document" :size="12" variant="subtle" class="gl-mr-1" /><span
-          class="gl-break-all"
-          >{{ contextItem.metadata.project }}</span
-        ><span v-for="(pathPart, index) in filePathArray" :key="pathPart" class="gl-break-all"
+      <div v-if="filePath">
+        <gl-icon name="document" :size="12" variant="subtle" />
+        <span class="gl-break-all">{{ contextItem.metadata.project }}</span>
+        <span v-for="(pathPart, index) in filePathArray" :key="pathPart" class="gl-break-all"
           >{{ pathPart }}{{ index + 1 < filePathArray.length ? '/' : '' }}</span
         >
       </div>
+      <div v-else-if="gitDetails" class="gl-flex gl-items-center" data-testid="git-details">
+        <gl-icon :name="iconName" :size="12" variant="subtle" class="gl-mr-1 gl-shrink-0" />
+        <gl-truncate :text="gitDetails" class="gl-min-w-0" />
+      </div>
       <div v-else>
-        <gl-icon :name="iconName" :size="12" variant="subtle" class="gl-mr-1" /><span
-          class="gl-break-all"
-          >{{ contextItem.metadata.project }}</span
-        ><span v-if="id !== null" class="gl-break-all">{{ formattedId }}</span>
+        <gl-icon v-if="iconName" :name="iconName" :size="12" variant="subtle" />
+        <span class="gl-break-all">{{ contextItem.metadata.project }}</span>
+        <span v-if="id" class="gl-break-all">{{ formattedId }}</span>
       </div>
       <gl-alert
         v-if="!isEnabled"

package/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.vue

@@ -2,17 +2,14 @@
 import uniqueId from 'lodash/uniqueId';
 import GlIcon from '../../../../../../base/icon/icon.vue';
 import GlToken from '../../../../../../base/token/token.vue';
+import GlTruncate from '../../../../../../utilities/truncate/truncate.vue';
 import GlDuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover.vue';
-import {
-  CONTEXT_ITEM_CATEGORY_ISSUE,
-  CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
-  CONTEXT_ITEM_CATEGORY_FILE,
-} from '../constants';
-import { contextItemsValidator } from '../utils';
+import { contextItemsValidator, getContextItemIcon } from '../utils';
 
 export default {
   name: 'GlDuoChatContextItemSelections',
   components: {
+    GlTruncate,
     GlIcon,
     GlDuoChatContextItemPopover,
     GlToken,
@@ -78,14 +75,7 @@ export default {
     },
   },
   methods: {
-    getIconName(category) {
-      const iconMap = {
-        [CONTEXT_ITEM_CATEGORY_FILE]: 'document',
-        [CONTEXT_ITEM_CATEGORY_ISSUE]: 'issues',
-        [CONTEXT_ITEM_CATEGORY_MERGE_REQUEST]: 'merge-request',
-      };
-      return iconMap[category] || 'document';
-    },
+    getContextItemIcon,
     toggleCollapse() {
       this.isCollapsed = !this.isCollapsed;
     },
@@ -122,13 +112,21 @@ export default {
         :key="item.id"
         :view-only="!removable"
         variant="default"
-        class="gl-mb-2 gl-mr-2"
+        class="gl-mb-2 gl-mr-2 gl-max-w-full"
         :class="tokenVariantClasses"
         @close="onRemoveItem(item)"
       >
-        <div :id="`context-item-${item.id}-${selectionsId}`" class="gl-flex gl-items-center">
-          <gl-icon :name="getIconName(item.category)" :size="12" class="gl-mr-1" />
-          {{ item.metadata.title }}
+        <div
+          :id="`context-item-${item.id}-${selectionsId}`"
+          class="gl-flex gl-min-w-0 gl-items-center"
+        >
+          <gl-icon
+            v-if="getContextItemIcon(item)"
+            :name="getContextItemIcon(item)"
+            :size="12"
+            class="gl-mr-1"
+          />
+          <gl-truncate :text="item.metadata.title" position="middle" />
         </div>
         <gl-duo-chat-context-item-popover
           :context-item="item"