@gitlab/ui 49.9.0 → 49.10.0

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.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.9.0",
+  "version": "49.10.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -60,8 +60,8 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.2",
-    "bootstrap-vue": "2.23.1",
-    "dompurify": "^2.4.0",
+    "bootstrap-vue": "2.20.1",
+    "dompurify": "^2.4.1",
     "echarts": "^5.3.2",
     "iframe-resizer": "^4.3.2",
     "lodash": "^4.17.20",
@@ -109,7 +109,8 @@
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-require-context-hook": "^1.0.0",
     "babel-preset-vue": "^2.0.2",
-    "bootstrap": "4.6.2",
+    "bootstrap": "4.5.3",
+    "bootstrap-vue-vue3": "npm:bootstrap-vue@2.23.1",
     "cypress": "^10.11.0",
     "emoji-regex": "^10.0.0",
     "eslint": "8.27.0",

package/src/components/base/daterange_picker/daterange_picker.scss

@@ -5,16 +5,9 @@
 
   label {
     @include gl-font-weight-bold;
-    @include gl-mr-2;
-    @include gl-ml-2;
-  }
-
-  > div:first-of-type label {
-    @include gl-ml-0;
   }
 
   .gl-datepicker-input {
-    @include gl-w-full;
     @include gl-border-gray-100;
     @include gl-text-gray-900;
   }

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

@@ -248,7 +248,7 @@ describe('Daterange Picker', () => {
     it('does not show default slot or tooltip icon by default', () => {
       factory();
 
-      expect(findDateRangeIndicator().text()).toBe('');
+      expect(findDateRangeIndicator().exists()).toBe(false);
       expect(findTooltipIcon().exists()).toBe(false);
     });
 
@@ -271,9 +271,19 @@ describe('Daterange Picker', () => {
     });
 
     it('adds the indicator class when provided', () => {
-      factory({ dateRangeIndicatorClass });
+      factory({ dateRangeIndicatorClass }, slots);
 
       expect(wrapper.find(`.${dateRangeIndicatorClass}`).exists()).toBe(true);
     });
   });
+
+  it.each`
+    prop                  | value                 | testid
+    ${'startPickerClass'} | ${'gl-text-blue-500'} | ${'daterange-picker-start-container'}
+    ${'endPickerClass'}   | ${'gl-text-red-500'}  | ${'daterange-picker-end-container'}
+  `('adds the provided $value class to $testid', ({ prop, value, testid }) => {
+    factory({ [prop]: value });
+
+    expect(wrapper.find(`[data-testid="${testid}"]`).classes()).toContain(value);
+  });
 });

package/src/components/base/daterange_picker/daterange_picker.vue

@@ -4,6 +4,14 @@ import { getDayDifference, getDateInPast, getDateInFuture } from '../../../utils
 import GlDatepicker from '../datepicker/datepicker.vue';
 import GlIcon from '../icon/icon.vue';
 
