@gitlab/ui 43.9.3 → 43.12.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [43.12.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v43.11.0...v43.12.0) (2022-09-02)
+
+
+### Features
+
+* **css:** Add xl container util ([95755b9](https://gitlab.com/gitlab-org/gitlab-ui/commit/95755b9f3ff23dfd184a6c2c74ab23ea7d9865f6))
+
+# [43.11.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v43.10.0...v43.11.0) (2022-09-01)
+
+
+### Features
+
+* **GlFormSetlect:** Allowed to cofigure select size ([1e80adc](https://gitlab.com/gitlab-org/gitlab-ui/commit/1e80adc82acfbd84afacfba10ae4d6860ef57996))
+
+# [43.10.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v43.9.3...v43.10.0) (2022-08-31)
+
+
+### Features
+
+* **markdown:** Markdown code block styles ([344c84e](https://gitlab.com/gitlab-org/gitlab-ui/commit/344c84e9e67b8b28e3e7aa64594274cd3919ea9e))
+
 ## [43.9.3](https://gitlab.com/gitlab-org/gitlab-ui/compare/v43.9.2...v43.9.3) (2022-08-30)
 
 

package/dist/components/base/form/form_select/form_select.js

@@ -1,18 +1,55 @@
+import _isObject from 'lodash/isObject';
 import { BFormSelect } from 'bootstrap-vue/esm/index.js';
+import { formInputSizes } from '../../../../utils/constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
   components: {
     BFormSelect
   },
-  inheritAttrs: false
+  inheritAttrs: false,
+  props: {
+    /**
+     * Maximum width of the Select
+     */
+    size: {
+      type: [String, Object],
+      required: false,
+      default: null,
+      validator: value => {
+        const sizes = _isObject(value) ? Object.values(value) : [value];
+        return sizes.every(size => Object.values(formInputSizes).includes(size));
+      }
+    }
+  },
+  computed: {
+    cssClasses() {
+      if (this.size === null) {
+        return [];
+      }
+
+      if (_isObject(this.size)) {
+        const {
+          default: defaultSize,
+          ...nonDefaultSizes
+        } = this.size;
+        return [...(defaultSize ? [`gl-form-select-${defaultSize}`] : []), ...Object.entries(nonDefaultSizes).map(_ref => {
+          let [breakpoint, size] = _ref;
+          return `gl-${breakpoint}-form-select-${size}`;
+        })];
+      }
+
+      return [`gl-form-select-${this.size}`];
+    }
+
+  }
 };
 
 /* 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-form-select',_vm._g(_vm._b({staticClass:"gl-form-select",scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}})],null,true)},'b-form-select',_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-form-select',_vm._g(_vm._b({staticClass:"gl-form-select",class:_vm.cssClasses,scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}})],null,true)},'b-form-select',_vm.$attrs,false),_vm.$listeners))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -159,6 +159,15 @@ var script = {
       default: false
     },
 
+    /**
+     * Center selected item checkmark
+     */
+    isCheckCentered: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
     /**
      * The `aria-labelledby` attribute value for the toggle button
      */
@@ -345,7 +354,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-base-dropdown',{ref:"baseDropdown",attrs:{"aria-haspopup":"listbox","aria-labelledby":_vm.ariaLabelledby,"toggle-id":_vm.toggleId,"toggle-text":_vm.listboxToggleText,"toggle-class":_vm.toggleClass,"text-sr-only":_vm.textSrOnly,"category":_vm.category,"variant":_vm.variant,"size":_vm.size,"icon":_vm.icon,"disabled":_vm.disabled,"loading":_vm.loading,"no-caret":_vm.noCaret,"right":_vm.right},on:_vm._d({},[_vm.$options.events.GL_DROPDOWN_SHOWN,_vm.onShow,_vm.$options.events.GL_DROPDOWN_HIDDEN,_vm.onHide])},[_vm._t("header"),_vm._v(" "),_c('ul',{ref:"list",staticClass:"gl-new-dropdown-contents gl-list-style-none gl-pl-0 gl-mb-0",attrs:{"aria-labelledby":_vm.toggleId,"role":"listbox","tabindex":"-1"},on:{"keydown":_vm.onKeydown}},_vm._l((_vm.items),function(item,index){return _c('gl-listbox-item',{key:item.value,attrs:{"is-selected":_vm.isSelected(item),"is-focused":_vm.nextFocusedItemIndex === index},on:{"select":function($event){return _vm.onSelect(item, $event)}}},[_vm._t("list-item",function(){return [_vm._v("\n        "+_vm._s(item.text)+"\n      ")]},{"item":item})],2)}),1),_vm._v(" "),_vm._t("footer")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-base-dropdown',{ref:"baseDropdown",attrs:{"aria-haspopup":"listbox","aria-labelledby":_vm.ariaLabelledby,"toggle-id":_vm.toggleId,"toggle-text":_vm.listboxToggleText,"toggle-class":_vm.toggleClass,"text-sr-only":_vm.textSrOnly,"category":_vm.category,"variant":_vm.variant,"size":_vm.size,"icon":_vm.icon,"disabled":_vm.disabled,"loading":_vm.loading,"no-caret":_vm.noCaret,"right":_vm.right},on:_vm._d({},[_vm.$options.events.GL_DROPDOWN_SHOWN,_vm.onShow,_vm.$options.events.GL_DROPDOWN_HIDDEN,_vm.onHide])},[_vm._t("header"),_vm._v(" "),_c('ul',{ref:"list",staticClass:"gl-new-dropdown-contents gl-list-style-none gl-pl-0 gl-mb-0",attrs:{"aria-labelledby":_vm.toggleId,"role":"listbox","tabindex":"-1"},on:{"keydown":_vm.onKeydown}},_vm._l((_vm.items),function(item,index){return _c('gl-listbox-item',{key:item.value,attrs:{"is-selected":_vm.isSelected(item),"is-focused":_vm.nextFocusedItemIndex === index,"is-check-centered":_vm.isCheckCentered},on:{"select":function($event){return _vm.onSelect(item, $event)}}},[_vm._t("list-item",function(){return [_vm._v("\n        "+_vm._s(item.text)+"\n      ")]},{"item":item})],2)}),1),_vm._v(" "),_vm._t("footer")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/new_dropdowns/listbox/listbox_item.js

@@ -17,8 +17,23 @@ var script = {
       type: Boolean,
       default: false,
       required: false
+    },
+    isCheckCentered: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
+  computed: {
+    checkedClasses() {
+      if (this.isCheckCentered) {
+        return '';
+      }
+
+      return 'gl-mt-3 gl-align-self-start';
+    }
+
+  },
   methods: {
     toggleSelection() {
       this.$emit('select', !this.isSelected);
@@ -42,7 +57,10 @@ 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',{staticClass:"gl-new-dropdown-item",attrs:{"role":"option","tabindex":_vm.isFocused ? 0 : -1,"aria-selected":_vm.isSelected},on:{"click":_vm.toggleSelection,"keydown":_vm.onKeydown}},[_c('span',{staticClass:"dropdown-item"},[_c('gl-icon',{staticClass:"gl-mt-3 gl-align-self-start",class:['gl-new-dropdown-item-check-icon', { 'gl-visibility-hidden': !_vm.isSelected }],attrs:{"name":"mobile-issue-close","data-testid":"dropdown-item-checkbox"}}),_vm._v(" "),_c('span',{staticClass:"gl-new-dropdown-item-text-wrapper"},[_vm._t("default")],2)],1)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',{staticClass:"gl-new-dropdown-item",attrs:{"role":"option","tabindex":_vm.isFocused ? 0 : -1,"aria-selected":_vm.isSelected},on:{"click":_vm.toggleSelection,"keydown":_vm.onKeydown}},[_c('span',{staticClass:"dropdown-item"},[_c('gl-icon',{class:[
+        'gl-new-dropdown-item-check-icon',
+        { 'gl-visibility-hidden': !_vm.isSelected },
+        _vm.checkedClasses ],attrs:{"name":"mobile-issue-close","data-testid":"dropdown-item-checkbox"}}),_vm._v(" "),_c('span',{staticClass:"gl-new-dropdown-item-text-wrapper"},[_vm._t("default")],2)],1)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */