@gitlab/ui 32.38.0 → 32.39.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [32.39.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.38.0...v32.39.0) (2021-11-19)
+
+
+### Features
+
+* **GlFilteredSearch:** Fix typing Colon ([1541d19](https://gitlab.com/gitlab-org/gitlab-ui/commit/1541d191db4acc5aa07385acbd19b2ad5d657a17))
+
 # [32.38.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.37.0...v32.38.0) (2021-11-17)
 
 

package/dist/components/base/carousel/carousel.documentation.js

@@ -1,10 +1,7 @@
-import examples from './examples';
-
-var description = "## Carousel\n\nThe carousel is a slideshow for cycling through a series of content, built with CSS 3D\ntransforms. It works with a series of images, text, or custom markup. It also includes support\nfor previous/next controls and indicators.\n";
+var description = "The carousel is a slideshow for cycling through a series of content, built with CSS 3D\ntransforms. It works with a series of images, text, or custom markup. It also includes support\nfor previous/next controls and indicators.\n";
 
 var carousel_documentation = {
   description,
-  examples,
   bootstrapComponent: 'b-carousel'
 };
 

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

@@ -266,7 +266,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-search-box-by-click',_vm._b({attrs:{"value":_vm.tokens,"history-items":_vm.historyItems,"clearable":_vm.hasValue},on:{"submit":_vm.submit,"input":_vm.applyNewValue,"history-item-selected":function($event){return _vm.$emit('history-item-selected', $event)},"clear":function($event){return _vm.$emit('clear')},"clear-history":function($event){return _vm.$emit('clear-history')}},scopedSlots:_vm._u([{key:"history-item",fn:function(slotScope){return [_vm._t("history-item",null,null,slotScope)]}},{key:"input",fn:function(){return [_c('div',{staticClass:"gl-filtered-search-scrollable"},[_vm._l((_vm.tokens),function(token,idx){return [_c(_vm.getTokenComponent(token.type),{key:((token.type) + "-" + idx),ref:"tokens",refInFor:true,tag:"component",staticClass:"gl-filtered-search-item",class:{
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-search-box-by-click',_vm._b({attrs:{"value":_vm.tokens,"history-items":_vm.historyItems,"clearable":_vm.hasValue,"data-testid":"filtered-search-input"},on:{"submit":_vm.submit,"input":_vm.applyNewValue,"history-item-selected":function($event){return _vm.$emit('history-item-selected', $event)},"clear":function($event){return _vm.$emit('clear')},"clear-history":function($event){return _vm.$emit('clear-history')}},scopedSlots:_vm._u([{key:"history-item",fn:function(slotScope){return [_vm._t("history-item",null,null,slotScope)]}},{key:"input",fn:function(){return [_c('div',{staticClass:"gl-filtered-search-scrollable"},[_vm._l((_vm.tokens),function(token,idx){return [_c(_vm.getTokenComponent(token.type),{key:((token.type) + "-" + idx),ref:"tokens",refInFor:true,tag:"component",staticClass:"gl-filtered-search-item",class:{
             'gl-filtered-search-last-item': _vm.isLastToken(idx),
           },attrs:{"config":_vm.getTokenEntry(token.type),"active":_vm.activeTokenIdx === idx,"available-tokens":_vm.currentAvailableTokens,"current-value":_vm.tokens,"index":idx,"placeholder":_vm.termPlaceholder,"show-friendly-text":_vm.showFriendlyText},on:{"activate":function($event){return _vm.activate(idx)},"deactivate":function($event){return _vm.deactivate(token)},"destroy":function($event){return _vm.destroyToken(idx)},"replace":function($event){return _vm.replaceToken(idx, $event)},"complete":_vm.completeToken,"submit":_vm.submit,"split":function($event){return _vm.createTokens(idx, $event)}},model:{value:(token.value),callback:function ($$v) {_vm.$set(token, "value", $$v);},expression:"token.value"}})]})],2),_vm._v(" "),_c('portal-target',{key:_vm.activeTokenIdx,ref:"menu",style:(_vm.suggestionsStyle),attrs:{"name":_vm.portalName,"slim":""}})]},proxy:true}],null,true)},'gl-search-box-by-click',_vm.$attrs,false))};
 var __vue_staticRenderFns__ = [];

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