+const CONTAINER_CLASSES = [
+  'gl-display-flex',
+  'gl-align-items-baseline',
+  'gl-flex-wrap',
+  'gl-sm-flex-wrap-nowrap',
+  'gl-sm-gap-3',
+];
+
 export default {
   components: {
     GlDatepicker,
@@ -165,6 +173,15 @@ export default {
       const numberOfDays = getDayDifference(this.startDate, this.endDate);
       return this.sameDaySelection ? numberOfDays + 1 : numberOfDays;
     },
+    startContainerClasses() {
+      return [this.startPickerClass, ...CONTAINER_CLASSES];
+    },
+    endContainerClasses() {
+      return [this.endPickerClass, ...CONTAINER_CLASSES];
+    },
+    showIndicator() {
+      return Boolean(this.$scopedSlots.default || this.tooltip);
+    },
   },
   watch: {
     value(val) {
@@ -229,8 +246,8 @@ export default {
 </script>
 
 <template>
-  <div class="gl-daterange-picker">
-    <div :class="startPickerClass">
+  <div class="gl-daterange-picker gl-gap-5 gl-display-flex">
+    <div :class="startContainerClasses" data-testid="daterange-picker-start-container">
       <label :class="labelClass">{{ fromLabel }}</label>
 
       <gl-datepicker
@@ -248,7 +265,7 @@ export default {
         @close="onStartPickerClose"
       />
     </div>
-    <div :class="endPickerClass">
+    <div :class="endContainerClasses" data-testid="daterange-picker-end-container">
       <label :class="labelClass">{{ toLabel }}</label>
       <gl-datepicker
         :key="numericStartTime"
@@ -269,20 +286,14 @@ export default {
       />
     </div>
     <div
+      v-if="showIndicator"
       :class="dateRangeIndicatorClass"
       data-testid="daterange-picker-indicator"
-      class="gl-display-flex gl-flex-direction-row gl-align-items-center gl-text-gray-500 gl-ml-2"
+      class="gl-display-flex gl-flex-direction-row gl-align-items-center gl-text-gray-500 gl-gap-3"
     >
       <!-- @slot Content to display for days selected. The value is -1 when no date range is selected.-->
       <slot v-bind="{ daysSelected: numberOfDays }"></slot>
-      <gl-icon
-        v-if="tooltip"
-        v-gl-tooltip
-        name="information-o"
-        :title="tooltip"
-        :size="16"
-        class="gl-ml-2"
-      />
+      <gl-icon v-if="tooltip" v-gl-tooltip name="information-o" :title="tooltip" :size="16" />
     </div>
   </div>
 </template>

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

@@ -45,11 +45,6 @@ export default {
       required: false,
       default: popoverPlacements.top,
     },
-    boundaryPadding: {
-      type: [Number, String],
-      required: false,
-      default: 5,
-    },
   },
   computed: {
     customClass() {
@@ -79,7 +74,6 @@ 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

@@ -341,8 +341,7 @@ describe('tabs component', () => {
           await nextTick();
           await nextTick();
 
-          expect(wrapper.emitted().input[0]).toEqual([0]);
-          expect(wrapper.emitted().input[1]).toEqual([1]);
+          expect(wrapper.emitted().input.pop()).toEqual([1]);
         });
       });
     });

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

@@ -17,7 +17,8 @@
  */
 
 import merge from 'lodash/merge';
-import defaultChartOptions, {
+import {
+  defaultChartOptions,
   grid,
   getThresholdConfig,
   generateAnnotationSeries,

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,

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

@@ -1,7 +1,8 @@
 <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';

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

@@ -20,7 +20,8 @@
 
 import merge from 'lodash/merge';
 import { gray200 } from '../../../../scss_to_js/scss_variables'; // eslint-disable-line import/no-unresolved
-import defaultChartOptions, {
+import {
+  defaultChartOptions,
   grid,
   getThresholdConfig,
   generateAnnotationSeries,

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

@@ -2,7 +2,8 @@
 <script>
 import merge from 'lodash/merge';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
-import defaultChartOptions, {
+import {
+  defaultChartOptions,
   mergeSeriesToOptions,
   symbolSize,
 } from '../../../utils/charts/config';

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

@@ -1,6 +1,7 @@
 <script>
 import merge from 'lodash/merge';
-import defaultChartOptions, {
+import {
+  defaultChartOptions,
   grid,
   gridWithSecondaryYAxis,
   yAxis,

package/src/scss/utilities.scss

@@ -3256,6 +3256,18 @@
   flex-wrap: nowrap !important;
 }
 
+.gl-sm-flex-wrap-nowrap {
+  @include gl-media-breakpoint-up(sm) {
+  flex-wrap: nowrap;
+  }
+}
+
+.gl-sm-flex-wrap-nowrap\! {
+  @include gl-media-breakpoint-up(sm) {
+  flex-wrap: nowrap !important;
+  }
+}
+
 .gl-flex-nowrap {
   flex-wrap: nowrap;
 }
@@ -6312,6 +6324,16 @@
 .gl-gap-3\! {
   gap: $gl-spacing-scale-3 !important;
 }
+.gl-sm-gap-3 {
+  @include gl-media-breakpoint-up(sm) {
+  gap: $gl-spacing-scale-3;
+  }
+}
+.gl-sm-gap-3\! {
+  @include gl-media-breakpoint-up(sm) {
+  gap: $gl-spacing-scale-3 !important;
+  }
+}
 .gl-gap-5 {
   gap: $gl-spacing-scale-5;
 }

package/src/scss/utility-mixins/flex.scss

@@ -122,6 +122,12 @@
   flex-wrap: nowrap;
 }
 
+@mixin gl-sm-flex-wrap-nowrap {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-flex-wrap-nowrap;
+  }
+}
+
 /**
 * `gl-flex-nowrap` is deprecated; use `gl-flex-wrap-nowrap` instead.
 * TODO: delete `gl-flex-wrap-nowrap` utility class, see

package/src/scss/utility-mixins/spacing.scss

@@ -823,6 +823,12 @@
   gap: $gl-spacing-scale-3;
 }
 
+@mixin gl-sm-gap-3 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-gap-3;
+  }
+}
+
 @mixin gl-gap-5 {
   gap: $gl-spacing-scale-5;
 }

package/src/utils/breakpoints.js

@@ -6,7 +6,7 @@ export const breakpoints = {
   xs: 0,
 };
 
-const BreakpointInstance = {
+export const GlBreakpointInstance = {
   windowWidth: () => window.innerWidth,
   getBreakpointSize() {
     const windowWidth = this.windowWidth();
@@ -19,5 +19,3 @@ const BreakpointInstance = {
     return ['xl', 'lg'].includes(this.getBreakpointSize());
   },
 };
-
-export default BreakpointInstance;

package/src/utils/breakpoints.spec.js

@@ -1,4 +1,4 @@
-import bp from './breakpoints';
+import { GlBreakpointInstance } from './breakpoints';
 
 describe('breakpoints', () => {
   describe.each`
@@ -10,16 +10,16 @@ describe('breakpoints', () => {
     ${'xs'} | ${0}    | ${false}
   `('$key', ({ size, key, expectedDesktop }) => {
     beforeEach(() => {
-      jest.spyOn(bp, 'windowWidth').mockImplementationOnce(() => size + 10);
+      jest.spyOn(GlBreakpointInstance, 'windowWidth').mockImplementationOnce(() => size + 10);
     });
 
     it(`returns ${key} when larger than ${size}`, () => {
-      expect(bp.getBreakpointSize()).toBe(key);
+      expect(GlBreakpointInstance.getBreakpointSize()).toBe(key);
     });
 
     describe('isDesktop', () => {
       it(`returns ${expectedDesktop} when screen size is ${size}`, () => {
-        expect(bp.isDesktop()).toBe(expectedDesktop);
+        expect(GlBreakpointInstance.isDesktop()).toBe(expectedDesktop);
       });
     });
   });

package/src/utils/charts/config.js

@@ -2,7 +2,7 @@ import castArray from 'lodash/castArray';
 import isArray from 'lodash/isArray';
 import merge from 'lodash/merge';
 import { blue500 } from '../../../scss_to_js/scss_variables'; // eslint-disable-line import/no-unresolved
-import Breakpoints from '../breakpoints';
+import { GlBreakpointInstance } from '../breakpoints';
 import { columnOptions } from '../constants';
 import { areDatesEqual } from '../datetime_utility';
 import { engineeringNotation } from '../number_utils';
@@ -42,6 +42,12 @@ export const grid = {
   right: 32,
 };
 
+export const defaultChartOptions = {
+  grid,
+  xAxis,
+  yAxis,
+};
+
 export const gridWithSecondaryYAxis = {
   ...grid,
   right: 64,
@@ -93,7 +99,7 @@ const LESS_THAN = ['<', '&lt;'];
  */
 export const getDataZoomConfig = ({ filterMode = 'none' } = {}) => {
   const disabledBreakpoints = ['lg', 'xl'];
-  const disabled = disabledBreakpoints.includes(Breakpoints.getBreakpointSize());
+  const disabled = disabledBreakpoints.includes(GlBreakpointInstance.getBreakpointSize());
   const minSpan = filterMode === 'none' ? 0.01 : null;
 
   return {
@@ -499,9 +505,3 @@ export const getDefaultTooltipContent = (params, yAxisTitle = null) => {
 
   return { xLabels, tooltipContent };
 };
-
-export default {
-  grid,
-  xAxis,
-  yAxis,
-};

package/src/utils/charts/config.spec.js

@@ -1,5 +1,5 @@
 import merge from 'lodash/merge';
-import Breakpoints from '../breakpoints';
+import { GlBreakpointInstance } from '../breakpoints';
 import { columnOptions } from '../constants';
 import { hexToRgba } from '../utils';
 import {
@@ -197,7 +197,7 @@ describe('chart config helpers', () => {
 
     describe('on small viewports', () => {
       it('creates a basic dataZoomConfig with inside scrolling being enabled', () => {
-        jest.spyOn(Breakpoints, 'getBreakpointSize').mockImplementationOnce(() => 'sm');
+        jest.spyOn(GlBreakpointInstance, 'getBreakpointSize').mockImplementationOnce(() => 'sm');
         const actual = getDataZoomConfig();
         const dataZoomWithInsideEnabled = [
           {

package/src/utils/charts/theme.js

@@ -147,7 +147,7 @@ const isLineChartWithoutArea = (options) =>
   Array.isArray(options?.series) &&
   options.series.some((series) => series.type === 'line' && !series.areaStyle);
 
-const createTheme = (options = {}) => ({
+export const createTheme = (options = {}) => ({
   color: colorPaletteDefault,
   backgroundColor: 'transparent',
   textStyle: {
@@ -268,5 +268,3 @@ const createTheme = (options = {}) => ({
   logAxis: axes,
   timeAxis: axes,
 });
-
-export default createTheme;

package/src/utils.js

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