@gitlab/ui 115.10.0 → 116.0.0

package/dist/components/base/filtered_search/filtered_search_suggestion.js

@@ -1,10 +1,10 @@
-import GlDropdownItem from '../dropdown/dropdown_item';
+import GlIcon from '../icon/icon';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
   name: 'GlFilteredSearchSuggestion',
   components: {
-    GlDropdownItem
+    GlIcon
   },
   inject: ['filteredSearchSuggestionListInstance'],
   inheritAttrs: false,
@@ -12,11 +12,17 @@ var script = {
     /**
      * Value that will be emitted if this suggestion is selected.
      */
+    iconName: {
+      type: String,
+      required: false,
+      default: ''
+    },
     value: {
       required: true,
       validator: () => true
     }
   },
+  emits: ['suggestion'],
   computed: {
     isActive() {
       return this.filteredSearchSuggestionListInstance.activeItem === this;
@@ -26,8 +32,8 @@ var script = {
     isActive(newValue) {
       if (newValue) {
         window.requestAnimationFrame(() => {
-          var _this$$refs$item, _this$$refs$item$$el;
-          (_this$$refs$item = this.$refs.item) === null || _this$$refs$item === void 0 ? void 0 : (_this$$refs$item$$el = _this$$refs$item.$el) === null || _this$$refs$item$$el === void 0 ? void 0 : _this$$refs$item$$el.scrollIntoView({
+          var _this$$el;
+          (_this$$el = this.$el) === null || _this$$el === void 0 ? void 0 : _this$$el.scrollIntoView({
             block: 'nearest',
             inline: 'end'
           });
@@ -54,7 +60,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-dropdown-item',_vm._b({ref:"item",staticClass:"gl-filtered-search-suggestion",class:{ 'gl-filtered-search-suggestion-active': _vm.isActive },attrs:{"data-testid":"filtered-search-suggestion","tabindex":"-1","href":"#"},nativeOn:{"mousedown":function($event){$event.preventDefault();return _vm.emitValue.apply(null, arguments)}}},'gl-dropdown-item',_vm.$attrs,false),[_vm._t("default")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',{staticClass:"gl-dropdown-item gl-filtered-search-suggestion",class:{ 'gl-filtered-search-suggestion-active': _vm.isActive },attrs:{"role":"presentation"}},[_c('button',{staticClass:"dropdown-item",attrs:{"data-testid":"filtered-search-suggestion","tabindex":"-1","role":"menuitem"},on:{"mousedown":function($event){$event.preventDefault();return _vm.emitValue.apply(null, arguments)}}},[(_vm.iconName)?_c('gl-icon',{staticClass:"gl-dropdown-item-icon gl-fill-icon-default",attrs:{"name":_vm.iconName}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-dropdown-item-text-wrapper"},[_c('p',{staticClass:"gl-dropdown-item-text-primary"},[_vm._t("default")],2)])],1)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/dashboards/dashboard_layout/grid_layout/grid_layout.js

@@ -144,11 +144,11 @@ var script = {
         margin: '8px',
         // CSS Selector for finding the drag handle element
         handle: '.grid-stack-item-handle',
-        /* Magic number 125px:
+        /* Magic number:
          * After allowing for padding, and the panel title row, this leaves us with minimum 48px height for the cell content.
          * This means text/content with our spacing scale can fit up to 49px without scrolling.
          */
-        cellHeight: '125px',
+        cellHeight: '137px',
         // Setting 1 in minRow prevents the grid collapsing when all panels are removed
         minRow: 1,
         // Define the number of columns for anything below a set width, defaults to fill the available space

package/dist/components/dashboards/dashboard_panel/dashboard_panel.js

@@ -21,62 +21,104 @@ var script = {
     GlTruncate
   },
   props: {
+    /**
+     * CSS classes to apply to the panel container.
+     */
     containerClass: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * Additional CSS classes to apply to the `#body` slot container.
+     */
     bodyContentClass: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * Used to set the color of the panel border.
+     */
     borderColorClass: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * The string to render as the panel title.
+     */
     title: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * The name of the icon to render next to the panel title.
+     */
     titleIcon: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * The CSS classes to apply to the title icon.
+     */
     titleIconClass: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * Configuration object for the title popover. Expected structure:
+     *
+     * - `description`: The popover text content with interpolation placeholders.
+     *   Uses `%{linkStart}` and `%{linkEnd}` as markers for where a link should be inserted.
+     *
+     * - `descriptionLink`: The optional URL that will be used for the link portion
+     *   of the description text between the linkStart and linkEnd markers.
+     */
     titlePopover: {
       type: Object,
       required: false,
       default: () => ({})
     },
+    /**
+     * Set to `true` to show the loading state.
+     */
     loading: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * Set to `true` for long-running operations.
+     */
     loadingDelayed: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * The string to render while loading is delayed.
+     */
     loadingDelayedText: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * Array of `GlDisclosureDropdown` items to display in the dropdown.
+     */
     actions: {
       type: Array,
       required: false,
       default: () => [],
       validator: actions => actions.every(a => isObject(a))
     },
+    /**
+     * The toggle text for the `GlDisclosureDropdown` dropdown.
+     */
     actionsToggleText: {
       type: String,
       required: false,
@@ -131,11 +173,11 @@ 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-border gl-h-full !gl-overflow-visible gl-rounded-base gl-bg-white gl-p-4",class:_vm.containerClasses,attrs:{"id":_vm.panelId}},[_c('div',{staticClass:"gl-flex gl-h-full gl-flex-col"},[_c('div',{staticClass:"gl-flex gl-items-start gl-justify-between",attrs:{"data-testid":"panel-title"}},[_c('div',{staticClass:"gl-flex gl-items-center gl-overflow-hidden gl-pb-3"},[(_vm.hasTitleIcon)?_c('gl-icon',{staticClass:"gl-mr-1",class:_vm.titleIconClass,attrs:{"name":_vm.titleIcon,"data-testid":"panel-title-icon"}}):_vm._e(),_vm._v(" "),(_vm.hasTitle)?_c('gl-truncate',{staticClass:"gl-font-bold gl-text-default",attrs:{"text":_vm.title,"with-tooltip":""}}):_vm._e(),_vm._v(" "),(_vm.hasTitlePopover)?[_c('gl-icon',{staticClass:"gl-ml-2",attrs:{"id":_vm.titlePopoverId,"data-testid":"panel-title-popover-icon","name":"information-o","variant":"info"}}),_vm._v(" "),_c('gl-popover',{attrs:{"data-testid":"panel-title-popover","boundary":"viewport","target":_vm.titlePopoverId}},[(_vm.hasTitlePopoverLink)?_c('gl-sprintf',{attrs:{"message":_vm.titlePopover.description},scopedSlots:_vm._u([{key:"link",fn:function(ref){
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-border gl-h-full !gl-overflow-visible gl-rounded-lg gl-bg-white gl-p-5",class:_vm.containerClasses,attrs:{"id":_vm.panelId}},[_c('div',{staticClass:"gl-flex gl-h-full gl-flex-col"},[_c('div',{staticClass:"gl-flex gl-items-start gl-justify-between",attrs:{"data-testid":"panel-title"}},[_c('div',{staticClass:"gl-flex gl-items-center gl-overflow-hidden gl-pb-3"},[(_vm.hasTitleIcon)?_c('gl-icon',{staticClass:"gl-mr-2",class:_vm.titleIconClass,attrs:{"name":_vm.titleIcon,"data-testid":"panel-title-icon"}}):_vm._e(),_vm._v(" "),(_vm.hasTitle)?_c('gl-truncate',{staticClass:"gl-font-bold gl-text-default",attrs:{"text":_vm.title,"with-tooltip":""}}):_vm._e(),_vm._v(" "),(_vm.hasTitlePopover)?[_c('gl-icon',{staticClass:"gl-ml-2",attrs:{"id":_vm.titlePopoverId,"data-testid":"panel-title-popover-icon","name":"information-o","variant":"info"}}),_vm._v(" "),_c('gl-popover',{attrs:{"data-testid":"panel-title-popover","boundary":"viewport","target":_vm.titlePopoverId}},[(_vm.hasTitlePopoverLink)?_c('gl-sprintf',{attrs:{"message":_vm.titlePopover.description},scopedSlots:_vm._u([{key:"link",fn:function(ref){
 var content = ref.content;
-return [_c('gl-link',{staticClass:"gl-text-sm",attrs:{"href":_vm.titlePopover.descriptionLink}},[_vm._v(_vm._s(content))])]}}],null,false,3051540671)}):[_vm._v("\n              "+_vm._s(_vm.titlePopover.description)+"\n            ")]],2)]:_vm._e()],2),_vm._v(" "),(_vm.shouldShowActions || _vm.$scopedSlots.filters)?_c('div',{staticClass:"gl-flex gl-flex-col gl-items-end gl-gap-2",attrs:{"data-testid":"panel-actions-filters-container"}},[(_vm.shouldShowActions)?_c('gl-disclosure-dropdown',{attrs:{"items":_vm.actions,"icon":"ellipsis_v","toggle-text":_vm.actionsToggleText,"text-sr-only":"","no-caret":"","placement":"bottom-end","fluid-width":"","toggle-class":"gl-ml-1","category":"tertiary","positioning-strategy":"fixed"},on:{"shown":function($event){return _vm.$emit('dropdownOpen')},"hidden":function($event){return _vm.$emit('dropdownClosed')}},scopedSlots:_vm._u([{key:"list-item",fn:function(ref){
+return [_c('gl-link',{staticClass:"gl-text-sm",attrs:{"href":_vm.titlePopover.descriptionLink}},[_vm._v(_vm._s(content))])]}}],null,false,3051540671)}):[_vm._v("\n              "+_vm._s(_vm.titlePopover.description)+"\n            ")]],2)]:_vm._e()],2),_vm._v(" "),(_vm.shouldShowActions || _vm.$scopedSlots.filters)?_c('div',{staticClass:"gl-flex gl-flex-col gl-items-end gl-gap-2",attrs:{"data-testid":"panel-actions-filters-container"}},[(_vm.shouldShowActions)?_c('gl-disclosure-dropdown',{attrs:{"items":_vm.actions,"icon":"ellipsis_v","toggle-text":_vm.actionsToggleText,"text-sr-only":"","no-caret":"","placement":"bottom-end","fluid-width":"","toggle-class":"gl-ml-1","category":"tertiary","positioning-strategy":"fixed","size":"small"},on:{"shown":function($event){return _vm.$emit('dropdownOpen')},"hidden":function($event){return _vm.$emit('dropdownClosed')}},scopedSlots:_vm._u([{key:"list-item",fn:function(ref){
 var item = ref.item;
-return [_c('span',[_c('gl-icon',{attrs:{"name":item.icon}}),_vm._v(" "+_vm._s(item.text))],1)]}}],null,false,3632670457)}):_vm._e(),_vm._v(" "),(_vm.$scopedSlots.filters)?_c('div',{staticClass:"gl-flex gl-items-center gl-justify-end gl-pb-2",attrs:{"data-testid":"panel-filters-container"}},[_vm._t("filters")],2):_vm._e()],1):_vm._e()]),_vm._v(" "),_c('div',{class:_vm.bodyClasses},[(_vm.loading)?[_c('gl-loading-icon',{staticClass:"gl-min-h-8 gl-w-full",attrs:{"size":"lg"}}),_vm._v(" "),(_vm.isLoadingDelayed)?_c('div',{staticClass:"gl-w-full gl-text-subtle",attrs:{"data-testId":"panel-loading-delayed-indicator"}},[_vm._v("\n          "+_vm._s(_vm.loadingDelayedText)+"\n        ")]):_vm._e()]:_vm._t("body")],2),_vm._v(" "),_vm._t("alert-message",null,{"panelId":_vm.panelId})],2)])};
+return [_c('span',[_vm._v(_vm._s(item.text))])]}}],null,false,3418607560)}):_vm._e(),_vm._v(" "),(_vm.$scopedSlots.filters)?_c('div',{staticClass:"gl-flex gl-items-center gl-justify-end gl-pb-2",attrs:{"data-testid":"panel-filters-container"}},[_vm._t("filters")],2):_vm._e()],1):_vm._e()]),_vm._v(" "),_c('div',{class:_vm.bodyClasses},[(_vm.loading)?[_c('gl-loading-icon',{staticClass:"gl-min-h-8 gl-w-full",attrs:{"size":"lg"}}),_vm._v(" "),(_vm.isLoadingDelayed)?_c('div',{staticClass:"gl-w-full gl-text-subtle",attrs:{"data-testId":"panel-loading-delayed-indicator"}},[_vm._v("\n          "+_vm._s(_vm.loadingDelayedText)+"\n        ")]):_vm._e()]:_vm._t("body")],2),_vm._v(" "),_vm._t("alert-message",null,{"panelId":_vm.panelId})],2)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/index.js

