@gitlab/ui 123.11.3 → 124.0.0

package/dist/components/base/alert/alert.js

@@ -87,7 +87,13 @@ var script = {
       required: false,
       default: false
     },
-    // only set to 'assertive' if alert requires immediate user action, otherwise use a default value
+    /**
+     * Set the aria-live attribute on the alert.
+     *
+     * Only set to 'assertive' if alert requires immediate user action.
+     * Otherwise, rely on the default value.
+     *
+     */
     politeness: {
       type: String,
       required: false,
@@ -193,7 +199,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
     { 'gl-alert-not-dismissible': !_vm.dismissible },
     { 'gl-alert-no-icon': !_vm.showIcon },
     { 'gl-alert-has-title': !!_vm.title },
-    _vm.variantClass ]},[(_vm.showIcon)?_c('div',{staticClass:"gl-alert-icon-container"},[_c('gl-icon',{staticClass:"gl-alert-icon",attrs:{"name":_vm.iconName}})],1):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-content",attrs:{"role":_vm.role,"aria-live":_vm.politeness}},[(_vm.title)?_c('h2',{staticClass:"gl-alert-title"},[_vm._v(_vm._s(_vm.title))]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-body"},[_vm._t("default")],2),_vm._v(" "),(_vm.shouldRenderActions)?_c('div',{staticClass:"gl-alert-actions"},[_vm._t("actions",function(){return _vm._l((_vm.actionButtons),function(actionButton,index){return _c('gl-button',_vm._g(_vm._b({key:index,staticClass:"gl-alert-action"},'gl-button',actionButton.attrs,false),actionButton.listeners),[_vm._v("\n          "+_vm._s(actionButton.text)+"\n        ")])})})],2):_vm._e()]),_vm._v(" "),(_vm.dismissible)?_c('close-button',{ref:"dismiss",staticClass:"gl-dismiss-btn",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.onDismiss}}):_vm._e()],1)};
+    _vm.variantClass ],attrs:{"role":_vm.role,"aria-live":_vm.politeness}},[(_vm.showIcon)?_c('div',{staticClass:"gl-alert-icon-container"},[_c('gl-icon',{staticClass:"gl-alert-icon",attrs:{"name":_vm.iconName}})],1):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-content"},[(_vm.title)?_c('h2',{staticClass:"gl-alert-title"},[_vm._v(_vm._s(_vm.title))]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-body"},[_vm._t("default")],2),_vm._v(" "),(_vm.shouldRenderActions)?_c('div',{staticClass:"gl-alert-actions"},[_vm._t("actions",function(){return _vm._l((_vm.actionButtons),function(actionButton,index){return _c('gl-button',_vm._g(_vm._b({key:index,staticClass:"gl-alert-action"},'gl-button',actionButton.attrs,false),actionButton.listeners),[_vm._v("\n          "+_vm._s(actionButton.text)+"\n        ")])})})],2):_vm._e()]),_vm._v(" "),(_vm.dismissible)?_c('close-button',{ref:"dismiss",staticClass:"gl-dismiss-btn",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.onDismiss}}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/form/form_fields/form_fields.js

@@ -5,6 +5,7 @@ import GlFormGroup from '../form_group/form_group';
 import GlFormInput from '../form_input/form_input';
 import { setObjectProperty } from '../../../../utils/set_utils';
 import GlFormFieldValidator from './form_field_validator';
