@gitlab/ui 37.3.0 → 37.4.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [37.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v37.3.0...v37.4.0) (2022-03-07)
+
+
+### Features
+
+* **GlButton:** Update selected state background ([b9e3116](https://gitlab.com/gitlab-org/gitlab-ui/commit/b9e31166ee8a43c2ea09c2f4a9cafd9e71e222d8))
+* **GlButton:** Update selected state design ([a5ebf70](https://gitlab.com/gitlab-org/gitlab-ui/commit/a5ebf701e38fd32ff965af33c30319e4c7f2edc5))
+
 # [37.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v37.2.0...v37.3.0) (2022-03-03)
 
 

package/dist/components/base/form/form_group/form_group.documentation.js

@@ -1,11 +1,7 @@
-import examples from './examples/form_group';
-
-var description = "# Form Group\n\nForm group adds structure to forms.\n";
+var description = "Form group adds structure to forms.\n";
 
 var form_group_documentation = {
-  description,
-  examples,
-  bootstrapComponent: 'b-form-group'
+  description
 };
 
 export default form_group_documentation;

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

@@ -1,86 +1,8 @@
-import examples from './examples';
-
-var description = "# Search Box By Click\n\nProvides a clearable text input with loading state to be used for [search](https://design.gitlab.com/components/search).\n";
+var description = "Provides a clearable text input with loading state to be used for [search](https://design.gitlab.com/components/search).\n";
 
 var search_box_by_click_documentation = {
   followsDesignSystem: true,
-  description,
-  examples,
-  propsInfo: {
-    value: {
-      additionalInfo: 'If provided, used as value of search input'
-    },
-    historyItems: {
-      type: Array,
-      required: false,
-      additionalInfo: 'If provided, used as history items for this component'
-    },
-    placeholder: {
-      type: String,
-      required: false,
-      additionalInfo: 'If provided, used as history items for this component'
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      additionalInfo: 'If provided and true, disables the input and controls'
-    },
-    recentSearchesHeader: {
-      type: String,
-      required: false,
-      default: 'Recent searches',
-      additionalInfo: 'i18n for recent searches title within history dropdown'
-    },
-    clearButtonTitle: {
-      type: String,
-      required: false,
-      default: 'Clear',
-      additionalInfo: 'i18n for clear button title'
-    },
-    closeButtonTitle: {
-      type: String,
-      required: false,
-      default: 'Close',
-      additionalInfo: 'i18n for close button title within history dropdown'
-    },
-    clearRecentSearchesText: {
-      type: String,
-      required: false,
-      default: 'Clear recent searches',
-      additionalInfo: 'i18n for recent searches clear text'
-    },
-    tooltipContainer: {
-      additionalInfo: 'Container for tooltip. Valid values: DOM node, selector string or `false` for default'
-    },
-    searchButtonAttributes: {
-      additionalInfo: 'HTML attributes to add to the search button'
-    }
-  },
-  events: [{
-    event: 'clear',
-    description: 'Emitted when search is cleared'
-  }, {
-    event: 'submit',
-    args: [{
-      arg: 'value',
-      description: 'Search value'
-    }],
-    description: 'Emitted when search is submitted'
-  }, {
-    event: 'history-item-selected',
-    args: [{
-      arg: 'value',
-      description: 'History item'
-    }],
-    description: 'Emitted when item from history is selected'
-  }, {
-    event: 'clear-history',
-    description: 'Emitted when clear history button is clicked'
-  }],
-  slots: [{
-    name: 'history-item',
-    description: 'Slot to customize history item in history dropdown. Used only with history-items prop'
-  }]
+  description
 };
 
 export default search_box_by_click_documentation;

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

@@ -26,6 +26,9 @@ var script = {
     GlTooltip: GlTooltipDirective
   },
   props: {
+    /**
+     * If provided, used as value of search input
+     */
     value: {
       required: false,
       default: '',
@@ -33,11 +36,19 @@ var script = {
       // so we should not force any specific type for value here
       validator: () => true
     },
+
+    /**
+     * If provided, used as history items for this component
+     */
     historyItems: {
       type: Array,
       required: false,
       default: null
     },
+
+    /**
+     * If provided, used as a placeholder for this component
+     */
     placeholder: {
       type: String,
       required: false,
@@ -48,26 +59,46 @@ var script = {
       required: false,
       default: true
     },
+
+    /**
+     * If provided and true, disables the input and controls
+     */
     disabled: {
       type: Boolean,
       required: false,
       default: false
     },
+
+    /**
+     * i18n for recent searches title within history dropdown
+     */
     recentSearchesHeader: {
       type: String,
       required: false,
       default: 'Recent searches'
     },
+
+    /**
+     * i18n for clear button title
+     */
     clearButtonTitle: {
       type: String,
       required: false,
       default: 'Clear'
     },
+
+    /**
+     * i18n for close button title within history dropdown
+     */
     closeButtonTitle: {
       type: String,
       required: false,
       default: 'Close'
     },
+
+    /**
+     * i18n for recent searches clear text
+     */
     clearRecentSearchesText: {
       type: String,
       required: false,
@@ -78,11 +109,19 @@ var script = {
       required: false,
       default: "You don't have any recent searches"
     },
+
+    /**
+     * Container for tooltip. Valid values: DOM node, selector string or `false` for default
+     */
     tooltipContainer: {
       required: false,
       default: false,
       validator: value => value === false || typeof value === 'string' || value instanceof HTMLElement
     },
+
+    /**
+     * HTML attributes to add to the search button
+     */
     searchButtonAttributes: {
       type: Object,
       required: false,
@@ -137,11 +176,20 @@ var script = {
     },
 
     search(value) {
+      /**
+       * Emitted when search is submitted
+       * @property {*} value Search value
+       */
       this.$emit('submit', value);
     },
 
     selectHistoryItem(item) {
       this.currentValue = item;
+      /**
+       * Emitted when item from history is selected
+       * @property {*} item History item
+       */
+
       this.$emit('history-item-selected', item);
       setTimeout(() => {
         document.activeElement.blur();
@@ -150,11 +198,22 @@ var script = {
 
     clearInput() {
       this.currentValue = '';
+      /**
+       * Emitted when search is cleared
+       */
+
       this.$emit('clear');
 
       if (this.$refs.input) {
         this.$refs.input.$el.focus();
       }
+    },
+
+    emitClearHistory() {
+      /**
+       * Emitted when clear history button is clicked
+       */
+      this.$emit('clear-history');
     }
 
   }
@@ -164,7 +223,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",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",[_vm._v(_vm._s(item))],{"historyItem":item})],2)}),_vm._v(" "),_c('gl-dropdown-divider'),_vm._v(" "),_c('gl-dropdown-item',{ref:"clearHistory",on:{"click":function($event){return _vm.$emit('clear-history')}}},[_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,{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,true)},[_vm._v(" "),_vm._t("input",[_c('gl-form-input',_vm._b({ref:"input",staticClass:"gl-search-box-by-click-input",attrs:{"disabled":_vm.disabled},on:{"focus":function($event){_vm.isFocused = true;},"blur":function($event){_vm.isFocused = false;},"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",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",[_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,{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,true)},[_vm._v(" "),_vm._t("input",[_c('gl-form-input',_vm._b({ref:"input",staticClass:"gl-search-box-by-click-input",attrs:{"disabled":_vm.disabled},on:{"focus":function($event){_vm.isFocused = true;},"blur":function($event){_vm.isFocused = false;},"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 */

package/dist/components/base/search_box_by_type/search_box_by_type.documentation.js

@@ -1,26 +1,8 @@
-import examples from './examples';
-
-var description = "# Search Box By Type\n\nProvides a clearable text input with loading state to be used for [search](https://design.gitlab.com/components/search).\n";
+var description = "Provides a clearable text input with loading state to be used for [search](https://design.gitlab.com/components/search).\n";
 
 var search_box_by_type_documentation = {
   followsDesignSystem: true,
-  description,
-  propsInfo: {
-    value: {
-      additionalInfo: 'If provided, used as value of search input'
-    },
-    disabled: {
-      additionalInfo: 'If provided and true, disables the input and controls'
-    },
-    isLoading: {
-      additionalInfo: 'Puts search box into loading state, rendering spinner'
-    },
-    tooltipContainer: {
-      additionalInfo: 'Container for tooltip. Valid values: DOM node, selector string or `false` for default'
-    }
-  },
-  examples,
-  bootstrapComponent: 'b-form-input'
+  description
 };
 
 export default search_box_by_type_documentation;

package/dist/components/base/search_box_by_type/search_box_by_type.js

@@ -4,10 +4,6 @@ import GlIcon from '../icon/icon';
 import GlLoadingIcon from '../loading_icon/loading_icon';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-const model = {
-  prop: 'value',
-  event: 'input'
-};
 var script = {
   components: {
     GlClearIconButton,
@@ -16,8 +12,14 @@ var script = {
     GlLoadingIcon
   },
   inheritAttrs: false,
-  model,
+  model: {
+    prop: 'value',
+    event: 'input'
+  },
   props: {
+    /**
+     * If provided, used as value of search input
+     */
     value: {
       type: String,
       required: false,
@@ -28,16 +30,28 @@ var script = {
       required: false,
       default: 'Clear'
     },
+
+    /**
+     * If provided and true, disables the input and controls
+     */
     disabled: {
       type: Boolean,
       required: false,
       default: false
     },
+
+    /**
+     * Puts search box into loading state, rendering spinner
+     */
     isLoading: {
       type: Boolean,
       required: false,
       default: false
     },
+
+    /**
+     * Container for tooltip. Valid values: DOM node, selector string or `false` for default
+     */
     tooltipContainer: {
       required: false,
       default: false,

package/dist/directives/hover_load/hover_load.documentation.js

@@ -1,4 +1,4 @@
-var hover_load = "# Hover Load\n\nA Vue Directive to help with preloading resources when hovering over an element.\n\n## Usage\n\n```html\n<script>\nimport { GlHoverLoadDirective } from '@gitlab/ui';\n\nexport default {\n  directives: { GlHoverLoadDirective },\n  methods: {\n    handlePreload() {\n      fetch('some/endpoint');\n    },\n  },\n};\n</script>\n\n<template>\n  <div v-gl-hover-load=\"handlePreload\">Hover me to preload</div>\n</template>\n```\n";
+var hover_load = "A Vue Directive to help with preloading resources when hovering over an element.\n\n## Usage\n\n```html\n<script>\nimport { GlHoverLoadDirective } from '@gitlab/ui';\n\nexport default {\n  directives: { GlHoverLoadDirective },\n  methods: {\n    handlePreload() {\n      fetch('some/endpoint');\n    },\n  },\n};\n</script>\n\n<template>\n  <div v-gl-hover-load=\"handlePreload\">Hover me to preload</div>\n</template>\n```\n";
 
 var description = /*#__PURE__*/Object.freeze({
   __proto__: null,

package/dist/directives/resize_observer/resize_observer.documentation.js

@@ -1,11 +1,8 @@
-import examples from './examples';
-
-var description = "# Resize Observer\n\n<!-- STORY -->\n\n## Usage\n\nThis directive can be used to get notified whenever a given element's size (width or height) changes\nand to retrieve the updated dimensions.\n\nUnder the hood, it leverages the [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\nIf you use GitLab UI in an older browser which doesn't support the Resize Observer API,\nyou can use a [polyfill](https://github.com/que-etc/resize-observer-polyfill).\n\nThe directive accepts a callback as a value and passes on the received\n[contentRect](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentRect)\nand the target element whenever a resize event gets triggered.\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      width: 0,\n      height: 0,\n    };\n  },\n  methods: {\n    handleResize({ contentRect: { width, height } }) {\n      this.width = width;\n      this.height = height;\n    },\n  },\n};\n</script>\n<template>\n  <div v-gl-resize-observer-directive=\"handleResize\">\n    <p>{{ width }} x {{ height }}</p>\n  </div>\n</template>\n```\n\nThe observer can be toggled on or off by passing a boolean argument to the directive:\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      shouldObserve: true,\n    };\n  },\n  methods: {\n    handleResize() {},\n  },\n};\n</script>\n<template>\n  <div v-gl-resize-observer-directive[shouldObserve]=\"handleResize\"></div>\n</template>\n```\n";
+var description = "This directive can be used to get notified whenever a given element's size (width or height) changes\nand to retrieve the updated dimensions.\n\nUnder the hood, it leverages the [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\nIf you use GitLab UI in an older browser which doesn't support the Resize Observer API,\nyou can use a [polyfill](https://github.com/que-etc/resize-observer-polyfill).\n\nThe directive accepts a callback as a value and passes on the received\n[contentRect](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentRect)\nand the target element whenever a resize event gets triggered.\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      width: 0,\n      height: 0,\n    };\n  },\n  methods: {\n    handleResize({ contentRect: { width, height } }) {\n      this.width = width;\n      this.height = height;\n    },\n  },\n};\n</script>\n<template>\n  <div v-gl-resize-observer-directive=\"handleResize\">\n    <p>{{ width }} x {{ height }}</p>\n  </div>\n</template>\n```\n\nThe observer can be toggled on or off by passing a boolean argument to the directive:\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      shouldObserve: true,\n    };\n  },\n  methods: {\n    handleResize() {},\n  },\n};\n</script>\n<template>\n  <div v-gl-resize-observer-directive[shouldObserve]=\"handleResize\"></div>\n</template>\n```\n";
 
 var resize_observer_documentation = {
   followsDesignSystem: false,
-  description,
-  examples
+  description
 };
 
 export default resize_observer_documentation;