@gitlab/ui 80.2.0 → 80.4.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [80.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.3.0...v80.4.0) (2024-05-07)
+
+
+### Bug Fixes
+
+* linting errors ([52938a5](https://gitlab.com/gitlab-org/gitlab-ui/commit/52938a58ec1b51a0544c44633c9f13949da0fc35))
+
+
+### Features
+
+* **README:** Add design tokens mention ([3ff1f07](https://gitlab.com/gitlab-org/gitlab-ui/commit/3ff1f0702af61ba1efc3592e5759c95e6111f110))
+
+# [80.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.2.0...v80.3.0) (2024-05-06)
+
+
+### Features
+
+* **GlSearchBoxByClick:** Migrate dropdown ([51de3bc](https://gitlab.com/gitlab-org/gitlab-ui/commit/51de3bcc652017d7218839673c9579e6a22d1446))
+
 # [80.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.1.0...v80.2.0) (2024-05-03)
 
 

package/README.md

@@ -159,6 +159,30 @@ You have two options to include those stylesheets:
 @import '@gitlab/ui/dist/utility_classes.css';
 ```
 
+### Design tokens
+
+GitLab UI uses design tokens to maintain a single source of truth that, through automation,
+can be formatted for different uses.
+
+- See [Pajamas](https://design.gitlab.com/product-foundations/design-tokens) for an overview
+on design tokens.
+- See [GitLab Docs](https://docs.gitlab.com/ee/development/fe_guide/design_tokens.html) for
+in-depth guides on creating and using design tokens.
+
+Example design token inheritance and automation:
+
+```mermaid
+flowchart TD
+    A[#1f1e24] -->|Constant token| B[color.neutral.950]
+    B -->|Semantic token| C[text.color.default]
+    C --> D{Automation}
+    D -->|Figma| E[text/color/default]
+    D -->|CSS| F[--gl-text-color-default]
+    D -->|SCSS| G[$gl-text-color-default]
+    D -->|JavaScript| H[GL_TEXT_COLOR_DEFAULT]
+    D -->|Tailwind| I[gl-text-default]
+```
+
 ## Releases
 
 See [Updating GitLab UI Packages](doc/updating-gitlab-ui-packages.md) for information on how the

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

@@ -1,26 +1,20 @@
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlClearIconButton from '../../shared_components/clear_icon_button/clear_icon_button';
 import GlButton from '../button/button';
-import GlDropdown from '../dropdown/dropdown';
-import GlDropdownDivider from '../dropdown/dropdown_divider';
-import GlDropdownItem from '../dropdown/dropdown_item';
-import GlDropdownText from '../dropdown/dropdown_text';
+import GlDisclosureDropdown from '../new_dropdowns/disclosure/disclosure_dropdown';
+import GlDisclosureDropdownItem from '../new_dropdowns/disclosure/disclosure_dropdown_item';
 import GlFormInput from '../form/form_input/form_input';
 import GlFormInputGroup from '../form/form_input_group/form_input_group';
-import GlIcon from '../icon/icon';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
   name: 'GlSearchboxByClick',
   components: {
     GlClearIconButton,
-    GlIcon,
     GlButton,
     GlFormInput,
-    GlDropdown,
-    GlDropdownText,
-    GlDropdownItem,
-    GlDropdownDivider,
+    GlDisclosureDropdown,
+    GlDisclosureDropdownItem,
     GlFormInputGroup
   },
   directives: {
@@ -166,9 +160,6 @@ var script = {
     }
   },
   methods: {
-    closeHistoryDropdown() {
-      this.$refs.historyDropdown.hide();
-    },
     search(value) {
       /**
        * Emitted when search is submitted
@@ -211,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-dropdown',{ref:"historyDropdown",staticClass:"gl-search-box-by-click-history",attrs:{"menu-class":"gl-search-box-by-click-menu","category":"secondary","disabled":_vm.disabled},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_c('gl-icon',{staticClass:"gl-search-box-by-click-history-icon",attrs:{"name":"history"}}),_vm._v(" "),_c('gl-icon',{staticClass:"gl-search-box-by-click-history-icon-chevron",attrs:{"name":"chevron-down"}}),_vm._v(" "),_c('span',{staticClass:"gl-sr-only"},[_vm._v("Toggle history")])]},proxy:true}],null,false,2220989388)},[_vm._v(" "),_c('gl-dropdown-text',{staticClass:"gl-search-box-by-click-history-header"},[_vm._v("\n        "+_vm._s(_vm.recentSearchesHeader)+"\n        "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.hover",value:({ container: _vm.tooltipContainer }),expression:"{ container: tooltipContainer }",modifiers:{"hover":true}}],ref:"closeHistory",staticClass:"gl-search-box-by-click-close-history-button",attrs:{"title":_vm.closeButtonTitle,"aria-label":_vm.closeButtonTitle,"category":"tertiary","name":"close","icon":"close"},on:{"click":_vm.closeHistoryDropdown}})],1),_vm._v(" "),_c('gl-dropdown-divider'),_vm._v(" "),(_vm.historyItems.length)?[_vm._l((_vm.historyItems),function(item,idx){return _c('gl-dropdown-item',{key:idx,staticClass:"gl-search-box-by-click-history-item",on:{"click":function($event){return _vm.selectHistoryItem(item)}}},[_vm._t("history-item",function(){return [_vm._v(_vm._s(item))]},{"historyItem":item})],2)}),_vm._v(" "),_c('gl-dropdown-divider'),_vm._v(" "),_c('gl-dropdown-item',{ref:"clearHistory",on:{"click":_vm.emitClearHistory}},[_vm._v(_vm._s(_vm.clearRecentSearchesText))])]:_c('gl-dropdown-text',{staticClass:"gl-search-box-by-click-history-no-searches"},[_vm._v(_vm._s(_vm.noRecentSearchesText))])],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:{"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","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-display-flex gl-align-items-center gl-p-4! gl-min-h-8 gl-border-b-1 gl-border-b-solid gl-border-b-gray-200 gl-flex-grow-1 gl-font-weight-bold gl-font-sm"},[_vm._v("\n          "+_vm._s(_vm.recentSearchesHeader)+"\n        ")])]},proxy:true},(_vm.historyItems.length)?{key:"footer",fn:function(){return [_c('div',{staticClass:"gl-border-t-solid gl-border-t-1 gl-border-t-gray-200 gl-display-flex gl-flex-direction-column gl-p-2"},[_c('gl-button',{ref:"clearHistory",staticClass:"gl-justify-content-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-font-sm gl-text-secondary gl-py-2 gl-px-4"},[_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:{"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 */