@gitlab/ui 43.8.0 → 43.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "43.8.0",
+  "version": "43.9.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -143,9 +143,9 @@
     "stylelint": "14.9.1",
     "stylelint-config-prettier": "9.0.3",
     "stylelint-prettier": "2.0.0",
-    "vue": "2.6.11",
+    "vue": "2.7.9",
     "vue-loader": "^15.8.3",
-    "vue-template-compiler": "2.6.11"
+    "vue-template-compiler": "2.7.9"
   },
   "release": {
     "branches": [

package/src/components/base/form/form_checkbox/form_checkbox.scss

@@ -91,15 +91,15 @@
     }
 
     .custom-control-input[type='checkbox']:checked ~ .custom-control-label::after {
-      mask-image: url($gl-icon-check);
+      mask-image: url('#{$gl-icon-check}');
     }
 
     .custom-control-input[type='checkbox']:indeterminate ~ .custom-control-label::after {
-      mask-image: url($gl-icon-indeterminate);
+      mask-image: url('#{$gl-icon-indeterminate}');
     }
 
     .custom-control-input[type='radio']:checked ~ .custom-control-label::after {
-      mask-image: url($gl-icon-radio);
+      mask-image: url('#{$gl-icon-radio}');
     }
 
     .custom-control-input:not(:disabled):checked ~ .custom-control-label:hover,

package/src/components/base/pagination/pagination.scss

@@ -69,6 +69,7 @@
   }
 }
 
+// stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
 @include gl-media-breakpoint-down(sm) {
   .gl-pagination {
     .prev-page-item,

package/src/scss/mixins.spec.scss

@@ -63,6 +63,7 @@
   @include it('returns max-width media query for lg') {
     @include assert {
       @include output {
+        // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
         @include gl-media-breakpoint-down(lg) {
           color: $red-100;
         }
@@ -77,6 +78,7 @@
   @include it('returns max-width media query for md') {
     @include assert {
       @include output {
+        // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
         @include gl-media-breakpoint-down(md) {
           color: $orange-100;
         }

package/src/scss/utilities.scss

@@ -3284,39 +3284,47 @@
   flex-wrap: nowrap !important;
 }
 
+.gl-flex-direction-column {
+  flex-direction: column;
+}
+
+.gl-flex-direction-column\! {
+  flex-direction: column !important;
+}
+
 .gl-sm-flex-direction-column {
   @include gl-media-breakpoint-down(md) {
-    @include gl-flex-direction-column;
+  flex-direction: column;
   }
 }
 
 .gl-sm-flex-direction-column\! {
   @include gl-media-breakpoint-down(md) {
-    @include gl-flex-direction-column;
+  flex-direction: column !important;
   }
 }
 
 .gl-md-flex-direction-column {
   @include gl-media-breakpoint-up(md) {
-    @include gl-flex-direction-column;
+  flex-direction: column;
   }
 }
 
 .gl-md-flex-direction-column\! {
   @include gl-media-breakpoint-up(md) {
-    @include gl-flex-direction-column;
+  flex-direction: column !important;
   }
 }
 
 .gl-lg-flex-direction-column {
   @include gl-media-breakpoint-up(lg) {
-    @include gl-flex-direction-column;
+  flex-direction: column;
   }
 }
 
 .gl-lg-flex-direction-column\! {
   @include gl-media-breakpoint-up(lg) {
-    @include gl-flex-direction-column;
+  flex-direction: column !important;
   }
 }
 
@@ -3332,14 +3340,6 @@
   }
 }
 
-.gl-flex-direction-column {
-  flex-direction: column;
-}
-
-.gl-flex-direction-column\! {
-  flex-direction: column !important;
-}
-
 .gl-flex-direction-column-reverse {
   flex-direction: column-reverse;
 }
@@ -6306,6 +6306,12 @@
 .gl-gap-6\! {
   gap: $gl-spacing-scale-6 !important;
 }
+.gl-column-gap-6 {
+  column-gap: $gl-spacing-scale-6;
+}
+.gl-column-gap-6\! {
+  column-gap: $gl-spacing-scale-6 !important;
+}
 .gl-xs-mb-3 {
   @include gl-media-breakpoint-down(sm) {
   margin-bottom: $gl-spacing-scale-3;

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

@@ -8,6 +8,7 @@
 }
 
 @mixin gl-xs-display-none {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-display-none;
   }
@@ -36,6 +37,7 @@
 }
 
 @mixin gl-xs-display-flex {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-display-flex;
   }
@@ -64,6 +66,7 @@
 }
 
 @mixin gl-xs-display-inline-flex {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-display-inline-flex;
   }
@@ -92,6 +95,7 @@
 }
 
 @mixin gl-xs-display-block {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-display-block;
   }
@@ -120,6 +124,7 @@
 }
 
 @mixin gl-xs-display-inline {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-display-inline;
   }
@@ -148,6 +153,7 @@
 }
 
 @mixin gl-xs-display-inline-block {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-display-inline-block;
   }

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

@@ -24,6 +24,7 @@
 }
 
 @mixin gl-xs-align-items-baseline {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-align-items-baseline;
   }
