@gitlab/ui 128.4.0 → 128.5.1

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.
      */
@@ -241,11 +232,8 @@ var script = {
     hasIconOnly() {
       return isSlotEmpty(this, 'default') && this.hasIcon && this.count == null;
     },
-    isButtonDisabled() {
-      return this.disabled || this.loading;
-    },
     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}`];
@@ -300,7 +288,7 @@ var script = {
         // Type only used for "real" buttons
         type: this.isButton ? this.type : null,
         // Disabled only set on "real" buttons
-        disabled: this.isButton ? this.isButtonDisabled : null,
+        disabled: this.isButton ? this.disabled : null,
         // We add a role of button when the tag is not a link or button or when link has `href` of `#`
         role: this.isNonStandardTag || this.isHashLink ? 'button' : (_this$$attrs = this.$attrs) === null || _this$$attrs === void 0 ? void 0 : _this$$attrs.role,
         // We set the `aria-disabled` state for non-standard tags
@@ -310,8 +298,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/components/utilities/intersperse/intersperse.js

@@ -1,12 +1,9 @@
 import Vue from 'vue';
-import compose from 'lodash/fp/compose';
-import fill from 'lodash/fp/fill';
-import filter from 'lodash/fp/filter';
-import { insert, intersperse } from '../../../utils/data_utils';
+import { intersperse, insert } from '../../../utils/data_utils';
 import { isVnodeEmpty } from '../../../utils/is_slot_empty';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-const filterEmptyNodesVue2 = filter(vNode => typeof vNode.tag === 'string' || vNode.text.trim() !== '');
+const filterEmptyNodesVue2 = vNodes => vNodes.filter(vNode => typeof vNode.tag === 'string' || vNode.text.trim() !== '');
 const {
   Fragment
 } = Vue;
@@ -21,17 +18,22 @@ const filterEmptyNodesVue3 = vNode => {
   }, []).filter(node => !isVnodeEmpty(node));
 };
 const filterEmptyNodes = Vue.version.startsWith('3') ? filterEmptyNodesVue3 : filterEmptyNodesVue2;
-const insertAfterSecondLastItem = insert(-1);
-const replaceSecondLastItem = fill(-2, -1);
 
 // handles the addition of the lastSeparator in these two cases:
 // item1, item2, item3 => item1, item2, and item3
 // item1, item2 => item1 and item2
-const addLastSeparator = lastSeparator => items => {
+const addLastSeparator = (lastSeparator, items) => {
   if (!lastSeparator) {
     return items;
   }
-  return items.length > 3 ? insertAfterSecondLastItem(lastSeparator, items) : replaceSecondLastItem(lastSeparator, items);
+  if (items.length > 3) {
+    return insert(-1, lastSeparator, items);
+  }
+
+  // Replace the second-to-last item with lastSeparator
+  const result = [...items];
+  result[result.length - 2] = lastSeparator;
+  return result;
 };
 var script = {
   name: 'GlIntersperse',
@@ -57,8 +59,11 @@ var script = {
       slots,
       data
     } = context;
-    const filterAndSeparate = compose(addLastSeparator(lastSeparator), intersperse(separator), filterEmptyNodes);
-    return createElement('span', data, filterAndSeparate(slots().default));
+    const slotContent = slots().default || [];
+    const filtered = filterEmptyNodes(slotContent);
+    const separated = intersperse(separator, filtered);
+    const withLastSeparator = addLastSeparator(lastSeparator, separated);
+    return createElement('span', data, withLastSeparator);
   }
 };
 

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 };

package/dist/utils/data_utils.js

