@gitlab/ui 42.22.1 → 42.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "42.22.1",
+  "version": "42.24.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -83,7 +83,7 @@
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "14.0.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "2.28.0",
+    "@gitlab/svgs": "2.30.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -96,8 +96,9 @@
     "@storybook/theming": "6.5.9",
     "@storybook/vue": "6.5.9",
     "@vue/test-utils": "1.3.0",
+    "@vue/vue2-jest": "27.0.0",
     "autoprefixer": "^9.7.6",
-    "babel-jest": "^26.6.3",
+    "babel-jest": "^27.5.1",
     "babel-loader": "^8.0.5",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-require-context-hook": "^1.0.0",
@@ -113,7 +114,9 @@
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",
-    "jest": "^26.6.3",
+    "jest": "^27.5.1",
+    "jest-circus": "27.5.1",
+    "jest-environment-jsdom": "27.5.1",
     "jest-raw-loader": "^1.0.1",
     "jest-serializer-vue": "^2.0.2",
     "markdownlint-cli": "^0.29.0",
@@ -144,7 +147,6 @@
     "stylelint-config-prettier": "9.0.3",
     "stylelint-prettier": "2.0.0",
     "vue": "2.6.11",
-    "vue-jest": "4.0.0-rc.0",
     "vue-loader": "^15.8.3",
     "vue-template-compiler": "2.6.11"
   },

package/src/components/base/form/form_checkbox_tree/form_checkbox_tree.spec.js