@@ -216,6 +216,8 @@ var script = {
 
       const handlers = {
         Enter: () => {
+          e.preventDefault();
+
           if (suggestedValue != null) {
             this.applySuggestion(suggestedValue);
           } else {
@@ -224,10 +226,12 @@ var script = {
         },
         ':': () => {
           if (suggestedValue != null) {
+            e.preventDefault();
             this.applySuggestion(suggestedValue);
           }
         },
         Escape: () => {
+          e.preventDefault();
           this.$emit('complete');
         }
       };
@@ -243,7 +247,6 @@ var script = {
       }
 
       if (Object.keys(handlers).includes(key)) {
-        e.preventDefault();
         handlers[key]();
         return;
       }
@@ -270,7 +273,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-filtered-search-token-segment",class:{ 'gl-filtered-search-token-segment-active': _vm.active },on:{"mousedown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"left",37,$event.key,["Left","ArrowLeft"])){ return null; }if('button' in $event && $event.button !== 0){ return null; }return _vm.emitIfInactive($event)}}},[(_vm.active)?[_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"aria-label":_vm.label},domProps:{"value":(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"input":function($event){if($event.target.composing){ return; }_vm.inputValue=$event.target.value;}}}),_vm._v(" "),_c('portal',{key:("operator-" + _vm._uid),attrs:{"to":_vm.portalName}},[(_vm.hasOptionsOrSuggestions)?_c('gl-filtered-search-suggestion-list',{key:("operator-" + _vm._uid),ref:"suggestions",attrs:{"initial-value":_vm.defaultSuggestedValue},on:{"suggestion":_vm.applySuggestion}},[(_vm.options)?_vm._l((_vm.options),function(option,idx){return _c('gl-filtered-search-suggestion',{key:((option.value) + "-" + idx),attrs:{"value":option.value,"icon-name":option.icon}},[_vm._t("option",[_vm._v("\n              "+_vm._s(option[_vm.optionTextField])+"\n            ")],null,{ option: option })],2)}):_vm._t("suggestions")],2):_vm._e()],1)]:_vm._t("view",[_vm._v(_vm._s(_vm.inputValue))],null,{ inputValue: _vm.inputValue })],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-filtered-search-token-segment",class:{ 'gl-filtered-search-token-segment-active': _vm.active },attrs:{"data-testid":"filtered-search-token-segment"},on:{"mousedown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"left",37,$event.key,["Left","ArrowLeft"])){ return null; }if('button' in $event && $event.button !== 0){ return null; }return _vm.emitIfInactive($event)}}},[(_vm.active)?[_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"aria-label":_vm.label},domProps:{"value":(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"input":function($event){if($event.target.composing){ return; }_vm.inputValue=$event.target.value;}}}),_vm._v(" "),_c('portal',{key:("operator-" + _vm._uid),attrs:{"to":_vm.portalName}},[(_vm.hasOptionsOrSuggestions)?_c('gl-filtered-search-suggestion-list',{key:("operator-" + _vm._uid),ref:"suggestions",attrs:{"initial-value":_vm.defaultSuggestedValue},on:{"suggestion":_vm.applySuggestion}},[(_vm.options)?_vm._l((_vm.options),function(option,idx){return _c('gl-filtered-search-suggestion',{key:((option.value) + "-" + idx),attrs:{"value":option.value,"icon-name":option.icon}},[_vm._t("option",[_vm._v("\n              "+_vm._s(option[_vm.optionTextField])+"\n            ")],null,{ option: option })],2)}):_vm._t("suggestions")],2):_vm._e()],1)]:_vm._t("view",[_vm._v(_vm._s(_vm.inputValue))],null,{ inputValue: _vm.inputValue })],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/search_box_by_click/search_box_by_click.js

