@gitlab/ui 128.3.0 → 128.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "128.3.0",
+  "version": "128.5.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -146,8 +146,8 @@
     "mockdate": "^3.0.5",
     "module-alias": "^2.2.3",
     "pikaday": "^1.8.0",
-    "playwright": "^1.57.0",
-    "playwright-core": "^1.57.0",
+    "playwright": "^1.58.0",
+    "playwright-core": "^1.58.0",
     "postcss": "8.5.6",
     "postcss-loader": "8.2.0",
     "postcss-scss": "4.0.9",
@@ -159,7 +159,7 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-vue": "^5.1.9",
-    "sass": "^1.97.2",
+    "sass": "^1.97.3",
     "sass-loader": "^10.5.2",
     "sass-true": "^9",
     "start-server-and-test": "^2.1.3",

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

@@ -60,8 +60,10 @@ $breadcrumb-max-width: $grid-size * 16;
 
 .gl-breadcrumb-item-md {
   @apply gl-text-base;
+}
 
-  /**
+.gl-breadcrumb-item {
+/**
    * If the last/only item, which is always visible, has a very long title,
    * it could overflow the breadcrumb component. This CSS makes sure it
    * shows an ellipsis instead.
@@ -69,7 +71,8 @@ $breadcrumb-max-width: $grid-size * 16;
    * would then not take the real unshrunk width of that item into account.
    */
   &.gl-breadcrumb-only-item {
-    @apply gl-max-w-full gl-shrink;
+    @apply gl-shrink;
+    max-width: var(--gl-breadcrumb-truncated-item-max-width, 100%);
 
     a {
       @apply gl-max-w-full gl-overflow-hidden gl-text-ellipsis gl-text-nowrap;

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

@@ -151,14 +151,22 @@ export default {
     } else {
       this.resizeDone = true;
     }
-    this.clipboardButtonWidth = this.showClipboardButton
-      ? this.$refs.clipboardButton.$el.clientWidth
-      : 0;
+    this.updateClipboardButtonWidth();
   },
   beforeDestroy() {
     this.disableAutoResize();
   },
   methods: {
+    updateClipboardButtonWidth() {
+      if (!this.showClipboardButton) {
+        this.clipboardButtonWidth = 0;
+        return;
+      }
+
+      const element = this.$refs.clipboardButton.$el;
+      const marginLeft = parseInt(getComputedStyle(element).marginLeft, 10);
+      this.clipboardButtonWidth = element.offsetWidth + marginLeft;
+    },
     resetItems() {
       this.fittingItems = [...this.items];
       this.overflowingItems = [];
@@ -214,6 +222,15 @@ export default {
         }
       }
 
+      const truncatedItemMaxWidth = Math.max(
+        0,
+        containerWidth - (this.dropdownWidth + this.clipboardButtonWidth),
+      );
+      this.$el.style.setProperty(
+        '--gl-breadcrumb-truncated-item-max-width',
+        `${truncatedItemMaxWidth}px`,
+      );
+
       this.resizeDone = true;
     },
     isLastItem(index) {

package/src/components/base/button/button.vue

@@ -13,7 +13,6 @@ import { isEvent } from '../../../vendor/bootstrap-vue/src/utils/inspect';
 import GlIcon from '../icon/icon.vue';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
 import { ENTER, SPACE } from '../new_dropdowns/constants';
-import { glButtonConfig } from '../../../config';
 
 export default {
   name: 'GlButton',
@@ -82,14 +81,6 @@ export default {
       required: false,
       default: false,
     },
-    /**
-     * Keep the button accessible when `loading` is `true`.
-     */
-    accessibleLoading: {
-      type: Boolean,
-      required: false,
-      default: () => glButtonConfig.accessibleLoadingButton,
-    },
     /**
      * CSS classes to add to the button text.
      */
@@ -247,10 +238,10 @@ export default {
       return isSlotEmpty(this, 'default') && this.hasIcon && this.count == null;
     },
     isButtonDisabled() {
-      return this.disabled || this.loading;
+      return this.disabled;
     },
     isButtonAriaDisabled() {
-      return this.accessibleLoading && this.isButton && this.loading;
+      return this.isButton && this.loading;
     },
     buttonClasses() {
       const classes = ['btn', 'gl-button', `btn-${this.variant}`, `btn-${this.buttonSize}`];
@@ -316,7 +307,7 @@ export default {
         ...(this.isNonStandardTag ? { 'aria-disabled': String(this.disabled) } : {}),
         tabindex: this.tabindex,
         // We set the `aria-disabled` state for buttons while loading
-        ...(this.isButtonAriaDisabled ? { 'aria-disabled': 'true', disabled: null } : {}),
+        ...(this.isButtonAriaDisabled ? { 'aria-disabled': 'true' } : {}),
       };
 
       if (this.isLink) {

package/src/config.js

@@ -39,8 +39,6 @@ export const defaultConfig = {
   firstDayOfWeek: 0, // Defaults to 0 (Sunday)
 };
 
-export const glButtonConfig = {};
-
 let configured = false;
 
 /**
@@ -53,7 +51,7 @@ let configured = false;
  * @property {boolean} [accessibleLoadingButton] Temporary flag to enable accessible loading button.
  *
  */
-const setConfigs = ({ translations, firstDayOfWeek, accessibleLoadingButton = false } = {}) => {
+const setConfigs = ({ translations, firstDayOfWeek } = {}) => {
   if (configured) {
     if (process.env.NODE_ENV === 'development') {
       throw new Error('GitLab UI can only be configured once!');
@@ -94,23 +92,6 @@ const setConfigs = ({ translations, firstDayOfWeek, accessibleLoadingButton = fa
 
     Object.assign(i18n, translations);
   }
-
-  // Temporary flag to enable the accessible loading button feature.
-  // This flag allows the feature to be opt-in during the rollout phase,
-  // giving us the flexibility to test and validate its impact on user experience.
-
-  // The global variable `accessibleLoadingButton` is set to a boolean value
-  // to indicate whether the button should be disabled while loading.
-
-  // Future Plan:
-  // Once the accessible loading button feature is validated and stable,
-  // we will remove this temporary flag and make the feature the default behavior.
-  // At that point, there will be no need for opt-in or opt-out mechanisms for this feature.
-  if (typeof accessibleLoadingButton === 'boolean') {
-    Object.assign(glButtonConfig, {
-      accessibleLoadingButton,
-    });
-  }
 };
 
 export default setConfigs;