@gitlab/ui 49.8.0 → 49.9.1

package/dist/utils/breakpoints.js

@@ -5,7 +5,7 @@ const breakpoints = {
   sm: 576,
   xs: 0
 };
-const BreakpointInstance = {
+const GlBreakpointInstance = {
   windowWidth: () => window.innerWidth,
   getBreakpointSize() {
     const windowWidth = this.windowWidth();
@@ -17,5 +17,4 @@ const BreakpointInstance = {
   }
 };
 
-export default BreakpointInstance;
-export { breakpoints };
+export { GlBreakpointInstance, breakpoints };

package/dist/utils/charts/config.js

@@ -1,7 +1,7 @@
 import castArray from 'lodash/castArray';
 import isArray from 'lodash/isArray';
 import merge from 'lodash/merge';
-import Breakpoints from '../breakpoints';
+import { GlBreakpointInstance } from '../breakpoints';
 import { columnOptions } from '../constants';
 import { areDatesEqual } from '../datetime_utility';
 import { engineeringNotation } from '../number_utils';
@@ -38,6 +38,11 @@ const grid = {
   left: 64,
   right: 32
 };
+const defaultChartOptions = {
+  grid,
+  xAxis,
+  yAxis
+};
 const gridWithSecondaryYAxis = {
   ...grid,
   right: 64
@@ -91,7 +96,7 @@ const getDataZoomConfig = function () {
     filterMode = 'none'
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const disabledBreakpoints = ['lg', 'xl'];
-  const disabled = disabledBreakpoints.includes(Breakpoints.getBreakpointSize());
+  const disabled = disabledBreakpoints.includes(GlBreakpointInstance.getBreakpointSize());
   const minSpan = filterMode === 'none' ? 0.01 : null;
   return {
     grid: {
@@ -530,11 +535,5 @@ const getDefaultTooltipContent = function (params) {
     tooltipContent
   };
 };
-var config = {
-  grid,
-  xAxis,
-  yAxis
-};
 
-export default config;
-export { annotationsYAxisCoords, axes, dataZoomAdjustments, defaultAreaOpacity, defaultFontSize, defaultHeight, defaultWidth, generateAnnotationSeries, generateBarSeries, generateLineSeries, getAnnotationsConfig, getDataZoomConfig, getDefaultTooltipContent, getThresholdConfig, getToolboxConfig, grid, gridWithSecondaryYAxis, lineStyle, mergeAnnotationAxisToOptions, mergeSeriesToOptions, parseAnnotations, symbolSize, validRenderers, xAxis, yAxis };
+export { annotationsYAxisCoords, axes, dataZoomAdjustments, defaultAreaOpacity, defaultChartOptions, defaultFontSize, defaultHeight, defaultWidth, generateAnnotationSeries, generateBarSeries, generateLineSeries, getAnnotationsConfig, getDataZoomConfig, getDefaultTooltipContent, getThresholdConfig, getToolboxConfig, grid, gridWithSecondaryYAxis, lineStyle, mergeAnnotationAxisToOptions, mergeSeriesToOptions, parseAnnotations, symbolSize, validRenderers, xAxis, yAxis };

package/dist/utils/charts/theme.js

@@ -225,5 +225,4 @@ const createTheme = function () {
   };
 };
 
-export default createTheme;
-export { colorFromDefaultPalette, colorPaletteDefault, gaugeNeutralHues, gaugeSafeHues, gaugeWarningHue, heatmapHues, themeName };
+export { colorFromDefaultPalette, colorPaletteDefault, createTheme, gaugeNeutralHues, gaugeSafeHues, gaugeWarningHue, heatmapHues, themeName };

package/dist/utils/use_mock_intersection_observer.js

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

package/dist/utils.js

@@ -1 +1 @@
-export { default as GlBreakpointInstance, breakpoints } from './utils/breakpoints';
+export { GlBreakpointInstance, breakpoints } from './utils/breakpoints';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "49.8.0",
+  "version": "49.9.1",
   "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'",
@@ -58,7 +61,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.2",
     "bootstrap-vue": "2.23.1",
-    "dompurify": "^2.4.0",
+    "dompurify": "^2.4.1",
     "echarts": "^5.3.2",
     "iframe-resizer": "^4.3.2",
     "lodash": "^4.17.20",
@@ -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

@@ -238,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

@@ -1229,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/pagination/pagination.vue

@@ -3,7 +3,7 @@
 import debounce from 'lodash/debounce';
 import isFunction from 'lodash/isFunction';
 import range from 'lodash/range';
-import Breakpoints, { breakpoints } from '../../../utils/breakpoints';
+import { GlBreakpointInstance, breakpoints } from '../../../utils/breakpoints';
 import { alignOptions, resizeDebounceTime } from '../../../utils/constants';
 import GlIcon from '../icon/icon.vue';
 import GlLink from '../link/link.vue';
@@ -166,7 +166,7 @@ export default {
   },
   data() {
     return {
-      breakpoint: Breakpoints.getBreakpointSize(),
+      breakpoint: GlBreakpointInstance.getBreakpointSize(),
       // If total pages count is below or equal to minTotalPagesToCollapse, collapsing is disabled
       minTotalPagesToCollapse: 4,
     };
@@ -287,7 +287,7 @@ export default {
   },
   methods: {
     setBreakpoint() {
-      this.breakpoint = Breakpoints.getBreakpointSize();
+      this.breakpoint = GlBreakpointInstance.getBreakpointSize();
     },
     pageIsDisabled(page) {
       return (

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

@@ -17,7 +17,8 @@
  */
 
 import merge from 'lodash/merge';
-import defaultChartOptions, {
+import {
+  defaultChartOptions,
   grid,
   getThresholdConfig,
   generateAnnotationSeries,
@@ -41,7 +42,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/chart/chart.spec.js

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import * as echarts from 'echarts';
-import createTheme from '~/utils/charts/theme';
+import { createTheme } from '~/utils/charts/theme';
 import { useMockResizeObserver } from '~helpers/mock_dom_observer';
 import Chart from './chart.vue';
 

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

@@ -2,7 +2,7 @@
 <script>
 import * as echarts from 'echarts';
 import { defaultHeight, defaultWidth, validRenderers } from '../../../utils/charts/config';
-import createTheme, { themeName } from '../../../utils/charts/theme';
+import { createTheme, themeName } from '../../../utils/charts/theme';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 
 /**

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

@@ -1,7 +1,8 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import merge from 'lodash/merge';
-import defaultChartOptions, {
+import {
+  defaultChartOptions,
   grid,
   gridWithSecondaryYAxis,
   yAxis,
@@ -15,7 +16,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

@@ -1,13 +1,14 @@
 <script>
 import merge from 'lodash/merge';
 import { gray200 } from '../../../../scss_to_js/scss_variables'; // eslint-disable-line import/no-unresolved
-import defaultChartOptions, {
+import {
+  defaultChartOptions,
   dataZoomAdjustments,
   mergeSeriesToOptions,
 } 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;