@gitlab/ui 107.0.1 → 107.1.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [107.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v107.0.1...v107.1.0) (2025-01-16)
+
+
+### Features
+
+* **Dropdown:** Update design tokens ([c8663b6](https://gitlab.com/gitlab-org/gitlab-ui/commit/c8663b6c2eb08c65d33b6ec66b519d2ec0c7de69))
+
 ## [107.0.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v107.0.0...v107.0.1) (2025-01-15)
 
 

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.js

@@ -5,8 +5,8 @@ import { DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS, DISCLOSURE_DROPDOWN_GROUP_N
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const BORDER_CLASSES = {
-  [DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS.top]: 'gl-border-t gl-border-t-dropdown gl-pt-2 gl-mt-2',
-  [DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS.bottom]: 'gl-border-b gl-border-b-dropdown gl-pb-2 gl-mb-2'
+  [DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS.top]: 'gl-border-t gl-border-t-dropdown-divider gl-pt-2 gl-mt-2',
+  [DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS.bottom]: 'gl-border-b gl-border-b-dropdown-divider gl-pb-2 gl-mb-2'
 };
 var script = {
   name: DISCLOSURE_DROPDOWN_GROUP_NAME,

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.js

@@ -1,6 +1,7 @@
 import { BLink } from '../../../../vendor/bootstrap-vue/src/components/link/link';
 import { ENTER, SPACE } from '../constants';
 import { stopEvent } from '../../../../utils/utils';
+import { dropdownItemVariantOptions } from '../../../../utils/constants';
 import { isItem } from './utils';
 import { DISCLOSURE_DROPDOWN_ITEM_NAME } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -18,6 +19,17 @@ var script = {
       required: false,
       default: null,
       validator: isItem
+    },
+    /**
+     * The variant of the dropdown item.
+     */
+    variant: {
+      type: String,
+      default: null,
+      validator(value) {
+        return dropdownItemVariantOptions[value] !== undefined;
+      },
+      required: false
     }
   },
   computed: {
@@ -66,9 +78,18 @@ var script = {
       var _this$item4, _this$item4$extraAttr;
       return (_this$item4 = this.item) !== null && _this$item4 !== void 0 && (_this$item4$extraAttr = _this$item4.extraAttrs) !== null && _this$item4$extraAttr !== void 0 && _this$item4$extraAttr.disabled ? null : -1;
     },
-    wrapperClass() {
-      var _this$item$wrapperCla, _this$item5;
-      return (_this$item$wrapperCla = (_this$item5 = this.item) === null || _this$item5 === void 0 ? void 0 : _this$item5.wrapperClass) !== null && _this$item$wrapperCla !== void 0 ? _this$item$wrapperCla : '';
+    itemVariant() {
+      var _this$item5;
+      return this.variant || ((_this$item5 = this.item) === null || _this$item5 === void 0 ? void 0 : _this$item5.variant);
+    },
+    classes() {
+      var _this$item$wrapperCla, _this$item6;
+      return [this.$options.ITEM_CLASS, (_this$item$wrapperCla = (_this$item6 = this.item) === null || _this$item6 === void 0 ? void 0 : _this$item6.wrapperClass) !== null && _this$item$wrapperCla !== void 0 ? _this$item$wrapperCla : '',
+      // This isn't a Tailwind class, so this lint rule isn't relevant.
+      // It just so happens this class has the same prefix `gl-`.
+      this.itemVariant && this.itemVariant !== 'default' ?
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation
+      `gl-new-dropdown-item-${this.itemVariant}` : ''];
     },
     wrapperListeners() {
       const listeners = {
@@ -117,7 +138,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('li',_vm._g({class:[_vm.$options.ITEM_CLASS, _vm.wrapperClass],attrs:{"tabindex":_vm.listIndex,"data-testid":"disclosure-dropdown-item"}},_vm.wrapperListeners),[_vm._t("default",function(){return [_c(_vm.itemComponent.is,_vm._g(_vm._b({ref:"item",tag:"component",staticClass:"gl-new-dropdown-item-content",attrs:{"tabindex":_vm.componentIndex}},'component',_vm.itemComponent.attrs,false),_vm.itemComponent.listeners),[_c('span',{staticClass:"gl-new-dropdown-item-text-wrapper"},[_vm._t("list-item",function(){return [_vm._v("\n          "+_vm._s(_vm.item.text)+"\n        ")]})],2)])]})],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',_vm._g({class:_vm.classes,attrs:{"tabindex":_vm.listIndex,"data-testid":"disclosure-dropdown-item"}},_vm.wrapperListeners),[_vm._t("default",function(){return [_c(_vm.itemComponent.is,_vm._g(_vm._b({ref:"item",tag:"component",staticClass:"gl-new-dropdown-item-content",attrs:{"tabindex":_vm.componentIndex}},'component',_vm.itemComponent.attrs,false),_vm.itemComponent.listeners),[_c('span',{staticClass:"gl-new-dropdown-item-text-wrapper"},[_vm._t("list-item",function(){return [_vm._v("\n          "+_vm._s(_vm.item.text)+"\n        ")]})],2)])]})],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/new_dropdowns/disclosure/mock_data.js

@@ -21,12 +21,12 @@ const mockItems = [{
   }
 }, {
   text: 'Close merge request',
+  variant: 'danger',
   action: () => {
     // eslint-disable-next-line no-console
     console.log('CLOSED');
   },
   extraAttrs: {
-    class: '!gl-text-red-500',
     rel: 'nofollow',
     'data-method': 'put'
   }

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

@@ -18,8 +18,8 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
 const ITEM_SELECTOR = '[role="option"]';
-const HEADER_ITEMS_BORDER_CLASSES = ['gl-border-b-1', 'gl-border-b-solid', 'gl-border-b-dropdown'];
-const GROUP_TOP_BORDER_CLASSES = ['gl-border-t', 'gl-border-t-dropdown', 'gl-pt-1', 'gl-mt-2'];
+const HEADER_ITEMS_BORDER_CLASSES = ['gl-border-b-1', 'gl-border-b-solid', 'gl-border-b-dropdown-divider'];
+const GROUP_TOP_BORDER_CLASSES = ['gl-border-t-1', 'gl-border-t-solid', 'gl-border-t-dropdown-divider', 'gl-pt-1', 'gl-mt-2'];
 const SEARCH_INPUT_SELECTOR = '.gl-listbox-search-input';
 var script = {
   name: 'GlCollapsibleListbox',

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

@@ -202,7 +202,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",class:{ 'gl-search-box-by-click-with-search-button': _vm.showSearchButton },scopedSlots:_vm._u([(_vm.historyItems)?{key:"prepend",fn:function(){return [_c('gl-disclosure-dropdown',{ref:"historyDropdown",staticClass:"gl-search-box-by-click-history",attrs:{"icon":"history","category":"tertiary","toggle-text":"Toggle history","text-sr-only":"","fluid-width":"","disabled":_vm.disabled},scopedSlots:_vm._u([{key:"header",fn:function(){return [_c('div',{staticClass:"gl-search-box-by-click-history-header gl-flex gl-min-h-8 gl-grow gl-items-center gl-border-b-1 gl-border-b-dropdown !gl-p-4 gl-text-sm gl-font-bold gl-border-b-solid"},[_vm._v("\n          "+_vm._s(_vm.recentSearchesHeader)+"\n        ")])]},proxy:true},(_vm.historyItems.length)?{key:"footer",fn:function(){return [_c('div',{staticClass:"gl-flex gl-flex-col gl-border-t-1 gl-border-t-dropdown gl-p-2 gl-border-t-solid"},[_c('gl-button',{ref:"clearHistory",staticClass:"!gl-justify-start",attrs:{"category":"tertiary"},on:{"click":_vm.emitClearHistory}},[_vm._v("\n            "+_vm._s(_vm.clearRecentSearchesText)+"\n          ")])],1)]},proxy:true}:null],null,true)},[_vm._v(" "),(_vm.historyItems.length)?_vm._l((_vm.historyItems),function(item,idx){return _c('gl-disclosure-dropdown-item',{key:idx,staticClass:"gl-search-box-by-click-history-item",on:{"action":function($event){return _vm.selectHistoryItem(item)}},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("history-item",function(){return [_vm._v(_vm._s(item))]},{"historyItem":item})]},proxy:true}],null,true)})}):_c('div',{staticClass:"gl-px-4 gl-py-2 gl-text-sm gl-text-subtle"},[_vm._v("\n        "+_vm._s(_vm.noRecentSearchesText)+"\n      ")])],2)]},proxy:true}:null,(_vm.showSearchButton)?{key:"append",fn:function(){return [_c('gl-button',_vm._b({ref:"searchButton",staticClass:"gl-search-box-by-click-search-button",attrs:{"category":"tertiary","icon":"search","disabled":_vm.disabled,"aria-label":"Search","data-testid":"search-button"},on:{"click":function($event){return _vm.search(_vm.currentValue)}}},'gl-button',_vm.searchButtonAttributes,false))]},proxy:true}:null],null,true)},[_vm._v(" "),_vm._t("input",function(){return [_c('gl-form-input',_vm._b({ref:"input",staticClass:"gl-search-box-by-click-input",class:{ '!gl-rounded-base': !_vm.showSearchButton },attrs:{"disabled":_vm.disabled},on:{"focus":function($event){_vm.isFocused = true;},"blur":function($event){_vm.isFocused = false;}},nativeOn:{"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_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",class:{ 'gl-search-box-by-click-with-search-button': _vm.showSearchButton },scopedSlots:_vm._u([(_vm.historyItems)?{key:"prepend",fn:function(){return [_c('gl-disclosure-dropdown',{ref:"historyDropdown",staticClass:"gl-search-box-by-click-history",attrs:{"icon":"history","category":"tertiary","toggle-text":"Toggle history","text-sr-only":"","fluid-width":"","disabled":_vm.disabled},scopedSlots:_vm._u([{key:"header",fn:function(){return [_c('div',{staticClass:"gl-search-box-by-click-history-header gl-flex gl-min-h-8 gl-grow gl-items-center gl-border-b-1 gl-border-b-dropdown-divider !gl-p-4 gl-text-sm gl-font-bold gl-border-b-solid"},[_vm._v("\n          "+_vm._s(_vm.recentSearchesHeader)+"\n        ")])]},proxy:true},(_vm.historyItems.length)?{key:"footer",fn:function(){return [_c('div',{staticClass:"gl-flex gl-flex-col gl-border-t-1 gl-border-t-dropdown-divider gl-p-2 gl-border-t-solid"},[_c('gl-button',{ref:"clearHistory",staticClass:"!gl-justify-start",attrs:{"category":"tertiary"},on:{"click":_vm.emitClearHistory}},[_vm._v("\n            "+_vm._s(_vm.clearRecentSearchesText)+"\n          ")])],1)]},proxy:true}:null],null,true)},[_vm._v(" "),(_vm.historyItems.length)?_vm._l((_vm.historyItems),function(item,idx){return _c('gl-disclosure-dropdown-item',{key:idx,staticClass:"gl-search-box-by-click-history-item",on:{"action":function($event){return _vm.selectHistoryItem(item)}},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("history-item",function(){return [_vm._v(_vm._s(item))]},{"historyItem":item})]},proxy:true}],null,true)})}):_c('div',{staticClass:"gl-px-4 gl-py-2 gl-text-sm gl-text-subtle"},[_vm._v("\n        "+_vm._s(_vm.noRecentSearchesText)+"\n      ")])],2)]},proxy:true}:null,(_vm.showSearchButton)?{key:"append",fn:function(){return [_c('gl-button',_vm._b({ref:"searchButton",staticClass:"gl-search-box-by-click-search-button",attrs:{"category":"tertiary","icon":"search","disabled":_vm.disabled,"aria-label":"Search","data-testid":"search-button"},on:{"click":function($event){return _vm.search(_vm.currentValue)}}},'gl-button',_vm.searchButtonAttributes,false))]},proxy:true}:null],null,true)},[_vm._v(" "),_vm._t("input",function(){return [_c('gl-form-input',_vm._b({ref:"input",staticClass:"gl-search-box-by-click-input",class:{ '!gl-rounded-base': !_vm.showSearchButton },attrs:{"disabled":_vm.disabled},on:{"focus":function($event){_vm.isFocused = true;},"blur":function($event){_vm.isFocused = false;}},nativeOn:{"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 */