@gitlab/ui 49.7.0 → 49.9.0

package/dist/utils/use_mock_intersection_observer.js

@@ -104,4 +104,4 @@ const useMockIntersectionObserver = () => {
   };
 };
 
-export default useMockIntersectionObserver;
+export { useMockIntersectionObserver };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "49.7.0",
+  "version": "49.9.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -37,6 +37,9 @@
     "test:unit": "NODE_ENV=test jest --testPathIgnorePatterns storyshots.spec.js",
     "test:unit:watch": "yarn test:unit --watch",
     "test:unit:debug": "NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
+    "test:unit-vue3": "VUE_VERSION=3 NODE_ENV=test jest --testPathIgnorePatterns storyshots.spec.js",
+    "test:unit-vue3:watch": "VUE_VERSION=3 yarn test:unit --watch --notify",
+    "test:unit-vue3:debug": "VUE_VERSION=3 NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
     "test:visual": "./bin/run-visual-tests.sh 'jest ./tests/storyshots.spec.js'",
     "test:visual:minimal": "node ./bin/run_minimal_visual_tests.js",
     "test:visual:update": "./bin/run-visual-tests.sh 'JEST_IMAGE_SNAPSHOT_TRACK_OBSOLETE=1 jest ./tests/storyshots.spec.js --updateSnapshot'",
@@ -78,8 +81,8 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.19.6",
-    "@babel/preset-env": "^7.19.4",
+    "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.20.2",
     "@gitlab/eslint-plugin": "18.1.0",
     "@gitlab/stylelint-config": "4.1.0",
     "@gitlab/svgs": "3.7.0",
@@ -94,8 +97,12 @@
     "@storybook/addon-viewport": "6.5.13",
     "@storybook/theming": "6.5.13",
     "@storybook/vue": "6.5.13",
+    "@vue/compat": "^3.2.40",
+    "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
+    "@vue/test-utils-vue3": "npm:@vue/test-utils@2.2.0",
     "@vue/vue2-jest": "29.0.0",
+    "@vue/vue3-jest": "^29.1.1",
     "autoprefixer": "^9.7.6",
     "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
@@ -105,7 +112,7 @@
     "bootstrap": "4.6.2",
     "cypress": "^10.11.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.26.0",
+    "eslint": "8.27.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-storybook": "0.6.7",
@@ -113,9 +120,9 @@
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",
-    "jest": "^29.2.2",
-    "jest-circus": "29.2.2",
-    "jest-environment-jsdom": "29.2.2",
+    "jest": "^29.3.0",
+    "jest-circus": "29.3.0",
+    "jest-environment-jsdom": "29.3.0",
     "markdownlint-cli": "^0.29.0",
     "mockdate": "^2.0.5",
     "npm-run-all": "^4.1.5",
@@ -140,11 +147,12 @@
     "start-server-and-test": "^1.10.6",
     "storybook-dark-mode": "^1.0.8",
     "stylelint": "14.9.1",
-    "stylelint-config-prettier": "9.0.3",
+    "stylelint-config-prettier": "9.0.4",
     "stylelint-prettier": "2.0.0",
     "vue": "2.7.13",
     "vue-loader": "^15.8.3",
