@gitlab/ui 32.19.0 → 32.20.2

package/dist/index.js

@@ -87,10 +87,10 @@ export { default as GlFriendlyWrap } from './components/utilities/friendly_wrap/
 export { default as GlIntersperse } from './components/utilities/intersperse/intersperse';
 export { default as GlSprintf } from './components/utilities/sprintf/sprintf';
 export { default as GlTruncate } from './components/utilities/truncate/truncate';
-export { default as GlModalDirective } from './directives/modal';
-export { default as GlTooltipDirective } from './directives/tooltip';
-export { default as GlResizeObserverDirective } from './directives/resize_observer/resize_observer';
-export { default as GlCollapseToggleDirective } from './directives/collapse_toggle';
+export { GlModalDirective } from './directives/modal';
+export { GlTooltipDirective } from './directives/tooltip';
+export { GlResizeObserverDirective } from './directives/resize_observer/resize_observer';
+export { GlCollapseToggleDirective } from './directives/collapse_toggle';
 export { SafeLinkDirective as GlSafeLinkDirective } from './directives/safe_link/safe_link';
 export { SafeHtmlDirective as GlSafeHtmlDirective } from './directives/safe_html/safe_html';
 export { OutsideDirective as GlOutsideDirective } from './directives/outside/outside';

package/dist/utils/constants.js

@@ -69,12 +69,12 @@ const formStateOptions = {
   valid: true,
   invalid: false
 };
