@gitlab/ui 32.19.1 → 32.20.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [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)
 
 

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/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/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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.19.1",
+  "version": "32.20.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -88,15 +88,15 @@
     "@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/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/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/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/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>

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

@@ -1,6 +1,6 @@
 <template>
   <gl-tabs justified>
-    <gl-tab title="First tab">First content</gl-tab>
-    <gl-tab title="Second tab">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.scrollable.example.vue

@@ -5,8 +5,8 @@ export default {
     .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...`,
     })),
 };
 </script>

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

@@ -7,16 +7,16 @@
           target="_self"
           href="#"
           class="nav-link gl-tab-nav-item gl-tab-nav-item-active gl-tab-nav-item-active-indigo"
-          >First</a
+          >Tab 1</a
         >
       </li>
       <li role="presentation" class="nav-item">
-        <a role="tab" target="_self" href="#" class="nav-link gl-tab-nav-item">Second</a>
+        <a role="tab" target="_self" href="#" class="nav-link gl-tab-nav-item">Tab 2</a>
       </li>
     </ul>
     <div class="tab-content gl-tab-content">
-      <div role="tabpanel" class="tab-pane active">first content</div>
-      <div role="tabpanel" class="tab-pane">second content</div>
+      <div role="tabpanel" class="tab-pane active">Tab panel 1</div>
+      <div role="tabpanel" class="tab-pane">Tab panel 2</div>
     </div>
   </div>
 </template>

package/src/components/base/tabs/tabs/tabs.md

@@ -11,11 +11,11 @@ tab, when active, will reveal it’s own unique content.
 
 ~~~js
 <gl-tabs theme="indigo">
-  <gl-tab title="First">
-    first content
+  <gl-tab title="Tab 1">
+    Tab panel 1
   </gl-tab>
-  <gl-tab title="Second">
-    second content
+  <gl-tab title="Tab 2">
+    Tab panel 2
   </gl-tab>
 </gl-tabs>
 ~~~
@@ -31,15 +31,15 @@ tab, when active, will reveal it’s own unique content.
         target="_self"
         href="#"
         class="nav-link gl-tab-nav-item gl-tab-nav-item-active gl-tab-nav-item-active-indigo"
-      >First</a>
+      >Tab 1</a>
     </li>
     <li role="presentation" class="nav-item">
-      <a role="tab" target="_self" href="#" class="nav-link gl-tab-nav-item">Second</a>
+      <a role="tab" target="_self" href="#" class="nav-link gl-tab-nav-item">Tab 2</a>
     </li>
   </ul>
   <div class="tab-content gl-tab-content">
-    <div role="tabpanel" class="tab-pane gl-tab-content active">first content</div>
-    <div role="tabpanel" class="tab-pane gl-tab-content">second content</div>
+    <div role="tabpanel" class="tab-pane gl-tab-content active">Tab panel 1</div>
+    <div role="tabpanel" class="tab-pane gl-tab-content">Tab panel 2</div>
   </div>
 </div>
 ~~~

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

@@ -19,8 +19,8 @@ const ScrollableTabsGenerator = {
   computed: {
     tabs() {
       return range(this.count).map((i) => ({
-        title: `Lorem ${i + 1}`,
-        content: `(${i + 1}) Lorem ipsum dolar sit amit...`,
+        title: `Tab ${i + 1}`,
+        content: `Tab panel ${i + 1} content...`,
       }));
     },
   },
@@ -56,47 +56,47 @@ documentedStoriesOf('base/tabs/tabs', docs)
     ...createBaseStory(),
     template: `
       <gl-tabs :theme="theme" :sync-active-tab-with-query-params="syncActiveTabWithQueryParams">
-        <gl-tab title="First">
-          first tab content
+        <gl-tab title="Tab 1">
+          Tab panel 1
         </gl-tab>
-        <gl-tab title="Second">
-          second tab content
+        <gl-tab title="Tab 2">
+          Tab panel 2
         </gl-tab>
-        <gl-tab title="Third">
-          third tab content
+        <gl-tab title="Tab 3">
+          Tab panel 3
         </gl-tab>
-        <gl-tab title="Fourth">
-          fourth tab content
+        <gl-tab title="Tab 4">
+          Tab panel 4
         </gl-tab>
-        <gl-tab title="Fifth">
-          fifth tab content
+        <gl-tab title="Tab 5">
+          Tab panel 5
         </gl-tab>
-        <gl-tab title="Sixth">
-          sixth tab content
+        <gl-tab title="Tab 6">
+          Tab panel 6
         </gl-tab>
-        <gl-tab title="Seventh">
-          seventh tab content
+        <gl-tab title="Tab 7">
+          Tab panel 7
         </gl-tab>
-        <gl-tab title="Eighth">
-          eighth tab content
+        <gl-tab title="Tab 8">
+          Tab panel 8
         </gl-tab>
-        <gl-tab title="Ninth">
-          ninth tab content
+        <gl-tab title="Tab 9">
+          Tab panel 9
         </gl-tab>
-        <gl-tab title="Tenth">
-          tenth tab content
+        <gl-tab title="Tab 10">
+          Tab panel 10
         </gl-tab>
-        <gl-tab title="Eleventh">
-          eleventh tab content
+        <gl-tab title="Tab 11">
+          Tab panel 11
         </gl-tab>
-        <gl-tab title="Twelfth">
-          twelfth tab content
+        <gl-tab title="Tab 12">
+          Tab panel 12
         </gl-tab>
-        <gl-tab title="Thirteenth" query-param-value="thirteenth">
-          thirteenth tab content
+        <gl-tab title="Tab 13" query-param-value="thirteenth">
+          Tab panel 13
         </gl-tab>
-        <gl-tab title="Fourteenth">
-          fourteenth tab content
+        <gl-tab title="Tab 14">
+          Tab panel 14
         </gl-tab>
       </gl-tabs>
     `,
@@ -134,11 +134,11 @@ documentedStoriesOf('base/tabs/tabs', docs)
     ...createBaseStory(),
     template: `
       <gl-tabs :theme="theme" justified>
-        <gl-tab title="First tab">
-          <p>First content</p>
+        <gl-tab title="Tab 1">
+          <p>Tab panel 1</p>
         </gl-tab>
-        <gl-tab title="Second tab">
-          <p>Second content</p>
+        <gl-tab title="Tab 2">
+          <p>Tab panel 2</p>
         </gl-tab>
       </gl-tabs>
     `,
@@ -149,23 +149,25 @@ documentedStoriesOf('base/tabs/tabs', docs)
       <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>
           </template>
-          third content
+          Tab panel 3
         </gl-tab>
       </gl-tabs>
     `,

package/src/components/mixins/button_mixin.js

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

package/src/utils/constants.js

@@ -85,13 +85,13 @@ export const formStateOptions = {
   invalid: false,
 };
 
-export const newButtonCategoryOptions = {
+export const buttonCategoryOptions = {
   primary: 'primary',
   secondary: 'secondary',
   tertiary: 'tertiary',
 };
 
-export const newButtonVariantOptions = {
+export const buttonVariantOptions = {
   default: 'default',
   confirm: 'confirm',
   info: 'info (deprecated)',
@@ -110,9 +110,9 @@ export const newButtonVariantOptions = {
 };
 
 export 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,
 };
 
 export const newDropdownVariantOptions = {
@@ -125,12 +125,12 @@ export const newDropdownVariantOptions = {
   link: 'link',
 };
 
-export const newButtonSizeOptions = {
+export const buttonSizeOptions = {
   small: 'small',
   medium: 'medium',
 };
 
-export const newButtonSizeOptionsMap = {
+export const buttonSizeOptionsMap = {
   small: 'sm',
   medium: 'md',
 };