@@ -158,7 +158,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-form-input-group',{staticClass:"gl-search-box-by-click",scopedSlots:_vm._u([(_vm.historyItems)?{key:"prepend",fn:function(){return [_c('gl-dropdown',{ref:"historyDropdown",staticClass:"gl-search-box-by-click-history",attrs:{"menu-class":"gl-search-box-by-click-menu","category":"secondary","disabled":_vm.disabled},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_c('gl-icon',{staticClass:"gl-search-box-by-click-history-icon",attrs:{"name":"history"}}),_vm._v(" "),_c('gl-icon',{staticClass:"gl-search-box-by-click-history-icon-chevron",attrs:{"name":"chevron-down"}}),_vm._v(" "),_c('span',{staticClass:"gl-sr-only"},[_vm._v("Toggle history")])]},proxy:true}],null,false,2220989388)},[_vm._v(" "),_c('gl-dropdown-text',{staticClass:"gl-search-box-by-click-history-header"},[_vm._v("\n        "+_vm._s(_vm.recentSearchesHeader)+"\n        "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.hover",value:({ container: _vm.tooltipContainer }),expression:"{ container: tooltipContainer }",modifiers:{"hover":true}}],ref:"closeHistory",staticClass:"gl-search-box-by-click-close-history-button",attrs:{"title":_vm.closeButtonTitle,"aria-label":_vm.closeButtonTitle,"category":"tertiary","name":"close","icon":"close"},on:{"click":_vm.closeHistoryDropdown}})],1),_vm._v(" "),_c('gl-dropdown-divider'),_vm._v(" "),(_vm.historyItems.length)?[_vm._l((_vm.historyItems),function(item,idx){return _c('gl-dropdown-item',{key:idx,staticClass:"gl-search-box-by-click-history-item",on:{"click":function($event){return _vm.selectHistoryItem(item)}}},[_vm._t("history-item",[_vm._v(_vm._s(item))],{"historyItem":item})],2)}),_vm._v(" "),_c('gl-dropdown-divider'),_vm._v(" "),_c('gl-dropdown-item',{ref:"clearHistory",on:{"click":function($event){return _vm.$emit('clear-history')}}},[_vm._v(_vm._s(_vm.clearRecentSearchesText))])]:_c('gl-dropdown-text',{staticClass:"gl-search-box-by-click-history-no-searches"},[_vm._v(_vm._s(_vm.noRecentSearchesText))])],2)]},proxy:true}:null,{key:"append",fn:function(){return [_c('gl-button',{ref:"searchButton",staticClass:"gl-search-box-by-click-search-button",attrs:{"icon":"search","disabled":_vm.disabled,"aria-label":"Search"},on:{"click":function($event){return _vm.search(_vm.currentValue)}}})]},proxy:true}],null,true)},[_vm._v(" "),_vm._t("input",[_c('gl-form-input',_vm._b({ref:"input",staticClass:"gl-search-box-by-click-input",attrs:{"disabled":_vm.disabled},on:{"focus":function($event){_vm.isFocused = true;},"blur":function($event){_vm.isFocused = false;},"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.search(_vm.currentValue)}},model:{value:(_vm.currentValue),callback:function ($$v) {_vm.currentValue=$$v;},expression:"currentValue"}},'gl-form-input',_vm.inputAttributes,false))]),_vm._v(" "),(_vm.clearable && _vm.hasValue && !_vm.disabled)?_c('gl-clear-icon-button',{staticClass:"gl-search-box-by-click-icon-button gl-search-box-by-click-clear-button gl-clear-icon-button",attrs:{"title":_vm.clearButtonTitle,"tooltip-container":_vm.tooltipContainer},on:{"click":_vm.clearInput}}):_vm._e()],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-input-group',{staticClass:"gl-search-box-by-click",scopedSlots:_vm._u([(_vm.historyItems)?{key:"prepend",fn:function(){return [_c('gl-dropdown',{ref:"historyDropdown",staticClass:"gl-search-box-by-click-history",attrs:{"menu-class":"gl-search-box-by-click-menu","category":"secondary","disabled":_vm.disabled},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_c('gl-icon',{staticClass:"gl-search-box-by-click-history-icon",attrs:{"name":"history"}}),_vm._v(" "),_c('gl-icon',{staticClass:"gl-search-box-by-click-history-icon-chevron",attrs:{"name":"chevron-down"}}),_vm._v(" "),_c('span',{staticClass:"gl-sr-only"},[_vm._v("Toggle history")])]},proxy:true}],null,false,2220989388)},[_vm._v(" "),_c('gl-dropdown-text',{staticClass:"gl-search-box-by-click-history-header"},[_vm._v("\n        "+_vm._s(_vm.recentSearchesHeader)+"\n        "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.hover",value:({ container: _vm.tooltipContainer }),expression:"{ container: tooltipContainer }",modifiers:{"hover":true}}],ref:"closeHistory",staticClass:"gl-search-box-by-click-close-history-button",attrs:{"title":_vm.closeButtonTitle,"aria-label":_vm.closeButtonTitle,"category":"tertiary","name":"close","icon":"close"},on:{"click":_vm.closeHistoryDropdown}})],1),_vm._v(" "),_c('gl-dropdown-divider'),_vm._v(" "),(_vm.historyItems.length)?[_vm._l((_vm.historyItems),function(item,idx){return _c('gl-dropdown-item',{key:idx,staticClass:"gl-search-box-by-click-history-item",on:{"click":function($event){return _vm.selectHistoryItem(item)}}},[_vm._t("history-item",[_vm._v(_vm._s(item))],{"historyItem":item})],2)}),_vm._v(" "),_c('gl-dropdown-divider'),_vm._v(" "),_c('gl-dropdown-item',{ref:"clearHistory",on:{"click":function($event){return _vm.$emit('clear-history')}}},[_vm._v(_vm._s(_vm.clearRecentSearchesText))])]:_c('gl-dropdown-text',{staticClass:"gl-search-box-by-click-history-no-searches"},[_vm._v(_vm._s(_vm.noRecentSearchesText))])],2)]},proxy:true}:null,{key:"append",fn:function(){return [_c('gl-button',{ref:"searchButton",staticClass:"gl-search-box-by-click-search-button",attrs:{"icon":"search","disabled":_vm.disabled,"aria-label":"Search"},on:{"click":function($event){return _vm.search(_vm.currentValue)}}})]},proxy:true}],null,true)},[_vm._v(" "),_vm._t("input",[_c('gl-form-input',_vm._b({ref:"input",staticClass:"gl-search-box-by-click-input",attrs:{"disabled":_vm.disabled},on:{"focus":function($event){_vm.isFocused = true;},"blur":function($event){_vm.isFocused = false;},"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.search(_vm.currentValue)}},model:{value:(_vm.currentValue),callback:function ($$v) {_vm.currentValue=$$v;},expression:"currentValue"}},'gl-form-input',_vm.inputAttributes,false))]),_vm._v(" "),(_vm.clearable && _vm.hasValue && !_vm.disabled)?_c('gl-clear-icon-button',{staticClass:"gl-search-box-by-click-icon-button gl-search-box-by-click-clear-button gl-clear-icon-button",attrs:{"title":_vm.clearButtonTitle,"tooltip-container":_vm.tooltipContainer,"data-testid":"filtered-search-clear-button"},on:{"click":_vm.clearInput}}):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/charts/bar/bar.js

