@gitlab/ui 49.3.0 → 49.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "49.3.0",
+  "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",
@@ -101,7 +101,7 @@
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-require-context-hook": "^1.0.0",
     "babel-preset-vue": "^2.0.2",
-    "bootstrap": "4.5.3",
+    "bootstrap": "4.6.2",
     "cypress": "^10.11.0",
     "emoji-regex": "^10.0.0",
     "eslint": "8.26.0",

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/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_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;
     },