@gitlab/ui 108.3.0 → 108.4.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [108.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v108.3.1...v108.4.0) (2025-02-21)
+
+
+### Features
+
+* **GlLink:** Add variants and use design tokens in GlLink ([ec6b16d](https://gitlab.com/gitlab-org/gitlab-ui/commit/ec6b16d5142e07a3abe6b6e11fc61f58cb7c2baa))
+
+## [108.3.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v108.3.0...v108.3.1) (2025-02-14)
+
+
+### Bug Fixes
+
+* **GlDisclosureDropdownItem:** remove improper aria-hidden ([37977f8](https://gitlab.com/gitlab-org/gitlab-ui/commit/37977f861dee1f84dcdd6ca1ed9702c6d8a19752))
+
 # [108.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v108.2.0...v108.3.0) (2025-02-12)
 
 

package/dist/components/base/avatar_labeled/avatar_labeled.js

@@ -72,7 +72,7 @@ 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',{staticClass:"gl-avatar-labeled"},[_c('gl-avatar',_vm._g(_vm._b({class:_vm.avatarCssClasses,attrs:{"alt":""}},'gl-avatar',_vm.$attrs,false),_vm.avatarListeners)),_vm._v(" "),_c('div',{staticClass:"gl-avatar-labeled-labels !gl-text-left",class:_vm.avatarRowLayoutClass},[_c('div',{staticClass:"-gl-mx-1 -gl-my-1 gl-flex gl-flex-wrap gl-items-center !gl-text-left"},[(_vm.hasLabelLink)?_c('gl-link',{ref:"labelLink",staticClass:"gl-avatar-link",attrs:{"href":_vm.labelLink}},[_c('span',{staticClass:"gl-avatar-labeled-label"},[_vm._v(_vm._s(_vm.label))])]):_c('span',{staticClass:"gl-avatar-labeled-label"},[_vm._v(_vm._s(_vm.label))]),_vm._v(" "),_vm._t("meta")],2),_vm._v(" "),(_vm.hasSubLabelLink)?_c('gl-link',{staticClass:"gl-avatar-link",attrs:{"href":_vm.subLabelLink}},[_c('span',{staticClass:"gl-avatar-labeled-sublabel"},[_vm._v(_vm._s(_vm.subLabel))])]):_c('span',{staticClass:"gl-avatar-labeled-sublabel"},[_vm._v(_vm._s(_vm.subLabel))]),_vm._v(" "),_vm._t("default")],2)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-avatar-labeled"},[_c('gl-avatar',_vm._g(_vm._b({class:_vm.avatarCssClasses,attrs:{"alt":""}},'gl-avatar',_vm.$attrs,false),_vm.avatarListeners)),_vm._v(" "),_c('div',{staticClass:"gl-avatar-labeled-labels !gl-text-left",class:_vm.avatarRowLayoutClass},[_c('div',{staticClass:"-gl-mx-1 -gl-my-1 gl-flex gl-flex-wrap gl-items-center !gl-text-left"},[(_vm.hasLabelLink)?_c('gl-link',{ref:"labelLink",staticClass:"gl-avatar-link",attrs:{"href":_vm.labelLink,"variant":"meta"}},[_c('span',{staticClass:"gl-avatar-labeled-label"},[_vm._v(_vm._s(_vm.label))])]):_c('span',{staticClass:"gl-avatar-labeled-label"},[_vm._v(_vm._s(_vm.label))]),_vm._v(" "),_vm._t("meta")],2),_vm._v(" "),(_vm.hasSubLabelLink)?_c('gl-link',{staticClass:"gl-avatar-link",attrs:{"href":_vm.subLabelLink,"variant":"meta"}},[_c('span',{staticClass:"gl-avatar-labeled-sublabel"},[_vm._v(_vm._s(_vm.subLabel))])]):_c('span',{staticClass:"gl-avatar-labeled-sublabel"},[_vm._v(_vm._s(_vm.subLabel))]),_vm._v(" "),_vm._t("default")],2)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/avatar_link/avatar_link.js

@@ -12,7 +12,7 @@ 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('gl-link',_vm._g(_vm._b({staticClass:"gl-avatar-link"},'gl-link',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-link',_vm._g(_vm._b({staticClass:"gl-avatar-link",attrs:{"variant":"meta"}},'gl-link',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/daterange_picker/daterange_picker.js

@@ -1,3 +1,4 @@
+import uniqueId from 'lodash/uniqueId';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import { getDateInPast, getDateInFuture, getDayDifference } from '../../../utils/datetime_utility';
 import GlDatepicker from '../datepicker/datepicker';
@@ -26,6 +27,16 @@ var script = {
       required: false,
       default: 'To'
     },
+    fromAriaLabel: {
+      type: String,
+      required: false,
+      default: 'From date'
+    },
+    toAriaLabel: {
+      type: String,
+      required: false,
+      default: 'To date'
+    },
     value: {
       type: Object,
       required: false,
@@ -198,6 +209,12 @@ var script = {
     },
     showIndicator() {
       return Boolean(this.$scopedSlots.default || this.tooltip);
+    },
+    fromId() {
+      return uniqueId('date-from-field-');
+    },
+    toId() {
+      return uniqueId('date-to-field-');
     }
   },
   watch: {
@@ -273,7 +290,7 @@ 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',{staticClass:"gl-daterange-picker gl-flex gl-gap-5"},[_c('div',{class:_vm.startContainerClasses,attrs:{"data-testid":"daterange-picker-start-container"}},[_c('label',{class:_vm.labelClass},[_vm._v(_vm._s(_vm.fromLabel))]),_vm._v(" "),_c('gl-datepicker',{attrs:{"min-date":_vm.defaultMinDate,"max-date":_vm.fromCalendarMaxDate,"start-range":_vm.defaultMinDate,"end-range":_vm.fromCalendarMaxDate,"theme":_vm.theme,"i18n":_vm.i18n,"target":_vm.startPickerTarget,"container":_vm.startPickerContainer,"start-opened":_vm.startOpened,"state":_vm.startPickerState,"width":_vm.width},on:{"input":_vm.onStartDateSelected,"open":_vm.onStartPickerOpen,"close":_vm.onStartPickerClose},scopedSlots:_vm._u([{key:"after",fn:function(){return [_vm._t("after-start")]},proxy:true}],null,true),model:{value:(_vm.startDate),callback:function ($$v) {_vm.startDate=$$v;},expression:"startDate"}})],1),_vm._v(" "),_c('div',{class:_vm.endContainerClasses,attrs:{"data-testid":"daterange-picker-end-container"}},[_c('label',{class:_vm.labelClass},[_vm._v(_vm._s(_vm.toLabel))]),_vm._v(" "),_c('gl-datepicker',{key:_vm.numericStartTime,attrs:{"min-date":_vm.toCalendarMinDate,"max-date":_vm.toCalendarMaxDate,"start-range":_vm.toCalendarMinDate,"end-range":_vm.toCalendarMaxDate,"theme":_vm.theme,"i18n":_vm.i18n,"target":_vm.endPickerTarget,"container":_vm.endPickerContainer,"start-opened":_vm.openToCalendar,"default-date":_vm.toCalendarDefaultDate,"width":_vm.width,"state":_vm.endPickerState},on:{"input":_vm.onEndDateSelected,"open":_vm.onEndPickerOpen,"close":_vm.onEndPickerClose},scopedSlots:_vm._u([{key:"after",fn:function(){return [_vm._t("after-end")]},proxy:true}],null,true),model:{value:(_vm.endDate),callback:function ($$v) {_vm.endDate=$$v;},expression:"endDate"}})],1),_vm._v(" "),(_vm.showIndicator)?_c('div',{staticClass:"gl-daterange-picker-indicator",class:_vm.dateRangeIndicatorClass,attrs:{"data-testid":"daterange-picker-indicator"}},[_vm._t("default",null,null,{ daysSelected: _vm.numberOfDays }),_vm._v(" "),(_vm.tooltip)?_c('gl-icon',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"name":"information-o","title":_vm.tooltip,"size":16,"variant":"info"}}):_vm._e()],2):_vm._e()])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-daterange-picker gl-flex gl-gap-5"},[_c('div',{class:_vm.startContainerClasses,attrs:{"data-testid":"daterange-picker-start-container"}},[_c('label',{class:_vm.labelClass,attrs:{"for":_vm.fromId}},[_vm._v(_vm._s(_vm.fromLabel))]),_vm._v(" "),_c('gl-datepicker',{attrs:{"input-id":_vm.fromId,"input-label":_vm.fromAriaLabel,"min-date":_vm.defaultMinDate,"max-date":_vm.fromCalendarMaxDate,"start-range":_vm.defaultMinDate,"end-range":_vm.fromCalendarMaxDate,"theme":_vm.theme,"i18n":_vm.i18n,"target":_vm.startPickerTarget,"container":_vm.startPickerContainer,"start-opened":_vm.startOpened,"state":_vm.startPickerState,"width":_vm.width},on:{"input":_vm.onStartDateSelected,"open":_vm.onStartPickerOpen,"close":_vm.onStartPickerClose},scopedSlots:_vm._u([{key:"after",fn:function(){return [_vm._t("after-start")]},proxy:true}],null,true),model:{value:(_vm.startDate),callback:function ($$v) {_vm.startDate=$$v;},expression:"startDate"}})],1),_vm._v(" "),_c('div',{class:_vm.endContainerClasses,attrs:{"data-testid":"daterange-picker-end-container"}},[_c('label',{class:_vm.labelClass,attrs:{"for":_vm.toId}},[_vm._v(_vm._s(_vm.toLabel))]),_vm._v(" "),_c('gl-datepicker',{key:_vm.numericStartTime,attrs:{"input-id":_vm.toId,"input-label":_vm.toAriaLabel,"min-date":_vm.toCalendarMinDate,"max-date":_vm.toCalendarMaxDate,"start-range":_vm.toCalendarMinDate,"end-range":_vm.toCalendarMaxDate,"theme":_vm.theme,"i18n":_vm.i18n,"target":_vm.endPickerTarget,"container":_vm.endPickerContainer,"start-opened":_vm.openToCalendar,"default-date":_vm.toCalendarDefaultDate,"width":_vm.width,"state":_vm.endPickerState},on:{"input":_vm.onEndDateSelected,"open":_vm.onEndPickerOpen,"close":_vm.onEndPickerClose},scopedSlots:_vm._u([{key:"after",fn:function(){return [_vm._t("after-end")]},proxy:true}],null,true),model:{value:(_vm.endDate),callback:function ($$v) {_vm.endDate=$$v;},expression:"endDate"}})],1),_vm._v(" "),(_vm.showIndicator)?_c('div',{staticClass:"gl-daterange-picker-indicator",class:_vm.dateRangeIndicatorClass,attrs:{"data-testid":"daterange-picker-indicator"}},[_vm._t("default",null,null,{ daysSelected: _vm.numberOfDays }),_vm._v(" "),(_vm.tooltip)?_c('gl-icon',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"name":"information-o","title":_vm.tooltip,"size":16,"variant":"info"}}):_vm._e()],2):_vm._e()])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/link/link.js

@@ -1,5 +1,7 @@
 import { BLink } from '../../../vendor/bootstrap-vue/src/components/link/link';
 import { SafeLinkMixin } from '../../mixins/safe_link_mixin';
+import { isExternalURL } from '../../../directives/safe_link/safe_link';
+import { linkVariantOptions } from '../../../utils/constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
@@ -8,14 +10,43 @@ var script = {
   components: {
     BLink
   },
-  mixins: [SafeLinkMixin]
+  mixins: [SafeLinkMixin],
+  props: {
+    /**
+     * If inline variant, controls ↗ character visibility
+     */
+    showExternalIcon: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Link variant
+     */
+    variant: {
+      type: String,
+      required: false,
+      default: null,
+      validator: value => value && Object.hasOwn(linkVariantOptions, value)
+    }
+  },
+  computed: {
+    isInlineAndHasExternalIcon() {
+      return this.showExternalIcon && this.variant === 'inline' && this.$attrs.href && isExternalURL(this.target, this.$attrs.href);
+    },
+    linkClasses() {
+      return ['gl-link', linkVariantOptions[this.variant], {
+        'gl-link-inline-external': this.isInlineAndHasExternalIcon
+      }];
+    }
+  }
 };
 
 /* 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('b-link',_vm._g(_vm._b({directives:[{name:"safe-link",rawName:"v-safe-link:[safeLinkConfig]",arg:_vm.safeLinkConfig}],staticClass:"gl-link",attrs:{"target":_vm.target}},'b-link',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-link',_vm._g(_vm._b({directives:[{name:"safe-link",rawName:"v-safe-link:[safeLinkConfig]",arg:_vm.safeLinkConfig}],class:_vm.linkClasses,attrs:{"target":_vm.target}},'b-link',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.js

@@ -74,7 +74,7 @@ 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('li',{class:_vm.borderClass},[(_vm.showHeader)?_c('div',{staticClass:"gl-py-2 gl-pl-4 gl-text-sm gl-font-bold gl-text-strong",attrs:{"id":_vm.nameId,"aria-hidden":"true"}},[_vm._t("group-label",function(){return [_vm._v(_vm._s(_vm.group.name))]})],2):_vm._e(),_vm._v(" "),_c('ul',{staticClass:"gl-mb-0 gl-list-none gl-pl-0",attrs:{"aria-labelledby":_vm.groupLabeledBy}},[_vm._t("default",function(){return _vm._l((_vm.group.items),function(item){return _c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"item":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":item})]},proxy:true}],null,true)})})})],2)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',{class:_vm.borderClass},[(_vm.showHeader)?_c('div',{staticClass:"gl-py-2 gl-pl-4 gl-text-sm gl-font-bold gl-text-strong",attrs:{"id":_vm.nameId}},[_vm._t("group-label",function(){return [_vm._v(_vm._s(_vm.group.name))]})],2):_vm._e(),_vm._v(" "),_c('ul',{staticClass:"gl-mb-0 gl-list-none gl-pl-0",attrs:{"aria-labelledby":_vm.groupLabeledBy}},[_vm._t("default",function(){return _vm._l((_vm.group.items),function(item){return _c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"item":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":item})]},proxy:true}],null,true)})})})],2)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/directives/safe_link/safe_link.js

@@ -62,4 +62,4 @@ const SafeLinkDirective = {
   }
 };
 
-export { SafeLinkDirective };
+export { SafeLinkDirective, isExternalURL };