@@ -64,6 +64,7 @@ const SHAPE = {
   ___.4
   ___.5
 `,
+
   COMPLEX: `
 _.1
 __.2
@@ -149,11 +150,10 @@ describe('GlFormCheckboxTree', () => {
   `('when checking a parent checkbox in a $description tree', ({ shape, boxToCheck }) => {
     let checkbox;
 
-    beforeEach(() => {
+    beforeEach(async () => {
       createWrapper({ options: getOptions(shape) });
       checkbox = wrapper.find(`[data-qa-selector="${QA_PREFIX}${boxToCheck}"]`);
-      checkbox.find('input').trigger('click');
-      return wrapper.vm.$nextTick();
+      await checkbox.find('input').setChecked();
     });
 
     it("checks all of the checkbox's children, if any", () => {
@@ -174,10 +174,11 @@ describe('GlFormCheckboxTree', () => {
   `(
     'when checking child checkboxes in a $description tree',
     ({ shape, boxesToCheck, indeterminateBoxes, checkedParents }) => {
-      beforeEach(() => {
+      beforeEach(async () => {
         createWrapper({ options: getOptions(shape) });
-        boxesToCheck.forEach((box) => findCheckboxInput(findCheckboxByValue(box)).trigger('click'));
-        return wrapper.vm.$nextTick();
+        await Promise.allSettled(
+          boxesToCheck.map((box) => findCheckboxInput(findCheckboxByValue(box)).setChecked())
+        );
       });
 
       it('parents that have remaining unchecked children become indeterminate', () => {
@@ -205,12 +206,11 @@ describe('GlFormCheckboxTree', () => {
   `(
     'when unchecking checkboxes in a $description tree',
     ({ shape, initiallyChecked, boxesToUncheck, indeterminateBoxes, uncheckedBoxes }) => {
-      beforeEach(() => {
+      beforeEach(async () => {
         createWrapper({ options: getOptions(shape), [V_MODEL.PROP]: initiallyChecked });
-        boxesToUncheck.forEach((box) =>
-          findCheckboxInput(findCheckboxByValue(box)).trigger('click')
+        await Promise.allSettled(
+          boxesToUncheck.map((box) => findCheckboxInput(findCheckboxByValue(box)).setChecked(false))
         );
-        return wrapper.vm.$nextTick();
       });
 
       it("unchecks all of the checkbox's children if any", () => {
@@ -253,12 +253,11 @@ describe('GlFormCheckboxTree', () => {
       });
 
       it('once toggled, puts all checkboxes in the correct state', async () => {
-        await toggleAllCheckbox.trigger('click');
-        return wrapper.vm.$nextTick(() => {
-          findCheckboxes().wrappers.forEach((checkbox) => {
-            expect(findCheckboxInput(checkbox).element.checked).toBe(finallyChecked);
-            expect(findCheckboxInput(checkbox).element.indeterminate).toBe(false);
-          });
+        await toggleAllCheckbox.setChecked(finallyChecked);
+
+        findCheckboxes().wrappers.forEach((checkbox) => {
+          expect(findCheckboxInput(checkbox).element.checked).toBe(finallyChecked);
+          expect(findCheckboxInput(checkbox).element.indeterminate).toBe(false);
         });
       });
     }

package/src/components/base/form/form_radio/form_radio.spec.js

@@ -1,5 +1,4 @@
 import { mount } from '@vue/test-utils';
-import { nextTick } from 'vue';
 import GlFormRadio from './form_radio.vue';
 
 describe('GlFormRadio', () => {
@@ -64,7 +63,6 @@ describe('GlFormRadio', () => {
   describe('when the selected value is changed programmatically', () => {
     beforeEach(() => {
       wrapper.vm.selected = secondOption.value;
-      return nextTick();
     });
 
     it('emits an input event, but not a change event on each radio', () => {
@@ -83,11 +81,14 @@ describe('GlFormRadio', () => {
   describe('when the selected value is changed by the user', () => {
     let radio;
 
-    beforeEach(() => {
+    beforeEach(async () => {
       radio = findRadio(secondOption.value);
 
-      radio.trigger('click');
-      return nextTick();
+      // NOTE: We can't use "setChecked" here because
+      // it sets value programmatically under the hood and this
+      // does not pass value for the "change" event.
+      await radio.trigger('click');
+      await radio.trigger('change');
     });
 
     it('emits an input event on each radio, and a change event on the newly selected radio', () => {

package/src/components/base/form/form_radio_group/form_radio_group.spec.js

@@ -1,5 +1,4 @@
 import { mount } from '@vue/test-utils';
-import { nextTick } from 'vue';
 import GlFormRadioGroup from './form_radio_group.vue';
 
 describe('GlFormRadioGroup', () => {
@@ -43,7 +42,6 @@ describe('GlFormRadioGroup', () => {
   describe('when the selected value is changed programmatically', () => {
     beforeEach(() => {
       wrapper.vm.selected = secondOption.value;
-      return nextTick();
     });
 
     it('emits an input event, but not a change event', () => {
@@ -60,14 +58,17 @@ describe('GlFormRadioGroup', () => {
   describe('when the selected value is changed by the user', () => {
     let radio;
 
-    beforeEach(() => {
+    beforeEach(async () => {
       radio = findRadio(secondOption.value);
 
-      radio.trigger('click');
-      return nextTick();
+      // NOTE: We can't use "setChecked" here because
+      // it sets value programmatically under the hood and this
+      // does not pass value for the "change" event.
+      await radio.trigger('click');
+      await radio.trigger('change');
     });
 
-    it('emits an input event and a change event', () => {
+    it('emits an input event and a change event', async () => {
       expect(wrapper.findComponent(GlFormRadioGroup).emitted()).toEqual({
         input: [[secondOption.value]],
         change: [[secondOption.value]],

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

@@ -5,6 +5,12 @@ import { defaultHeight, defaultWidth, validRenderers } from '../../../utils/char
 import createTheme, { themeName } from '../../../utils/charts/theme';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 
+/**
+ * Allowed values by eCharts
+ * https://echarts.apache.org/en/api.html#echartsInstance.resize
+ */
+const sizeValidator = (size) => Number.isFinite(size) || size === 'auto' || size == null;
+
 export default {
   directives: {
     resizeObserver: GlResizeObserverDirective,
@@ -25,14 +31,16 @@ export default {
       default: false,
     },
     width: {
-      type: Number,
+      type: [Number, String],
       required: false,
       default: null,
+      validator: sizeValidator,
     },
     height: {
-      type: Number,
+      type: [Number, String],
       required: false,
       default: null,
+      validator: sizeValidator,
     },
     groupId: {
       type: String,

package/src/scss/utilities.scss

@@ -4795,6 +4795,14 @@
   min-width: fit-content !important;
 }
 
+.gl-min-h-0 {
+  min-height: 0;
+}
+
+.gl-min-h-0\! {
+  min-height: 0 !important;
+}
+
 .gl-min-h-6 {
   min-height: $gl-spacing-scale-6;
 }
@@ -6340,6 +6348,16 @@
   margin-bottom: $gl-spacing-scale-5 !important;
   }
 }
+.gl-md-ml-2 {
+  @include gl-media-breakpoint-up(md) {
+  margin-left: $gl-spacing-scale-2;
+  }
+}
+.gl-md-ml-2\! {
+  @include gl-media-breakpoint-up(md) {
+  margin-left: $gl-spacing-scale-2 !important;
+  }
+}
 .gl-md-ml-3 {
   @include gl-media-breakpoint-up(md) {
   margin-left: $gl-spacing-scale-3;

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

@@ -333,6 +333,10 @@
   min-width: fit-content;
 }
 
+@mixin gl-min-h-0 {
+  min-height: 0;
+}
+
 @mixin gl-min-h-6 {
   min-height: $gl-spacing-scale-6;
 }

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

@@ -911,6 +911,12 @@
   }
 }
 
+@mixin gl-md-ml-2 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-ml-2;
+  }
+}
+
 @mixin gl-md-ml-3 {
   @include gl-media-breakpoint-up(md) {
     @include gl-ml-3;