@gitlab/ui 32.19.0 → 32.20.2

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/scrollable_tabs.vue

@@ -1,6 +1,6 @@
 <script>
 import { debounce, isArray } from 'lodash';
-import GlResizeObserverDirective from '../../../../directives/resize_observer/resize_observer';
+import { GlResizeObserverDirective } from '../../../../directives/resize_observer/resize_observer';
 import GlIcon from '../../icon/icon.vue';
 import GlTabs from './tabs.vue';
 

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/base/toggle/toggle.spec.js

@@ -36,7 +36,7 @@ describe('toggle', () => {
   describe.each`
     state    | value    | ariaCheckedExpected | checkedClassExpected
     ${'on'}  | ${true}  | ${'true'}           | ${true}
-    ${'off'} | ${false} | ${undefined}        | ${false}
+    ${'off'} | ${false} | ${'false'}          | ${false}
   `('when $state', ({ value, ariaCheckedExpected, checkedClassExpected }) => {
     beforeEach(() => {
       createWrapper({ value });

package/src/components/base/toggle/toggle.vue

@@ -83,6 +83,9 @@ export default {
     helpId() {
       return this.help ? `toggle-help-${this.uuid}` : undefined;
     },
+    isChecked() {
+      return this.value ? 'true' : 'false';
+    },
   },
 
   beforeCreate() {
@@ -119,7 +122,7 @@ export default {
       <input v-if="name" :name="name" :value="value" type="hidden" />
       <button
         role="switch"
-        :aria-checked="value"
+        :aria-checked="isChecked"
         :aria-label="label"
         :aria-describedby="helpId"
         :class="{

package/src/components/charts/heatmap/heatmap.vue

@@ -1,7 +1,7 @@
 <script>
 import merge from 'lodash/merge';
 import { white, gray100 } from '../../../../scss_to_js/scss_variables';
-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';
@@ -50,7 +50,7 @@ export default {
     TooltipDefaultFormat,
   },
   directives: {
-    resizeObserver,
+    resizeObserver: GlResizeObserverDirective,
   },
   mixins: [ToolboxMixin],
   props: {

package/src/components/charts/single_stat/single_stat.vue

@@ -87,7 +87,11 @@ export default {
 </script>
 
 <template>
-  <div class="gl-single-stat gl-display-flex gl-flex-direction-column gl-p-2">
+  <div
+    class="gl-single-stat gl-display-flex gl-flex-direction-column gl-p-2"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
     <div class="gl-display-flex gl-align-items-center gl-text-gray-700 gl-mb-2">
       <gl-icon v-if="showTitleIcon" :name="titleIcon" class="gl-mr-2" data-testid="title-icon" />
       <span class="gl-font-base gl-font-weight-normal" data-testid="title-text">{{ title }}</span>

package/src/components/charts/sparkline/sparkline.spec.js

@@ -26,8 +26,10 @@ jest.mock('~/utils/charts/theme', () => ({
 
 let triggerResize = () => {};
 jest.mock('~/directives/resize_observer/resize_observer', () => ({
-  bind(el, { value: resizeHandler }) {
-    triggerResize = () => resizeHandler();
+  GlResizeObserverDirective: {
+    bind(el, { value: resizeHandler }) {
+      triggerResize = () => resizeHandler();
+    },
   },
 }));
 

package/src/components/charts/sparkline/sparkline.vue

@@ -1,6 +1,6 @@
 <script>
 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,
@@ -14,7 +14,7 @@ const gridPadding = symbolSize / 2;
 export default {
   components: { Chart, ChartTooltip },
   directives: {
-    resizeObserver,
+    resizeObserver: GlResizeObserverDirective,
   },
   props: {
     /**

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/components/shared_components/clear_icon_button/clear_icon_button.vue

@@ -1,5 +1,5 @@
 <script>
-import GlTooltip from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlButton from '../../base/button/button.vue';
 
 export default {
@@ -7,7 +7,7 @@ export default {
     GlButton,
   },
   directives: {
-    GlTooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     title: {

package/src/directives/collapse_toggle.js

@@ -1,3 +1 @@
-import { VBToggle } from 'bootstrap-vue';
-
-export default VBToggle;
+export { VBToggle as GlCollapseToggleDirective } from 'bootstrap-vue';

package/src/directives/modal.js

@@ -1,3 +1 @@
-import { VBModal } from 'bootstrap-vue';
-
-export default VBModal;
+export { VBModal as GlModalDirective } from 'bootstrap-vue';

package/src/directives/resize_observer/resize_observer.js

@@ -2,7 +2,7 @@ import isFunction from 'lodash/isFunction';
 
 let observer = null;
 
-const ResizeObserverDirective = {
+export const GlResizeObserverDirective = {
   bind(el, { value: resizeHandler }) {
     if (!isFunction(resizeHandler)) {
       throw TypeError('directive value must be a function');
@@ -28,5 +28,3 @@ const ResizeObserverDirective = {
     }
   },
 };
-
-export default ResizeObserverDirective;

package/src/directives/resize_observer/resize_observer.spec.js

@@ -1,5 +1,5 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
-import resizeObserver from './resize_observer';
+import { GlResizeObserverDirective } from './resize_observer';
 import { useMockResizeObserver } from '~helpers/mock_dom_observer';
 
 describe('resize observer directive', () => {
@@ -15,7 +15,7 @@ describe('resize observer directive', () => {
 
     const component = {
       directives: {
-        resizeObserver,
+        resizeObserver: GlResizeObserverDirective,
       },
       methods: {
         handleResize: mockHandleResize,
@@ -84,7 +84,7 @@ describe('resize observer directive', () => {
       (directiveValue) => {
         const testComponentWithoutHandler = {
           directives: {
-            resizeObserver,
+            resizeObserver: GlResizeObserverDirective,
           },
           data() {
             return {

package/src/directives/tooltip.js

@@ -1,3 +1 @@
-import { VBTooltip } from 'bootstrap-vue';
-
-export default VBTooltip;
+export { VBTooltip as GlTooltipDirective } from 'bootstrap-vue';

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',
 };