@gitlab/ui 114.8.1 → 115.0.1

package/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js

@@ -1,8 +1,8 @@
 import uniqueId from 'lodash/uniqueId';
 import { offset, autoPlacement, shift, arrow, size, autoUpdate, computePosition } from '@floating-ui/dom';
 import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropdownPlacements, dropdownAllowedAutoPlacements } from '../../../../utils/constants';
-import { POSITION_ABSOLUTE, POSITION_FIXED, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, ENTER, SPACE, ARROW_DOWN, GL_DROPDOWN_FOCUS_CONTENT } from '../constants';
-import { logWarning, isElementFocusable, isElementTabbable } from '../../../../utils/utils';
+import { POSITION_ABSOLUTE, POSITION_FIXED, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, KEY_CODE_ESCAPE, ENTER, SPACE, ARROW_DOWN, GL_DROPDOWN_FOCUS_CONTENT } from '../constants';
+import { logWarning, isElementFocusable, isElementTabbable, stopEvent } from '../../../../utils/utils';
 import { OutsideDirective } from '../../../../directives/outside/outside';
 import GlButton from '../../button/button';
 import GlIcon from '../../icon/icon';
@@ -461,11 +461,23 @@ var script = {
     },
     onKeydown(event) {
       const {
+        keyCode,
         code,
         target: {
           tagName
         }
       } = event;
+
+      // Use keyCode because @vue/test-utils doesn't correctly set the
+      // `code` and `key` KeyboardEvent properties. This is only needed in this case because:
+      //  - We are not using the @keydown.esc template syntax, which under Vue 2 checks against `keyCode` anyway.
+      //  - The `.trigger('keydown.esc')` shorthand @vue/test-utils provides is useful.
+      // See https://github.com/vuejs/vue-test-utils/issues/2096
+      if (keyCode === KEY_CODE_ESCAPE && this.visible) {
+        stopEvent(event);
+        this.close();
+        return;
+      }
       let toggleOnEnter = true;
       let toggleOnSpace = true;
       if (tagName === 'BUTTON') {
@@ -496,7 +508,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:"outside",rawName:"v-outside.click.focusin",value:(_vm.close),expression:"close",modifiers:{"click":true,"focusin":true}}],class:[_vm.$options.BASE_DROPDOWN_CLASS, { '!gl-block': _vm.block }]},[_c(_vm.toggleComponent,_vm._g(_vm._b({ref:"toggle",tag:"component",attrs:{"id":_vm.toggleId,"data-testid":"base-dropdown-toggle"},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.close.apply(null, arguments)}}},'component',_vm.toggleAttributes,false),_vm.toggleListeners),[_vm._t("toggle",function(){return [_c('span',{staticClass:"gl-new-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._v("\n        "+_vm._s(_vm.toggleText)+"\n      ")]),_vm._v(" "),(!_vm.noCaret)?_c('gl-icon',{staticClass:"gl-button-icon gl-new-dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()]})],2),_vm._v(" "),_c('div',{ref:"content",staticClass:"gl-new-dropdown-panel",class:_vm.panelClasses,attrs:{"id":_vm.baseDropdownId,"data-testid":"base-dropdown-menu"},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.closeAndFocus.apply(null, arguments)}}},[_c('div',{ref:"dropdownArrow",staticClass:"gl-new-dropdown-arrow"}),_vm._v(" "),_c('div',{staticClass:"gl-new-dropdown-inner"},[_vm._t("default",null,{"visible":_vm.visible})],2)])],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"outside",rawName:"v-outside.click.focusin",value:(_vm.close),expression:"close",modifiers:{"click":true,"focusin":true}}],class:[_vm.$options.BASE_DROPDOWN_CLASS, { '!gl-block': _vm.block }]},[_c(_vm.toggleComponent,_vm._g(_vm._b({ref:"toggle",tag:"component",attrs:{"id":_vm.toggleId,"data-testid":"base-dropdown-toggle"}},'component',_vm.toggleAttributes,false),_vm.toggleListeners),[_vm._t("toggle",function(){return [_c('span',{staticClass:"gl-new-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._v("\n        "+_vm._s(_vm.toggleText)+"\n      ")]),_vm._v(" "),(!_vm.noCaret)?_c('gl-icon',{staticClass:"gl-button-icon gl-new-dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()]})],2),_vm._v(" "),_c('div',{ref:"content",staticClass:"gl-new-dropdown-panel",class:_vm.panelClasses,attrs:{"id":_vm.baseDropdownId,"data-testid":"base-dropdown-menu"},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.closeAndFocus.apply(null, arguments)}}},[_c('div',{ref:"dropdownArrow",staticClass:"gl-new-dropdown-arrow"}),_vm._v(" "),_c('div',{staticClass:"gl-new-dropdown-inner"},[_vm._t("default",null,{"visible":_vm.visible})],2)])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/new_dropdowns/constants.js

@@ -4,7 +4,7 @@ const GL_DROPDOWN_HIDDEN = 'hidden';
 const GL_DROPDOWN_BEFORE_CLOSE = 'beforeClose';
 const GL_DROPDOWN_FOCUS_CONTENT = 'focusContent';
 
-// KEY Codes
+// KeyboardEvent.code values
 const ARROW_DOWN = 'ArrowDown';
 const ARROW_UP = 'ArrowUp';
 const END = 'End';
@@ -12,10 +12,13 @@ const ENTER = 'Enter';
 const HOME = 'Home';
 const SPACE = 'Space';
 
+// KeyboardEvent.keyCode values
+const KEY_CODE_ESCAPE = 27;
+
 // Positioning strategies
 // https://floating-ui.com/docs/computePosition#strategy
 const POSITION_ABSOLUTE = 'absolute';
 const POSITION_FIXED = 'fixed';
 const GL_DROPDOWN_CONTENTS_CLASS = 'gl-new-dropdown-contents';
 
-export { ARROW_DOWN, ARROW_UP, END, ENTER, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_FOCUS_CONTENT, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_SHOWN, HOME, POSITION_ABSOLUTE, POSITION_FIXED, SPACE };
+export { ARROW_DOWN, ARROW_UP, END, ENTER, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_FOCUS_CONTENT, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_SHOWN, HOME, KEY_CODE_ESCAPE, POSITION_ABSOLUTE, POSITION_FIXED, SPACE };

package/dist/components/base/tabs/tabs/scrollable_tabs.js

@@ -1,6 +1,7 @@
 import debounce from 'lodash/debounce';
 import { GlResizeObserverDirective } from '../../../../directives/resize_observer/resize_observer';
 import GlIcon from '../../icon/icon';
+import { translate } from '../../../../utils/i18n';
 import GlTabs from './tabs';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -15,6 +16,24 @@ var script = {
     GlResizeObserverDirective
   },
   inheritAttrs: false,
+  props: {
+    /**
+     * The aria-label that will be rendered inside for the scroll to left button.
+     */
+    scrollLeftLabel: {
+      type: String,
+      required: false,
+      default: translate('GlTabs.GlScrollableTabs.scrollLeftLabel', 'Scroll left')
+    },
+    /**
+     * The aria-label that will be rendered inside for the scroll to right button.
+     */
+    scrollRightLabel: {
+      type: String,
+      required: false,
+      default: translate('GlTabs.GlScrollableTabs.scrollRightLabel', 'Scroll right')
+    }
+  },
   data() {
     return {
       width: 0,
@@ -108,7 +127,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-tabs',_vm._g(_vm._b({directives:[{name:"gl-resize-observer-directive",rawName:"v-gl-resize-observer-directive",value:(_vm.handleResize),expression:"handleResize"}],attrs:{"nav-class":_vm.navClass},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}}),{key:"tabs-start",fn:function(){return [_c('li',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayScrollLeft),expression:"displayScrollLeft"}],staticClass:"gl-tabs-fade gl-tabs-fade-left"},[_c('button',{staticClass:"gl-tabs-fade-icon-button",attrs:{"aria-label":"Scroll left","tabindex":"-1"},on:{"click":_vm.scrollTabsLeft}},[_c('gl-icon',{attrs:{"size":16,"name":"chevron-lg-left"}})],1)])]},proxy:true},{key:"tabs-end",fn:function(){return [_c('li',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayScrollRight),expression:"displayScrollRight"}],staticClass:"gl-tabs-fade gl-tabs-fade-right"},[_c('button',{staticClass:"gl-tabs-fade-icon-button",attrs:{"aria-label":"Scroll right","tabindex":"-1"},on:{"click":_vm.scrollTabsRight}},[_c('gl-icon',{attrs:{"size":16,"name":"chevron-lg-right"}})],1)])]},proxy:true}],null,true)},'gl-tabs',_vm.passthroughAttrs,false),_vm.$listeners))};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',_vm._g(_vm._b({directives:[{name:"gl-resize-observer-directive",rawName:"v-gl-resize-observer-directive",value:(_vm.handleResize),expression:"handleResize"}],attrs:{"nav-class":_vm.navClass},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}}),{key:"toolbar-start",fn:function(){return [_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayScrollLeft),expression:"displayScrollLeft"}],staticClass:"gl-tabs-fade gl-tabs-fade-left"},[_c('button',{staticClass:"gl-tabs-fade-icon-button",attrs:{"aria-label":_vm.scrollLeftLabel},on:{"click":_vm.scrollTabsLeft}},[_c('gl-icon',{attrs:{"size":16,"name":"chevron-lg-left"}})],1)])]},proxy:true},{key:"toolbar-end",fn:function(){return [_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayScrollRight),expression:"displayScrollRight"}],staticClass:"gl-tabs-fade gl-tabs-fade-right"},[_c('button',{staticClass:"gl-tabs-fade-icon-button",attrs:{"aria-label":_vm.scrollRightLabel},on:{"click":_vm.scrollTabsRight}},[_c('gl-icon',{attrs:{"size":16,"name":"chevron-lg-right"}})],1)])]},proxy:true}],null,true)},'gl-tabs',_vm.passthroughAttrs,false),_vm.$listeners))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/tabs/tabs/tabs.js