@@ -237,7 +237,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:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"show":_vm.showTooltip,"chart":_vm.chart,"top":_vm.tooltipPosition.top,"left":_vm.tooltipPosition.left}},[_c('div',{attrs:{"slot":"title"},slot:"title"},[_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.yAxisTitle)+")")]),_vm._v(" "),_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})],1):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"show":_vm.showTooltip,"chart":_vm.chart,"top":_vm.tooltipPosition.top,"left":_vm.tooltipPosition.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.yAxisTitle)+")")])]},proxy:true}],null,false,1644826356)},[_vm._v(" "),_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})],1):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/charts/sparkline/sparkline.js

@@ -192,7 +192,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',{directives:[{name:"resize-observer",rawName:"v-resize-observer",value:(_vm.handleResize),expression:"handleResize"}],staticClass:"d-flex align-items-center",on:{"mouseleave":_vm.hideTooltip}},[_vm._t("default"),_vm._v(" "),_c('div',{staticClass:"flex-grow-1 position-relative"},[_c('chart',{attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onChartCreated}}),_vm._v(" "),(_vm.chartInstance)?_c('chart-tooltip',{style:({ pointerEvents: 'none' }),attrs:{"show":_vm.tooltip.show,"chart":_vm.chartInstance,"top":_vm.tooltip.position.top,"left":_vm.tooltip.position.left,"placement":"top"}},[_c('div',{staticClass:"js-tooltip-title text-nowrap",attrs:{"slot":"title"},slot:"title"},[_vm._v(_vm._s(_vm.tooltip.title))]),_vm._v(" "),_c('div',{staticClass:"js-tooltip-content d-flex",attrs:{"slot":"default"},slot:"default"},[(_vm.tooltipLabel)?_c('span',{staticClass:"pr-4 mr-auto"},[_vm._v(_vm._s(_vm.tooltipLabel))]):_vm._e(),_vm._v(" "),_c('strong',[_vm._v(_vm._s(_vm.tooltip.content))])])]):_vm._e()],1),_vm._v(" "),(_vm.showLastYValue)?_c('span',{staticClass:"js-last-y-value d-inline-flex justify-content-center ml-3"},[_vm._v(_vm._s(_vm.lastYValue))]):_vm._e()],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"resize-observer",rawName:"v-resize-observer",value:(_vm.handleResize),expression:"handleResize"}],staticClass:"gl-display-flex gl-align-items-center",on:{"mouseleave":_vm.hideTooltip}},[_vm._t("default"),_vm._v(" "),_c('div',{staticClass:"gl-flex-grow-1 gl-relative"},[_c('chart',{attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onChartCreated}}),_vm._v(" "),(_vm.chartInstance)?_c('chart-tooltip',{style:({ pointerEvents: 'none' }),attrs:{"show":_vm.tooltip.show,"chart":_vm.chartInstance,"top":_vm.tooltip.position.top,"left":_vm.tooltip.position.left,"placement":"top"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',{staticClass:"gl-white-space-nowrap",attrs:{"data-testid":"tooltip-title"}},[_vm._v("\n          "+_vm._s(_vm.tooltip.title)+"\n        ")])]},proxy:true},{key:"default",fn:function(){return [_c('div',{staticClass:"gl-display-flex",attrs:{"data-testid":"tooltip-content"}},[(_vm.tooltipLabel)?_c('span',{staticClass:"gl-pr-6 gl-mr-auto"},[_vm._v(_vm._s(_vm.tooltipLabel))]):_vm._e(),_vm._v(" "),_c('strong',[_vm._v(_vm._s(_vm.tooltip.content))])])]},proxy:true}],null,false,2830367259)}):_vm._e()],1),_vm._v(" "),(_vm.showLastYValue)?_c('span',{staticClass:"gl-display-inline-flex gl-justify-content-center gl-ml-5",attrs:{"data-testid":"last-y-value"}},[_vm._v("\n    "+_vm._s(_vm.lastYValue)+"\n  ")]):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/charts/stacked_column/stacked_column.js

