@gitlab/ui 37.4.2 → 37.5.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [37.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v37.4.2...v37.5.0) (2022-03-10)
+
+
+### Bug Fixes
+
+* **GlDropdown:** Wrap text in dropdown section header ([1408742](https://gitlab.com/gitlab-org/gitlab-ui/commit/140874226a351da03522b7b45ef4428443162a79))
+
+
+### Features
+
+* **GlAccordionItem:** Add titleVisible property ([f8626aa](https://gitlab.com/gitlab-org/gitlab-ui/commit/f8626aa2a343d4159efddf6aacbdbaad6593eb27))
+
 ## [37.4.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v37.4.1...v37.4.2) (2022-03-09)
 
 

package/dist/components/base/accordion/accordion_item.js

@@ -24,6 +24,15 @@ var script = {
       required: true
     },
 
+    /*
+    Used to set the title of accordion link when the content is visible
+    */
+    titleVisible: {
+      type: String,
+      default: null,
+      required: false
+    },
+
     /*
     When set, it will ensure the accordion item is initially visible
     */
@@ -67,6 +76,10 @@ var script = {
 
     icon() {
       return this.isVisible ? 'chevron-down' : 'chevron-right';
+    },
+
+    buttonTitle() {
+      return this.isVisible && this.titleVisible ? this.titleVisible : this.title;
     }
 
   }
@@ -76,7 +89,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('div',{staticClass:"gl-accordion-item"},[_c(_vm.headerComponent,{tag:"component",staticClass:"gl-accordion-item-header"},[_c('gl-button',{directives:[{name:"gl-collapse-toggle",rawName:"v-gl-collapse-toggle",value:(_vm.accordionItemId),expression:"accordionItemId"}],attrs:{"variant":"link","button-text-classes":"gl-display-flex","icon":_vm.icon}},[_vm._v("\n      "+_vm._s(_vm.title)+"\n    ")])],1),_vm._v(" "),_c('b-collapse',{staticClass:"gl-mt-3 gl-font-base",attrs:{"id":_vm.accordionItemId,"visible":_vm.isVisible,"accordion":_vm.accordion,"data-testid":("accordion-item-collapse-" + _vm.accordionItemId)},model:{value:(_vm.isVisible),callback:function ($$v) {_vm.isVisible=$$v;},expression:"isVisible"}},[_vm._t("default")],2)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-accordion-item"},[_c(_vm.headerComponent,{tag:"component",staticClass:"gl-accordion-item-header"},[_c('gl-button',{directives:[{name:"gl-collapse-toggle",rawName:"v-gl-collapse-toggle",value:(_vm.accordionItemId),expression:"accordionItemId"}],attrs:{"variant":"link","button-text-classes":"gl-display-flex","icon":_vm.icon}},[_vm._v("\n      "+_vm._s(_vm.buttonTitle)+"\n    ")])],1),_vm._v(" "),_c('b-collapse',{staticClass:"gl-mt-3 gl-font-base",attrs:{"id":_vm.accordionItemId,"visible":_vm.isVisible,"accordion":_vm.accordion,"data-testid":("accordion-item-collapse-" + _vm.accordionItemId)},model:{value:(_vm.isVisible),callback:function ($$v) {_vm.isVisible=$$v;},expression:"isVisible"}},[_vm._t("default")],2)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -1,52 +1,7 @@
-import examples from './examples';
-
-var description = "# Datepicker\n\n<!-- STORY -->\n\n## Usage\n\nDate picker allows users to choose and input a date by manually typing the date into the input field\nor by using a calendar-like dropdown.\n\n### Warning\n\nBe careful when binding a date value using `value` prop. `value` is a watched property and Date\npicker will emit `input` event on _initial load_. Alternatively, use `defaultDate` to set the\ninitial date then receive updated date values through `input` events.\n";
+var description = "Date picker allows users to choose and input a date by manually typing the date into the input field\nor by using a calendar-like dropdown.\n\n### Warning\n\nBe careful when binding a date value using `value` prop. `value` is a watched property and Date\npicker will emit `input` event on _initial load_. Alternatively, use `defaultDate` to set the\ninitial date then receive updated date values through `input` events.\n";
 
 var datepicker_documentation = {
-  description,
-  examples,
-  propsInfo: {
-    target: {
-      additionalInfo: 'Selector of element that triggers the datepicker. Defaults to the calendar icon. Pass `null` to trigger on input focus.'
-    },
-    container: {
-      additionalInfo: 'DOM node to render calendar into. Defaults to the datepicker container. Pass `null` to use Pikaday default.'
-    },
-    disableDayFn: {
-      additionalInfo: 'Accepts a function that accepts a date as argument and returns true if the date is disabled.'
-    },
-    autocomplete: {
-      additionalInfo: 'Defaults to `off` when datepicker opens on focus, otherwise defaults to `null`.'
-    },
-    defaultDate: {
-      additionalInfo: 'Use this prop to set the initial date for the datepicker.'
-    }
-  },
-  events: [{
-    event: 'input',
-    description: 'Emitted when a new date has been selected.',
-    args: [{
-      arg: 'date',
-      description: 'The selected date'
-    }]
-  }, {
-    event: 'close',
-    description: 'Emitted when the datepicker is hidden.'
-  }, {
-    event: 'open',
-    description: 'Emitted when the datepicker becomes visible.'
-  }, {
-    event: 'draw',
-    description: 'Emitted when the datepicker draws a new month.'
-  }, {
-    event: 'clear',
-    description: 'Emitted when the clear button is clicked.'
-  }],
-  slots: [{
-    name: 'default',
-    description: '(optional) Input to display and bind the datepicker to. Defaults to `<gl-form-input />`',
-    scopedProps: `{ formattedDate: string }`
-  }]
+  description
 };
 
 export default datepicker_documentation;

package/dist/components/base/datepicker/datepicker.js

@@ -50,11 +50,18 @@ var script = {
     GlButton
   },
   props: {
+    /**
+     * Selector of element that triggers the datepicker. Defaults to the calendar icon. Pass `null` to trigger on input focus.
+     */
     target: {
       type: String,
       required: false,
       default: ''
     },
+
+    /**
+     * DOM node to render calendar into. Defaults to the datepicker container. Pass `null` to use Pikaday default.
+     */
     container: {
       type: String,
       required: false,
@@ -85,6 +92,10 @@ var script = {
       required: false,
       default: null
     },
+
+    /**
+     * Accepts a function that accepts a date as argument and returns true if the date is disabled.
+     */
     disableDayFn: {
       type: Function,
       required: false,
@@ -105,6 +116,10 @@ var script = {
       required: false,
       default: defaultDateFormat
     },
+
+    /**
+     * Defaults to `off` when datepicker opens on focus, otherwise defaults to `null`.
+     */
     autocomplete: {
       type: String,
       required: false,
@@ -125,6 +140,10 @@ var script = {
       required: false,
       default: false
     },
+
+    /**
+     * Use this prop to set the initial date for the datepicker.
+     */
     defaultDate: {
       type: Date,
       required: false,
@@ -289,23 +308,40 @@ var script = {
 
   methods: {
     selected(date) {
+      /**
+       * Emitted when a new date has been selected.
+       * @property {Date} date The selected date
+       */
       this.$emit('input', date);
     },
 
     closed() {
+      /**
+       * Emitted when the datepicker is hidden.
+       */
       this.$emit('close');
     },
 
     opened() {
+      /**
+       * Emitted when the datepicker becomes visible.
+       */
       this.$emit('open');
     },
 
     cleared() {
       this.textInput = '';
+      /**
+       * Emitted when the clear button is clicked.
+       */
+
       this.$emit('clear');
     },
 
     draw() {
+      /**
+       * Emitted when the datepicker draws a new month.
+       */
       this.$emit('monthChange');
     },
 
@@ -324,7 +360,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('div',{staticClass:"gl-datepicker d-inline-block"},[(_vm.showDefaultField)?_c('div',{staticClass:"position-relative"},[_vm._t("default",[_c('gl-form-input',{staticClass:"gl-datepicker-input",class:_vm.renderClearButton ? 'gl-pr-9!' : 'gl-pr-7!',attrs:{"id":_vm.inputId,"name":_vm.inputName,"data-testid":"gl-datepicker-input","value":_vm.formattedDate,"placeholder":_vm.placeholder,"autocomplete":_vm.inputAutocomplete,"disabled":_vm.disabled,"aria-label":_vm.inputLabel},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onKeydown($event)}},model:{value:(_vm.textInput),callback:function ($$v) {_vm.textInput=$$v;},expression:"textInput"}})],{"formattedDate":_vm.formattedDate}),_vm._v(" "),_c('div',{staticClass:"gl-datepicker-actions"},[(_vm.renderClearButton)?_c('gl-button',{staticClass:"gl-pointer-events-auto",attrs:{"data-testid":"clear-button","aria-label":"Clear date","category":"tertiary","size":"small","icon":"clear"},on:{"click":_vm.cleared}}):_vm._e(),_vm._v(" "),(_vm.triggerOnFocus || _vm.disabled)?_c('span',{staticClass:"gl-px-2",class:_vm.disabled ? 'gl-text-gray-400' : 'gl-text-gray-500',attrs:{"data-testid":"datepicker-calendar-icon"}},[_c('gl-icon',{staticClass:"gl-display-block",attrs:{"name":"calendar","size":16}})],1):_c('gl-button',{ref:"calendarTriggerBtn",staticClass:"gl-pointer-events-auto",attrs:{"aria-label":"Open datepicker","category":"tertiary","size":"small","icon":"calendar"}})],1)],2):_vm._t("default",null,{"formattedDate":_vm.formattedDate})],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-datepicker d-inline-block"},[(_vm.showDefaultField)?_c('div',{staticClass:"gl-relative"},[_vm._t("default",[_c('gl-form-input',{staticClass:"gl-datepicker-input",class:_vm.renderClearButton ? 'gl-pr-9!' : 'gl-pr-7!',attrs:{"id":_vm.inputId,"name":_vm.inputName,"data-testid":"gl-datepicker-input","value":_vm.formattedDate,"placeholder":_vm.placeholder,"autocomplete":_vm.inputAutocomplete,"disabled":_vm.disabled,"aria-label":_vm.inputLabel},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onKeydown($event)}},model:{value:(_vm.textInput),callback:function ($$v) {_vm.textInput=$$v;},expression:"textInput"}})],{"formattedDate":_vm.formattedDate}),_vm._v(" "),_c('div',{staticClass:"gl-datepicker-actions"},[(_vm.renderClearButton)?_c('gl-button',{staticClass:"gl-pointer-events-auto",attrs:{"data-testid":"clear-button","aria-label":"Clear date","category":"tertiary","size":"small","icon":"clear"},on:{"click":_vm.cleared}}):_vm._e(),_vm._v(" "),(_vm.triggerOnFocus || _vm.disabled)?_c('span',{staticClass:"gl-px-2",class:_vm.disabled ? 'gl-text-gray-400' : 'gl-text-gray-500',attrs:{"data-testid":"datepicker-calendar-icon"}},[_c('gl-icon',{staticClass:"gl-display-block",attrs:{"name":"calendar","size":16}})],1):_c('gl-button',{ref:"calendarTriggerBtn",staticClass:"gl-pointer-events-auto",attrs:{"aria-label":"Open datepicker","category":"tertiary","size":"small","icon":"calendar"}})],1)],2):_vm._t("default",null,{"formattedDate":_vm.formattedDate})],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */