@gitlab/ui 36.7.1 → 37.2.0

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+# [37.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v37.1.0...v37.2.0) (2022-03-03)
+
+
+### Features
+
+* **GlPath:** allow changing selected index programmatically ([d711441](https://gitlab.com/gitlab-org/gitlab-ui/commit/d71144162363ae62ff4d1aeb3ee3dc956bd04108))
+
+# [37.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v37.0.0...v37.1.0) (2022-02-28)
+
+
+### Features
+
+* **GlPagination:** Add aria-current="page" on active page ([58b8993](https://gitlab.com/gitlab-org/gitlab-ui/commit/58b89935c32845406d85ce5898c501908e25d8ff))
+
+# [37.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v36.7.1...v37.0.0) (2022-02-22)
+
+
+### Features
+
+* **GlAlert:** drop contained behavior ([a2ae17e](https://gitlab.com/gitlab-org/gitlab-ui/commit/a2ae17eeb80eb9ea399b9f93047fc71764a3e1cb))
+
+
+### BREAKING CHANGES
+
+* **GlAlert:** This drops GlAlert's contained behavior.
+
+Alerts content width cannot be constrainted with the `contained` prop
+anymore. Existing alerts' content will exapnd to the take up the alert's
+full width.
+You should consider removing all `contained` usages from your code.
+`
+
 ## [36.7.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v36.7.0...v36.7.1) (2022-02-18)
 
 

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

@@ -76,15 +76,6 @@ var script = {
       required: false,
       default: ''
     },
-
-    /**
-     * Contained alerts have their content's width limited.
-     */
-    contained: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     sticky: {
       type: Boolean,
       required: false,
@@ -182,10 +173,9 @@ 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',{class:[
     'gl-alert',
-    { 'gl-alert-max-content gl-alert-layout-limited': _vm.contained },
     { 'gl-alert-sticky': _vm.sticky },
     { 'gl-alert-not-dismissible': !_vm.dismissible },
-    _vm.variantClass ]},[_c('div',{staticClass:"gl-alert-container"},[_c('gl-icon',{class:{ 'gl-alert-icon': true, 'gl-alert-icon-no-title': !_vm.title },attrs:{"name":_vm.iconName}}),_vm._v(" "),(_vm.dismissible)?_c('close-button',{ref:"dismiss",staticClass:"gl-dismiss-btn",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.onDismiss}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-content",attrs:{"role":"alert"}},[(_vm.title)?_c('h4',{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",_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()])],1)])};
+    _vm.variantClass ]},[_c('gl-icon',{class:{ 'gl-alert-icon': true, 'gl-alert-icon-no-title': !_vm.title },attrs:{"name":_vm.iconName}}),_vm._v(" "),(_vm.dismissible)?_c('close-button',{ref:"dismiss",staticClass:"gl-dismiss-btn",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.onDismiss}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-content",attrs:{"role":"alert"}},[(_vm.title)?_c('h4',{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",_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()])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/card/card.js

@@ -35,7 +35,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-card"},[(this.$slots.header)?_c('div',{staticClass:"gl-card-header",class:_vm.headerClass},[_vm._t("header")],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-card-body",class:_vm.bodyClass},[_vm._t("default")],2),_vm._v(" "),(this.$slots.footer)?_c('div',{staticClass:"gl-card-footer",class:_vm.footerClass},[_vm._t("footer")],2):_vm._e()])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-card"},[(_vm.$slots.header)?_c('div',{staticClass:"gl-card-header",class:_vm.headerClass},[_vm._t("header")],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-card-body",class:_vm.bodyClass},[_vm._t("default")],2),_vm._v(" "),(_vm.$slots.footer)?_c('div',{staticClass:"gl-card-footer",class:_vm.footerClass},[_vm._t("footer")],2):_vm._e()])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -1,7 +1,7 @@
 var description = "The drawer is used to show more information about a certain resource in the UI and potentially\nhandle actions on the information.\n\n### By default\n\n```html\n<gl-drawer :open=\"open\" @close=\"close\">\n  <template #header>Your Title</template>\n  <template>\n   ...children\n  </template>\n</gl-drawer>\n```\n\n- `v-bind:open` will be a boolean you will pass to `gl-drawer` and `@close` is a listener that will\nbe a function that will toggle open to `false`.\n";
 
 var drawer_documentation = {
-  followsDesignSystem: false,
+  followsDesignSystem: true,
   description
 };
 

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

@@ -1,32 +1,8 @@
-import examples from './examples';
-
-var description = "# Form Group Input\n\n<!-- STORY -->\n\nThe `GlFormInputGroup` component allows one to build more advanced text\ninput fields than generic `GlFormInput` when one needs that flexibility.\nBasic usage of the component:\n\n```html\n<div>\n  <gl-form-input-group>\n    <template #prepend>\n      <!-- Content to prepend your text input field -->\n    </template>\n    <template #append>\n      <!-- Content to append your text input field -->\n    </template>\n  </gl-form-input-group>\n</div>\n```\n\nOne can use any other component (custom or `<gl-*>`) in both slots or\nnot to use the slots at all. In the latter, the component will fallback\nto simple `GlFormInput`.\n\n## Predefined options\n\nSometimes custom text input from the user isn't desired. Instead, the\nuser should pick one of the predefined options that will automatically\npopulate the input field. Typically, such cases will also include an\nactionable button (like **Copy**) put into the `append` slot.\n\nTo achieve this effect, the `GlFormInputGroup` component accepts an\narray of options in the form of `predefinedOptions` param. For example:\n\n```javascript\nconst optionValues = [\n  { name: 'Option #1', value: 'Option #1 is selected!' },\n  { name: 'Option #2', value: 'Option #2 is selected!' },\n];\n...\n<gl-form-input-group :predefined-options=\"optionValues\" />\n```\n\nThis will tell `GlFormInputGroup` to render a dropdown in the `prepend`\nslot with all of the supplied options' `name`s. When one of the options\nis selected, the input field is automatically populated with the\noption's `value`. Check the \"Examples\" section below for \"With\npredefined options\" example.\n\n### Pro tips\n\nRead some useful tips below about specific usage of the component.\n\n### Readonly input\n\nOften you want to make sure user doesn't mess up the predefined content\npasted into the input field. In this case, you can set `readonly`\nparam to `true`. You can play with `Readonly` knob on the right.\n\n### Preselect the text to copy\n\nIf you set the `readonly` param on the `GlFormInputGroup` component,\nusers will still be able to manually select the text and copy it.\nHowever, it's more user-friendly to preselect the text for the users if\nthey click anywhere in the input field. This can be achieved by setting\nthe `select-on-click` param to `true`. You can play with\n`Select text on click` knob on the right. Even better, try enabling\n`Readonly`, `Select text on click`, and `Switch to predefined input`\naltogether. And, probably, remove `Prepend text`. Or leave it. It's your\ncall. :)\n";
+var description = "The `GlFormInputGroup` component allows one to build more advanced text\ninput fields than generic `GlFormInput` when one needs that flexibility.\nBasic usage of the component:\n\n```html\n<div>\n  <gl-form-input-group>\n    <template #prepend>\n      <!-- Content to prepend your text input field -->\n    </template>\n    <template #append>\n      <!-- Content to append your text input field -->\n    </template>\n  </gl-form-input-group>\n</div>\n```\n\nOne can use any other component (custom or `<gl-*>`) in both slots or\nnot to use the slots at all. In the latter, the component will fallback\nto simple `GlFormInput`.\n\n## Predefined options\n\nSometimes custom text input from the user isn't desired. Instead, the\nuser should pick one of the predefined options that will automatically\npopulate the input field. Typically, such cases will also include an\nactionable button (like **Copy**) put into the `append` slot.\n\nTo achieve this effect, the `GlFormInputGroup` component accepts an\narray of options in the form of `predefinedOptions` param. For example:\n\n```javascript\nconst optionValues = [\n  { name: 'Option #1', value: 'Option #1 is selected!' },\n  { name: 'Option #2', value: 'Option #2 is selected!' },\n];\n...\n<gl-form-input-group :predefined-options=\"optionValues\" />\n```\n\nThis will tell `GlFormInputGroup` to render a dropdown in the `prepend`\nslot with all of the supplied options' `name`s. When one of the options\nis selected, the input field is automatically populated with the\noption's `value`. Check the \"Examples\" section below for \"With\npredefined options\" example.\n\n### Pro tips\n\nRead some useful tips below about specific usage of the component.\n\n### Readonly input\n\nOften you want to make sure user doesn't mess up the predefined content\npasted into the input field. In this case, you can set `readonly`\nparam to `true`. You can play with `Readonly` knob on the right.\n\n### Preselect the text to copy\n\nIf you set the `readonly` param on the `GlFormInputGroup` component,\nusers will still be able to manually select the text and copy it.\nHowever, it's more user-friendly to preselect the text for the users if\nthey click anywhere in the input field. This can be achieved by setting\nthe `select-on-click` param to `true`. You can play with\n`Select text on click` knob on the right. Even better, try enabling\n`Readonly`, `Select text on click`, and `Switch to predefined input`\naltogether. And, probably, remove `Prepend text`. Or leave it. It's your\ncall. :)\n";
 
 var form_input_group_documentation = {
   followsDesignSystem: false,
-  description,
-  examples,
-  bootstrapComponent: 'b-form-input',
-  propsInfo: {
-    'select-on-click': {
-      type: Boolean,
-      additionalInfo: 'Automatically selects the content of the input field on click'
-    },
-    'predefined-options': {
-      type: Array,
-      additionalInfo: 'Array of options. Each option should have `name` and `value` information: {name: "Foo", value: "Bar"})'
-    }
-  },
-  slots: [{
-    name: 'default',
-    description: 'Allows replacement of default input field.'
-  }, {
-    name: 'prepend',
-    description: 'Is rendered in front of the input field.'
-  }, {
-    name: 'append',
-    description: 'Is rendered after the input field.'
-  }]
+  description
 };
 
 export default form_input_group_documentation;

package/dist/components/base/form/form_input_group/form_input_group.js

@@ -16,11 +16,18 @@ var script = {
   },
   mixins: [InputGroupMixin],
   props: {
+    /**
+     * Automatically selects the content of the input field on click.
+     */
     selectOnClick: {
       type: Boolean,
       required: false,
       default: false
     },
+
+    /**
+     * Array of options. Each option should have `name` and `value` information: {name: "Foo", value: "Bar"})
+     */
     predefinedOptions: {
       type: Array,
       required: false,

package/dist/components/base/loading_icon/loading_icon.js

@@ -67,7 +67,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(_vm.rootElementType,{tag:"component",staticClass:"gl-spinner-container",attrs:{"role":"status"}},[_c('span',{staticClass:"align-text-bottom",class:_vm.cssClasses,attrs:{"aria-label":_vm.label}})])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.rootElementType,{tag:"component",staticClass:"gl-spinner-container",attrs:{"role":"status"}},[_c('span',{staticClass:"gl-vertical-align-text-bottom!",class:_vm.cssClasses,attrs:{"aria-label":_vm.label}})])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/pagination/pagination.js

@@ -277,6 +277,26 @@ var script = {
 
     nextPageIsDisabled() {
       return this.pageIsDisabled(this.value + 1);
+    },
+
+    prevPageAriaLabel() {
+      return this.prevPageIsDisabled ? false : this.labelPrevPage || this.labelPage(this.value - 1);
+    },
+
+    nextPageAriaLabel() {
+      return this.nextPageIsDisabled ? false : this.labelNextPage || this.labelPage(this.value + 1);
+    },
+
+    prevPageHref() {
+      if (this.prevPageIsDisabled) return false;
+      if (this.isLinkBased) return this.linkGen(this.value - 1);
+      return '#';
+    },
+
+    nextPageHref() {
+      if (this.nextPageIsDisabled) return false;
+      if (this.isLinkBased) return this.linkGen(this.value + 1);
+      return '#';
     }
 
   },
@@ -313,6 +333,7 @@ var script = {
 
       if (isActivePage) {
         attrs.class.push('active');
+        attrs['aria-current'] = 'page';
       } // Disable previous and/or next buttons if needed
 
 
@@ -391,13 +412,13 @@ const __vue_script__ = script;
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.isVisible)?_c('ul',{staticClass:"pagination gl-pagination text-nowrap",class:_vm.wrapperClasses,attrs:{"role":"navigation","aria-label":"Pagination"}},[_c('li',{staticClass:"page-item",class:{
       disabled: _vm.prevPageIsDisabled,
       'flex-fill': _vm.isFillAlign,
-    }},[_c(_vm.prevPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link prev-page-item gl-display-flex",attrs:{"aria-disabled":_vm.prevPageIsDisabled,"aria-label":_vm.labelPrevPage || _vm.labelPage(_vm.value - 1),"href":_vm.isLinkBased ? _vm.linkGen(_vm.value - 1) : '#'},on:{"click":function($event){return _vm.handlePrevious($event, _vm.value - 1)}}},[_vm._t("previous",[_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.prevText))])],null,{ page: _vm.value - 1, disabled: _vm.prevPageIsDisabled })],2)],1),_vm._v(" "),_vm._l((_vm.visibleItems),function(item){return _c('li',{key:item.key,staticClass:"page-item",class:{
+    },attrs:{"aria-hidden":_vm.prevPageIsDisabled}},[_c(_vm.prevPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link prev-page-item gl-display-flex",attrs:{"aria-label":_vm.prevPageAriaLabel,"href":_vm.prevPageHref},on:{"click":function($event){return _vm.handlePrevious($event, _vm.value - 1)}}},[_vm._t("previous",[_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.prevText))])],null,{ page: _vm.value - 1, disabled: _vm.prevPageIsDisabled })],2)],1),_vm._v(" "),_vm._l((_vm.visibleItems),function(item){return _c('li',{key:item.key,staticClass:"page-item",class:{
       disabled: item.disabled,
       'flex-fill': _vm.isFillAlign,
     }},[_c(item.component,_vm._g(_vm._b({tag:"component",staticClass:"page-link",attrs:{"size":"md","aria-disabled":item.disabled}},'component',item.attrs,false),item.listeners),[_vm._t(item.slot,[_vm._v(_vm._s(item.content))],null,item.slotData)],2)],1)}),_vm._v(" "),_c('li',{staticClass:"page-item",class:{
       disabled: _vm.nextPageIsDisabled,
       'flex-fill': _vm.isFillAlign,
-    }},[_c(_vm.nextPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link next-page-item gl-display-flex",attrs:{"aria-disabled":_vm.nextPageIsDisabled,"aria-label":_vm.labelNextPage || _vm.labelPage(_vm.value + 1),"href":_vm.isLinkBased ? _vm.linkGen(_vm.value + 1) : '#'},on:{"click":function($event){return _vm.handleNext($event, _vm.value + 1)}}},[_vm._t("next",[_c('span',[_vm._v(_vm._s(_vm.nextText))]),_vm._v(" "),_c('gl-icon',{attrs:{"name":"chevron-right"}})],null,{ page: _vm.value + 1, disabled: _vm.nextPageIsDisabled })],2)],1)],2):_vm._e()};
+    },attrs:{"aria-hidden":_vm.nextPageIsDisabled}},[_c(_vm.nextPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link next-page-item gl-display-flex",attrs:{"aria-label":_vm.nextPageAriaLabel,"href":_vm.nextPageHref},on:{"click":function($event){return _vm.handleNext($event, _vm.value + 1)}}},[_vm._t("next",[_c('span',[_vm._v(_vm._s(_vm.nextText))]),_vm._v(" "),_c('gl-icon',{attrs:{"name":"chevron-right"}})],null,{ page: _vm.value + 1, disabled: _vm.nextPageIsDisabled })],2)],1)],2):_vm._e()};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/path/data.js

@@ -21,7 +21,8 @@ const mockPathItems = [{
   metric: '7d'
 }, {
   title: 'Eighth',
-  metric: '8d'
+  metric: '8d',
+  disabled: true
 }, {
   title: 'Ninth',
   metric: '9d'

package/dist/components/base/path/path.js

@@ -21,9 +21,10 @@ var script = {
      * A list of path items in the form:
      * ```
      * {
-     *   title:  String, required
-     *   metric: Any, optional
-     *   icon:   String, optional
+     *   title:    String, required
+     *   metric:   Any, optional
+     *   icon:     String, optional
+     *   disabled: Boolean, optional
      * }
      * ```
      */
@@ -88,10 +89,16 @@ var script = {
     }
 
   },
+  watch: {
+    items: {
+      immediate: true,
+
+      handler(items) {
+        const selectedIndex = items.findIndex(item => item.selected);
+        this.selectedIndex = selectedIndex > 0 ? selectedIndex : 0;
+      }
 
-  mounted() {
-    const selectedIndex = this.items.findIndex(item => item.selected);
-    this.selectedIndex = selectedIndex > 0 ? selectedIndex : 0;
+    }
   },
 
   beforeCreate() {
@@ -174,7 +181,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',{directives:[{name:"gl-resize-observer-directive",rawName:"v-gl-resize-observer-directive",value:(_vm.handleResize),expression:"handleResize"}],staticClass:"gl-path-nav",style:({ '--path-bg-color': _vm.backgroundColor }),attrs:{"data-testid":"gl-path-nav"}},[_c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayScrollLeft),expression:"displayScrollLeft"}],staticClass:"gl-path-fade gl-path-fade-left"},[_c('button',{staticClass:"gl-clear-icon-button",attrs:{"aria-label":"Scroll left"},on:{"click":_vm.scrollPathLeft}},[_c('gl-icon',{attrs:{"size":32,"name":"chevron-left"}})],1)]),_vm._v(" "),_c('ul',{ref:"pathNavList",staticClass:"gl-path-nav-list"},_vm._l((_vm.items),function(item,index){return _c('li',{key:index,ref:"pathListItems",refInFor:true,staticClass:"gl-path-nav-list-item",attrs:{"id":_vm.pathId(index)}},[_c('button',{class:_vm.pathItemClass(index),on:{"click":function($event){return _vm.onItemClicked(index)}}},[(_vm.shouldDisplayIcon(item.icon))?_c('gl-icon',{staticClass:"gl-mr-2",attrs:{"name":item.icon,"data-testid":"gl-path-item-icon"}}):_vm._e(),_vm._v("\n        "+_vm._s(item.title)),(item.metric)?_c('span',{staticClass:"gl-font-weight-normal gl-pl-2"},[_vm._v(_vm._s(item.metric))]):_vm._e()],1),_vm._v(" "),_vm._t("default",null,{"pathItem":item,"pathId":_vm.pathId(index)})],2)}),0),_vm._v(" "),_c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayScrollRight),expression:"displayScrollRight"}],staticClass:"gl-path-fade gl-path-fade-right"},[_c('button',{staticClass:"gl-clear-icon-button",attrs:{"aria-label":"Scroll right"},on:{"click":_vm.scrollPathRight}},[_c('gl-icon',{attrs:{"size":32,"name":"chevron-right"}})],1)])])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"gl-resize-observer-directive",rawName:"v-gl-resize-observer-directive",value:(_vm.handleResize),expression:"handleResize"}],staticClass:"gl-path-nav",style:({ '--path-bg-color': _vm.backgroundColor }),attrs:{"data-testid":"gl-path-nav"}},[_c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayScrollLeft),expression:"displayScrollLeft"}],staticClass:"gl-path-fade gl-path-fade-left"},[_c('button',{staticClass:"gl-clear-icon-button",attrs:{"aria-label":"Scroll left"},on:{"click":_vm.scrollPathLeft}},[_c('gl-icon',{attrs:{"size":32,"name":"chevron-left"}})],1)]),_vm._v(" "),_c('ul',{ref:"pathNavList",staticClass:"gl-path-nav-list"},_vm._l((_vm.items),function(item,index){return _c('li',{key:index,ref:"pathListItems",refInFor:true,staticClass:"gl-path-nav-list-item",attrs:{"id":_vm.pathId(index)}},[_c('button',{class:_vm.pathItemClass(index),attrs:{"category":item.disabled ? 'tertiary' : undefined,"disabled":item.disabled},on:{"click":function($event){return _vm.onItemClicked(index)}}},[(_vm.shouldDisplayIcon(item.icon))?_c('gl-icon',{staticClass:"gl-mr-2",attrs:{"name":item.icon,"data-testid":"gl-path-item-icon"}}):_vm._e(),_vm._v("\n        "+_vm._s(item.title)),(item.metric)?_c('span',{staticClass:"gl-font-weight-normal gl-pl-2"},[_vm._v(_vm._s(item.metric))]):_vm._e()],1),_vm._v(" "),_vm._t("default",null,{"pathItem":item,"pathId":_vm.pathId(index)})],2)}),0),_vm._v(" "),_c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayScrollRight),expression:"displayScrollRight"}],staticClass:"gl-path-fade gl-path-fade-right"},[_c('button',{staticClass:"gl-clear-icon-button",attrs:{"aria-label":"Scroll right"},on:{"click":_vm.scrollPathRight}},[_c('gl-icon',{attrs:{"size":32,"name":"chevron-right"}})],1)])])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/tabs/tab/tab.js

@@ -15,6 +15,10 @@ var script = {
       required: false,
       default: ''
     },
+
+    /**
+     * Query string parameter value to use when `gl-tabs` `sync-active-tab-with-query-params` prop is set to `true`.
+     */
     queryParamValue: {
       type: String,
       required: false,

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

@@ -1,20 +1,8 @@
-import examples from './examples';
-
-var description = "# Tabs\n\n<!-- STORY -->\n## Usage\n\nTabs are used to divide content into meaningful, related sections. Tabs allow users to focus on one\nspecific view at a time while maintaining sight of all the relevant content options available. Each\ntab, when active, will reveal it’s own unique content.\n\n## Using the component Vue\n\n~~~js\n<gl-tabs>\n  <gl-tab title=\"Tab 1\">\n    Tab panel 1\n  </gl-tab>\n  <gl-tab title=\"Tab 2\">\n    Tab panel 2\n  </gl-tab>\n</gl-tabs>\n~~~\n\n## Using the component HTML\n\n~~~js\n<div class=\"tabs gl-tabs\">\n  <ul role=\"tablist\" class=\"nav gl-tabs-nav\">\n    <li role=\"presentation\" class=\"nav-item\">\n      <a\n        role=\"tab\"\n        target=\"_self\"\n        href=\"#\"\n        class=\"nav-link gl-tab-nav-item gl-tab-nav-item-active gl-tab-nav-item-active-indigo\"\n      >Tab 1</a>\n    </li>\n    <li role=\"presentation\" class=\"nav-item\">\n      <a role=\"tab\" target=\"_self\" href=\"#\" class=\"nav-link gl-tab-nav-item\">Tab 2</a>\n    </li>\n  </ul>\n  <div class=\"tab-content gl-tab-content\">\n    <div role=\"tabpanel\" class=\"tab-pane gl-tab-content active\">Tab panel 1</div>\n    <div role=\"tabpanel\" class=\"tab-pane gl-tab-content\">Tab panel 2</div>\n  </div>\n</div>\n~~~\n\n## Adding Action Buttons to the Tabs\n\nTabs start and end slot can be populated via props: `action-primary`, `action-secondary` and\n`action-tertiary`. These props allow you to handle how a primary, secondary and tertiary button will\nbehave and look. The props receive an object as such:\n\n~~~js\n{\n  text: 'Save Changes',\n  attributes: [\n    { variant: 'info' },\n    { disabled: this.someState },\n    { class: 'some-class' },\n    ...\n  ]\n}\n~~~\n\n## Scrollable tab buttons\n\nBy default, `GlTab` will wrap tab buttons when they overflow the container. To\nenable horizontally scrolling for the tab buttons, use the `GlScrollableTabs`\ncomponent. This is a separate Vue component because of some limitations:\n\n- The action props (e.g., `action-primary`) are not respected in `GlScrollableTabs`. At the\n  moment, BootstrapVue does not provide a reliable way for us to achieve this desired combination.\n\n`GlScrollableTabs` composes `GlTabs` and passes through every listener, slot, or prop (with the above\nexceptions).\n\n~~~html\n<gl-scrollable-tabs>\n  <gl-tab v-for=\"tab in tabs\" :key=\"tab.key\" :title=\"tab.title\"> {{ tab.content }} </gl-tab>\n</gl-scrollable-tabs>\n~~~\n";
+var description = "Tabs are used to divide content into meaningful, related sections. Tabs allow users to focus on one\nspecific view at a time while maintaining sight of all the relevant content options available. Each\ntab, when active, will reveal it’s own unique content.\n\n## Using the component Vue\n\n~~~html\n<gl-tabs>\n  <gl-tab title=\"Tab 1\">\n    Tab panel 1\n  </gl-tab>\n  <gl-tab title=\"Tab 2\">\n    Tab panel 2\n  </gl-tab>\n</gl-tabs>\n~~~\n\n## Using the component HTML\n\n~~~html\n<div class=\"tabs gl-tabs\">\n  <ul role=\"tablist\" class=\"nav gl-tabs-nav\">\n    <li role=\"presentation\" class=\"nav-item\">\n      <a\n        role=\"tab\"\n        target=\"_self\"\n        href=\"#\"\n        class=\"nav-link gl-tab-nav-item gl-tab-nav-item-active gl-tab-nav-item-active-indigo\"\n      >Tab 1</a>\n    </li>\n    <li role=\"presentation\" class=\"nav-item\">\n      <a role=\"tab\" target=\"_self\" href=\"#\" class=\"nav-link gl-tab-nav-item\">Tab 2</a>\n    </li>\n  </ul>\n  <div class=\"tab-content gl-tab-content\">\n    <div role=\"tabpanel\" class=\"tab-pane gl-tab-content active\">Tab panel 1</div>\n    <div role=\"tabpanel\" class=\"tab-pane gl-tab-content\">Tab panel 2</div>\n  </div>\n</div>\n~~~\n\n## Adding Action Buttons to the Tabs\n\nTabs start and end slot can be populated via props: `action-primary`, `action-secondary` and\n`action-tertiary`. These props allow you to handle how a primary, secondary and tertiary button will\nbehave and look. The props receive an object as such:\n\n~~~js\n{\n  text: 'Save Changes',\n  attributes: [\n    { variant: 'info' },\n    { disabled: this.someState },\n    { class: 'some-class' },\n    ...\n  ]\n}\n~~~\n\n## Scrollable tab buttons\n\nBy default, `GlTab` will wrap tab buttons when they overflow the container. To\nenable horizontally scrolling for the tab buttons, use the `GlScrollableTabs`\ncomponent. This is a separate Vue component because of some limitations:\n\n- The action props (e.g., `action-primary`) are not respected in `GlScrollableTabs`. At the\n  moment, BootstrapVue does not provide a reliable way for us to achieve this desired combination.\n\n`GlScrollableTabs` composes `GlTabs` and passes through every listener, slot, or prop (with the above\nexceptions).\n\n~~~html\n<gl-scrollable-tabs>\n  <gl-tab v-for=\"tab in tabs\" :key=\"tab.key\" :title=\"tab.title\"> {{ tab.content }} </gl-tab>\n</gl-scrollable-tabs>\n~~~\n";
 
 var tabs_documentation = {
   description,
-  examples,
-  bootstrapComponent: 'b-tabs',
-  followsDesignSystem: true,
-  propsInfo: {
-    syncActiveTabWithQueryParams: {
-      additionalInfo: 'Sync active tab with query string parameters. Allows for deep linking into specific tabs.'
-    },
-    queryParamName: {
-      additionalInfo: 'Name to use for query string parameter.'
-    }
-  }
+  followsDesignSystem: true
 };
 
 export default tabs_documentation;

package/dist/components/base/tabs/tabs/tabs.js

@@ -45,11 +45,19 @@ var script = {
       required: false,
       default: false
     },
+
+    /**
+     * Sync active tab with query string parameters. Allows for deep linking into specific tabs.
+     */
     syncActiveTabWithQueryParams: {
       type: Boolean,
       required: false,
       default: false
     },
+
+    /**
+     * Name to use for query string parameter.
+     */
     queryParamName: {
       type: String,
       required: false,

package/dist/components/charts/area/area.documentation.js

@@ -1,11 +1,5 @@
-import examples from './examples';
-
-var description = "### Area Chart\n";
-
 var area_documentation = {
-  followsDesignSystem: false,
-  description,
-  examples
+  followsDesignSystem: false
 };
 
 export default area_documentation;

package/dist/components/charts/legend/legend.js

@@ -37,6 +37,10 @@ var script = {
       required: false,
       default: () => ({})
     },
+
+    /**
+     * Text for data average (overridden by prop if needed for internationalization)
+     */
     averageText: {
       type: String,
       required: false,
@@ -52,11 +56,19 @@ var script = {
       required: false,
       default: LEGEND_MIN_TEXT
     },
+
+    /**
+     * Text for max amount (overridden by prop if needed for internationalization)
+     */
     maxText: {
       type: String,
       required: false,
       default: LEGEND_MAX_TEXT
     },
+
+    /**
+     * Sets the display layout
+     */
     layout: {
       type: String,
       required: false,

package/dist/components/charts/line/line.documentation.js

@@ -1,11 +1,8 @@
-import examples from './examples';
-
-var description = "### Line Chart\n\nThis is a basic line chart.\n\n### Implementation Details\n\nThis component wraps the Gitlab UI `chart` component, which in turn wraps the ECharts component.\n\nSee the [chart](./?path=/story/charts-chart--default) component for more info.\n";
+var description = "This is a basic line chart.\n\n### Implementation Details\n\nThis component wraps the Gitlab UI `chart` component, which in turn wraps the ECharts component.\n\nSee the [chart](./?path=/story/charts-chart--default) component for more info.\n";
 
 var line_documentation = {
   followsDesignSystem: false,
-  description,
-  examples
+  description
 };
 
 export default line_documentation;