@gitlab/ui 49.2.1 → 49.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "49.2.1",
+  "version": "49.4.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -27,7 +27,7 @@
     "clean": "rm -r dist storybook scss_to_js/scss_variables.* src/scss/utilities.scss",
     "cy:run": "cypress run --browser firefox",
     "start": "yarn storybook",
-    "storybook": "yarn storybook-prep && start-storybook --ci -p 9001 -c .storybook -s ./static",
+    "storybook": "yarn storybook-prep && start-storybook --ci --host localhost --port 9001 -c .storybook -s ./static",
     "storybook-prep": "run-s generate-utilities build-scss-variables",
     "storybook-static": "yarn storybook-prep && build-storybook -c .storybook -o storybook  -s ./static",
     "pretest:unit": "yarn build-scss-variables",
@@ -56,7 +56,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.2",
-    "bootstrap-vue": "2.20.1",
+    "bootstrap-vue": "2.23.1",
     "dompurify": "^2.4.0",
     "echarts": "^5.3.2",
     "iframe-resizer": "^4.3.2",
@@ -66,7 +66,7 @@
   },
   "peerDependencies": {
     "@gitlab/svgs": "^1.116.0 || ^2.0.0 || ^3.0.0",
-    "bootstrap": "4.5.3",
+    "bootstrap": ">=4.5.3 <=4.6.2",
     "emoji-regex": ">=10.0.0",
     "pikaday": "^1.8.0",
     "vue": "^2.6.10"
@@ -85,14 +85,14 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.5.12",
-    "@storybook/addon-docs": "6.5.12",
-    "@storybook/addon-essentials": "6.5.12",
-    "@storybook/addon-storyshots": "6.5.12",
-    "@storybook/addon-storyshots-puppeteer": "6.5.12",
-    "@storybook/addon-viewport": "6.5.12",
-    "@storybook/theming": "6.5.12",
-    "@storybook/vue": "6.5.12",
+    "@storybook/addon-a11y": "6.5.13",
+    "@storybook/addon-docs": "6.5.13",
+    "@storybook/addon-essentials": "6.5.13",
+    "@storybook/addon-storyshots": "6.5.13",
+    "@storybook/addon-storyshots-puppeteer": "6.5.13",
+    "@storybook/addon-viewport": "6.5.13",
+    "@storybook/theming": "6.5.13",
+    "@storybook/vue": "6.5.13",
     "@vue/test-utils": "1.3.0",
     "@vue/vue2-jest": "29.0.0",
     "autoprefixer": "^9.7.6",
@@ -101,8 +101,8 @@
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-require-context-hook": "^1.0.0",
     "babel-preset-vue": "^2.0.2",
-    "bootstrap": "4.5.3",
-    "cypress": "^10.10.0",
+    "bootstrap": "4.6.2",
+    "cypress": "^10.11.0",
     "emoji-regex": "^10.0.0",
     "eslint": "8.26.0",
     "eslint-import-resolver-jest": "3.0.2",
@@ -112,9 +112,9 @@
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",
-    "jest": "^29.1.2",
-    "jest-circus": "29.1.2",
-    "jest-environment-jsdom": "29.1.2",
+    "jest": "^29.2.2",
+    "jest-circus": "29.2.2",
+    "jest-environment-jsdom": "29.2.2",
     "jest-serializer-vue": "^2.0.2",
     "markdownlint-cli": "^0.29.0",
     "mockdate": "^2.0.5",

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

@@ -97,14 +97,14 @@
 
 @include gl-badge-variant(
   $variant: muted,
-  $color: $gray-500,
-  $icon-color: $gray-400,
+  $color: $gray-600,
+  $icon-color: $gray-500,
   $bg: $gray-50,
-  $hover-color: $gray-600,
-  $hover-icon-color: $gray-500,
+  $hover-color: $gray-700,
+  $hover-icon-color: $gray-600,
   $border-color: $gray-200,
-  $active-color: $gray-700,
-  $active-icon-color: $gray-600,
+  $active-color: $gray-800,
+  $active-icon-color: $gray-700,
   $active-bg: $gray-100
 );
 

package/src/components/base/filtered_search/filtered_search_token_segment.stories.js

@@ -2,7 +2,7 @@ import PortalVue from 'portal-vue';
 import Vue from 'vue';
 import { GlFilteredSearchSuggestion } from '../../../index';
 import { provide } from './common_story_options';
-import readme from './filtered_search_term.md';
+import readme from './filtered_search_token_segment.md';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment.vue';
 
 Vue.use(PortalVue);

package/src/components/base/form/form_checkbox/form_checkbox_group.vue

@@ -1,6 +1,6 @@
 <script>
 import { BFormCheckboxGroup } from 'bootstrap-vue';
-import formOptionsMixin from 'bootstrap-vue/src/mixins/form-options';
+import { formOptionsMixin } from 'bootstrap-vue/src/mixins/form-options';
 import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/safe_html';
 import GlFormCheckbox from './form_checkbox.vue';
 

package/src/components/base/form/form_combobox/form_combobox.spec.js

@@ -1,4 +1,5 @@
 import { nextTick } from 'vue';
+import { cloneDeep } from 'lodash';
 import { mount } from '@vue/test-utils';
 import GlDropdownItem from '../../dropdown/dropdown_item.vue';
 import GlFormInput from '../form_input/form_input.vue';
@@ -258,8 +259,9 @@ describe('GlFormCombobox', () => {
     const windowAlert = window.alert;
 
     beforeEach(() => {
-      createComponent({ tokens: oneTokenList, actionList: actionsList });
-      actionSpy = jest.spyOn(wrapper.vm.actionList[0], 'fn');
+      const actionList = cloneDeep(actionsList);
+      actionSpy = jest.spyOn(actionList[0], 'fn');
+      createComponent({ tokens: oneTokenList, actionList });
       window.alert = jest.fn();
     });
 

package/src/components/base/form/form_radio_group/form_radio_group.vue

@@ -1,6 +1,6 @@
 <script>
 import { BFormRadioGroup } from 'bootstrap-vue';
-import formOptionsMixin from 'bootstrap-vue/src/mixins/form-options';
+import { formOptionsMixin } from 'bootstrap-vue/src/mixins/form-options';
 import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/safe_html';
 import GlFormRadio from '../form_radio/form_radio.vue';
 

package/src/components/base/popover/popover.vue

@@ -45,6 +45,11 @@ export default {
       required: false,
       default: popoverPlacements.top,
     },
+    boundaryPadding: {
+      type: [Number, String],
+      required: false,
+      default: 5,
+    },
   },
   computed: {
     customClass() {
@@ -74,6 +79,7 @@ export default {
     :triggers="triggers"
     :title="title"
     :placement="placement"
+    :boundary-padding="boundaryPadding"
     v-bind="$attrs"
     v-on="$listeners"
   >

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

@@ -228,6 +228,7 @@ describe('tabs component', () => {
               props: { syncActiveTabWithQueryParams: true, queryParamName },
             });
 
+            await nextTick();
             await nextTick();
 
             expect(findActiveTab().text()).toBe(expectedActiveTabText);
@@ -337,10 +338,11 @@ describe('tabs component', () => {
             props: { syncActiveTabWithQueryParams: true },
           });
 
+          await nextTick();
           await nextTick();
 
-          expect(wrapper.emitted('input')[0]).toEqual([1]);
-          expect(wrapper.emitted('input')[1]).toEqual([1]);
+          expect(wrapper.emitted().input[0]).toEqual([0]);
+          expect(wrapper.emitted().input[1]).toEqual([1]);
         });
       });
     });

