@gitlab/ui 124.1.1 → 124.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "124.1.1",
+  "version": "124.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -105,7 +105,7 @@
     "@jest/test-sequencer": "30.2.0",
     "@rollup/plugin-commonjs": "^28.0.9",
     "@rollup/plugin-node-resolve": "^16.0.3",
-    "@rollup/plugin-replace": "^6.0.2",
+    "@rollup/plugin-replace": "^6.0.3",
     "@storybook/addon-a11y": "^7.6.20",
     "@storybook/addon-docs": "^7.6.20",
     "@storybook/addon-essentials": "^7.6.20",
@@ -137,7 +137,7 @@
     "cypress-real-events": "^1.15.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.6.0",
-    "esbuild": "^0.25.11",
+    "esbuild": "^0.25.12",
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "11.0.3",
     "globby": "^14.1.0",
@@ -163,7 +163,7 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-vue": "^5.1.9",
-    "sass": "^1.93.2",
+    "sass": "^1.93.3",
     "sass-loader": "^10.5.2",
     "sass-true": "^9",
     "start-server-and-test": "^2.1.2",

package/src/components/base/breadcrumb/breadcrumb.scss

@@ -20,7 +20,7 @@ $breadcrumb-max-width: $grid-size * 16;
   @apply gl-leading-normal;
   @apply gl-shrink-0;
 
-  &:not(:last-child)::after {
+  &:not(:last-child, :has(+ .gl-breadcrumb-clipboard-button))::after {
     color: var(--gl-breadcrumb-separator-color);
     @apply gl-px-3;
     content: '/';
@@ -75,3 +75,8 @@ $breadcrumb-max-width: $grid-size * 16;
     }
   }
 }
+
+.gl-breadcrumb-clipboard-button {
+  @apply gl-leading-normal;
+  @apply gl-shrink-0;
+}

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -6,6 +6,7 @@ import GlAvatar from '../avatar/avatar.vue';
 import GlDisclosureDropdown from '../new_dropdowns/disclosure/disclosure_dropdown.vue';
 import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import { breadCrumbSizeOptions } from '../../../utils/constants';