@@ -322,7 +322,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:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"show":_vm.showTooltip,"chart":_vm.chart,"top":_vm.tooltipPosition.top,"left":_vm.tooltipPosition.left}},[(_vm.formatTooltipText)?[_vm._t("tooltip-title",null,{"slot":"title"}),_vm._v(" "),_vm._t("tooltip-content")]:[_c('div',{attrs:{"slot":"title"},slot:"title"},[_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.xAxisTitle)+")")]),_vm._v(" "),_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})]],2):_vm._e(),_vm._v(" "),(_vm.compiledOptions)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"min-text":_vm.legendMinText,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText,"current-text":_vm.legendCurrentText,"layout":_vm.legendLayout}}):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"show":_vm.showTooltip,"chart":_vm.chart,"top":_vm.tooltipPosition.top,"left":_vm.tooltipPosition.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [_vm._t("tooltip-title",[_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.xAxisTitle)+")")])]},proxy:true}],null,true)},[_vm._v(" "),_vm._t("tooltip-content",[_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})])],2):_vm._e(),_vm._v(" "),(_vm.compiledOptions)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"min-text":_vm.legendMinText,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText,"current-text":_vm.legendCurrentText,"layout":_vm.legendLayout}}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/documentation/documented_stories.js

@@ -90,6 +90,7 @@ export const setupStorybookReadme = () =>
         'GlAccordionItem',
         'GlDaterangePicker',
         'GlBarChart',
+        'GlCarousel',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.38.0",
+  "version": "32.39.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/carousel/carousel.documentation.js

@@ -1,8 +1,6 @@
 import description from './carousel.md';
-import examples from './examples';
 
 export default {
   description,
-  examples,
   bootstrapComponent: 'b-carousel',
 };

package/src/components/base/carousel/carousel.md

@@ -1,5 +1,3 @@
-## Carousel
-
 The carousel is a slideshow for cycling through a series of content, built with CSS 3D
 transforms. It works with a series of images, text, or custom markup. It also includes support
 for previous/next controls and indicators.

package/src/components/base/carousel/carousel.stories.js

@@ -1,16 +1,8 @@
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import readme from './carousel.md';
 import GlCarousel from './carousel.vue';
 import GlCarouselSlide from './carousel_slide.vue';
 
