@gitlab/ui 43.8.1 → 43.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "43.8.1",
+  "version": "43.9.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -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;
   }
@@ -132,6 +133,7 @@
 }
 
 @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,6 +152,7 @@
 }
 
 @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;
   }

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;
   }