@gitlab/ui 32.19.0 → 32.20.2

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## [32.20.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.20.1...v32.20.2) (2021-10-19)
+
+
+### Bug Fixes
+
+* **Toggle:** Always keep aria checked whether true or false ([84a240e](https://gitlab.com/gitlab-org/gitlab-ui/commit/84a240ea14fb7f5827b014f89551f692899f3df4))
+
+## [32.20.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.20.0...v32.20.1) (2021-10-19)
+
+
+### Bug Fixes
+
+* **GlSingleStat:** forward listeners and attrs ([7781b6b](https://gitlab.com/gitlab-org/gitlab-ui/commit/7781b6b443fb525f38f4b9240d4d7558f8d5f072))
+
+# [32.20.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.19.1...v32.20.0) (2021-10-14)
+
+
+### Features
+
+* **Tabs:** Badge counter should use SR only ([4706ff0](https://gitlab.com/gitlab-org/gitlab-ui/commit/4706ff0fb1f6b550133d904868d19bc39d01ef45))
+
+## [32.19.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.19.0...v32.19.1) (2021-10-11)
+
+
+### Bug Fixes
+
+* **badge:** Override bootstrap hover style ([c065687](https://gitlab.com/gitlab-org/gitlab-ui/commit/c065687b05ad1d8f5e3a45da0d120517825dae41))
+
 # [32.19.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.18.0...v32.19.0) (2021-10-08)
 
 

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

@@ -1,6 +1,6 @@
 import _uniqueId from 'lodash/uniqueId';
 import { BCollapse } from 'bootstrap-vue/esm/index.js';
-import GlCollapseToggle from '../../../directives/collapse_toggle';
+import { GlCollapseToggleDirective } from '../../../directives/collapse_toggle';
 import GlButton from '../button/button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -11,7 +11,7 @@ var script = {
     GlButton
   },
   directives: {
-    GlCollapseToggle
+    GlCollapseToggle: GlCollapseToggleDirective
   },
   inject: ['accordionSetId', 'defaultHeaderLevel'],
   inheritAttrs: false,

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

@@ -1,4 +1,4 @@
-import { alertVariantOptions, alertVariantIconMap, newButtonCategoryOptions } from '../../../utils/constants';
+import { alertVariantOptions, alertVariantIconMap, buttonCategoryOptions } from '../../../utils/constants';
 import CloseButton from '../../shared_components/close_button/close_button';
 import GlButton from '../button/button';
 import GlIcon from '../icon/icon';
@@ -106,7 +106,7 @@ var script = {
         attrs: {
           href: this.primaryButtonLink,
           variant: 'confirm',
-          category: newButtonCategoryOptions.primary
+          category: buttonCategoryOptions.primary
         },
         listeners: {
           click: this.primaryButtonClicked
@@ -116,7 +116,7 @@ var script = {
         attrs: {
           href: this.secondaryButtonLink,
           variant: 'default',
-          category: newButtonCategoryOptions.secondary
+          category: buttonCategoryOptions.secondary
         },
         listeners: {
           click: this.secondaryButtonClicked

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

@@ -2,7 +2,23 @@ var description = "Buttons execute an action, either in the background or foregr
 
 var button_documentation = {
   description,
-  followsDesignSystem: true
+  followsDesignSystem: true,
+  bootstrapComponent: 'b-button',
+  bootstrapPropsInfo: {
+    category: {
+      enum: 'buttonCategoryOptions'
+    },
+    variant: {
+      enum: 'buttonVariantOptions'
+    },
+    size: {
+      enum: 'buttonSizeOptions'
+    }
+  },
+  events: [{
+    event: 'click',
+    description: 'Emitted when clicked on button'
+  }]
 };
 
 export default button_documentation;

package/dist/components/base/button/button.js

@@ -1,5 +1,5 @@
 import { BButton } from 'bootstrap-vue/esm/index.js';
-import { newButtonCategoryOptions, newButtonVariantOptions, newButtonSizeOptions, newButtonSizeOptionsMap } from '../../../utils/constants';
+import { buttonCategoryOptions, buttonVariantOptions, buttonSizeOptions, buttonSizeOptionsMap } from '../../../utils/constants';
 import { logWarning } from '../../../utils/utils';
 import { SafeLinkMixin } from '../../mixins/safe_link_mixin';
 import GlIcon from '../icon/icon';
@@ -17,20 +17,20 @@ var script = {
     category: {
       type: String,
       required: false,
-      default: newButtonCategoryOptions.primary,
-      validator: value => Object.keys(newButtonCategoryOptions).includes(value)
+      default: buttonCategoryOptions.primary,
+      validator: value => Object.keys(buttonCategoryOptions).includes(value)
     },
     variant: {
       type: String,
       required: false,
-      default: newButtonVariantOptions.default,
-      validator: value => Object.keys(newButtonVariantOptions).includes(value)
+      default: buttonVariantOptions.default,
+      validator: value => Object.keys(buttonVariantOptions).includes(value)
     },
     size: {
       type: String,
       required: false,
-      default: newButtonSizeOptions.medium,
-      validator: value => Object.keys(newButtonSizeOptions).includes(value)
+      default: buttonSizeOptions.medium,
+      validator: value => Object.keys(buttonSizeOptions).includes(value)
     },
     selected: {
       type: Boolean,
@@ -78,9 +78,9 @@ var script = {
 
     buttonClasses() {
       const classes = ['gl-button'];
-      const nonCategoryVariants = [newButtonVariantOptions.dashed, newButtonVariantOptions.link, newButtonVariantOptions.reset];
+      const nonCategoryVariants = [buttonVariantOptions.dashed, buttonVariantOptions.link, buttonVariantOptions.reset];
 
-      if (!nonCategoryVariants.includes(this.variant) && this.category !== newButtonCategoryOptions.primary) {
+      if (!nonCategoryVariants.includes(this.variant) && this.category !== buttonCategoryOptions.primary) {
         classes.push(`btn-${this.variant}-${this.category}`);
       }
 
@@ -98,7 +98,7 @@ var script = {
     },
 
     buttonSize() {
-      return newButtonSizeOptionsMap[this.size];
+      return buttonSizeOptionsMap[this.size];
     }
 
   },

package/dist/components/base/daterange_picker/daterange_picker.js

@@ -1,4 +1,4 @@
-import GlTooltip from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip';
 import { getDateInPast, getDateInFuture, getDayDifference } from '../../../utils/datetime_utility';
 import GlDatepicker from '../datepicker/datepicker';
 import GlIcon from '../icon/icon';
@@ -10,7 +10,7 @@ var script = {
     GlIcon
   },
   directives: {
-    GlTooltip
+    GlTooltip: GlTooltipDirective
   },
   props: {
     fromLabel: {

package/dist/components/base/dropdown/dropdown.js

@@ -1,6 +1,6 @@
 import { BDropdown } from 'bootstrap-vue/esm/index.js';
 import { selectAll, isVisible } from 'bootstrap-vue/esm/utils/dom';
-import { newButtonCategoryOptions, newDropdownVariantOptions, newButtonSizeOptions } from '../../../utils/constants';
+import { buttonCategoryOptions, newDropdownVariantOptions, buttonSizeOptions } from '../../../utils/constants';
 import { ButtonMixin } from '../../mixins/button_mixin';
 import GlButton from '../button/button';
 import GlIcon from '../icon/icon';
@@ -93,8 +93,8 @@ var script = {
     category: {
       type: String,
       required: false,
-      default: newButtonCategoryOptions.primary,
-      validator: value => Object.keys(newButtonCategoryOptions).includes(value)
+      default: buttonCategoryOptions.primary,
+      validator: value => Object.keys(buttonCategoryOptions).includes(value)
     },
     variant: {
       type: String,
@@ -105,8 +105,8 @@ var script = {
     size: {
       type: String,
       required: false,
-      default: newButtonSizeOptions.medium,
-      validator: value => Object.keys(newButtonSizeOptions).includes(value)
+      default: buttonSizeOptions.medium,
+      validator: value => Object.keys(buttonSizeOptions).includes(value)
     },
     icon: {
       type: String,
@@ -160,8 +160,8 @@ var script = {
       return [this.toggleClass, {
         'gl-button': true,
         'gl-dropdown-toggle': true,
-        [`btn-${this.variant}-secondary`]: this.category === newButtonCategoryOptions.secondary || this.category === newButtonCategoryOptions.tertiary && this.split,
-        [`btn-${this.variant}-tertiary`]: this.category === newButtonCategoryOptions.tertiary && !this.split,
+        [`btn-${this.variant}-secondary`]: this.category === buttonCategoryOptions.secondary || this.category === buttonCategoryOptions.tertiary && this.split,
+        [`btn-${this.variant}-tertiary`]: this.category === buttonCategoryOptions.tertiary && !this.split,
         'dropdown-icon-only': this.isIconOnly,
         'dropdown-icon-text': this.isIconWithText
       }];
@@ -172,7 +172,7 @@ var script = {
         'gl-button': true,
         'split-content-button': Boolean(this.text),
         'icon-split-content-button': Boolean(this.icon),
-        [`btn-${this.variant}-secondary`]: this.category === newButtonCategoryOptions.secondary || this.category === newButtonCategoryOptions.tertiary
+        [`btn-${this.variant}-secondary`]: this.category === buttonCategoryOptions.secondary || this.category === buttonCategoryOptions.tertiary
       }];
     },
 

package/dist/components/base/filtered_search/filtered_search.js

@@ -1,7 +1,7 @@
 import _cloneDeep from 'lodash/cloneDeep';
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
-import GlTooltip from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlIcon from '../icon/icon';
 import GlSearchBoxByClick from '../search_box_by_click/search_box_by_click';
 import GlFilteredSearchTerm from './filtered_search_term';
@@ -30,7 +30,7 @@ var script = {
     GlIcon
   },
   directives: {
-    GlTooltip
+    GlTooltip: GlTooltipDirective
   },
 
   provide() {

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

@@ -1,7 +1,7 @@
 import _findLast from 'lodash/findLast';
 import _uniqueId from 'lodash/uniqueId';
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
-import GlResizeObserverDirective from '../../../directives/resize_observer/resize_observer';
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import { glThemes } from '../../../utils/constants';
 import GlIcon from '../icon/icon';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

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

@@ -1,4 +1,4 @@
-import GlTooltip from '../../../directives/tooltip';
+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';
@@ -23,7 +23,7 @@ var script = {
     GlFormInputGroup
   },
   directives: {
-    GlTooltip
+    GlTooltip: GlTooltipDirective
   },
   props: {
     value: {

package/dist/components/base/sorting/sorting.js

@@ -1,4 +1,4 @@
-import GlTooltip from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlButton from '../button/button';
 import GlButtonGroup from '../button_group/button_group';
 import GlDropdown from '../dropdown/dropdown';
@@ -12,7 +12,7 @@ var script = {
     GlDropdown
   },
   directives: {
-    GlTooltip
+    GlTooltip: GlTooltipDirective
   },
   props: {
     /**

package/dist/components/base/tabs/tabs/examples/tabs.basic.example.js

@@ -3,7 +3,7 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 /* script */
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',[_c('gl-tab',{attrs:{"title":"First"}},[_vm._v("first content")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Second"}},[_vm._v("second content")])],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',[_c('gl-tab',{attrs:{"title":"Tab 1"}},[_vm._v("Tab panel 1")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Tab 2"}},[_vm._v("Tab panel 2")])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/tabs/tabs/examples/tabs.counterbadges.example.js

@@ -3,7 +3,7 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 /* script */
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',[_c('gl-tab',{scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('span',[_vm._v("1st")]),_vm._v(" "),_c('gl-badge',{staticClass:"gl-tab-counter-badge",attrs:{"size":"sm"}},[_vm._v("500")])]},proxy:true}])},[_vm._v("\n    first content\n  ")]),_vm._v(" "),_c('gl-tab',{scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('span',[_vm._v("2nd")]),_vm._v(" "),_c('gl-badge',{staticClass:"gl-tab-counter-badge",attrs:{"size":"sm"}},[_vm._v("250")])]},proxy:true}])},[_vm._v("\n    second content\n  ")]),_vm._v(" "),_c('gl-tab',{scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('span',[_vm._v("3rd")]),_vm._v(" "),_c('gl-badge',{staticClass:"gl-tab-counter-badge",attrs:{"size":"sm"}},[_vm._v("250")])]},proxy:true}])},[_vm._v("\n    third content\n  ")])],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',[_c('gl-tab',{scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('span',[_vm._v("Tab")]),_vm._v(" "),_c('gl-badge',{staticClass:"gl-tab-counter-badge",attrs:{"size":"sm"}},[_vm._v("500")]),_vm._v(" "),_c('span',{staticClass:"sr-only"},[_vm._v("items")])]},proxy:true}])},[_vm._v("\n    Tab panel 1\n  ")]),_vm._v(" "),_c('gl-tab',{scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('span',[_vm._v("Tab")]),_vm._v(" "),_c('gl-badge',{staticClass:"gl-tab-counter-badge",attrs:{"size":"sm"}},[_vm._v("250")]),_vm._v(" "),_c('span',{staticClass:"sr-only"},[_vm._v("items")])]},proxy:true}])},[_vm._v("\n    Tab panel 2\n  ")]),_vm._v(" "),_c('gl-tab',{scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('span',[_vm._v("Tab")]),_vm._v(" "),_c('gl-badge',{staticClass:"gl-tab-counter-badge",attrs:{"size":"sm"}},[_vm._v("250")]),_vm._v(" "),_c('span',{staticClass:"sr-only"},[_vm._v("items")])]},proxy:true}])},[_vm._v("\n    Tab panel 3\n  ")])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/tabs/tabs/examples/tabs.custom_title.example.js

@@ -3,7 +3,7 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 /* script */
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',[_c('gl-tab',{attrs:{"title":"First"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('i',[_vm._v("custom")]),_vm._v(" "),_c('strong',[_vm._v("Title")])]},proxy:true}])},[_vm._v("\n    first content\n  ")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Second"}},[_vm._v("second content")])],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',[_c('gl-tab',{attrs:{"title":"Tab 1"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('i',[_vm._v("custom")]),_vm._v(" "),_c('strong',[_vm._v("Title")])]},proxy:true}])},[_vm._v("\n    Tab panel 1\n  ")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Tab 2"}},[_vm._v("Tab panel 2")])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/tabs/tabs/examples/tabs.disabled.example.js

@@ -3,7 +3,7 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 /* script */
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',[_c('gl-tab',{attrs:{"title":"First"}},[_vm._v("first content")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Second"}},[_vm._v("second content")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Disabled","disabled":""}},[_vm._v("disabled")])],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',[_c('gl-tab',{attrs:{"title":"Tab 1"}},[_vm._v("Tab panel 1")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Tab 2"}},[_vm._v("Tab panel 2")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Tab 3","disabled":""}},[_vm._v("Disabled tab panel")])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/tabs/tabs/examples/tabs.justified.example.js

@@ -3,7 +3,7 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 /* script */
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',{attrs:{"justified":""}},[_c('gl-tab',{attrs:{"title":"First tab"}},[_vm._v("First content")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Second tab"}},[_vm._v("Second content")])],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-tabs',{attrs:{"justified":""}},[_c('gl-tab',{attrs:{"title":"Tab 1"}},[_vm._v("Tab panel 1")]),_vm._v(" "),_c('gl-tab',{attrs:{"title":"Tab 2"}},[_vm._v("Tab panel 2")])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/tabs/tabs/examples/tabs.scrollable.example.js

@@ -3,8 +3,8 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 var script = {
   tabs: Array(20).fill(1).map((_, index) => index + 1).map(id => ({
     id,
-    title: `Lorem ${id}`,
-    content: `(${id}) Lorem ipsum dolar sit amit...`
+    title: `Tab ${id}`,
+    content: `Tab panel ${id} content...`
   }))
 };
 

package/dist/components/base/tabs/tabs/examples/tabs.styles_only.example.js

@@ -4,7 +4,7 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 /* template */
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;_vm._self._c||_h;return _vm._m(0)};
-var __vue_staticRenderFns__ = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"tabs gl-tabs"},[_c('ul',{staticClass:"nav gl-tabs-nav",attrs:{"role":"tablist"}},[_c('li',{staticClass:"nav-item",attrs:{"role":"presentation"}},[_c('a',{staticClass:"nav-link gl-tab-nav-item gl-tab-nav-item-active gl-tab-nav-item-active-indigo",attrs:{"role":"tab","target":"_self","href":"#"}},[_vm._v("First")])]),_vm._v(" "),_c('li',{staticClass:"nav-item",attrs:{"role":"presentation"}},[_c('a',{staticClass:"nav-link gl-tab-nav-item",attrs:{"role":"tab","target":"_self","href":"#"}},[_vm._v("Second")])])]),_vm._v(" "),_c('div',{staticClass:"tab-content gl-tab-content"},[_c('div',{staticClass:"tab-pane active",attrs:{"role":"tabpanel"}},[_vm._v("first content")]),_vm._v(" "),_c('div',{staticClass:"tab-pane",attrs:{"role":"tabpanel"}},[_vm._v("second content")])])])}];
+var __vue_staticRenderFns__ = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"tabs gl-tabs"},[_c('ul',{staticClass:"nav gl-tabs-nav",attrs:{"role":"tablist"}},[_c('li',{staticClass:"nav-item",attrs:{"role":"presentation"}},[_c('a',{staticClass:"nav-link gl-tab-nav-item gl-tab-nav-item-active gl-tab-nav-item-active-indigo",attrs:{"role":"tab","target":"_self","href":"#"}},[_vm._v("Tab 1")])]),_vm._v(" "),_c('li',{staticClass:"nav-item",attrs:{"role":"presentation"}},[_c('a',{staticClass:"nav-link gl-tab-nav-item",attrs:{"role":"tab","target":"_self","href":"#"}},[_vm._v("Tab 2")])])]),_vm._v(" "),_c('div',{staticClass:"tab-content gl-tab-content"},[_c('div',{staticClass:"tab-pane active",attrs:{"role":"tabpanel"}},[_vm._v("Tab panel 1")]),_vm._v(" "),_c('div',{staticClass:"tab-pane",attrs:{"role":"tabpanel"}},[_vm._v("Tab panel 2")])])])}];
 
   /* style */
   const __vue_inject_styles__ = undefined;

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

@@ -1,6 +1,6 @@
 import _isArray from 'lodash/isArray';
 import _debounce from 'lodash/debounce';
-import GlResizeObserverDirective from '../../../../directives/resize_observer/resize_observer';
+import { GlResizeObserverDirective } from '../../../../directives/resize_observer/resize_observer';
 import GlIcon from '../../icon/icon';
 import GlTabs from './tabs';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

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

@@ -1,6 +1,6 @@
 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 theme=\"indigo\">\n  <gl-tab title=\"First\">\n    first content\n  </gl-tab>\n  <gl-tab title=\"Second\">\n    second content\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      >First</a>\n    </li>\n    <li role=\"presentation\" class=\"nav-item\">\n      <a role=\"tab\" target=\"_self\" href=\"#\" class=\"nav-link gl-tab-nav-item\">Second</a>\n    </li>\n  </ul>\n  <div class=\"tab-content gl-tab-content\">\n    <div role=\"tabpanel\" class=\"tab-pane gl-tab-content active\">first content</div>\n    <div role=\"tabpanel\" class=\"tab-pane gl-tab-content\">second content</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 theme=\"indigo\">\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\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 theme=\"indigo\">\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 theme=\"indigo\">\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,

package/dist/components/base/toggle/toggle.js

@@ -90,6 +90,10 @@ var script = {
 
     helpId() {
       return this.help ? `toggle-help-${this.uuid}` : undefined;
+    },
+
+    isChecked() {
+      return this.value ? 'true' : 'false';
     }
 
   },
@@ -123,7 +127,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
         'gl-toggle': true,
         'is-checked': _vm.value,
         'is-disabled': _vm.disabled,
-      },attrs:{"role":"switch","aria-checked":_vm.value,"aria-label":_vm.label,"aria-describedby":_vm.helpId,"type":"button"},on:{"click":function($event){$event.preventDefault();return _vm.toggleFeature($event)}}},[(_vm.isLoading)?_c('gl-loading-icon',{staticClass:"toggle-loading",attrs:{"color":"light"}}):_c('span',{class:{ 'toggle-icon': true, disabled: _vm.disabled }},[_c('gl-icon',{attrs:{"name":_vm.icon,"size":16}})],1)],1)]),_vm._v(" "),(_vm.help)?_c('span',{staticClass:"gl-help-label",attrs:{"id":_vm.helpId,"data-testid":"toggle-help"}},[_vm._t("help",[_vm._v(_vm._s(_vm.help))])],2):_vm._e()])};
+      },attrs:{"role":"switch","aria-checked":_vm.isChecked,"aria-label":_vm.label,"aria-describedby":_vm.helpId,"type":"button"},on:{"click":function($event){$event.preventDefault();return _vm.toggleFeature($event)}}},[(_vm.isLoading)?_c('gl-loading-icon',{staticClass:"toggle-loading",attrs:{"color":"light"}}):_c('span',{class:{ 'toggle-icon': true, disabled: _vm.disabled }},[_c('gl-icon',{attrs:{"name":_vm.icon,"size":16}})],1)],1)]),_vm._v(" "),(_vm.help)?_c('span',{staticClass:"gl-help-label",attrs:{"id":_vm.helpId,"data-testid":"toggle-help"}},[_vm._t("help",[_vm._v(_vm._s(_vm.help))])],2):_vm._e()])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/charts/heatmap/heatmap.js

