@gitlab/ui 44.1.0 → 46.0.0

package/CHANGELOG.md

@@ -1,3 +1,68 @@
+# [46.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v45.0.0...v46.0.0) (2022-10-06)
+
+
+### Bug Fixes
+
+* remove gl-sm-pb-[0-5] utils ([c94b46d](https://gitlab.com/gitlab-org/gitlab-ui/commit/c94b46d269db023f0a2f63c96ff8bb97d7addf68))
+* remove gl-sm-pl-[1-4] utils ([802a32c](https://gitlab.com/gitlab-org/gitlab-ui/commit/802a32ce8c3e54ba358e8aaf704a09b5d3d27411))
+* remove gl-sm-pr-[014] utils ([8e9c3ee](https://gitlab.com/gitlab-org/gitlab-ui/commit/8e9c3ee43eae4818d031ae4a84772953284611e5))
+* remove gl-xs-align-items-baseline util ([359dd98](https://gitlab.com/gitlab-org/gitlab-ui/commit/359dd989bb6822c9fe4ab14cd69f0fae887d24c4))
+* remove gl-xs-display-block util ([03b1f51](https://gitlab.com/gitlab-org/gitlab-ui/commit/03b1f5168ecdc4fe013b4d305c1eb9f80cabb110))
+* remove gl-xs-display-flex util ([0416358](https://gitlab.com/gitlab-org/gitlab-ui/commit/0416358ecc19f0c2e51acb4f8493ae64ed3a04ee))
+* remove gl-xs-display-inline util ([637f1c8](https://gitlab.com/gitlab-org/gitlab-ui/commit/637f1c8b3ff1d2c3c57ebb5bd33b552621b99c33))
+* remove gl-xs-display-inline-block util ([288bf3e](https://gitlab.com/gitlab-org/gitlab-ui/commit/288bf3ef32915f6a6c66ad1f93d42bcfce2046e5))
+* remove gl-xs-display-inline-flex util ([ceeab81](https://gitlab.com/gitlab-org/gitlab-ui/commit/ceeab8161656b9204d3377188d771491316a8102))
+
+
+### Features
+
+* **GlAlert:** `role` status based on alert type ([377137d](https://gitlab.com/gitlab-org/gitlab-ui/commit/377137df829a2e0b77190499194c005e688be7f7)), closes [/gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3045#note_1124896838](https://gitlab.com//gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3045/issues/note_1124896838) [/gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3045#note_1124893205](https://gitlab.com//gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3045/issues/note_1124893205)
+
+
+### BREAKING CHANGES
+
+* This removes the `gl-xs-align-items-baseline`
+desktop-first CSS util. If you were relying on it, please
+migrate to a mobile-first approach.
+* This removes the `gl-xs-display-inline-block`
+desktop-first CSS util. If you were relying on it, please
+migrate to a mobile-first approach.
+* This removes the `gl-xs-display-inline` desktop-first
+CSS util. If you were relying on it, please migrate to a
+mobile-first approach.
+* This removes the `gl-xs-display-block` desktop-first
+CSS util. If you were relying on it, please migrate to a
+mobile-first approach.
+* This removes the `gl-xs-display-inline-flex`
+desktop-first CSS util. If you were relying on it, please
+migrate to a mobile-first approach.
+* This removes the `gl-xs-display-flex` desktop-first
+CSS util. If you were relying on it, please migrate to a
+mobile-first approach.
+* This removes `gl-sm-pr-[014]` desktop-first
+CSS utils. If you were relying on them, please migrate to a
+mobile-first approach.
+* This removes `gl-sm-pl-[1-4]` desktop-first
+CSS utils. If you were relying on them, please migrate to a
+mobile-first approach.
+* This removes `gl-sm-pb-[0-5]` desktop-first
+CSS utils. If you were relying on them, please migrate to a
+mobile-first approach.
+
+# [45.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v44.1.0...v45.0.0) (2022-10-05)
+
+
+### Features
+
+* **GlListbox:** add support for listbox filtering ([c6edcc4](https://gitlab.com/gitlab-org/gitlab-ui/commit/c6edcc44966891ce4e2682c9b9785e6bd16ae642))
+
+
+### BREAKING CHANGES
+
+* **GlListbox:** `ariaLabelledby` property was renamed
+to `toggleAriaLabelledBy `for better consistency
+with a new `listAriaLabelledBy` property
+
 # [44.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v44.0.0...v44.1.0) (2022-10-05)
 
 

package/dist/components/base/alert/alert.js

@@ -101,6 +101,14 @@ var script = {
       return 'polite';
     },
 
+    role() {
+      if ([alertVariantOptions.danger, alertVariantOptions.warning, alertVariantOptions.success].includes(this.variant)) {
+        return 'alert';
+      }
+
+      return 'status';
+    },
+
     iconName() {
       return alertVariantIconMap[this.variant];
     },
@@ -195,7 +203,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
     { 'gl-alert-sticky': _vm.sticky },
     { 'gl-alert-not-dismissible': !_vm.dismissible },
     { 'gl-alert-no-icon': !_vm.showIcon },
-    _vm.variantClass ]},[(_vm.showIcon)?_c('gl-icon',{class:{ 'gl-alert-icon': true, 'gl-alert-icon-no-title': !_vm.title },attrs:{"name":_vm.iconName}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-content",attrs:{"role":"alert","aria-live":_vm.ariaLive}},[(_vm.title)?_c('h2',{staticClass:"gl-alert-title"},[_vm._v(_vm._s(_vm.title))]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-body"},[_vm._t("default")],2),_vm._v(" "),(_vm.shouldRenderActions)?_c('div',{staticClass:"gl-alert-actions"},[_vm._t("actions",function(){return _vm._l((_vm.actionButtons),function(actionButton,index){return _c('gl-button',_vm._g(_vm._b({key:index,staticClass:"gl-alert-action"},'gl-button',actionButton.attrs,false),actionButton.listeners),[_vm._v("\n          "+_vm._s(actionButton.text)+"\n        ")])})})],2):_vm._e()]),_vm._v(" "),(_vm.dismissible)?_c('close-button',{ref:"dismiss",staticClass:"gl-dismiss-btn",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.onDismiss}}):_vm._e()],1)};
+    _vm.variantClass ]},[(_vm.showIcon)?_c('gl-icon',{class:{ 'gl-alert-icon': true, 'gl-alert-icon-no-title': !_vm.title },attrs:{"name":_vm.iconName}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-content",attrs:{"role":_vm.role,"aria-live":_vm.ariaLive}},[(_vm.title)?_c('h2',{staticClass:"gl-alert-title"},[_vm._v(_vm._s(_vm.title))]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-body"},[_vm._t("default")],2),_vm._v(" "),(_vm.shouldRenderActions)?_c('div',{staticClass:"gl-alert-actions"},[_vm._t("actions",function(){return _vm._l((_vm.actionButtons),function(actionButton,index){return _c('gl-button',_vm._g(_vm._b({key:index,staticClass:"gl-alert-action"},'gl-button',actionButton.attrs,false),actionButton.listeners),[_vm._v("\n          "+_vm._s(actionButton.text)+"\n        ")])})})],2):_vm._e()]),_vm._v(" "),(_vm.dismissible)?_c('close-button',{ref:"dismiss",staticClass:"gl-dismiss-btn",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.onDismiss}}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -177,6 +177,14 @@ var script = {
       }
     },
 
+    open() {
+      if (this.visible) {
+        return;
+      }
+
+      this.toggle();
+    },
+
     close() {
       if (!this.visible) {
         return;

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

@@ -3,6 +3,8 @@ import _clamp from 'lodash/clamp';
 import { stopEvent } from '../../../../utils/utils';
 import { GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, HOME, END, ARROW_UP, ARROW_DOWN } from '../constants';
 import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions } from '../../../../utils/constants';
+import GlLoadingIcon from '../../loading_icon/loading_icon';
+import GlSearchBoxByType from '../../search_box_by_type/search_box_by_type';
 import GlBaseDropdown from '../base_dropdown/base_dropdown';
 import GlListboxItem from './listbox_item';
 import GlListboxGroup from './listbox_group';
@@ -11,6 +13,7 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const ITEM_SELECTOR = '[role="option"]';
 const GROUP_TOP_BORDER_CLASSES = ['gl-border-t', 'gl-pt-3', 'gl-mt-3'];
+const SEARCH_INPUT_SELECTOR = '.gl-search-box-by-type-input';
 var script = {
   events: {
     GL_DROPDOWN_SHOWN,
@@ -19,7 +22,9 @@ var script = {
   components: {
     GlBaseDropdown,
     GlListboxItem,
-    GlListboxGroup
+    GlListboxGroup,
+    GlSearchBoxByType,
+    GlLoadingIcon
   },
   model: {
     prop: 'selected',
@@ -122,6 +127,7 @@ var script = {
 
     /**
      * Set to "true" when dropdown content (items) is loading
+     * It will render a small loader in the dropdown toggle and make it disabled
      */
     loading: {
       type: Boolean,
@@ -167,11 +173,50 @@ var script = {
 
     /**
      * The `aria-labelledby` attribute value for the toggle button
+     * Provide the string of ids seperated by space
      */
-    ariaLabelledby: {
+    toggleAriaLabelledBy: {
       type: String,
       required: false,
       default: null
+    },
+
+    /**
+     * The `aria-labelledby` attribute value for the list of options
+     * Provide the string of ids seperated by space
+     */
+    listAriaLabelledBy: {
+      type: String,
+      required: false,
+      default: null
+    },
+
+    /**
+     * Enable search
+     */
+    searchable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    /**
+     * Set to "true" when items search is in progress.
+     * It will display loading icon below the search input
+     */
+    searching: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    /**
+     * Message to be displayed when filtering produced no results
+     */
+    noResultsText: {
+      type: String,
+      required: false,
+      default: 'No results found'
     }
   },
 
@@ -179,7 +224,9 @@ var script = {
     return {
       selectedValues: [],
       toggleId: _uniqueId('dropdown-toggle-btn-'),
-      nextFocusedItemIndex: null
+      listboxId: _uniqueId('listbox-'),
+      nextFocusedItemIndex: null,
+      searchStr: ''
     };
   },
 
@@ -219,6 +266,18 @@ var script = {
         } = _ref2;
         return value === selected;
       })).sort();
+    },
+
+    showList() {
+      return this.flattenedOptions.length && !this.searching;
+    },
+
+    showNoResultsText() {
+      return !this.flattenedOptions.length && !this.searching;
+    },
+
+    announceSRSearchResults() {
+      return this.searchable && !this.showNoResultsText && this.$scopedSlots['search-summary-sr-only'];
     }
 
   },
@@ -241,21 +300,34 @@ var script = {
     }
   },
   methods: {
+    open() {
+      this.$refs.baseDropdown.open();
+    },
+
+    close() {
+      this.$refs.baseDropdown.close();
+    },
+
     groupClasses(index) {
       return index === 0 ? null : GROUP_TOP_BORDER_CLASSES;
     },
 
     onShow() {
       this.$nextTick(() => {
-        var _this$selectedIndices;
+        if (this.searchable) {
+          this.focusSearchInput();
+        } else {
+          var _this$selectedIndices;
 
-        this.focusItem((_this$selectedIndices = this.selectedIndices[0]) !== null && _this$selectedIndices !== void 0 ? _this$selectedIndices : 0, this.getFocusableListItemElements());
+          this.focusItem((_this$selectedIndices = this.selectedIndices[0]) !== null && _this$selectedIndices !== void 0 ? _this$selectedIndices : 0, this.getFocusableListItemElements());
+        }
         /**
          * Emitted when dropdown is shown
          *
          * @event shown
          */
 
+
         this.$emit(GL_DROPDOWN_SHOWN);
       });
     },
@@ -272,20 +344,34 @@ var script = {
 
     onKeydown(event) {
       const {
-        code
+        code,
+        target
       } = event;
       const elements = this.getFocusableListItemElements();
       if (elements.length < 1) return;
       let stop = true;
+      const isSearchInput = target.matches(SEARCH_INPUT_SELECTOR);
 
       if (code === HOME) {
         this.focusItem(0, elements);
       } else if (code === END) {
         this.focusItem(elements.length - 1, elements);
       } else if (code === ARROW_UP) {
-        this.focusNextItem(event, elements, -1);
+        if (isSearchInput) {
+          return;
+        }
+
+        if (this.searchable && elements.indexOf(target) === 0) {
+          this.focusSearchInput();
+        } else {
+          this.focusNextItem(event, elements, -1);
+        }
       } else if (code === ARROW_DOWN) {
-        this.focusNextItem(event, elements, 1);
+        if (isSearchInput) {
+          this.focusItem(0, elements);
+        } else {
+          this.focusNextItem(event, elements, 1);
+        }
       } else {
         stop = false;
       }
@@ -296,8 +382,10 @@ var script = {
     },
 
     getFocusableListItemElements() {
-      const items = this.$refs.list.querySelectorAll(ITEM_SELECTOR);
-      return Array.from(items);
+      var _this$$refs$list;
+
+      const items = (_this$$refs$list = this.$refs.list) === null || _this$$refs$list === void 0 ? void 0 : _this$$refs$list.querySelectorAll(ITEM_SELECTOR);
+      return Array.from(items || []);
     },
 
     focusNextItem(event, elements, offset) {
@@ -320,15 +408,15 @@ var script = {
       });
     },
 
-    onSelect(_ref3, isSelected) {
-      let {
-        value
-      } = _ref3;
+    focusSearchInput() {
+      this.$refs.searchBox.focusInput();
+    },
 
+    onSelect(item, isSelected) {
       if (this.multiple) {
-        this.onMultiSelect(value, isSelected);
+        this.onMultiSelect(item.value, isSelected);
       } else {
-        this.onSingleSelect(value, isSelected);
+        this.onSingleSelect(item.value, isSelected);
       }
     },
 
@@ -361,6 +449,16 @@ var script = {
       }
     },
 
+    search(searchTerm) {
+      /**
+       * Emitted when the search query string is changed
+       *
+       * @event search
+       * @type {string}
+       */
+      this.$emit('search', searchTerm);
+    },
+
     isOption
   }
 };
@@ -369,7 +467,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(_vm.listboxTag,{ref:"list",tag:"component",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 [(_vm.isOption(item))?[_c('gl-listbox-item',{key:item.value,attrs:{"is-selected":_vm.isSelected(item),"is-focused":_vm.isFocused(item),"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)]:[_c('gl-listbox-group',{key:item.text,class:_vm.groupClasses(index),attrs:{"name":item.text},scopedSlots:_vm._u([(_vm.$scopedSlots['group-label'])?{key:"group-label",fn:function(){return [_vm._t("group-label",null,{"group":item})]},proxy:true}:null],null,true)},[_vm._v(" "),_vm._l((item.options),function(option){return _c('gl-listbox-item',{key:option.value,attrs:{"is-selected":_vm.isSelected(option),"is-focused":_vm.isFocused(option),"is-check-centered":_vm.isCheckCentered},on:{"select":function($event){return _vm.onSelect(option, $event)}}},[_vm._t("list-item",function(){return [_vm._v("\n              "+_vm._s(option.text)+"\n            ")]},{"item":option})],2)})],2)]]})],2),_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.toggleAriaLabelledBy,"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(" "),(_vm.searchable)?_c('div',{staticClass:"gl-border-b-1 gl-border-b-solid gl-border-b-gray-200"},[_c('gl-search-box-by-type',{ref:"searchBox",attrs:{"aria-owns":_vm.listboxId,"data-testid":"listbox-search-input"},on:{"input":_vm.search,"keydown":_vm.onKeydown},model:{value:(_vm.searchStr),callback:function ($$v) {_vm.searchStr=$$v;},expression:"searchStr"}}),_vm._v(" "),(_vm.searching)?_c('gl-loading-icon',{staticClass:"gl-my-3",attrs:{"data-testid":"listbox-search-loader","size":"md"}}):_vm._e()],1):_vm._e(),_vm._v(" "),(_vm.showList)?_c(_vm.listboxTag,{ref:"list",tag:"component",staticClass:"gl-new-dropdown-contents gl-list-style-none gl-pl-0 gl-mb-0",attrs:{"id":"listbox","aria-labelledby":_vm.listAriaLabelledBy || _vm.toggleId,"role":"listbox","tabindex":"-1"},on:{"keydown":_vm.onKeydown}},[_vm._l((_vm.items),function(item,index){return [(_vm.isOption(item))?[_c('gl-listbox-item',{key:item.value,attrs:{"is-selected":_vm.isSelected(item),"is-focused":_vm.isFocused(item),"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)]:[_c('gl-listbox-group',{key:item.text,class:_vm.groupClasses(index),attrs:{"name":item.text},scopedSlots:_vm._u([(_vm.$scopedSlots['group-label'])?{key:"group-label",fn:function(){return [_vm._t("group-label",null,{"group":item})]},proxy:true}:null],null,true)},[_vm._v(" "),_vm._l((item.options),function(option){return _c('gl-listbox-item',{key:option.value,attrs:{"is-selected":_vm.isSelected(option),"is-focused":_vm.isFocused(option),"is-check-centered":_vm.isCheckCentered},on:{"select":function($event){return _vm.onSelect(option, $event)}}},[_vm._t("list-item",function(){return [_vm._v("\n              "+_vm._s(option.text)+"\n            ")]},{"item":option})],2)})],2)]]})],2):_vm._e(),_vm._v(" "),(_vm.announceSRSearchResults)?_c('span',{staticClass:"gl-sr-only",attrs:{"data-testid":"listbox-number-of-results","aria-live":"assertive"}},[_vm._t("search-summary-sr-only")],2):(_vm.showNoResultsText)?_c('div',{staticClass:"gl-pl-7 gl-pr-5 gl-pt-3 gl-font-base gl-text-gray-600",attrs:{"aria-live":"assertive","data-testid":"listbox-no-results-text"}},[_vm._v("\n    "+_vm._s(_vm.noResultsText)+"\n  ")]):_vm._e(),_vm._v(" "),_vm._t("footer")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */
@@ -402,4 +500,4 @@ var __vue_staticRenderFns__ = [];
   );
 
 export default __vue_component__;
-export { ITEM_SELECTOR };
+export { ITEM_SELECTOR, SEARCH_INPUT_SELECTOR };