+import GlFormFieldsLoop from './form_fields_loop';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
@@ -12,7 +13,8 @@ var script = {
   components: {
     GlFormGroup,
     GlFormInput,
-    GlFormFieldValidator
+    GlFormFieldValidator,
+    GlFormFieldsLoop
   },
   model: {
     prop: 'values',
@@ -66,7 +68,8 @@ var script = {
   data() {
     return {
       fieldDirtyStatuses: {},
-      fieldValidations: {}
+      fieldValidations: {},
+      fieldIds: {}
     };
   },
   computed: {
@@ -95,7 +98,7 @@ var script = {
     },
     fieldsToRender() {
       return mapValues(this.fields, (field, fieldName) => {
-        const id = uniqueId('gl-form-field-');
+        const id = this.memoizeAndReturnFieldId(field, fieldName);
         const inputSlotName = `input(${fieldName})`;
         const groupPassthroughSlotName = `group(${fieldName})-`;
         const afterSlotName = `after(${fieldName})`;
@@ -160,6 +163,15 @@ var script = {
       }
       return val;
     },
+    memoizeAndReturnFieldId(field, fieldName) {
+      const memoizedId = this.fieldIds[fieldName];
+      if (memoizedId) {
+        return memoizedId;
+      }
+      const id = field.id || uniqueId('gl-form-field-');
+      this.fieldIds[fieldName] = id;
+      return id;
+    },
     onFieldValidationUpdate(fieldName, invalidFeedback) {
       this.fieldValidations = setObjectProperty(this.fieldValidations, fieldName, invalidFeedback);
       this.$emit('field-validation', {
@@ -206,10 +218,13 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_vm._l((_vm.fieldsToRender),function(field,fieldName){return [_c('gl-form-group',_vm._b({attrs:{"label":field.label,"label-for":field.id,"invalid-feedback":_vm.fieldValidationProps[fieldName].invalidFeedback,"state":_vm.fieldValidationProps[fieldName].state},scopedSlots:_vm._u([_vm._l((field.groupPassthroughSlots),function(ref){
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-fields-loop',{attrs:{"fields":_vm.fieldsToRender},scopedSlots:_vm._u([{key:"default",fn:function(ref){
+var field = ref.field;
+var fieldName = ref.fieldName;
+return [_c('gl-form-group',_vm._b({key:field.id,attrs:{"label":field.label,"label-for":field.id,"invalid-feedback":_vm.fieldValidationProps[fieldName].invalidFeedback,"state":_vm.fieldValidationProps[fieldName].state},scopedSlots:_vm._u([_vm._l((field.groupPassthroughSlots),function(ref){
 var slotName = ref.slotName;
 var childSlotName = ref.childSlotName;
-return {key:childSlotName,fn:function(){return [_vm._t(slotName)]},proxy:true}})],null,true)},'gl-form-group',field.groupAttrs,false),[_c('gl-form-field-validator',{attrs:{"value":_vm.fieldValues[fieldName],"validators":field.validators,"should-validate":_vm.fieldDirtyStatuses[fieldName]},on:{"update":function($event){return _vm.onFieldValidationUpdate(fieldName, $event)}}}),_vm._v(" "),_vm._v(" "),_vm._t(field.inputSlot.slotName,function(){return [_c('gl-form-input',_vm._b({attrs:{"id":field.id,"value":_vm.fieldValues[fieldName],"state":_vm.fieldValidationProps[fieldName].state},on:{"input":function($event){return _vm.onFieldInput(fieldName, $event)},"blur":function($event){return _vm.onFieldBlur(fieldName)}}},'gl-form-input',field.inputAttrs,false))]},null,field.inputSlot.attrs)],2),_vm._v(" "),_vm._t(field.afterSlotName)]})],2)};
+return {key:childSlotName,fn:function(){return [_vm._t(slotName)]},proxy:true}})],null,true)},'gl-form-group',field.groupAttrs,false),[_c('gl-form-field-validator',{attrs:{"value":_vm.fieldValues[fieldName],"validators":field.validators,"should-validate":_vm.fieldDirtyStatuses[fieldName]},on:{"update":function($event){return _vm.onFieldValidationUpdate(fieldName, $event)}}}),_vm._v(" "),_vm._v(" "),_vm._t(field.inputSlot.slotName,function(){return [_c('gl-form-input',_vm._b({attrs:{"id":field.id,"value":_vm.fieldValues[fieldName],"state":_vm.fieldValidationProps[fieldName].state},on:{"input":function($event){return _vm.onFieldInput(fieldName, $event)},"blur":function($event){return _vm.onFieldBlur(fieldName)}}},'gl-form-input',field.inputAttrs,false))]},null,field.inputSlot.attrs)],2),_vm._v(" "),_vm._t(field.afterSlotName)]}}],null,true)})};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/form/form_fields/form_fields_loop.js