@@ -1,5 +1,5 @@
 import merge from 'lodash/merge';
-import resizeObserver from '../../../directives/resize_observer/resize_observer';
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import { getDefaultTooltipContent } from '../../../utils/charts/config';
 import { TOOLTIP_LEFT_OFFSET } from '../../../utils/charts/constants';
 import { heatmapHues } from '../../../utils/charts/theme';
@@ -52,7 +52,7 @@ var script = {
     TooltipDefaultFormat
   },
   directives: {
-    resizeObserver
+    resizeObserver: GlResizeObserverDirective
   },
   mixins: [ToolboxMixin],
   props: {

package/dist/components/charts/single_stat/single_stat.js

@@ -97,7 +97,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-single-stat gl-display-flex gl-flex-direction-column gl-p-2"},[_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-text-gray-700 gl-mb-2"},[(_vm.showTitleIcon)?_c('gl-icon',{staticClass:"gl-mr-2",attrs:{"name":_vm.titleIcon,"data-testid":"title-icon"}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"gl-font-base gl-font-weight-normal",attrs:{"data-testid":"title-text"}},[_vm._v(_vm._s(_vm.title))])],1),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-baseline gl-font-weight-bold gl-text-gray-900"},[_c('span',{staticClass:"gl-font-size-h-display",class:{ 'gl-mr-2': !_vm.unit },attrs:{"data-testid":"displayValue"}},[(_vm.canAnimate)?_c('gl-animated-number',{attrs:{"number":Number(_vm.value),"decimal-places":_vm.animationDecimalPlaces},on:{"animating":function($event){return _vm.setHideUnits(true)},"animated":function($event){return _vm.setHideUnits(false)}}}):_c('span',{attrs:{"data-testid":"non-animated-value"}},[_vm._v(_vm._s(_vm.value))])],1),_vm._v(" "),(_vm.unit)?_c('span',{staticClass:"gl-font-sm gl-mr-2 gl-transition-medium gl-opacity-10",class:{ 'gl-opacity-0!': _vm.hideUnits },attrs:{"data-testid":"unit"}},[_vm._v(_vm._s(_vm.unit))]):_vm._e(),_vm._v(" "),(_vm.showMetaIcon)?_c('gl-icon',{class:_vm.textColor,attrs:{"name":_vm.metaIcon,"data-testid":"meta-icon"}}):_vm._e(),_vm._v(" "),(_vm.showBadge)?_c('gl-badge',{attrs:{"variant":_vm.variant,"icon":_vm.metaIcon,"data-testid":"meta-badge"}},[_vm._v(_vm._s(_vm.metaText))]):_vm._e()],1)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._g(_vm._b({staticClass:"gl-single-stat gl-display-flex gl-flex-direction-column gl-p-2"},'div',_vm.$attrs,false),_vm.$listeners),[_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-text-gray-700 gl-mb-2"},[(_vm.showTitleIcon)?_c('gl-icon',{staticClass:"gl-mr-2",attrs:{"name":_vm.titleIcon,"data-testid":"title-icon"}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"gl-font-base gl-font-weight-normal",attrs:{"data-testid":"title-text"}},[_vm._v(_vm._s(_vm.title))])],1),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-baseline gl-font-weight-bold gl-text-gray-900"},[_c('span',{staticClass:"gl-font-size-h-display",class:{ 'gl-mr-2': !_vm.unit },attrs:{"data-testid":"displayValue"}},[(_vm.canAnimate)?_c('gl-animated-number',{attrs:{"number":Number(_vm.value),"decimal-places":_vm.animationDecimalPlaces},on:{"animating":function($event){return _vm.setHideUnits(true)},"animated":function($event){return _vm.setHideUnits(false)}}}):_c('span',{attrs:{"data-testid":"non-animated-value"}},[_vm._v(_vm._s(_vm.value))])],1),_vm._v(" "),(_vm.unit)?_c('span',{staticClass:"gl-font-sm gl-mr-2 gl-transition-medium gl-opacity-10",class:{ 'gl-opacity-0!': _vm.hideUnits },attrs:{"data-testid":"unit"}},[_vm._v(_vm._s(_vm.unit))]):_vm._e(),_vm._v(" "),(_vm.showMetaIcon)?_c('gl-icon',{class:_vm.textColor,attrs:{"name":_vm.metaIcon,"data-testid":"meta-icon"}}):_vm._e(),_vm._v(" "),(_vm.showBadge)?_c('gl-badge',{attrs:{"variant":_vm.variant,"icon":_vm.metaIcon,"data-testid":"meta-badge"}},[_vm._v(_vm._s(_vm.metaText))]):_vm._e()],1)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/charts/sparkline/sparkline.js

