@gitlab/ui 39.3.0 → 39.4.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [39.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v39.3.2...v39.4.0) (2022-04-28)
+
+
+### Features
+
+* **GlListbox:** create listbox component ([dcc7eae](https://gitlab.com/gitlab-org/gitlab-ui/commit/dcc7eae54db81de1c922857c990f89ceb0e1c694))
+
+## [39.3.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v39.3.1...v39.3.2) (2022-04-27)
+
+
+### Bug Fixes
+
+* **GlButton:** Fix button text color in dark mode ([61267e3](https://gitlab.com/gitlab-org/gitlab-ui/commit/61267e3ce3c80d0592e5fe7e6458c86ab6ff3979))
+
+## [39.3.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v39.3.0...v39.3.1) (2022-04-26)
+
+
+### Bug Fixes
+
+* **GlModal:** Ensure modal dialog has an accessible name ([5b35a67](https://gitlab.com/gitlab-org/gitlab-ui/commit/5b35a6757c510740191d336b14eeed71886a2066))
+
 # [39.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v39.2.1...v39.3.0) (2022-04-26)
 
 

package/dist/components/base/modal/modal.js

@@ -1,6 +1,6 @@
 import { BModal } from 'bootstrap-vue/esm/index.js';
 import { modalSizeOptions, modalButtonDefaults, focusableTags, COMMA } from '../../../utils/constants';
-import { focusFirstFocusableElement } from '../../../utils/utils';
+import { logWarning, focusFirstFocusableElement } from '../../../utils/utils';
 import CloseButton from '../../shared_components/close_button/close_button';
 import GlButton from '../button/button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -73,6 +73,11 @@ var script = {
       type: Boolean,
       required: false,
       default: false
+    },
+    ariaLabel: {
+      type: String,
+      required: false,
+      default: ''
     }
   },
   computed: {
@@ -89,6 +94,13 @@ var script = {
     }
 
   },
+
+  mounted() {
+    if (!this.ariaLabel && !this.title) {
+      logWarning('[gl-modal]: Accessible name for modal missing. Please add title prop or aria-label.');
+    }
+  },
+
   methods: {
     show() {
       this.$refs.modal.show();
@@ -165,7 +177,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-modal',_vm._g(_vm._b({ref:"modal",attrs:{"id":_vm.modalId,"title-tag":_vm.titleTag,"size":_vm.size,"visible":_vm.visible,"lazy":"","modal-class":['gl-modal', _vm.modalClass]},on:{"shown":_vm.setFocus,"ok":_vm.primary,"cancel":_vm.canceled,"change":function($event){return _vm.$emit('change', $event)}},scopedSlots:_vm._u([{key:"default",fn:function(){return [_vm._t("default")]},proxy:true},{key:"modal-header",fn:function(){return [_vm._t("modal-header",[_c('h4',{staticClass:"modal-title"},[_vm._t("modal-title",[_vm._v(_vm._s(_vm.title))])],2)]),_vm._v(" "),_c('close-button',{ref:"close-button",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.close}})]},proxy:true},(_vm.shouldRenderModalOk)?{key:"modal-ok",fn:function(){return [_vm._t("modal-ok")]},proxy:true}:null,(_vm.shouldRenderModalCancel)?{key:"modal-cancel",fn:function(){return [_vm._t("modal-cancel")]},proxy:true}:null,(_vm.shouldRenderModalFooter)?{key:"modal-footer",fn:function(){return [_vm._t("modal-footer",[(_vm.actionCancel)?_c('gl-button',_vm._b({staticClass:"js-modal-action-cancel",on:{"click":_vm.cancel}},'gl-button',_vm.buttonBinding(_vm.actionCancel, 'actionCancel'),false),[_vm._v("\n         "+_vm._s(_vm.actionCancel.text)+"\n       ")]):_vm._e(),_vm._v(" "),(_vm.actionSecondary)?_c('gl-button',_vm._b({staticClass:"js-modal-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.actionPrimary)?_c('gl-button',_vm._b({staticClass:"js-modal-action-primary",on:{"click":_vm.ok}},'gl-button',_vm.buttonBinding(_vm.actionPrimary, 'actionPrimary'),false),[_vm._v("\n         "+_vm._s(_vm.actionPrimary.text)+"\n       ")]):_vm._e()])]},proxy:true}:null],null,true)},'b-modal',_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-modal',_vm._g(_vm._b({ref:"modal",attrs:{"id":_vm.modalId,"title-tag":_vm.titleTag,"size":_vm.size,"visible":_vm.visible,"aria-label":_vm.ariaLabel || _vm.title,"lazy":"","modal-class":['gl-modal', _vm.modalClass]},on:{"shown":_vm.setFocus,"ok":_vm.primary,"cancel":_vm.canceled,"change":function($event){return _vm.$emit('change', $event)}},scopedSlots:_vm._u([{key:"default",fn:function(){return [_vm._t("default")]},proxy:true},{key:"modal-header",fn:function(){return [_vm._t("modal-header",[_c('h4',{staticClass:"modal-title"},[_vm._t("modal-title",[_vm._v(_vm._s(_vm.title))])],2)]),_vm._v(" "),_c('close-button',{ref:"close-button",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.close}})]},proxy:true},(_vm.shouldRenderModalOk)?{key:"modal-ok",fn:function(){return [_vm._t("modal-ok")]},proxy:true}:null,(_vm.shouldRenderModalCancel)?{key:"modal-cancel",fn:function(){return [_vm._t("modal-cancel")]},proxy:true}:null,(_vm.shouldRenderModalFooter)?{key:"modal-footer",fn:function(){return [_vm._t("modal-footer",[(_vm.actionCancel)?_c('gl-button',_vm._b({staticClass:"js-modal-action-cancel",on:{"click":_vm.cancel}},'gl-button',_vm.buttonBinding(_vm.actionCancel, 'actionCancel'),false),[_vm._v("\n         "+_vm._s(_vm.actionCancel.text)+"\n       ")]):_vm._e(),_vm._v(" "),(_vm.actionSecondary)?_c('gl-button',_vm._b({staticClass:"js-modal-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.actionPrimary)?_c('gl-button',_vm._b({staticClass:"js-modal-action-primary",on:{"click":_vm.ok}},'gl-button',_vm.buttonBinding(_vm.actionPrimary, 'actionPrimary'),false),[_vm._v("\n         "+_vm._s(_vm.actionPrimary.text)+"\n       ")]):_vm._e()])]},proxy:true}:null],null,true)},'b-modal',_vm.$attrs,false),_vm.$listeners))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -0,0 +1,240 @@
+import { createPopper } from '@popperjs/core';
+import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions } from '../../../../utils/constants';
+import { POPPER_CONFIG, GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN } from '../constants';
+import GlButton from '../../button/button';
+import GlIcon from '../../icon/icon';
+import { OutsideDirective } from '../../../../directives/outside/outside';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  components: {
+    GlButton,
+    GlIcon
+  },
+  directives: {
+    Outside: OutsideDirective
+  },
+  props: {
+    toggleText: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    textSrOnly: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    category: {
+      type: String,
+      required: false,
+      default: buttonCategoryOptions.primary,
+      validator: value => Object.keys(buttonCategoryOptions).includes(value)
+    },
+    variant: {
+      type: String,
+      required: false,
+      default: dropdownVariantOptions.default,
+      validator: value => Object.keys(dropdownVariantOptions).includes(value)
+    },
+    size: {
+      type: String,
+      required: false,
+      default: buttonSizeOptions.medium,
+      validator: value => Object.keys(buttonSizeOptions).includes(value)
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    toggleClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: null
+    },
+    noCaret: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    /**
+     * Right align dropdown menu with respect to the toggle button
+     */
+    right: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // ARIA props
+    ariaHaspopup: {
+      type: [String, Boolean],
+      required: false,
+      default: false,
+      validator: value => {
+        return ['menu', 'listbox', 'tree', 'grid', 'dialog', true, false].includes(value);
+      }
+    },
+
+    /**
+     * Id that will be referenced by `aria-labelledby` attribute of the dropdown content`
+     */
+    toggleId: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * The `aria-labelledby` attribute value for the  toggle `button`
+     */
+    ariaLabelledby: {
+      type: String,
+      required: false,
+      default: null
+    }
+  },
+
+  data() {
+    return {
+      visible: false
+    };
+  },
+
+  computed: {
+    isIconOnly() {
+      var _this$toggleText;
+
+      return Boolean(this.icon && (!((_this$toggleText = this.toggleText) !== null && _this$toggleText !== void 0 && _this$toggleText.length) || this.textSrOnly));
+    },
+
+    isIconWithText() {
+      var _this$toggleText2;
+
+      return Boolean(this.icon && ((_this$toggleText2 = this.toggleText) === null || _this$toggleText2 === void 0 ? void 0 : _this$toggleText2.length) && !this.textSrOnly);
+    },
+
+    toggleButtonClasses() {
+      return [this.toggleClass, {
+        'gl-dropdown-toggle': true,
+        'dropdown-toggle': true,
+        'dropdown-icon-only': this.isIconOnly,
+        'dropdown-icon-text': this.isIconWithText,
+        'dropdown-toggle-no-caret': this.noCaret
+      }];
+    },
+
+    toggleLabelledBy() {
+      return this.ariaLabelledby ? `${this.ariaLabelledby} ${this.toggleId}` : this.toggleId;
+    },
+
+    popperConfig() {
+      return {
+        placement: this.right ? 'bottom-end' : 'bottom-start',
+        ...POPPER_CONFIG
+      };
+    }
+
+  },
+
+  updated() {
+    if (this.visible) {
+      var _this$popper;
+
+      (_this$popper = this.popper) === null || _this$popper === void 0 ? void 0 : _this$popper.update();
+    }
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.popper = createPopper(this.$refs.toggle.$el, this.$refs.content, this.popperConfig);
+    });
+  },
+
+  beforeDestroy() {
+    this.popper.destroy();
+  },
+
+  methods: {
+    toggle() {
+      this.visible = !this.visible;
+
+      if (this.visible) {
+        this.popper.update();
+        this.$emit(GL_DROPDOWN_SHOWN);
+      } else {
+        this.$emit(GL_DROPDOWN_HIDDEN);
+      }
+    },
+
+    close() {
+      if (!this.visible) {
+        return;
+      }
+
+      this.toggle();
+    },
+
+    closeAndFocus() {
+      if (!this.visible) {
+        return;
+      }
+
+      this.toggle();
+      this.focusToggle();
+    },
+
+    focusToggle() {
+      this.$refs.toggle.$el.focus();
+    }
+
+  }
+};
+
+/* 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",value:(_vm.close),expression:"close"}],staticClass:"gl-new-dropdown dropdown btn-group"},[_c('gl-button',{ref:"toggle",class:_vm.toggleButtonClasses,attrs:{"id":_vm.toggleId,"data-testid":"base-dropdown-toggle","icon":_vm.icon,"category":_vm.category,"variant":_vm.variant,"size":_vm.size,"disabled":_vm.disabled,"loading":_vm.loading,"aria-haspopup":_vm.ariaHaspopup,"aria-expanded":_vm.visible,"aria-labelledby":_vm.toggleLabelledBy},on:{"click":_vm.toggle}},[_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 dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()],1),_vm._v(" "),_c('div',{ref:"content",staticClass:"dropdown-menu",class:{ show: _vm.visible },attrs:{"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($event)}}},[_c('div',{staticClass:"gl-new-dropdown-inner"},[_vm._t("default")],2)])],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_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;

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

@@ -0,0 +1,20 @@
+const POPPER_CONFIG = {
+  modifiers: [{
+    name: 'offset',
+    options: {
+      offset: [0, 4]
+    }
+  }]
+}; // base dropdown events
+
+const GL_DROPDOWN_SHOWN = 'shown';
+const GL_DROPDOWN_HIDDEN = 'hidden'; // KEY Codes
+
+const HOME = 'Home';
+const END = 'End';
+const ARROW_UP = 'ArrowUp';
+const ARROW_DOWN = 'ArrowDown';
+const ENTER = 'Enter';
+const SPACE = 'Space';
+
+export { ARROW_DOWN, ARROW_UP, END, ENTER, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_SHOWN, HOME, POPPER_CONFIG, SPACE };