-const components = {
-  GlCarousel,
-  GlCarouselSlide,
-};
-
-documentedStoriesOf('base/carousel', readme).add('default carousel', () => ({
-  components,
-  template: `
+const template = `
     <gl-carousel
       :interval="0"
       controls
@@ -34,5 +26,26 @@ documentedStoriesOf('base/carousel', readme).add('default carousel', () => ({
 
       <!-- Slides with image only -->
       <gl-carousel-slide img-src="./img/carousel_slide3.jpg"/>
-    </gl-carousel>`,
-}));
+    </gl-carousel> 
+  `;
+
+const Template = () => ({
+  components: { GlCarousel, GlCarouselSlide },
+  template,
+});
+
+export const Default = Template.bind({});
+
+export default {
+  title: 'base/carousel',
+  component: GlCarousel,
+  parameters: {
+    bootstrapComponent: 'b-carousel',
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

package/src/components/base/filtered_search/filtered_search.vue

@@ -253,6 +253,7 @@ export default {
     :value="tokens"
     :history-items="historyItems"
     :clearable="hasValue"
+    data-testid="filtered-search-input"
     @submit="submit"
     @input="applyNewValue"
     @history-item-selected="$emit('history-item-selected', $event)"

package/src/components/base/filtered_search/filtered_search_token_segment.vue

@@ -189,6 +189,7 @@ export default {
 
       const handlers = {
         Enter: () => {
+          e.preventDefault();
           if (suggestedValue != null) {
             this.applySuggestion(suggestedValue);
           } else {
@@ -197,10 +198,12 @@ export default {
         },
         ':': () => {
           if (suggestedValue != null) {
+            e.preventDefault();
             this.applySuggestion(suggestedValue);
           }
         },
         Escape: () => {
+          e.preventDefault();
           this.$emit('complete');
         },
       };
@@ -217,7 +220,6 @@ export default {
       }
 
       if (Object.keys(handlers).includes(key)) {
-        e.preventDefault();
         handlers[key]();
         return;
       }
@@ -244,6 +246,7 @@ export default {
   <div
     class="gl-filtered-search-token-segment"
     :class="{ 'gl-filtered-search-token-segment-active': active }"
+    data-testid="filtered-search-token-segment"
     @mousedown.left="emitIfInactive"
   >
     <template v-if="active">

package/src/components/base/search_box_by_click/search_box_by_click.vue

@@ -210,6 +210,7 @@ export default {
       :title="clearButtonTitle"
       :tooltip-container="tooltipContainer"
       class="gl-search-box-by-click-icon-button gl-search-box-by-click-clear-button gl-clear-icon-button"
+      data-testid="filtered-search-clear-button"
       @click="clearInput"
     />
     <template #append class="gl-search-box-by-click-input-group-control">

package/src/components/charts/bar/bar.spec.js

@@ -1,7 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import Chart from '../chart/chart.vue';
 import BarChart from './bar.vue';
-import ChartTooltip from '~/components/charts/tooltip/tooltip.vue';
 import TooltipDefaultFormat from '~/components/shared_components/charts/tooltip_default_format.vue';
 
 const mockChartInstance = {
@@ -34,7 +33,6 @@ describe('Bar chart component', () => {
   let wrapper;
 
   const findChart = () => wrapper.findComponent(Chart);
-  const findChartTooltip = () => wrapper.findComponent(ChartTooltip);
   const getOptions = () => findChart().props('options');
   const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
 
@@ -123,19 +121,6 @@ describe('Bar chart component', () => {
           );
         });
       });
-
-      it('render accurate tooltip title and content', () => {
-        const expectedTooltipTitle = `${labelParams.value} (${defaultChartProps.yAxisTitle})`;
-
-        getOptions().yAxis.axisPointer.label.formatter(labelParams);
-        return wrapper.vm.$nextTick(() => {
-          const tooltipTextContent = findChartTooltip().element.textContent;
-
-          expect(tooltipTextContent).toContain(expectedTooltipTitle);
-          expect(tooltipTextContent).toContain(defaultChartProps.xAxisTitle);
-          expect(tooltipTextContent).toContain(labelParams.seriesData[0].data[0]);
-        });
-      });
     });
   });
 });

package/src/components/charts/bar/bar.vue

@@ -238,8 +238,9 @@ export default {
       :top="tooltipPosition.top"
       :left="tooltipPosition.left"
     >
-      <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-      <div slot="title">{{ tooltipTitle }} ({{ yAxisTitle }})</div>
+      <template #title>
+        <div>{{ tooltipTitle }} ({{ yAxisTitle }})</div>
+      </template>
       <tooltip-default-format :tooltip-content="tooltipContent" />
     </chart-tooltip>
   </div>

package/src/components/charts/sparkline/sparkline.spec.js

@@ -1,6 +1,5 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Chart from '../chart/chart.vue';
-import ChartTooltip from '../tooltip/tooltip.vue';
 import SparklineChart from './sparkline.vue';
 import { waitForAnimationFrame } from '~/utils/test_utils';
 
@@ -12,18 +11,6 @@ const mockChartInstance = {
   resize: mockResize,
 };
 
-// echarts need to be mocked to prevent prop-validation in chart-tooltips to fail
-jest.mock('echarts', () => ({
-  getInstanceByDom: () => mockChartInstance,
-}));
-
-jest.mock('~/utils/charts/theme', () => ({
-  sparkline: {
-    variants: { foo: 'foo', bar: 'bar' },
-    defaultVariant: 'foo',
-  },
-}));
-
 let triggerResize = () => {};
 jest.mock('~/directives/resize_observer/resize_observer', () => ({
   GlResizeObserverDirective: {
@@ -35,6 +22,11 @@ jest.mock('~/directives/resize_observer/resize_observer', () => ({
 
 const localVue = createLocalVue();
 
+const ChartToolTipStub = {
+  name: 'chart-tooltip-stub',
+  template: '<div><slot name="default"></slot><slot name="title"></slot></div>',
+};
+
 describe('sparkline chart component', () => {
   let wrapper;
   let componentOptions;
@@ -46,19 +38,23 @@ describe('sparkline chart component', () => {
         variant: null,
       },
       scopedSlots: { latestSeriesEntry: jest.fn() },
+      stubs: {
+        'chart-tooltip': ChartToolTipStub,
+      },
     };
 
     wrapper = shallowMount(SparklineChart, componentOptions);
   };
 
   // helpers
+  const getByTestId = (id) => wrapper.find(`[data-testid="${id}"]`);
   const getChart = () => wrapper.findComponent(Chart);
 
-  const getTooltip = () => wrapper.findComponent(ChartTooltip);
-  const getTooltipTitle = () => getTooltip().find('.js-tooltip-title');
-  const getTooltipContent = () => getTooltip().find('.js-tooltip-content');
+  const getTooltip = () => wrapper.findComponent(ChartToolTipStub);
+  const getTooltipTitle = () => getByTestId('tooltip-title');
+  const getTooltipContent = () => getByTestId('tooltip-content');
 
-  const getLastYValue = () => wrapper.find('.js-last-y-value');
+  const getLastYValue = () => getByTestId('last-y-value');
 
   const getChartOptions = () => getChart().props('options');
   const getXAxisLabelFormatter = () => {
@@ -87,7 +83,7 @@ describe('sparkline chart component', () => {
   });
 
   it('emits `chartCreated`, which passes on the chart instance', () => {
-    expect(wrapper.emitted('chartCreated').length).toBe(1);
+    expect(wrapper.emitted('chartCreated')).toHaveLength(1);
     expect(wrapper.emitted('chartCreated')[0][0]).toBe(mockChartInstance);
   });
 
@@ -153,7 +149,7 @@ describe('sparkline chart component', () => {
     expect(getTooltip().attributes('show')).toBeFalsy();
   });
 
-  it('adds the right content to the tooltip', () => {
+  it('adds the right content to the tooltip', async () => {
     const xValue = 'foo';
     const yValue = 'bar';
     const mockData = { seriesData: [{ data: [xValue, yValue] }] };
@@ -163,10 +159,9 @@ describe('sparkline chart component', () => {
     expect(getTooltipTitle().text()).toBe('');
     expect(getTooltipContent().text()).toBe('');
 
-    return waitForAnimationFrame().then(() => {
-      expect(getTooltipTitle().text()).toBe(xValue);
-      expect(getTooltipContent().text()).toBe(yValue);
-    });
+    await waitForAnimationFrame();
+    expect(getTooltipTitle().text()).toBe(xValue);
+    expect(getTooltipContent().text()).toBe(yValue);
   });
 
   it(`shows the last entry's y-value per default`, async () => {
@@ -182,13 +177,12 @@ describe('sparkline chart component', () => {
     expect(getLastYValue().text()).toBe(latestEntryYValue);
   });
 
-  it(`does not show the last entry's y-value if 'showLastYValue' is false`, () => {
+  it(`does not show the last entry's y-value if 'showLastYValue' is false`, async () => {
     expect(getLastYValue().exists()).toBe(true);
 
     wrapper.setProps({ showLastYValue: false });
 
-    return wrapper.vm.$nextTick().then(() => {
-      expect(getLastYValue().exists()).toBe(false);
-    });
+    await wrapper.vm.$nextTick();
+    expect(getLastYValue().exists()).toBe(false);
   });
 });

package/src/components/charts/sparkline/sparkline.vue

@@ -174,9 +174,13 @@ export default {
 </script>
 
 <template>
-  <div v-resize-observer="handleResize" class="d-flex align-items-center" @mouseleave="hideTooltip">
+  <div
+    v-resize-observer="handleResize"
+    class="gl-display-flex gl-align-items-center"
+    @mouseleave="hideTooltip"
+  >
     <slot name="default"></slot>
-    <div class="flex-grow-1 position-relative">
+    <div class="gl-flex-grow-1 gl-relative">
       <chart :height="height" :options="options" @created="onChartCreated" />
       <chart-tooltip
         v-if="chartInstance"
@@ -187,17 +191,25 @@ export default {
         :style="{ pointerEvents: 'none' }"
         placement="top"
       >
-        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-        <div slot="title" class="js-tooltip-title text-nowrap">{{ tooltip.title }}</div>
-        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-        <div slot="default" class="js-tooltip-content d-flex">
-          <span v-if="tooltipLabel" class="pr-4 mr-auto">{{ tooltipLabel }}</span>
-          <strong>{{ tooltip.content }}</strong>
-        </div>
+        <template #title>
+          <div data-testid="tooltip-title" class="gl-white-space-nowrap">
+            {{ tooltip.title }}
+          </div>
+        </template>
+        <template #default>
+          <div class="gl-display-flex" data-testid="tooltip-content">
+            <span v-if="tooltipLabel" class="gl-pr-6 gl-mr-auto">{{ tooltipLabel }}</span>
+            <strong>{{ tooltip.content }}</strong>
+          </div>
+        </template>
       </chart-tooltip>
     </div>
-    <span v-if="showLastYValue" class="js-last-y-value d-inline-flex justify-content-center ml-3">{{
-      lastYValue
-    }}</span>
+    <span
+      v-if="showLastYValue"
+      class="gl-display-inline-flex gl-justify-content-center gl-ml-5"
+      data-testid="last-y-value"
+    >
+      {{ lastYValue }}
+    </span>
   </div>
 </template>

package/src/components/charts/stacked_column/stacked_column.spec.js

@@ -29,6 +29,15 @@ const defaultChartProps = {
   yAxisTitle: 'Commits',
 };
 
+const ChartTooltipStub = {
+  props: ChartTooltip.props,
+  template: `
+     <div>
+       <slot name="title" />
+       <slot />
+     </div>`,
+};
+
 describe('stacked column chart component', () => {
   let wrapper;
   let options;
@@ -36,7 +45,7 @@ describe('stacked column chart component', () => {
   const findChart = () => wrapper.findComponent(Chart);
   const findLegend = () => wrapper.findComponent(ChartLegend);
   const getOptions = () => findChart().props('options');
-  const findDataTooltip = () => wrapper.findComponent(ChartTooltip);
+  const findDataTooltip = () => wrapper.findComponent(ChartTooltipStub);
 
   const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
 
@@ -45,6 +54,7 @@ describe('stacked column chart component', () => {
       propsData: { ...defaultChartProps, ...props },
       stubs: {
         'tooltip-default-format': TooltipDefaultFormat,
+        ChartTooltip: ChartTooltipStub,
       },
       slots,
     });

package/src/components/charts/stacked_column/stacked_column.vue

@@ -308,16 +308,13 @@ export default {
       :top="tooltipPosition.top"
       :left="tooltipPosition.left"
     >
-      <template v-if="formatTooltipText">
-        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-        <slot slot="title" name="tooltip-title"></slot>
-        <slot name="tooltip-content"></slot>
+      <template #title>
+        <slot name="tooltip-title">{{ tooltipTitle }} ({{ xAxisTitle }})</slot>
       </template>
-      <template v-else>
-        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-        <div slot="title">{{ tooltipTitle }} ({{ xAxisTitle }})</div>
+
+      <slot name="tooltip-content">
         <tooltip-default-format :tooltip-content="tooltipContent" />
-      </template>
+      </slot>
     </chart-tooltip>
     <chart-legend
       v-if="compiledOptions"

package/dist/components/base/carousel/examples/carousel.basic.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-carousel',{staticStyle:{"text-shadow":"1px 1px 2px #333"},attrs:{"interval":4000,"controls":"","indicators":"","background":"#ababab","img-width":"1024","img-height":"480"}},[_c('gl-carousel-slide',{attrs:{"caption":"First slide","text":"Nulla vitae elit libero, a pharetra augue mollis interdum.","img-src":"https://picsum.photos/1024/480/?image=52"}}),_vm._v(" "),_c('gl-carousel-slide',{attrs:{"img-src":"https://picsum.photos/1024/480/?image=54"}},[_c('h1',[_vm._v("Hello world!")])]),_vm._v(" "),_c('gl-carousel-slide',{attrs:{"img-src":"https://picsum.photos/1024/480/?image=58"}})],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* 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__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/carousel/examples/index.js

@@ -1,13 +0,0 @@
-import CarouselBasicExample from './carousel.basic.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'carousel-basic',
-    name: 'Basic',
-    description: 'Basic Carousel',
-    component: CarouselBasicExample
-  }]
-}];
-
-export default index;

package/src/components/base/carousel/examples/carousel.basic.example.vue

@@ -1,26 +0,0 @@
-<template>
-  <gl-carousel
-    :interval="4000"
-    controls
-    indicators
-    background="#ababab"
-    img-width="1024"
-    img-height="480"
-    style="text-shadow: 1px 1px 2px #333"
-  >
-    <!-- Text slides with image -->
-    <gl-carousel-slide
-      caption="First slide"
-      text="Nulla vitae elit libero, a pharetra augue mollis interdum."
-      img-src="https://picsum.photos/1024/480/?image=52"
-    />
-
-    <!-- Slides with custom text -->
-    <gl-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
-      <h1>Hello world!</h1>
-    </gl-carousel-slide>
-
-    <!-- Slides with image only -->
-    <gl-carousel-slide img-src="https://picsum.photos/1024/480/?image=58" />
-  </gl-carousel>
-</template>

package/src/components/base/carousel/examples/index.js

@@ -1,15 +0,0 @@
-import CarouselBasicExample from './carousel.basic.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'carousel-basic',
-        name: 'Basic',
-        description: 'Basic Carousel',
-        component: CarouselBasicExample,
-      },
-    ],
-  },
-];