@gitlab/ui 128.3.0 → 128.5.0

package/dist/components/base/breadcrumb/breadcrumb.js

@@ -158,12 +158,21 @@ var script = {
     } 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 = [];
@@ -209,6 +218,8 @@ var script = {
           if (widthNeeded + this.dropdownWidth < containerWidth) break;
         }
       }
+      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/dist/components/base/button/button.js

@@ -7,7 +7,6 @@ import { isEvent } from '../../../vendor/bootstrap-vue/src/utils/inspect';
 import GlIcon from '../icon/icon';
 import GlLoadingIcon from '../loading_icon/loading_icon';
 import { SPACE, ENTER } from '../new_dropdowns/constants';
-import { glButtonConfig } from '../../../config';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
@@ -77,14 +76,6 @@ var script = {
       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.
      */
@@ -242,10 +233,10 @@ var script = {
       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}`];
@@ -310,8 +301,7 @@ var script = {
         tabindex: this.tabindex,
         // We set the `aria-disabled` state for buttons while loading
         ...(this.isButtonAriaDisabled ? {
-          'aria-disabled': 'true',
-          disabled: null
+          'aria-disabled': 'true'
         } : {})
       };
       if (this.isLink) {

package/dist/config.js

@@ -35,7 +35,6 @@ const i18n = translationKeys;
 const defaultConfig = {
   firstDayOfWeek: 0 // Defaults to 0 (Sunday)
 };
-const glButtonConfig = {};
 let configured = false;
 
 /**
@@ -51,8 +50,7 @@ let configured = false;
 const setConfigs = function () {
   let {
     translations,
-    firstDayOfWeek,
-    accessibleLoadingButton = false
+    firstDayOfWeek
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   if (configured) {
     if (process.env.NODE_ENV === 'development') {
@@ -87,23 +85,6 @@ const setConfigs = function () {
     }
     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 { setConfigs as default, defaultConfig, glButtonConfig, i18n };
+export { setConfigs as default, defaultConfig, i18n };