-    "vue-template-compiler": "2.7.13"
+    "vue-template-compiler": "2.7.13",
+    "vue-test-utils-compat": "^0.0.10"
   },
   "release": {
     "branches": [

package/scss_to_js/scss_variables.js

@@ -102,6 +102,17 @@ export const gray700 = '#535158'
 export const gray800 = '#434248'
 export const gray900 = '#333238'
 export const gray950 = '#1f1e24'
+export const brandCharcoal = '#171321'
+export const brandOrange01 = '#fca326'
+export const brandOrange02 = '#fc6d26'
+export const brandOrange03 = '#e24329'
+export const brandPurple01 = '#a989f5'
+export const brandPurple02 = '#7759c2'
+export const brandGray01 = '#d1d0d3'
+export const brandGray02 = '#a2a1a6'
+export const brandGray03 = '#74717a'
+export const brandGray04 = '#45424d'
+export const brandGray05 = '#2b2838'
 export const themeIndigo50 = '#f1f1ff'
 export const themeIndigo100 = '#dbdbf8'
 export const themeIndigo200 = '#c7c7f2'
@@ -227,11 +238,12 @@ export const darkenNormalFactor = '7%'
 export const darkenDarkFactor = '10%'
 export const darkenBorderFactor = '5%'
 export const darkenBorderDashedFactor = '25%'
-export const tGrayA02 = 'rgba(0, 0, 0, 0.02)'
-export const tGrayA04 = 'rgba(0, 0, 0, 0.04)'
-export const tGrayA06 = 'rgba(0, 0, 0, 0.06)'
-export const tGrayA08 = 'rgba(0, 0, 0, 0.08)'
-export const tGrayA24 = 'rgba(0, 0, 0, 0.24)'
+export const tGrayA02 = 'rgba(31, 30, 36, 0.02)'
+export const tGrayA04 = 'rgba(31, 30, 36, 0.04)'
+export const tGrayA06 = 'rgba(31, 30, 36, 0.06)'
+export const tGrayA08 = 'rgba(31, 30, 36, 0.08)'
+export const tGrayA16 = 'rgba(31, 30, 36, 0.16)'
+export const tGrayA24 = 'rgba(31, 30, 36, 0.24)'
 export const glTextColor = '#333238'
 export const glTextColorSecondary = '#737278'
 export const glFontWeightLight = '300'

package/scss_to_js/scss_variables.json

@@ -547,6 +547,61 @@
       "value": "#1f1e24",
       "compiledValue": "#1f1e24"
     },
+    {
+      "name": "$brand-charcoal",
+      "value": "#171321",
+      "compiledValue": "#171321"
+    },
+    {
+      "name": "$brand-orange-01",
+      "value": "#fca326",
+      "compiledValue": "#fca326"
+    },
+    {
+      "name": "$brand-orange-02",
+      "value": "#fc6d26",
+      "compiledValue": "#fc6d26"
+    },
+    {
+      "name": "$brand-orange-03",
+      "value": "#e24329",
+      "compiledValue": "#e24329"
+    },
+    {
+      "name": "$brand-purple-01",
+      "value": "#a989f5",
+      "compiledValue": "#a989f5"
+    },
+    {
+      "name": "$brand-purple-02",
+      "value": "#7759c2",
+      "compiledValue": "#7759c2"
+    },
+    {
+      "name": "$brand-gray-01",
+      "value": "#d1d0d3",
+      "compiledValue": "#d1d0d3"
+    },
+    {
+      "name": "$brand-gray-02",
+      "value": "#a2a1a6",
+      "compiledValue": "#a2a1a6"
+    },
+    {
+      "name": "$brand-gray-03",
+      "value": "#74717a",
+      "compiledValue": "#74717a"
+    },
+    {
+      "name": "$brand-gray-04",
+      "value": "#45424d",
+      "compiledValue": "#45424d"
+    },
+    {
+      "name": "$brand-gray-05",
+      "value": "#2b2838",
+      "compiledValue": "#2b2838"
+    },
     {
       "name": "$theme-indigo-50",
       "value": "#f1f1ff",
@@ -1174,28 +1229,33 @@
     },
     {
       "name": "$t-gray-a-02",
-      "value": "rgba($black, 0.02)",
-      "compiledValue": "rgba(0, 0, 0, 0.02)"
+      "value": "rgba($gray-950, 0.02)",
+      "compiledValue": "rgba(31, 30, 36, 0.02)"
     },
     {
       "name": "$t-gray-a-04",
-      "value": "rgba($black, 0.04)",
-      "compiledValue": "rgba(0, 0, 0, 0.04)"
+      "value": "rgba($gray-950, 0.04)",
+      "compiledValue": "rgba(31, 30, 36, 0.04)"
     },
     {
       "name": "$t-gray-a-06",
-      "value": "rgba($black, 0.06)",
-      "compiledValue": "rgba(0, 0, 0, 0.06)"
+      "value": "rgba($gray-950, 0.06)",
+      "compiledValue": "rgba(31, 30, 36, 0.06)"
     },
     {
       "name": "$t-gray-a-08",
-      "value": "rgba(#000, 0.08)",
-      "compiledValue": "rgba(0, 0, 0, 0.08)"
+      "value": "rgba($gray-950, 0.08)",
+      "compiledValue": "rgba(31, 30, 36, 0.08)"
+    },
+    {
+      "name": "$t-gray-a-16",
+      "value": "rgba($gray-950, 0.16)",
+      "compiledValue": "rgba(31, 30, 36, 0.16)"
     },
     {
       "name": "$t-gray-a-24",
-      "value": "rgba(#000, 0.24)",
-      "compiledValue": "rgba(0, 0, 0, 0.24)"
+      "value": "rgba($gray-950, 0.24)",
+      "compiledValue": "rgba(31, 30, 36, 0.24)"
     },
     {
       "name": "$gl-text-color",

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -303,13 +303,16 @@ export default {
         }
       },
     },