@@ -1,5 +1,5 @@
 import merge from 'lodash/merge';
-import resizeObserver from '../../../directives/resize_observer/resize_observer';
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import defaultChartOptions, { mergeSeriesToOptions, symbolSize } from '../../../utils/charts/config';
 import Chart from '../chart/chart';
 import ChartTooltip from '../tooltip/tooltip';
@@ -12,7 +12,7 @@ var script = {
     ChartTooltip
   },
   directives: {
-    resizeObserver
+    resizeObserver: GlResizeObserverDirective
   },
   props: {
     /**

package/dist/components/mixins/button_mixin.js

@@ -1,9 +1,9 @@
-import { newButtonSizeOptionsMap } from '../../utils/constants';
+import { buttonSizeOptionsMap } from '../../utils/constants';
 
 const ButtonMixin = {
   computed: {
     buttonSize() {
-      return newButtonSizeOptionsMap[this.size];
+      return buttonSizeOptionsMap[this.size];
     }
 
   }

package/dist/components/shared_components/clear_icon_button/clear_icon_button.js

@@ -1,4 +1,4 @@
-import GlTooltip from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlButton from '../../base/button/button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -7,7 +7,7 @@ var script = {
     GlButton
   },
   directives: {
-    GlTooltip
+    GlTooltip: GlTooltipDirective
   },
   props: {
     title: {

package/dist/directives/collapse_toggle.js

@@ -1,2 +1 @@
-import { VBToggle } from 'bootstrap-vue/esm/index.js';
-export { VBToggle as default } from 'bootstrap-vue/esm/index.js';
+export { VBToggle as GlCollapseToggleDirective } from 'bootstrap-vue/esm/index.js';

package/dist/directives/modal.js

@@ -1,2 +1 @@
-import { VBModal } from 'bootstrap-vue/esm/index.js';
-export { VBModal as default } from 'bootstrap-vue/esm/index.js';
+export { VBModal as GlModalDirective } from 'bootstrap-vue/esm/index.js';

package/dist/directives/resize_observer/resize_observer.js

@@ -1,7 +1,7 @@
 import isFunction from 'lodash/isFunction';
 
 let observer = null;
-const ResizeObserverDirective = {
+const GlResizeObserverDirective = {
   bind(el, {
     value: resizeHandler
   }) {
@@ -34,4 +34,4 @@ const ResizeObserverDirective = {
 
 };
 
-export default ResizeObserverDirective;
+export { GlResizeObserverDirective };

package/dist/directives/tooltip.js

@@ -1,2 +1 @@
-import { VBTooltip } from 'bootstrap-vue/esm/index.js';
-export { VBTooltip as default } from 'bootstrap-vue/esm/index.js';
+export { VBTooltip as GlTooltipDirective } from 'bootstrap-vue/esm/index.js';