@@ -8,7 +8,6 @@ export { default as GlNav } from './base/nav/nav';
 export { default as GlNavItem } from './base/nav/nav_item';
 export { default as GlFormCheckboxTree } from './base/form/form_checkbox_tree/form_checkbox_tree';
 export { default as GlMarkdown } from './base/markdown/markdown';
-export { default as GlIntersectionObserver } from './utilities/intersection_observer/intersection_observer';
 export { default as GlDeprecatedLink, default as GlLink } from './base/link/link';
 export { default as GlIcon } from './base/icon/icon';
 export { default as GlAnimatedChevronRightDownIcon } from './base/animated_icon/animated_chevron_right_down_icon';
@@ -99,6 +98,7 @@ export { default as GlDashboardPanel } from './dashboards/dashboard_panel/dashbo
 export { default as GlExperimentBadge } from './experimental/experiment_badge/experiment_badge';
 export { default as GlAnimatedNumber } from './utilities/animated_number/animated_number';
 export { default as GlFriendlyWrap } from './utilities/friendly_wrap/friendly_wrap';
+export { default as GlIntersectionObserver } from './utilities/intersection_observer/intersection_observer';
 export { default as GlIntersperse } from './utilities/intersperse/intersperse';
 export { default as GlSprintf } from './utilities/sprintf/sprintf';
 export { default as GlTruncate } from './utilities/truncate/truncate';