@@ -189,7 +189,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('b-tabs',_vm._g(_vm._b({ref:"bTabs",staticClass:"gl-tabs",attrs:{"no-nav-style":true,"no-fade":true,"active-nav-item-class":"gl-tab-nav-item-active","content-class":[_vm.contentClass, 'gl-tab-content'],"nav-class":[_vm.navClass, 'gl-tabs-nav'],"justified":_vm.justified,"value":_vm.activeTabIndex},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}}),(_vm.hasActions)?{key:"tabs-start",fn:function(){return [_c('div',{staticClass:"gl-actions-tabs-start",attrs:{"data-testid":"actions-tabs-start"}},[(_vm.actionPrimary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-primary"},on:{"click":_vm.primary}},'gl-button',_vm.buttonBinding(_vm.actionPrimary, 'actionPrimary'),false),[_vm._v("\n        "+_vm._s(_vm.actionPrimary.text)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.actionSecondary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-secondary"},on:{"click":_vm.secondary}},'gl-button',_vm.buttonBinding(_vm.actionSecondary, 'actionSecondary'),false),[_vm._v("\n        "+_vm._s(_vm.actionSecondary.text)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.actionTertiary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-tertiary"},on:{"click":_vm.tertiary}},'gl-button',_vm.buttonBinding(_vm.actionTertiary, 'actionTertiary'),false),[_vm._v("\n        "+_vm._s(_vm.actionTertiary.text)+"\n      ")]):_vm._e()],1)]},proxy:true}:null,(_vm.hasActions)?{key:"tabs-end",fn:function(){return [_c('div',{staticClass:"gl-actions-tabs-end",attrs:{"data-testid":"actions-tabs-end"}},[(_vm.actionPrimary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-primary"},on:{"click":_vm.primary}},'gl-button',_vm.buttonBinding(_vm.actionPrimary, 'actionPrimary'),false),[_vm._v("\n        "+_vm._s(_vm.actionPrimary.text)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.actionSecondary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-secondary"},on:{"click":_vm.secondary}},'gl-button',_vm.buttonBinding(_vm.actionSecondary, 'actionSecondary'),false),[_vm._v("\n        "+_vm._s(_vm.actionSecondary.text)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.actionTertiary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-tertiary"},on:{"click":_vm.tertiary}},'gl-button',_vm.buttonBinding(_vm.actionTertiary, 'actionTertiary'),false),[_vm._v("\n        "+_vm._s(_vm.actionTertiary.text)+"\n      ")]):_vm._e()],1)]},proxy:true}:null],null,true)},'b-tabs',_vm.$attrs,false),_vm.listeners))};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-tabs',_vm._g(_vm._b({ref:"bTabs",staticClass:"gl-tabs",attrs:{"no-nav-style":true,"no-fade":true,"active-nav-item-class":"gl-tab-nav-item-active","content-class":[_vm.contentClass, 'gl-tab-content'],"nav-wrapper-class":"gl-tabs-wrapper","nav-class":[_vm.navClass, 'gl-tabs-nav'],"justified":_vm.justified,"value":_vm.activeTabIndex},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}}),(_vm.hasActions)?{key:"toolbar-start",fn:function(){return [_c('div',{staticClass:"gl-actions-tabs-start",attrs:{"role":"toolbar","data-testid":"actions-tabs-start"}},[(_vm.actionPrimary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-primary"},on:{"click":_vm.primary}},'gl-button',_vm.buttonBinding(_vm.actionPrimary, 'actionPrimary'),false),[_vm._v("\n        "+_vm._s(_vm.actionPrimary.text)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.actionSecondary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-secondary"},on:{"click":_vm.secondary}},'gl-button',_vm.buttonBinding(_vm.actionSecondary, 'actionSecondary'),false),[_vm._v("\n        "+_vm._s(_vm.actionSecondary.text)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.actionTertiary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-tertiary"},on:{"click":_vm.tertiary}},'gl-button',_vm.buttonBinding(_vm.actionTertiary, 'actionTertiary'),false),[_vm._v("\n        "+_vm._s(_vm.actionTertiary.text)+"\n      ")]):_vm._e()],1)]},proxy:true}:null,(_vm.hasActions)?{key:"toolbar-end",fn:function(){return [_c('div',{staticClass:"gl-actions-tabs-end",attrs:{"role":"toolbar","data-testid":"actions-tabs-end"}},[(_vm.actionPrimary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-primary"},on:{"click":_vm.primary}},'gl-button',_vm.buttonBinding(_vm.actionPrimary, 'actionPrimary'),false),[_vm._v("\n        "+_vm._s(_vm.actionPrimary.text)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.actionSecondary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-secondary"},on:{"click":_vm.secondary}},'gl-button',_vm.buttonBinding(_vm.actionSecondary, 'actionSecondary'),false),[_vm._v("\n        "+_vm._s(_vm.actionSecondary.text)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.actionTertiary)?_c('gl-button',_vm._b({attrs:{"data-testid":"action-tertiary"},on:{"click":_vm.tertiary}},'gl-button',_vm.buttonBinding(_vm.actionTertiary, 'actionTertiary'),false),[_vm._v("\n        "+_vm._s(_vm.actionTertiary.text)+"\n      ")]):_vm._e()],1)]},proxy:true}:null],null,true)},'b-tabs',_vm.$attrs,false),_vm.listeners))};
 var __vue_staticRenderFns__ = [];
 
   /* style */