@gitlab/ui 59.2.0 → 59.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "59.2.0",
+  "version": "59.3.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -85,12 +85,12 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.21.3",
-    "@babel/preset-env": "^7.20.2",
-    "@gitlab/eslint-plugin": "18.2.0",
+    "@babel/core": "^7.21.4",
+    "@babel/preset-env": "^7.21.4",
+    "@gitlab/eslint-plugin": "18.3.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.31.0",
+    "@gitlab/svgs": "3.36.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.spec.js

@@ -92,6 +92,13 @@ describe('base dropdown', () => {
       wrapper.destroy();
       expect(destroyPopper).toHaveBeenCalled();
     });
+
+    it('should not destroy popper instance when component is not initiated', async () => {
+      buildWrapper();
+      wrapper.destroy();
+      await nextTick();
+      expect(destroyPopper).not.toHaveBeenCalled();
+    });
   });
 
   describe('renders content to the default slot', () => {

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

@@ -214,7 +214,7 @@ export default {
     this.checkToggleFocusable();
   },
   beforeDestroy() {
-    this.popper.destroy();
+    this.popper?.destroy();
   },
   methods: {
     checkToggleFocusable() {

package/src/components/charts/sparkline/sparkline.stories.js

@@ -55,12 +55,14 @@ Default.args = generateProps();
 
 export const WithoutLastYValue = Template.bind({});
 WithoutLastYValue.args = generateProps({ showLastYValue: false });
+WithoutLastYValue.parameters = { storyshots: { disable: true } };
 
 export const WithChartColorGradient = Template.bind({});
 WithChartColorGradient.args = generateProps({ gradient: customGradient });
 
 export const WithSmoothing = Template.bind({});
 WithSmoothing.args = generateProps({ smooth: 0.5 });
+WithSmoothing.parameters = { storyshots: { disable: true } };
 
 export const AutoHeight = Template.bind({});
 Object.assign(AutoHeight, {

package/src/scss/utilities.scss

@@ -4984,6 +4984,42 @@
   }
 }
 
+.gl-md-w-15 {
+  @include gl-media-breakpoint-up(md) {
+  width: $gl-spacing-scale-15;
+  }
+}
+
+.gl-md-w-15\! {
+  @include gl-media-breakpoint-up(md) {
+  width: $gl-spacing-scale-15 !important;
+  }
+}
+
+.gl-md-w-20 {
+  @include gl-media-breakpoint-up(md) {
+  width: $gl-spacing-scale-20;
+  }
+}
+
+.gl-md-w-20\! {
+  @include gl-media-breakpoint-up(md) {
+  width: $gl-spacing-scale-20 !important;
+  }
+}
+
+.gl-md-w-30 {
+  @include gl-media-breakpoint-up(md) {
+  width: $gl-spacing-scale-30;
+  }
+}
+
+.gl-md-w-30\! {
+  @include gl-media-breakpoint-up(md) {
+  width: $gl-spacing-scale-30 !important;
+  }
+}
+
 .gl-md-w-half {
   @include gl-media-breakpoint-up(md) {
     width: 50%;

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

@@ -251,6 +251,24 @@
   }
 }
 
+@mixin gl-md-w-15 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-w-15;
+  }
+}
+
+@mixin gl-md-w-20 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-w-20;
+  }
+}
+
+@mixin gl-md-w-30 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-w-30;
+  }
+}
+
 @mixin gl-md-w-half {
   @include gl-media-breakpoint-up(md) {
     width: 50%;