@@ -1,5 +1,3 @@
-import curry from 'lodash/fp/curry';
-
 const getRepeatingValue = index => {
   const values = [100, 500, 400, 200, 100, 800, 400, 500, 600, 300, 800, 900, 110, 700, 400, 300, 500, 300, 400, 600, 700];
   return index < values.length ? values[index] : values[index % values.length];
@@ -8,14 +6,14 @@ const generateTimeSeries = () => new Array(100).fill(0).map((el, i) => [new Date
 
 // takes an element and a list and `intersperses' that element between the elements of the list.
 // (',' ['a', 'b', 'c']) -> ['a', ',', 'b', ',', 'c']
-const intersperse = curry((separator, items) => {
+const intersperse = (separator, items) => {
   const [head, ...rest] = items;
   const separatorFactory = typeof separator === 'function' ? separator : () => separator;
   return [head, ...rest.flatMap(item => [separatorFactory(), item], rest)];
-});
+};
 
 // inserts a value at a given index into an array
 // (1, 2, [1, 3, 4]) -> [1, 2, 3, 4]
-const insert = curry((index, newItem, items) => [...items.slice(0, index), newItem, ...items.slice(index)]);
+const insert = (index, newItem, items) => [...items.slice(0, index), newItem, ...items.slice(index)];
 
 export { generateTimeSeries, insert, intersperse };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "128.4.0",
+  "version": "128.5.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -69,7 +69,7 @@
     "echarts": "^5.6.0",
     "gridstack": "^12.4.2",
     "iframe-resizer": "^4.4.5",
-    "lodash": "^4.17.21",
+    "lodash": "^4.17.23",
     "popper.js": "^1.16.1",
     "portal-vue": "2.1.7",
     "vue-functional-data-merge": "^3.1.0",

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.
      */
@@ -246,11 +237,8 @@ export default {
     hasIconOnly() {
       return isSlotEmpty(this, 'default') && this.hasIcon && this.count == null;
     },
-    isButtonDisabled() {
-      return this.disabled || this.loading;
-    },
     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}`];
@@ -309,14 +297,14 @@ export default {
         // Type only used for "real" buttons
         type: this.isButton ? this.type : null,
         // Disabled only set on "real" buttons
-        disabled: this.isButton ? this.isButtonDisabled : null,
+        disabled: this.isButton ? this.disabled : null,
         // We add a role of button when the tag is not a link or button or when link has `href` of `#`
         role: this.isNonStandardTag || this.isHashLink ? 'button' : this.$attrs?.role,
         // We set the `aria-disabled` state for non-standard tags
         ...(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/components/utilities/intersperse/intersperse.vue

@@ -1,14 +1,10 @@
 <script>
 import Vue from 'vue';
-import compose from 'lodash/fp/compose';
-import fill from 'lodash/fp/fill';
-import filter from 'lodash/fp/filter';
 import { intersperse, insert } from '../../../utils/data_utils';
 import { isVnodeEmpty } from '../../../utils/is_slot_empty';
 
-const filterEmptyNodesVue2 = filter(
-  (vNode) => typeof vNode.tag === 'string' || vNode.text.trim() !== '',
-);
+const filterEmptyNodesVue2 = (vNodes) =>
+  vNodes.filter((vNode) => typeof vNode.tag === 'string' || vNode.text.trim() !== '');
 
 const { Fragment } = Vue;
 const filterEmptyNodesVue3 = (vNode) => {
@@ -25,20 +21,23 @@ const filterEmptyNodesVue3 = (vNode) => {
 };
 
 const filterEmptyNodes = Vue.version.startsWith('3') ? filterEmptyNodesVue3 : filterEmptyNodesVue2;
-const insertAfterSecondLastItem = insert(-1);
-const replaceSecondLastItem = fill(-2, -1);
 
 // handles the addition of the lastSeparator in these two cases:
 // item1, item2, item3 => item1, item2, and item3
 // item1, item2 => item1 and item2
-const addLastSeparator = (lastSeparator) => (items) => {
+const addLastSeparator = (lastSeparator, items) => {
   if (!lastSeparator) {
     return items;
   }
 
-  return items.length > 3
-    ? insertAfterSecondLastItem(lastSeparator, items)
-    : replaceSecondLastItem(lastSeparator, items);
+  if (items.length > 3) {
+    return insert(-1, lastSeparator, items);
+  }
+
+  // Replace the second-to-last item with lastSeparator
+  const result = [...items];
+  result[result.length - 2] = lastSeparator;
+  return result;
 };
 
 export default {
@@ -63,13 +62,12 @@ export default {
       data,
     } = context;
 
-    const filterAndSeparate = compose(
-      addLastSeparator(lastSeparator),
-      intersperse(separator),
-      filterEmptyNodes,
-    );
+    const slotContent = slots().default || [];
+    const filtered = filterEmptyNodes(slotContent);
+    const separated = intersperse(separator, filtered);
+    const withLastSeparator = addLastSeparator(lastSeparator, separated);
 
-    return createElement('span', data, filterAndSeparate(slots().default));
+    return createElement('span', data, withLastSeparator);
   },
 };
 </script>

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;

package/src/utils/data_utils.js

@@ -1,5 +1,3 @@
-import curry from 'lodash/fp/curry';
-
 const getRepeatingValue = (index) => {
   const values = [
     100, 500, 400, 200, 100, 800, 400, 500, 600, 300, 800, 900, 110, 700, 400, 300, 500, 300, 400,
@@ -13,16 +11,16 @@ export const generateTimeSeries = () =>
 
 // takes an element and a list and `intersperses' that element between the elements of the list.
 // (',' ['a', 'b', 'c']) -> ['a', ',', 'b', ',', 'c']
-export const intersperse = curry((separator, items) => {
+export const intersperse = (separator, items) => {
   const [head, ...rest] = items;
   const separatorFactory = typeof separator === 'function' ? separator : () => separator;
   return [head, ...rest.flatMap((item) => [separatorFactory(), item], rest)];
-});
+};
 
 // inserts a value at a given index into an array
 // (1, 2, [1, 3, 4]) -> [1, 2, 3, 4]
-export const insert = curry((index, newItem, items) => [
+export const insert = (index, newItem, items) => [
   ...items.slice(0, index),
   newItem,
   ...items.slice(index),
-]);
+];