-  },
-  mounted() {
-    if (process.env.NODE_ENV !== 'production' && this.resetButtonLabel && !this.headerText) {
-      throw new Error(
-        'The reset button cannot be rendered without a header. Either provide a header via the headerText prop, or do not provide the resetButtonLabel prop.'
-      );
-    }
+    resetButtonLabel: {
+      immediate: true,
+      handler(newResetButtonLabel) {
+        if (process.env.NODE_ENV !== 'production' && newResetButtonLabel && !this.headerText) {
+          throw new Error(
+            'The reset button cannot be rendered without a header. Either provide a header via the headerText prop, or do not provide the resetButtonLabel prop.'
+          );
+        }
+      },
+    },
   },
   methods: {
     open() {

package/src/components/base/paginated_list/__snapshots__/paginated_list.spec.js.snap

@@ -597,9 +597,7 @@ exports[`Paginated List Search states renders the custom empty search message wh
   <div
     class="bs-callout bs-callout-warning mt-3 empty-message empty-search"
   >
-    
     Custom empty message
-  
   </div>
 </div>
 `;
@@ -620,9 +618,7 @@ exports[`Paginated List Search states renders the default empty search message w
   <div
     class="bs-callout bs-callout-warning mt-3 empty-message empty-search"
   >
-    
     Sorry, your filter produced no results.
-  
   </div>
 </div>
 `;
@@ -702,9 +698,7 @@ exports[`Paginated List Searchless states renders the list in an empty state wit
   <div
     class="bs-callout bs-callout-warning mt-3 empty-message empty-message"
   >
-    
     List is passed in empty
-  
   </div>
 </div>
 `;
@@ -725,9 +719,7 @@ exports[`Paginated List Searchless states renders the list in an empty state, wh
   <div
     class="bs-callout bs-callout-warning mt-3 empty-message empty-message"
   >
-    
     There are currently no items in this list.
-  
   </div>
 </div>
 `;

package/src/components/base/paginated_list/paginated_list.vue

@@ -163,13 +163,14 @@ export default {
       :total-items="pageInfo.total"
       @input="change"
     />
-
+    <!-- Prettier will insert extra line-break which will result in render differences between Vue.js 2 and Vue.js 3 -->
+    <!-- See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2004 for details -->
+    <!-- display: inline -->
     <div
       v-if="emptyList"
       class="bs-callout bs-callout-warning mt-3 empty-message"
       :class="{ 'empty-message': zeroTotal, 'empty-search': zeroSearchResults }"
+      >{{ zeroTotal ? emptyMessage : emptySearchMessage }}</div
     >
-      {{ zeroTotal ? emptyMessage : emptySearchMessage }}
-    </div>
   </div>
 </template>

package/src/components/base/path/__snapshots__/path.spec.js.snap

@@ -30,7 +30,6 @@ exports[`Path matches the snapshot 1`] = `
       <button
         class="gl-path-button gl-path-active-item-indigo"
       >
-        
         First
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -46,7 +45,6 @@ exports[`Path matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Second
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -62,7 +60,6 @@ exports[`Path matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Third
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -78,7 +75,6 @@ exports[`Path matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Fourth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -94,7 +90,6 @@ exports[`Path matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Fifth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -110,7 +105,6 @@ exports[`Path matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Sixth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -126,7 +120,6 @@ exports[`Path matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Seventh
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -144,7 +137,6 @@ exports[`Path matches the snapshot 1`] = `
         class="gl-path-button"
         disabled=""
       >
-        
         Eighth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -160,7 +152,6 @@ exports[`Path matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Ninth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -176,7 +167,6 @@ exports[`Path matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Tenth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -239,7 +229,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
           name="home"
           size="16"
         />
-        
         First
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -255,7 +244,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Second
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -271,7 +259,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Third
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -287,7 +274,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Fourth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -303,7 +289,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Fifth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -319,7 +304,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Sixth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -335,7 +319,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Seventh
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -353,7 +336,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
         class="gl-path-button"
         disabled=""
       >
-        
         Eighth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -369,7 +351,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Ninth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -385,7 +366,6 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
       <button
         class="gl-path-button"
       >
-        
         Tenth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -442,7 +422,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
       <button
         class="gl-path-button gl-path-active-item-indigo"
       >
-        
         First
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -458,7 +437,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
       <button
         class="gl-path-button"
       >
-        
         Second
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -474,7 +452,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
       <button
         class="gl-path-button"
       >
-        
         Third
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -490,7 +467,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
       <button
         class="gl-path-button"
       >
-        
         Fourth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -506,7 +482,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
       <button
         class="gl-path-button"
       >
-        
         Fifth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -522,7 +497,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
       <button
         class="gl-path-button"
       >
-        
         Sixth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -538,7 +512,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
       <button
         class="gl-path-button"
       >
-        
         Seventh
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -556,7 +529,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
         class="gl-path-button"
         disabled=""
       >
-        
         Eighth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -572,7 +544,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
       <button
         class="gl-path-button"
       >
-        
         Ninth
         <span
           class="gl-font-weight-normal gl-pl-2"
@@ -588,7 +559,6 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
       <button
         class="gl-path-button"
       >
-        
         Tenth
         <span
           class="gl-font-weight-normal gl-pl-2"

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

@@ -182,8 +182,7 @@ export default {
             :name="item.icon"
             class="gl-mr-2"
             data-testid="gl-path-item-icon"
-          />
-          {{ item.title
+          />{{ item.title
           }}<span v-if="item.metric" class="gl-font-weight-normal gl-pl-2">{{ item.metric }}</span>
         </button>
         <!--

package/src/components/charts/area/area.vue

@@ -41,7 +41,7 @@ import {
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { seriesHasAnnotations, isDataPointAnnotation } from '../../../utils/charts/utils';
 import { debounceByAnimationFrame } from '../../../utils/utils';
-import ToolboxMixin from '../../mixins/toolbox_mixin';
+import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';

package/src/components/charts/bar/bar.vue

@@ -7,7 +7,7 @@ import { TOOLTIP_LEFT_OFFSET } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
 import { hexToRgba, debounceByAnimationFrame } from '../../../utils/utils';
-import ToolboxMixin from '../../mixins/toolbox_mixin';
+import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartTooltip from '../tooltip/tooltip.vue';

package/src/components/charts/column/column.vue

@@ -15,7 +15,7 @@ import { TOOLTIP_LEFT_OFFSET, CHART_TYPE_LINE } from '../../../utils/charts/cons
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { columnOptions } from '../../../utils/constants';
 import { debounceByAnimationFrame } from '../../../utils/utils';
-import ToolboxMixin from '../../mixins/toolbox_mixin';
+import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartTooltip from '../tooltip/tooltip.vue';

package/src/components/charts/discrete_scatter/discrete_scatter.vue

@@ -7,7 +7,7 @@ import defaultChartOptions, {
 } from '../../../utils/charts/config';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { debounceByAnimationFrame } from '../../../utils/utils';
-import ToolboxMixin from '../../mixins/toolbox_mixin';
+import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartTooltip from '../tooltip/tooltip.vue';

package/src/components/charts/gauge/gauge.vue

@@ -2,7 +2,7 @@
 <script>
 import { merge, isFinite, uniq, sortBy } from 'lodash';
 import { gaugeNeutralHues, gaugeSafeHues, gaugeWarningHue } from '../../../utils/charts/theme';
-import ToolboxMixin from '../../mixins/toolbox_mixin';
+import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import Chart from '../chart/chart.vue';
 
 const AXIS_LABEL_FONT_SIZE_PX = 14;

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

@@ -7,7 +7,7 @@ import { TOOLTIP_LEFT_OFFSET } from '../../../utils/charts/constants';
 import { heatmapHues } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
 import { debounceByAnimationFrame } from '../../../utils/utils';
-import ToolboxMixin from '../../mixins/toolbox_mixin';
+import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';

package/src/components/charts/line/line.vue

@@ -44,7 +44,7 @@ import {
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { seriesHasAnnotations, isDataPointAnnotation } from '../../../utils/charts/utils';
 import { debounceByAnimationFrame } from '../../../utils/utils';
-import ToolboxMixin from '../../mixins/toolbox_mixin';
+import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';

package/src/components/charts/stacked_column/stacked_column.vue

@@ -22,7 +22,7 @@ import {
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { columnOptions } from '../../../utils/constants';
 import { debounceByAnimationFrame } from '../../../utils/utils';
-import ToolboxMixin from '../../mixins/toolbox_mixin';
+import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';

package/src/components/mixins/toolbox_mixin.js

@@ -7,7 +7,7 @@
 
 import { getToolboxConfig } from '../../utils/charts/config';
 
-export default {
+export const ToolboxMixin = {
   props: {
     showToolbox: {
       type: Boolean,

package/src/components/utilities/intersection_observer/intersection_observer.spec.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import useMockIntersectionObserver from '~/utils/use_mock_intersection_observer';
+import { useMockIntersectionObserver } from '~/utils/use_mock_intersection_observer';
 import GlIntersectionObserver from './intersection_observer.vue';
 
 const TEST_SLOT = '<p>Hello world! Lorem ipsum.</p>';