@@ -0,0 +1,75 @@
+import Vue from 'vue';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlFormFieldsLoop',
+  props: {
+    fields: {
+      type: Object,
+      required: true
+    }
+  },
+  render(createElement) {
+    const {
+      Fragment
+    } = Vue;
+
+    // Vue 3, key goes on `Fragment` (<template> element)
+    if (Fragment) {
+      return createElement('div', Object.entries(this.fields).map(_ref => {
+        let [fieldName, field] = _ref;
+        return createElement(Fragment, {
+          key: field.id
+        }, this.$scopedSlots.default({
+          fieldName,
+          field
+        }));
+      }));
+    }
+
+    // Vue 2, key goes on element (rendered via default slot)
+    return createElement('div', Object.entries(this.fields).map(_ref2 => {
+      let [fieldName, field] = _ref2;
+      return this.$scopedSlots.default({
+        fieldName,
+        field
+      });
+    }));
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = undefined;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    {},
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export { __vue_component__ as default };

package/dist/components/base/pagination/pagination.js

@@ -167,11 +167,6 @@ var script = {
       required: false,
       default: alignOptions.left,
       validator: value => Object.keys(alignOptions).includes(value)
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false
     }
   },
   data() {
@@ -290,7 +285,7 @@ var script = {
       this.breakpoint = GlBreakpointInstance.getBreakpointSize();
     },
     pageIsDisabled(page) {
-      return this.disabled || page < 1 || this.isCompactPagination && page > this.value && !this.nextPage || !this.isCompactPagination && page > this.totalPages;
+      return page < 1 || this.isCompactPagination && page > this.value && !this.nextPage || !this.isCompactPagination && page > this.totalPages;
     },
     getPageItem(page) {
       let label = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
@@ -377,13 +372,13 @@ const __vue_script__ = script;
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.isVisible)?_c('nav',{staticClass:"gl-pagination",attrs:{"aria-label":_vm.labelNav}},[_c('ul',{class:_vm.wrapperClasses},[_c('li',{class:{
         disabled: _vm.prevPageIsDisabled,
         'gl-flex-auto': _vm.isFillAlign,
-      },attrs:{"aria-disabled":_vm.prevPageIsDisabled,"aria-hidden":_vm.prevPageIsDisabled,"data-testid":"gl-pagination-li"}},[_c(_vm.prevPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-pagination-item",attrs:{"data-testid":"gl-pagination-prev","aria-label":_vm.prevPageAriaLabel,"href":_vm.prevPageHref},on:{"click":function($event){!_vm.prevPageIsDisabled ? _vm.handlePrevious($event, _vm.value - 1) : null;}}},[_vm._t("previous",function(){return [_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v(" "),_c('span',{staticClass:"gl-hidden @sm:gl-block"},[_vm._v(_vm._s(_vm.prevText))])]},null,{ page: _vm.value - 1, disabled: _vm.prevPageIsDisabled })],2)],1),_vm._v(" "),_vm._l((_vm.visibleItems),function(item){return _c('li',{key:item.key,class:{
+      },attrs:{"aria-hidden":_vm.prevPageIsDisabled,"data-testid":"gl-pagination-li"}},[_c(_vm.prevPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-pagination-item",attrs:{"data-testid":"gl-pagination-prev","aria-label":_vm.prevPageAriaLabel,"href":_vm.prevPageHref},on:{"click":function($event){!_vm.prevPageIsDisabled ? _vm.handlePrevious($event, _vm.value - 1) : null;}}},[_vm._t("previous",function(){return [_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v(" "),_c('span',{staticClass:"gl-hidden @sm:gl-block"},[_vm._v(_vm._s(_vm.prevText))])]},null,{ page: _vm.value - 1, disabled: _vm.prevPageIsDisabled })],2)],1),_vm._v(" "),_vm._l((_vm.visibleItems),function(item){return _c('li',{key:item.key,class:{
         disabled: item.disabled,
         'gl-flex-auto': _vm.isFillAlign,
       },attrs:{"data-testid":"gl-pagination-li"}},[_c(item.component,_vm._g(_vm._b({tag:"component",staticClass:"gl-pagination-item",attrs:{"data-testid":"gl-pagination-item","size":"md","aria-disabled":item.disabled}},'component',item.attrs,false),item.listeners),[_vm._t(item.slot,function(){return [_vm._v(_vm._s(item.content))]},null,item.slotData)],2)],1)}),_vm._v(" "),_c('li',{class:{
         disabled: _vm.nextPageIsDisabled,
         'gl-flex-auto': _vm.isFillAlign,
-      },attrs:{"aria-disabled":_vm.nextPageIsDisabled,"aria-hidden":_vm.nextPageIsDisabled,"data-testid":"gl-pagination-li"}},[_c(_vm.nextPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-pagination-item",attrs:{"data-testid":"gl-pagination-next","aria-label":_vm.nextPageAriaLabel,"href":_vm.nextPageHref},on:{"click":function($event){!_vm.nextPageIsDisabled ? _vm.handleNext($event, _vm.value + 1) : null;}}},[_vm._t("next",function(){return [_c('span',{staticClass:"gl-hidden @sm:gl-block"},[_vm._v(_vm._s(_vm.nextText))]),_vm._v(" "),_c('gl-icon',{attrs:{"name":"chevron-right"}})]},null,{ page: _vm.value + 1, disabled: _vm.nextPageIsDisabled })],2)],1)],2)]):_vm._e()};
+      },attrs:{"aria-hidden":_vm.nextPageIsDisabled,"data-testid":"gl-pagination-li"}},[_c(_vm.nextPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-pagination-item",attrs:{"data-testid":"gl-pagination-next","aria-label":_vm.nextPageAriaLabel,"href":_vm.nextPageHref},on:{"click":function($event){!_vm.nextPageIsDisabled ? _vm.handleNext($event, _vm.value + 1) : null;}}},[_vm._t("next",function(){return [_c('span',{staticClass:"gl-hidden @sm:gl-block"},[_vm._v(_vm._s(_vm.nextText))]),_vm._v(" "),_c('gl-icon',{attrs:{"name":"chevron-right"}})]},null,{ page: _vm.value + 1, disabled: _vm.nextPageIsDisabled })],2)],1)],2)]):_vm._e()};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/toast/toast.js

@@ -18,13 +18,21 @@ function renderTitle(h, toast, options) {
     }
   })];
   if (options.action) {
-    nodes.splice(0, 0, h('a', {
-      role: 'button',
+    const {
+      onClick,
+      text,
+      href
+    } = options.action;
+    nodes.unshift(h('a', {
+      attrs: {
+        role: href ? undefined : 'button',
+        href
+      },
       class: ['gl-toast-action'],
       on: {
-        click: e => options.action.onClick(e, toast)
+        click: e => onClick(e, toast)
       }
-    }, options.action.text));
+    }, text));
   }
   return nodes;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "123.11.3",
+  "version": "124.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -103,7 +103,7 @@
     "@gitlab/fonts": "^1.3.1",
     "@gitlab/svgs": "*",
     "@jest/test-sequencer": "30.2.0",
-    "@rollup/plugin-commonjs": "^28.0.8",
+    "@rollup/plugin-commonjs": "^28.0.9",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.2",
     "@storybook/addon-a11y": "^7.6.20",

package/src/components/base/alert/alert.vue

@@ -90,7 +90,13 @@ export default {
       required: false,
       default: false,
     },
-    // only set to 'assertive' if alert requires immediate user action, otherwise use a default value
+    /**
+     * Set the aria-live attribute on the alert.
+     *
+     * Only set to 'assertive' if alert requires immediate user action.
+     * Otherwise, rely on the default value.
+     *
+     */
     politeness: {
       type: String,
       required: false,
@@ -196,6 +202,8 @@ export default {
 
 <template>
   <div
+    :role="role"
+    :aria-live="politeness"
     :class="[
       'gl-alert',
       { 'gl-alert-sticky': sticky },
@@ -208,7 +216,7 @@ export default {
     <div v-if="showIcon" class="gl-alert-icon-container">
       <gl-icon :name="iconName" class="gl-alert-icon" />
     </div>
-    <div class="gl-alert-content" :role="role" :aria-live="politeness">
+    <div class="gl-alert-content">
       <h2 v-if="title" class="gl-alert-title">{{ title }}</h2>
 
       <div class="gl-alert-body">

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

@@ -6,6 +6,7 @@ import GlFormGroup from '../form_group/form_group.vue';
 import GlFormInput from '../form_input/form_input.vue';
 import { setObjectProperty } from '../../../../utils/set_utils';
 import GlFormFieldValidator from './form_field_validator.vue';
+import GlFormFieldsLoop from './form_fields_loop.vue';
 
 export default {
   name: 'GlFormFields',
@@ -13,6 +14,7 @@ export default {
     GlFormGroup,
     GlFormInput,
     GlFormFieldValidator,
+    GlFormFieldsLoop,
   },
   model: {
     prop: 'values',
@@ -67,6 +69,7 @@ export default {
     return {
       fieldDirtyStatuses: {},
       fieldValidations: {},
+      fieldIds: {},
     };
   },
   computed: {
@@ -98,7 +101,7 @@ export default {
     },
     fieldsToRender() {
       return mapValues(this.fields, (field, fieldName) => {
-        const id = uniqueId('gl-form-field-');
+        const id = this.memoizeAndReturnFieldId(field, fieldName);
 
         const inputSlotName = `input(${fieldName})`;
         const groupPassthroughSlotName = `group(${fieldName})-`;
@@ -173,6 +176,18 @@ export default {
 
       return val;
     },
+    memoizeAndReturnFieldId(field, fieldName) {
+      const memoizedId = this.fieldIds[fieldName];
+
+      if (memoizedId) {
+        return memoizedId;
+      }
+
+      const id = field.id || uniqueId('gl-form-field-');
+      this.fieldIds[fieldName] = id;
+
+      return id;
+    },
     onFieldValidationUpdate(fieldName, invalidFeedback) {
       this.fieldValidations = setObjectProperty(this.fieldValidations, fieldName, invalidFeedback);
 
@@ -220,11 +235,11 @@ export default {
 </script>
 
 <template>
-  <div>
-    <template v-for="(field, fieldName) in fieldsToRender">
-      <!-- eslint-disable-next-line vue/valid-v-for -->
+  <gl-form-fields-loop :fields="fieldsToRender">
+    <template #default="{ field, fieldName }">
       <gl-form-group
         v-bind="field.groupAttrs"
+        :key="field.id"
         :label="field.label"
         :label-for="field.id"
         :invalid-feedback="fieldValidationProps[fieldName].invalidFeedback"
@@ -259,5 +274,5 @@ export default {
       <!-- @slot Can be used to add content the form group of a field. The name of the slot is `after(<fieldName>)`.-->
       <slot :name="field.afterSlotName"></slot>
     </template>
-  </div>
+  </gl-form-fields-loop>
 </template>

package/src/components/base/form/form_fields/form_fields_loop.vue

@@ -0,0 +1,44 @@
+<script>
+import Vue from 'vue';
+
+export default {
+  name: 'GlFormFieldsLoop',
+  props: {
+    fields: {
+      type: Object,
+      required: true,
+    },
+  },
+  render(createElement) {
+    const { Fragment } = Vue;
+
+    // Vue 3, key goes on `Fragment` (<template> element)
+    if (Fragment) {
+      return createElement(
+        'div',
+        Object.entries(this.fields).map(([fieldName, field]) =>
+          createElement(
+            Fragment,
+            { key: field.id },
+            this.$scopedSlots.default({
+              fieldName,
+              field,
+            }),
+          ),
+        ),
+      );
+    }
+
+    // Vue 2, key goes on element (rendered via default slot)
+    return createElement(
+      'div',
+      Object.entries(this.fields).map(([fieldName, field]) =>
+        this.$scopedSlots.default({
+          fieldName,
+          field,
+        }),
+      ),
+    );
+  },
+};
+</script>

package/src/components/base/pagination/pagination.vue

@@ -168,11 +168,6 @@ export default {
       default: alignOptions.left,
       validator: (value) => Object.keys(alignOptions).includes(value),
     },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
   data() {
     return {
@@ -312,7 +307,6 @@ export default {
     },
     pageIsDisabled(page) {
       return (
-        this.disabled ||
         page < 1 ||
         (this.isCompactPagination && page > this.value && !this.nextPage) ||
         (!this.isCompactPagination && page > this.totalPages)
@@ -399,7 +393,6 @@ export default {
   <nav v-if="isVisible" class="gl-pagination" :aria-label="labelNav">
     <ul :class="wrapperClasses">
       <li
-        :aria-disabled="prevPageIsDisabled"
         :aria-hidden="prevPageIsDisabled"
         :class="{
           disabled: prevPageIsDisabled,
@@ -465,7 +458,6 @@ export default {
       </li>
 
       <li
-        :aria-disabled="nextPageIsDisabled"
         :aria-hidden="nextPageIsDisabled"
         :class="{
           disabled: nextPageIsDisabled,

package/src/components/base/toast/toast.js

@@ -23,19 +23,21 @@ function renderTitle(h, toast, options) {
     }),
   ];
   if (options.action) {
-    nodes.splice(
-      0,
-      0,
+    const { onClick, text, href } = options.action;
+    nodes.unshift(
       h(
         'a',
         {
-          role: 'button',
+          attrs: {
+            role: href ? undefined : 'button',
+            href,
+          },
           class: ['gl-toast-action'],
           on: {
-            click: (e) => options.action.onClick(e, toast),
+            click: (e) => onClick(e, toast),
           },
         },
-        options.action.text,
+        text,
       ),
     );
   }