@gitlab/ui 49.8.0 → 49.9.1

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

@@ -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,
@@ -44,7 +45,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/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,
@@ -22,7 +23,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>';

package/src/scss/utilities.scss

@@ -2081,6 +2081,30 @@
 .gl-shadow-drawer\! {
   box-shadow: -4px 0 8px $gray-200 !important
 }
+
+.gl-shadow-sm {
+  box-shadow: 0 1px 2px rgba($gray-950, 0.1)
+}
+
+.gl-shadow-sm\! {
+  box-shadow: 0 1px 2px rgba($gray-950, 0.1) !important
+}
+
+.gl-shadow-md {
+  box-shadow: 0 2px 8px rgba($gray-950, 0.16), 0 0 2px rgba($gray-950, 0.16)
+}
+
+.gl-shadow-md\! {
+  box-shadow: 0 2px 8px rgba($gray-950, 0.16), 0 0 2px rgba($gray-950, 0.16) !important
+}
+
+.gl-shadow-lg {
+  box-shadow: 0 4px 12px rgba($gray-950, 0.16), 0 0 4px rgba($gray-950, 0.16)
+}
+
+.gl-shadow-lg\! {
+  box-shadow: 0 4px 12px rgba($gray-950, 0.16), 0 0 4px rgba($gray-950, 0.16) !important
+}
 .gl-clearfix {
   &::after {
     display: block;

package/src/scss/utility-mixins/box-shadow.scss

@@ -185,3 +185,24 @@
 @mixin gl-shadow-drawer {
   box-shadow: -4px 0 8px $gray-200;
 }
+
+/**
+* New utilities to match design specs
+* Per https: //gitlab.com/gitlab-org/gitlab-ui/-/issues/615,
+* some of the above could be replaced.
+*
+* These use gray instead of black to align with
+* tinted neutrals.
+*/
+
+@mixin gl-shadow-sm {
+  box-shadow: 0 1px 2px rgba($gray-950, 0.1);
+}
+
+@mixin gl-shadow-md {
+  box-shadow: 0 2px 8px rgba($gray-950, 0.16), 0 0 2px rgba($gray-950, 0.16);
+}
+
+@mixin gl-shadow-lg {
+  box-shadow: 0 4px 12px rgba($gray-950, 0.16), 0 0 4px rgba($gray-950, 0.16);
+}

package/src/scss/variables.scss

@@ -304,11 +304,12 @@ $darken-dark-factor: 10%;
 $darken-border-factor: 5%;
 $darken-border-dashed-factor: 25%;
 
-$t-gray-a-02: rgba($black, 0.02);
-$t-gray-a-04: rgba($black, 0.04);
-$t-gray-a-06: rgba($black, 0.06);
-$t-gray-a-08: rgba(#000, 0.08);
-$t-gray-a-24: rgba(#000, 0.24);
+$t-gray-a-02: rgba($gray-950, 0.02);
+$t-gray-a-04: rgba($gray-950, 0.04);
+$t-gray-a-06: rgba($gray-950, 0.06);
+$t-gray-a-08: rgba($gray-950, 0.08);
+$t-gray-a-16: rgba($gray-950, 0.16);
+$t-gray-a-24: rgba($gray-950, 0.24);
 
 // Text
 $gl-text-color: $gray-900 !default;

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/use_mock_intersection_observer.js

@@ -63,7 +63,7 @@ class MockIntersectionObserver extends MockObserver {
   }
 }
 
-const useMockIntersectionObserver = () => {
+export const useMockIntersectionObserver = () => {
   let instances;
   let origObserver;
 
@@ -94,5 +94,3 @@ const useMockIntersectionObserver = () => {
 
   return { getInstances, trigger };
 };
-
-export default useMockIntersectionObserver;

package/src/utils.js

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