-const newButtonCategoryOptions = {
+const buttonCategoryOptions = {
   primary: 'primary',
   secondary: 'secondary',
   tertiary: 'tertiary'
 };
-const newButtonVariantOptions = {
+const buttonVariantOptions = {
   default: 'default',
   confirm: 'confirm',
   info: 'info (deprecated)',
@@ -93,9 +93,9 @@ const newButtonVariantOptions = {
   reset: 'gl-reset'
 };
 const badgeForButtonOptions = {
-  [newButtonVariantOptions.default]: badgeVariantOptions.neutral,
-  [newButtonVariantOptions.confirm]: badgeVariantOptions.info,
-  [newButtonVariantOptions.danger]: badgeVariantOptions.danger
+  [buttonVariantOptions.default]: badgeVariantOptions.neutral,
+  [buttonVariantOptions.confirm]: badgeVariantOptions.info,
+  [buttonVariantOptions.danger]: badgeVariantOptions.danger
 };
 const newDropdownVariantOptions = {
   default: 'default',
@@ -106,11 +106,11 @@ const newDropdownVariantOptions = {
   danger: 'danger',
   link: 'link'
 };
-const newButtonSizeOptions = {
+const buttonSizeOptions = {
   small: 'small',
   medium: 'medium'
 };
-const newButtonSizeOptionsMap = {
+const buttonSizeOptionsMap = {
   small: 'sm',
   medium: 'md'
 }; // size options all have corresponding styles (e.g. .s12 defined in icon.scss)
@@ -251,4 +251,4 @@ const loadingIconSizes = {
   'xl (64x64)': 'xl'
 };
 
-export { COMMA, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, colorThemes, columnOptions, defaultDateFormat, drawerVariants, focusableTags, formInputSizes, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, maxZIndex, modalButtonDefaults, modalSizeOptions, newButtonCategoryOptions, newButtonSizeOptions, newButtonSizeOptionsMap, newButtonVariantOptions, newDropdownVariantOptions, popoverPlacements, resizeDebounceTime, sizeOptions, sizeOptionsWithNoDefault, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };
+export { COMMA, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonSizeOptionsMap, buttonVariantOptions, colorThemes, columnOptions, defaultDateFormat, drawerVariants, focusableTags, formInputSizes, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, maxZIndex, modalButtonDefaults, modalSizeOptions, newDropdownVariantOptions, popoverPlacements, resizeDebounceTime, sizeOptions, sizeOptionsWithNoDefault, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };

package/index.js

@@ -101,10 +101,10 @@ export { default as GlSprintf } from './src/components/utilities/sprintf/sprintf
 export { default as GlTruncate } from './src/components/utilities/truncate/truncate.vue';
 
 // Directives
-export { default as GlModalDirective } from './src/directives/modal';
-export { default as GlTooltipDirective } from './src/directives/tooltip';
-export { default as GlResizeObserverDirective } from './src/directives/resize_observer/resize_observer';
-export { default as GlCollapseToggleDirective } from './src/directives/collapse_toggle';
+export { GlModalDirective } from './src/directives/modal';
+export { GlTooltipDirective } from './src/directives/tooltip';
+export { GlResizeObserverDirective } from './src/directives/resize_observer/resize_observer';
+export { GlCollapseToggleDirective } from './src/directives/collapse_toggle';
 export { SafeLinkDirective as GlSafeLinkDirective } from './src/directives/safe_link/safe_link';
 export { SafeHtmlDirective as GlSafeHtmlDirective } from './src/directives/safe_html/safe_html';
 export { OutsideDirective as GlOutsideDirective } from './src/directives/outside/outside';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.19.0",
+  "version": "32.20.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -84,19 +84,19 @@
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "9.4.0",
     "@gitlab/stylelint-config": "2.3.0",
-    "@gitlab/svgs": "1.217.0",
+    "@gitlab/svgs": "1.218.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.3.10",
-    "@storybook/addon-docs": "6.3.10",
-    "@storybook/addon-essentials": "6.3.10",
+    "@storybook/addon-a11y": "6.3.12",
+    "@storybook/addon-docs": "6.3.12",
+    "@storybook/addon-essentials": "6.3.12",
     "@storybook/addon-knobs": "6.3.1",
-    "@storybook/addon-storyshots": "6.3.10",
-    "@storybook/addon-storyshots-puppeteer": "6.3.10",
-    "@storybook/addon-viewport": "6.3.10",
-    "@storybook/theming": "6.3.10",
-    "@storybook/vue": "6.3.10",
+    "@storybook/addon-storyshots": "6.3.12",
+    "@storybook/addon-storyshots-puppeteer": "6.3.12",
+    "@storybook/addon-viewport": "6.3.12",
+    "@storybook/theming": "6.3.12",
+    "@storybook/vue": "6.3.12",
     "@vue/test-utils": "1.1.3",
     "autoprefixer": "^9.7.6",
     "babel-jest": "^26.6.3",

package/src/components/base/accordion/accordion_item.spec.js

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { BCollapse } from 'bootstrap-vue';
-import GlCollapseToggleDirective from '../../../directives/collapse_toggle';
+import { GlCollapseToggleDirective } from '../../../directives/collapse_toggle';
 import { waitForAnimationFrame } from '../../../utils/test_utils';
 import GlButton from '../button/button.vue';
 import GlAccordionItem from './accordion_item.vue';

package/src/components/base/accordion/accordion_item.vue

@@ -1,7 +1,7 @@
 <script>
 import { BCollapse } from 'bootstrap-vue';
 import { uniqueId } from 'lodash';
-import GlCollapseToggle from '../../../directives/collapse_toggle';
+import { GlCollapseToggleDirective } from '../../../directives/collapse_toggle';
 import GlButton from '../button/button.vue';
 
 export default {
@@ -11,7 +11,7 @@ export default {
     GlButton,
   },
   directives: {
-    GlCollapseToggle,
+    GlCollapseToggle: GlCollapseToggleDirective,
   },
   inject: ['accordionSetId', 'defaultHeaderLevel'],
   inheritAttrs: false,

package/src/components/base/alert/alert.spec.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { newButtonCategoryOptions } from '../../../utils/constants';
+import { buttonCategoryOptions } from '../../../utils/constants';
 import GlAlert from './alert.vue';
 
 const DummyComponent = {
@@ -89,7 +89,7 @@ describe('Alert component', () => {
 
       const props = button.props();
       expect('href' in props).toBe(false);
-      expect(props.category).toEqual(newButtonCategoryOptions.primary);
+      expect(props.category).toEqual(buttonCategoryOptions.primary);
     });
 
     it('emits a primaryAction event when primary button is clicked', () => {
@@ -126,7 +126,7 @@ describe('Alert component', () => {
 
       const attrs = button.attributes();
       expect('href' in attrs).toBe(false);
-      expect(attrs.category).toEqual(newButtonCategoryOptions.secondary);
+      expect(attrs.category).toEqual(buttonCategoryOptions.secondary);
     });
 
     it('emits a secondaryAction event when secondary button is clicked', () => {

package/src/components/base/alert/alert.vue

@@ -2,7 +2,7 @@
 import {
   alertVariantOptions,
   alertVariantIconMap,
-  newButtonCategoryOptions,
+  buttonCategoryOptions,
 } from '../../../utils/constants';
 import CloseButton from '../../shared_components/close_button/close_button.vue';
 import GlButton from '../button/button.vue';
@@ -102,7 +102,7 @@ export default {
           attrs: {
             href: this.primaryButtonLink,
             variant: 'confirm',
-            category: newButtonCategoryOptions.primary,
+            category: buttonCategoryOptions.primary,
           },
           listeners: {
             click: this.primaryButtonClicked,
@@ -113,7 +113,7 @@ export default {
           attrs: {
             href: this.secondaryButtonLink,
             variant: 'default',
-            category: newButtonCategoryOptions.secondary,
+            category: buttonCategoryOptions.secondary,
           },
           listeners: {
             click: this.secondaryButtonClicked,

package/src/components/base/avatar/avatar.stories.js

@@ -1,7 +1,7 @@
 import { select, text, number, withKnobs } from '@storybook/addon-knobs';
 import Vue from 'vue';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import GlTooltipDirective from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip';
 import { avatarSizeOptions, avatarShapeOptions, tooltipPlacements } from '../../../utils/constants';
 import readme from './avatar.md';
 

package/src/components/base/avatar_labeled/avatar_labeled.stories.js

@@ -1,7 +1,7 @@
 import { text, withKnobs, select } from '@storybook/addon-knobs';
 import Vue from 'vue';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import GlTooltipDirective from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip';
 import { avatarSizeOptions, avatarShapeOptions, tooltipPlacements } from '../../../utils/constants';
 import readme from './avatar_labeled.md';
 

package/src/components/base/badge/badge.scss

@@ -18,6 +18,7 @@
       // Needed to override bootstrap's badge variant background
       background-color: $bg;
       box-shadow: inset 0 0 0 $gl-border-size-1 $border-color;
+      @include gl-text-decoration-none;
     }
 
     &:focus {

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

@@ -3,4 +3,22 @@ import description from './button.md';
 export default {
   description,
   followsDesignSystem: true,
+  bootstrapComponent: 'b-button',
+  bootstrapPropsInfo: {
+    category: {
+      enum: 'buttonCategoryOptions',
+    },
+    variant: {
+      enum: 'buttonVariantOptions',
+    },
+    size: {
+      enum: 'buttonSizeOptions',
+    },
+  },
+  events: [
+    {
+      event: 'click',
+      description: 'Emitted when clicked on button',
+    },
+  ],
 };

package/src/components/base/button/button.stories.js

@@ -1,9 +1,9 @@
 import { GlButton } from '../../../../index';
 import {
-  newButtonCategoryOptions,
-  newButtonVariantOptions,
-  newButtonSizeOptions,
+  buttonCategoryOptions,
+  buttonVariantOptions,
   badgeForButtonOptions,
+  buttonSizeOptions,
   targetOptions,
 } from '../../../utils/constants';
 import readme from './button.md';
@@ -105,8 +105,8 @@ export const IconButton = (args, { argTypes }) => ({
     `,
 });
 IconButton.args = generateProps({
-  category: newButtonCategoryOptions.primary,
-  variant: newButtonVariantOptions.danger,
+  category: buttonCategoryOptions.primary,
+  variant: buttonVariantOptions.danger,
 });
 
 export const DropdownButton = (args, { argTypes }) => ({
@@ -186,7 +186,7 @@ export const DropdownIconOnlyButton = (args, { argTypes }) => ({
     `),
 });
 DropdownIconOnlyButton.args = generateProps({
-  category: newButtonCategoryOptions.tertiary,
+  category: buttonCategoryOptions.tertiary,
 });
 
 export const DropdownSplitButton = (args, { argTypes }) => ({
@@ -356,10 +356,10 @@ LabelButton.parameters = { controls: { disable: true } };
 export const AllVariantsAndCategories = (args, { argTypes = {} }) => ({
   props: Object.keys(argTypes),
   components,
-  variants: Object.keys(newButtonVariantOptions).filter(
-    (variant) => !newButtonVariantOptions[variant].includes('deprecated')
+  variants: Object.keys(buttonVariantOptions).filter(
+    (variant) => !buttonVariantOptions[variant].includes('deprecated')
   ),
-  categories: newButtonCategoryOptions,
+  categories: buttonCategoryOptions,
   style: {
     display: 'grid',
     gridTemplateColumns: 'repeat(3, 150px)',
@@ -453,7 +453,7 @@ export const Badges = (args, { argTypes = {} }) => ({
   props: Object.keys(argTypes),
   components,
   variants: Object.keys(badgeForButtonOptions),
-  categories: newButtonCategoryOptions,
+  categories: buttonCategoryOptions,
   style: {
     display: 'grid',
     gridTemplateColumns: 'repeat(3, 200px)',
@@ -513,19 +513,19 @@ export default {
     category: {
       control: {
         type: 'select',
-        options: newButtonCategoryOptions,
+        options: buttonCategoryOptions,
       },
     },
     variant: {
       control: {
         type: 'select',
-        options: newButtonVariantOptions,
+        options: buttonVariantOptions,
       },
     },
     size: {
       control: {
         type: 'select',
-        options: newButtonSizeOptions,
+        options: buttonSizeOptions,
       },
     },
     target: {

package/src/components/base/button/button.vue

@@ -1,10 +1,10 @@
 <script>
 import { BButton } from 'bootstrap-vue';
 import {
-  newButtonCategoryOptions,
-  newButtonVariantOptions,
-  newButtonSizeOptions,
-  newButtonSizeOptionsMap,
+  buttonCategoryOptions,
+  buttonVariantOptions,
+  buttonSizeOptions,
+  buttonSizeOptionsMap,
 } from '../../../utils/constants';
 import { logWarning } from '../../../utils/utils';
 import { SafeLinkMixin } from '../../mixins/safe_link_mixin';
@@ -22,20 +22,20 @@ export default {
     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,
@@ -81,14 +81,14 @@ export default {
     buttonClasses() {
       const classes = ['gl-button'];
       const nonCategoryVariants = [
-        newButtonVariantOptions.dashed,
-        newButtonVariantOptions.link,
-        newButtonVariantOptions.reset,
+        buttonVariantOptions.dashed,
+        buttonVariantOptions.link,
+        buttonVariantOptions.reset,
       ];
 
       if (
         !nonCategoryVariants.includes(this.variant) &&
-        this.category !== newButtonCategoryOptions.primary
+        this.category !== buttonCategoryOptions.primary
       ) {
         classes.push(`btn-${this.variant}-${this.category}`);
       }
@@ -106,7 +106,7 @@ export default {
       return classes;
     },
     buttonSize() {
-      return newButtonSizeOptionsMap[this.size];
+      return buttonSizeOptionsMap[this.size];
     },
   },
   mounted() {

package/src/components/base/daterange_picker/daterange_picker.vue

@@ -1,5 +1,5 @@
 <script>
-import GlTooltip from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip';
 import { getDayDifference, getDateInPast, getDateInFuture } from '../../../utils/datetime_utility';
 import GlDatepicker from '../datepicker/datepicker.vue';
 import GlIcon from '../icon/icon.vue';
@@ -10,7 +10,7 @@ export default {
     GlIcon,
   },
   directives: {
-    GlTooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     fromLabel: {

package/src/components/base/dropdown/dropdown.stories.js

@@ -11,9 +11,9 @@ import {
   GlDropdownForm,
 } from '../../../../index';
 import {
-  newButtonCategoryOptions,
+  buttonCategoryOptions,
   newDropdownVariantOptions,
-  newButtonSizeOptions,
+  buttonSizeOptions,
 } from '../../../utils/constants';
 import readme from './dropdown.md';
 
@@ -53,7 +53,7 @@ function generateProps({
   const props = {
     category: {
       type: String,
-      default: select('category', newButtonCategoryOptions, category),
+      default: select('category', buttonCategoryOptions, category),
     },
     variant: {
       type: String,
@@ -61,7 +61,7 @@ function generateProps({
     },
     size: {
       type: String,
-      default: select('size', newButtonSizeOptions, size),
+      default: select('size', buttonSizeOptions, size),
     },
     block: {
       type: Boolean,
@@ -196,7 +196,7 @@ documentedStoriesOf('base/dropdown', readme)
   .add('secondary', () => ({
     props: generateProps({
       text: 'Some dropdown',
-      category: newButtonCategoryOptions.secondary,
+      category: buttonCategoryOptions.secondary,
       variant: newDropdownVariantOptions.confirm,
     }),
     components,

package/src/components/base/dropdown/dropdown.vue

@@ -2,9 +2,9 @@
 import { BDropdown } from 'bootstrap-vue';
 import { isVisible, selectAll } from 'bootstrap-vue/src/utils/dom';
 import {
-  newButtonCategoryOptions,
+  buttonCategoryOptions,
   newDropdownVariantOptions,
-  newButtonSizeOptions,
+  buttonSizeOptions,
 } from '../../../utils/constants';
 import { ButtonMixin } from '../../mixins/button_mixin';
 import GlButton from '../button/button.vue';
@@ -100,8 +100,8 @@ export default {
     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,
@@ -112,8 +112,8 @@ export default {
     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,
@@ -163,10 +163,10 @@ export default {
           'gl-button': true,
           'gl-dropdown-toggle': true,
           [`btn-${this.variant}-secondary`]:
-            this.category === newButtonCategoryOptions.secondary ||
-            (this.category === newButtonCategoryOptions.tertiary && this.split),
+            this.category === buttonCategoryOptions.secondary ||
+            (this.category === buttonCategoryOptions.tertiary && this.split),
           [`btn-${this.variant}-tertiary`]:
-            this.category === newButtonCategoryOptions.tertiary && !this.split,
+            this.category === buttonCategoryOptions.tertiary && !this.split,
           'dropdown-icon-only': this.isIconOnly,
           'dropdown-icon-text': this.isIconWithText,
         },
@@ -180,8 +180,8 @@ export default {
           '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,
+            this.category === buttonCategoryOptions.secondary ||
+            this.category === buttonCategoryOptions.tertiary,
         },
       ];
     },

package/src/components/base/filtered_search/filtered_search.vue

@@ -2,7 +2,7 @@
 import { cloneDeep } from 'lodash';
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
-import GlTooltip from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlIcon from '../icon/icon.vue';
 import GlSearchBoxByClick from '../search_box_by_click/search_box_by_click.vue';
 import GlFilteredSearchTerm from './filtered_search_term.vue';
@@ -34,7 +34,7 @@ export default {
     GlSearchBoxByClick,
     GlIcon,
   },
-  directives: { GlTooltip },
+  directives: { GlTooltip: GlTooltipDirective },
   provide() {
     portalUuid += 1;
     this.portalName = `filters_portal_${portalUuid}`;

package/src/components/base/path/path.vue

@@ -1,7 +1,7 @@
 <script>
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
 import { uniqueId, findLast } from 'lodash';
-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.vue';
 

package/src/components/base/search_box_by_click/search_box_by_click.vue

@@ -1,5 +1,5 @@
 <script>
-import GlTooltip from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlClearIconButton from '../../shared_components/clear_icon_button/clear_icon_button.vue';
 import GlButton from '../button/button.vue';
 import GlDropdown from '../dropdown/dropdown.vue';
@@ -23,7 +23,7 @@ export default {
     GlFormInputGroup,
   },
   directives: {
-    GlTooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     value: {

package/src/components/base/sorting/sorting.vue

@@ -1,5 +1,5 @@
 <script>
-import GlTooltip from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlButton from '../button/button.vue';
 import GlButtonGroup from '../button_group/button_group.vue';
 import GlDropdown from '../dropdown/dropdown.vue';
@@ -12,7 +12,7 @@ export default {
     GlDropdown,
   },
   directives: {
-    GlTooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     /**

package/src/components/base/tabs/tabs/examples/tabs.basic.example.vue

@@ -1,6 +1,6 @@
 <template>
   <gl-tabs>
-    <gl-tab title="First">first content</gl-tab>
-    <gl-tab title="Second">second content</gl-tab>
+    <gl-tab title="Tab 1">Tab panel 1</gl-tab>
+    <gl-tab title="Tab 2">Tab panel 2</gl-tab>
   </gl-tabs>
 </template>

package/src/components/base/tabs/tabs/examples/tabs.counterbadges.example.vue

@@ -2,24 +2,27 @@
   <gl-tabs>
     <gl-tab>
       <template #title>
-        <span>1st</span>
+        <span>Tab</span>
         <gl-badge size="sm" class="gl-tab-counter-badge">500</gl-badge>
+        <span class="sr-only">items</span>
       </template>
-      first content
+      Tab panel 1
     </gl-tab>
     <gl-tab>
       <template #title>
-        <span>2nd</span>
+        <span>Tab</span>
         <gl-badge size="sm" class="gl-tab-counter-badge">250</gl-badge>
+        <span class="sr-only">items</span>
       </template>
-      second content
+      Tab panel 2
     </gl-tab>
     <gl-tab>
       <template #title>
-        <span>3rd</span>
+        <span>Tab</span>
         <gl-badge size="sm" class="gl-tab-counter-badge">250</gl-badge>
+        <span class="sr-only">items</span>
       </template>
-      third content
+      Tab panel 3
     </gl-tab>
   </gl-tabs>
 </template>

package/src/components/base/tabs/tabs/examples/tabs.custom_title.example.vue

@@ -1,9 +1,9 @@
 <template>
   <gl-tabs>
-    <gl-tab title="First">
+    <gl-tab title="Tab 1">
       <template #title><i>custom</i> <strong>Title</strong></template>
-      first content
+      Tab panel 1
     </gl-tab>
-    <gl-tab title="Second">second content</gl-tab>
+    <gl-tab title="Tab 2">Tab panel 2</gl-tab>
   </gl-tabs>
 </template>

package/src/components/base/tabs/tabs/examples/tabs.disabled.example.vue

@@ -1,7 +1,7 @@
 <template>
   <gl-tabs>
-    <gl-tab title="First">first content</gl-tab>
-    <gl-tab title="Second">second content</gl-tab>
-    <gl-tab title="Disabled" disabled>disabled</gl-tab>
+    <gl-tab title="Tab 1">Tab panel 1</gl-tab>
+    <gl-tab title="Tab 2">Tab panel 2</gl-tab>
+    <gl-tab title="Tab 3" disabled>Disabled tab panel</gl-tab>
   </gl-tabs>
 </template>