package/src/components/base/tabs/tabs/tabs.vue

@@ -129,12 +129,12 @@ export default {
     /**
      * When the query parameter is updated, update the active tab to match.
      */
-    syncActiveTabFromQueryParams() {
+    async syncActiveTabFromQueryParams() {
+      await this.$nextTick();
       const queryParamValue = this.getQueryParamValue();
       const tabIndexToActivate = this.getTabs().findIndex(
         (tab, tabIndex) => this.getTabQueryParamValue(tabIndex) === queryParamValue
       );
-
       this.activeTabIndex = tabIndexToActivate !== -1 ? tabIndexToActivate : 0;
     },
 

package/src/components/charts/chart/chart.md

@@ -1,8 +1,9 @@
 ### ECharts Wrapper
 
-The chart component is a Vue component wrapper around [ECharts]. The chart component accepts width
-and height props in order to allow the user to make it responsive, but it is not responsive by
-default.
+The chart component is a Vue component wrapper around
+[Apache ECharts](https://echarts.apache.org/en/api.html#echarts). The chart component accepts width
+and height props in order to allow the user to make it responsive, but it is not responsive
+by default.
 
 > Note: In every case there should be a specific component for each type of chart
 (i.e. Line, Area, Bar, etc.). This component should only need to be used by chart type components
@@ -15,6 +16,5 @@ This component emits the following events during the ECharts lifecycle:
 - `created`: emitted after calling `echarts.init`
 - `updated`: emitted after calling `echarts.setOption`
 
-In all cases, the event payload is the echart instance.
-
-[echarts]: https://echarts.apache.org
+In all cases, the event payload is the
+[echart instance](https://echarts.apache.org/en/api.html#echartsInstance).

package/src/components/charts/chart/chart.vue

@@ -16,6 +16,10 @@ export default {
     resizeObserver: GlResizeObserverDirective,
   },
   props: {
+    /**
+     * The ECharts configuration object.
+     * https://echarts.apache.org/en/option.html#title
+     */
     options: {
       type: Object,
       required: true,
@@ -42,11 +46,19 @@ export default {
       default: null,
       validator: sizeValidator,
     },
+    /**
+     * An ECharts group id. Used to connect multiple charts.
+     * https://echarts.apache.org/en/api.html#echarts.connect
+     */
     groupId: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * How the chart should be rendered. Valid options are 'canvas' or 'svg'.
+     * https://echarts.apache.org/handbook/en/best-practices/canvas-vs-svg/
+     */
     renderer: {
       type: String,
       required: false,