@@ -131,7 +132,12 @@
   flex-wrap: nowrap;
 }
 
+@mixin gl-flex-direction-column {
+  flex-direction: column;
+}
+
 @mixin gl-sm-flex-direction-column {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(md) {
     @include gl-flex-direction-column;
   }
@@ -150,15 +156,12 @@
 }
 
 @mixin gl-xs-flex-direction-column {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     flex-direction: column;
   }
 }
 
-@mixin gl-flex-direction-column {
-  flex-direction: column;
-}
-
 @mixin gl-flex-direction-column-reverse {
   flex-direction: column-reverse;
 }

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

@@ -123,6 +123,7 @@
 }
 
 @mixin gl-xs-w-full {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-w-full;
   }

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

@@ -825,6 +825,18 @@
   gap: $gl-spacing-scale-6;
 }
 
+/**
+* Column gap utilities
+*
+* naming convention: gl-column-gap-{spacing-scale-index}
+* notes:
+* - Utilities should strictly follow $gl-spacing-scale
+*/
+
+@mixin gl-column-gap-6 {
+  column-gap: $gl-spacing-scale-6;
+}
+
 /**
 * Responsive margin utilities.
 *
@@ -834,12 +846,14 @@
 */
 
 @mixin gl-xs-mb-3 {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-mb-3;
   }
 }
 
 @mixin gl-xs-mb-4 {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-mb-4;
   }
@@ -1029,144 +1043,168 @@
 */
 
 @mixin gl-sm-pt-0 {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-pt-0;
   }
 }
 
 @mixin gl-sm-pt-1 {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-pt-1;
   }
 }
 
 @mixin gl-sm-pt-2 {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-pt-2;
   }
 }
 
 @mixin gl-sm-pt-3 {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-pt-3;
   }
 }
 
 @mixin gl-sm-pt-4 {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-pt-4;
   }
 }
 
 @mixin gl-sm-pt-5 {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-pt-5;
   }
 }
 
 @mixin gl-sm-pr-0 {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-pr-0;
   }
 }
 
 @mixin gl-sm-pr-1 {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-pr-1;
   }
 }
 
 @mixin gl-sm-pr-2 {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-pr-2;
   }
 }
 
 @mixin gl-sm-pr-3 {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-pr-3;
   }
 }
 
 @mixin gl-sm-pr-4 {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-pr-4;
   }
 }
 
 @mixin gl-sm-pr-5 {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-pr-5;
   }
 }
 
 @mixin gl-sm-pb-0 {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-pb-0;
   }
 }
 
 @mixin gl-sm-pb-1 {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-pb-1;
   }
 }
 
 @mixin gl-sm-pb-2 {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-pb-2;
   }
 }
 
 @mixin gl-sm-pb-3 {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-pb-3;
   }
 }
 
 @mixin gl-sm-pb-4 {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-pb-4;
   }
 }
 
 @mixin gl-sm-pb-5 {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-pb-5;
   }
 }
 
 @mixin gl-sm-pl-0 {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-pl-0;
   }
 }
 
 @mixin gl-sm-pl-1 {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-pl-1;
   }
 }
 
 @mixin gl-sm-pl-2 {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-pl-2;
   }
 }
 
 @mixin gl-sm-pl-3 {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-pl-3;
   }
 }
 
 @mixin gl-sm-pl-4 {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-pl-4;
   }
 }
 
 @mixin gl-sm-pl-5 {
+  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
     @include gl-pl-5;
   }