+import ClipboardButton from '../../shared_components/clipboard_button/clipboard_button.vue';
 import GlBreadcrumbItem from './breadcrumb_item.vue';
 
 export default {
@@ -14,6 +15,7 @@ export default {
     GlBreadcrumbItem,
     GlAvatar,
     GlDisclosureDropdown,
+    ClipboardButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -64,6 +66,30 @@ export default {
       default: breadCrumbSizeOptions.sm,
       validator: (value) => Object.keys(breadCrumbSizeOptions).includes(value),
     },
+    /**
+     * Copy to clipboard button for breadcrumbs path.
+     */
+    showClipboardButton: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Custom path for copy to clipboard button. By default, it resolves to all items text values with `/` separator.
+     */
+    pathToCopy: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    /**
+     * Custom tooltip text for clipboard button.
+     */
+    clipboardTooltipText: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -94,6 +120,12 @@ export default {
     avatarSize() {
       return this.size === 'sm' ? 16 : 24;
     },
+    clipboardButtonText() {
+      if (this.pathToCopy) return this.pathToCopy;
+
+      const items = Array.from(this.items, (item) => item.text);
+      return items.join('/');
+    },
   },
   watch: {
     items: {
@@ -230,16 +262,28 @@ export default {
         :size="size"
         :aria-current="getAriaCurrentAttr(index)"
         :class="[hideItemClass(item), itemClass]"
-        ><gl-avatar
-          v-if="item.avatarPath"
-          :src="item.avatarPath"
-          :size="avatarSize"
-          aria-hidden="true"
-          class="gl-breadcrumb-avatar-tile gl-border gl-mr-2 !gl-rounded-default"
-          shape="rect"
-          data-testid="avatar"
-        /><span class="gl-align-middle">{{ item.text }}</span>
+        ><template #default>
+          <gl-avatar
+            v-if="item.avatarPath"
+            :src="item.avatarPath"
+            :size="avatarSize"
+            aria-hidden="true"
+            class="gl-breadcrumb-avatar-tile gl-border gl-mr-2 !gl-rounded-default"
+            shape="rect"
+            data-testid="avatar"
+          /><span class="gl-align-middle">{{ item.text }}</span>
+        </template>
       </gl-breadcrumb-item>
+
+      <li v-if="showClipboardButton" class="gl-breadcrumb-clipboard-button">
+        <clipboard-button
+          data-testid="copy-to-clipboard-button"
+          class="gl-ml-2"
+          :text="clipboardButtonText"
+          v-bind="clipboardTooltipText ? { title: clipboardTooltipText } : {}"
+          :size="dropdownSize"
+        />
+      </li>
     </ol>
   </nav>
 </template>

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

@@ -1,5 +1,125 @@
 .gl-form-combobox {
   .gl-form-combobox-inner {
     max-height: $gl-max-dropdown-max-height;
+    position: relative;
+    @apply gl-grow;
+    @apply gl-overflow-y-auto;
+    @apply gl-pl-0;
+    @apply gl-mb-0;
+    @apply gl-py-2;
+    @apply gl-list-none;
+    border-radius: var(--gl-dropdown-border-radius);
+
+    &:focus-visible {
+      @apply gl-focus;
+    }
+
+    ul {
+      @apply gl-list-none;
+    }
+
+    // Update dropdown items to match new listbox styling exactly
+    .gl-dropdown-item {
+      @apply gl-cursor-pointer;
+      @apply gl-px-2;
+      @apply gl-my-1;
+
+      &:first-child {
+        @apply gl-mt-0;
+      }
+
+      &:last-child {
+        @apply gl-mb-0;
+      }
+
+      // Target the actual Bootstrap dropdown item element
+      .dropdown-item {
+        transition: background-color $gl-transition-duration-fast $gl-easing-out-cubic,
+                    box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
+        @apply gl-rounded-default;
+        @apply gl-border-0;
+        @apply gl-w-full;
+        background-color: var(--gl-dropdown-option-background-color-unselected-default);
+        @apply gl-items-center;
+        @apply gl-flex;
+        @apply gl-text-base;
+        @apply gl-font-normal;
+        @apply gl-leading-normal;
+        @apply gl-px-3;
+        @apply gl-py-0;
+        position: relative;
+        @apply gl-no-underline;
+        color: var(--gl-dropdown-option-text-color-default);
+        @apply gl-text-left;
+        @apply gl-whitespace-normal;
+        @include gl-prefers-reduced-motion-transition;
+
+        .gl-dropdown-item-text-wrapper {
+          @apply gl-min-w-0;
+          @apply gl-grow;
+          @apply gl-py-3;
+        }
+
+        // Hover state
+        &:not(.disable-hover):hover {
+          color: var(--gl-dropdown-option-text-color-hover);
+          background-color: var(--gl-dropdown-option-background-color-unselected-hover);
+        }
+
+        // Focus state (when item receives actual focus)
+        &:focus {
+          color: var(--gl-dropdown-option-text-color-focus);
+          background-color: var(--gl-dropdown-option-background-color-unselected-focus);
+          @include gl-focus($inset: true);
+          z-index: 1;
+        }
+
+        // Active state (when item is clicked)
+        &:active,
+        &:focus:active {
+          color: var(--gl-dropdown-option-text-color-active);
+          background-color: var(--gl-dropdown-option-background-color-unselected-active);
+          @include gl-focus($inset: true);
+        }
+
+        // Keyboard navigation highlight (Bootstrap active class when :active prop is true)
+        &.active {
+          color: var(--gl-dropdown-option-text-color-focus) !important;
+          background-color: var(--gl-dropdown-option-background-color-unselected-focus) !important;
+          @include gl-focus($inset: true);
+          z-index: 1;
+        }
+
+        // Also handle the is-focused class for compatibility
+        &.is-focused {
+          color: var(--gl-dropdown-option-text-color-focus) !important;
+          background-color: var(--gl-dropdown-option-background-color-unselected-focus) !important;
+          @include gl-focus($inset: true);
+          z-index: 1;
+        }
+
+        &:focus-visible {
+          outline: none;
+        }
+      }
+
+      // Selected state (if needed for multi-select scenarios)
+      &[aria-selected="true"] .dropdown-item {
+        background-color: var(--gl-dropdown-option-background-color-selected-default);
+
+        &:hover {
+          background-color: var(--gl-dropdown-option-background-color-selected-hover);
+        }
+
+        &:focus {
+          background-color: var(--gl-dropdown-option-background-color-selected-focus);
+        }
+
+        &:active,
+        &:focus:active {
+          background-color: var(--gl-dropdown-option-background-color-selected-active);
+        }
+      }
+    }
   }
 }

package/src/components/base/form/form_combobox/form_combobox.vue

@@ -248,7 +248,7 @@ export default {
       ref="suggestionsMenu"
       data-testid="combobox-dropdown"
       role="listbox"
-      class="dropdown-menu gl-form-combobox-inner gl-mb-0 gl-flex gl-w-full gl-list-none gl-flex-col gl-border-dropdown gl-bg-dropdown gl-pl-0"
+      class="gl-form-combobox-inner -gl-mt-3 gl-mb-0 gl-flex gl-w-full gl-list-none gl-flex-col gl-bg-dropdown gl-pl-0 gl-drop-shadow-md"
       @keydown.down="onArrowDown"
       @keydown.up="onArrowUp"
       @keydown.left="onArrowLeft"

package/src/components/index.js

@@ -102,6 +102,9 @@ export { default as GlDashboardPanel } from './dashboards/dashboard_panel/dashbo
 // Experimental
 export { default as GlExperimentBadge } from './experimental/experiment_badge/experiment_badge.vue';
 
+// Shared components
+export { default as GlClipboardButton } from './shared_components/clipboard_button/clipboard_button.vue';
+
 // Utilities
 export { default as GlAnimatedNumber } from './utilities/animated_number/animated_number.vue';
 export { default as GlFriendlyWrap } from './utilities/friendly_wrap/friendly_wrap.vue';

package/src/components/shared_components/clipboard_button/clipboard_button.vue

@@ -0,0 +1,78 @@
+<script>
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
+import GlButton from '../../base/button/button.vue';
+import { translate } from '../../../utils/i18n';
+
+export default {
+  name: 'ClipboardButton',
+  components: {
+    GlButton,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    /**
+     * The text to copy to clipboard
+     */
+    text: {
+      type: String,
+      required: true,
+    },
+    /**
+     * The tooltip text shown on hover
+     */
+    title: {
+      type: String,
+      required: false,
+      default: () => translate('ClipboardButton.title', 'Copy to clipboard'),
+    },
+    /**
+     * Button size
+     */
+    size: {
+      type: String,
+      required: false,
+      default: 'medium',
+    },
+  },
+  data() {
+    return {
+      localTitle: this.title,
+      titleTimeout: null,
+    };
+  },
+  methods: {
+    updateTooltip(title) {
+      this.localTitle = title;
+
+      clearTimeout(this.titleTimeout);
+
+      this.titleTimeout = setTimeout(() => {
+        this.localTitle = this.title;
+      }, 1000);
+    },
+    async handleClick() {
+      try {
+        await navigator.clipboard.writeText(this.text);
+        this.updateTooltip(translate('ClipboardButton.copied', 'Copied'));
+      } catch {
+        this.updateTooltip(translate('ClipboardButton.error', 'Copy failed'));
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-button
+    v-gl-tooltip.hover.focus.top
+    variant="default"
+    category="tertiary"
+    icon="copy-to-clipboard"
+    :size="size"
+    :title="localTitle"
+    :aria-label="localTitle"
+    @click="handleClick"
+  />
+</template>

package/translations.js

@@ -1,6 +1,9 @@
 /* eslint-disable import/no-default-export */
 export default {
   'ClearIconButton.title': 'Clear',
+  'ClipboardButton.copied': 'Copied',
+  'ClipboardButton.error': 'Copy failed',
+  'ClipboardButton.title': 'Copy to clipboard',
   'CloseButton.title': 'Close',
   'GlAlert.closeButtonTitle': 'Dismiss',
   'GlBanner.closeButtonTitle': 'Dismiss',