@gitlab/ui 68.7.0 → 69.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "68.7.0",
+  "version": "69.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -167,10 +167,10 @@
     "storybook-dark-mode": "3.0.1",
     "style-dictionary": "^3.8.0",
     "stylelint": "15.10.2",
-    "vue": "2.7.14",
+    "vue": "2.7.15",
     "vue-loader": "^15.8.3",
     "vue-loader-vue3": "npm:vue-loader@17",
-    "vue-template-compiler": "2.7.14",
+    "vue-template-compiler": "2.7.15",
     "vue-test-utils-compat": "^0.0.10",
     "webpack": "^5.9.0"
   },

package/src/components/base/banner/banner.vue

@@ -109,7 +109,11 @@ export default {
 <template>
   <gl-card
     class="gl-pl-6 gl-pr-8 gl-py-6"
-    :class="{ 'gl-banner-introduction': isIntroducing, 'gl-border-none!': embedded }"
+    :class="{
+      'gl-banner-introduction': isIntroducing,
+      'gl-border-none!': embedded,
+      'gl-bg-gray-10!': !isIntroducing,
+    }"
     body-class="gl-display-flex gl-p-0!"
   >
     <div v-if="svgPath" class="gl-banner-illustration">

package/src/scss/utilities.scss

@@ -3530,18 +3530,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   flex-direction: column !important;
 }
 
-.gl-sm-flex-direction-column {
-  @include gl-media-breakpoint-down(md) {
-  flex-direction: column;
-  }
-}
-
-.gl-sm-flex-direction-column\! {
-  @include gl-media-breakpoint-down(md) {
-  flex-direction: column !important;
-  }
-}
-
 .gl-md-flex-direction-column {
   @include gl-media-breakpoint-up(md) {
   flex-direction: column;
@@ -3566,18 +3554,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   }
 }
 
-.gl-xs-flex-direction-column {
-  @include gl-media-breakpoint-down(sm) {
-    flex-direction: column;
-  }
-}
-
-.gl-xs-flex-direction-column\! {
-  @include gl-media-breakpoint-down(sm) {
-    flex-direction: column !important;
-  }
-}
-
 .gl-flex-direction-column-reverse {
   flex-direction: column-reverse;
 }
@@ -3650,6 +3626,18 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   flex-direction: row-reverse !important;
 }
 
+.gl-sm-flex-direction-row-reverse {
+  @include gl-media-breakpoint-up(sm) {
+    flex-direction: row-reverse;
+  }
+}
+
+.gl-sm-flex-direction-row-reverse\! {
+  @include gl-media-breakpoint-up(sm) {
+    flex-direction: row-reverse !important;
+  }
+}
+
 .gl-flex-shrink-0 {
   flex-shrink: 0;
 }
@@ -4911,18 +4899,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   width: $grid-size * 40 !important;
 }
 
-.gl-xs-w-full {
-  @include gl-media-breakpoint-down(sm) {
-  width: 100%;
-  }
-}
-
-.gl-xs-w-full\! {
-  @include gl-media-breakpoint-down(sm) {
-  width: 100% !important;
-  }
-}
-
 .gl-sm-w-full {
   @include gl-media-breakpoint-up(sm) {
   width: 100%;
@@ -5127,6 +5103,54 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   }
 }
 
+.gl-sm-w-25p {
+  @include gl-media-breakpoint-up(sm) {
+    width: 25%;
+  }
+}
+
+.gl-sm-w-25p\! {
+  @include gl-media-breakpoint-up(sm) {
+    width: 25% !important;
+  }
+}
+
+.gl-sm-w-30p {
+  @include gl-media-breakpoint-up(sm) {
+    width: 30%;
+  }
+}
+
+.gl-sm-w-30p\! {
+  @include gl-media-breakpoint-up(sm) {
+    width: 30% !important;
+  }
+}
+
+.gl-sm-w-40p {
+  @include gl-media-breakpoint-up(sm) {
+    width: 40%;
+  }
+}
+
+.gl-sm-w-40p\! {
+  @include gl-media-breakpoint-up(sm) {
+    width: 40% !important;
+  }
+}
+
+.gl-sm-w-75p {
+  @include gl-media-breakpoint-up(sm) {
+    width: 75%;
+  }
+}
+
+.gl-sm-w-75p\! {
+  @include gl-media-breakpoint-up(sm) {
+    width: 75% !important;
+  }
+}
+
 .gl-md-w-15 {
   @include gl-media-breakpoint-up(md) {
   width: $gl-spacing-scale-15;
@@ -7102,16 +7126,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
 .gl-row-gap-7\! {
   row-gap: $gl-spacing-scale-7 !important;
 }
-.gl-xs-mb-3 {
-  @include gl-media-breakpoint-down(sm) {
-  margin-bottom: $gl-spacing-scale-3;
-  }
-}
-.gl-xs-mb-3\! {
-  @include gl-media-breakpoint-down(sm) {
-  margin-bottom: $gl-spacing-scale-3 !important;
-  }
-}
 .gl-sm-ml-3 {
   @include gl-media-breakpoint-up(sm) {
   margin-left: $gl-spacing-scale-3;
@@ -7172,6 +7186,16 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   margin-top: $gl-spacing-scale-6 !important;
   }
 }
+.gl-sm-mb-0 {
+  @include gl-media-breakpoint-up(sm) {
+    margin-bottom: 0;
+  }
+}
+.gl-sm-mb-0\! {
+  @include gl-media-breakpoint-up(sm) {
+    margin-bottom: 0 !important;
+  }
+}
 .gl-sm-mb-7 {
   @include gl-media-breakpoint-up(sm) {
   margin-bottom: $gl-spacing-scale-7;

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

@@ -117,13 +117,6 @@
   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;
-  }
-}
-
 @mixin gl-md-flex-direction-column {
   @include gl-media-breakpoint-up(md) {
     @include gl-flex-direction-column;
@@ -136,13 +129,6 @@
   }
 }
 
-@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-reverse {
   flex-direction: column-reverse;
 }
@@ -179,6 +165,12 @@
   flex-direction: row-reverse;
 }
 
+@mixin gl-sm-flex-direction-row-reverse {
+  @include gl-media-breakpoint-up(sm) {
+    flex-direction: row-reverse;
+  }
+}
+
 @mixin gl-flex-shrink-0 {
   flex-shrink: 0;
 }

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

@@ -138,13 +138,6 @@
   width: $grid-size * 40;
 }
 
-@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;
-  }
-}
-
 @mixin gl-sm-w-full {
   @include gl-media-breakpoint-up(sm) {
     @include gl-w-full;
@@ -255,6 +248,30 @@
   }
 }
 
+@mixin gl-sm-w-25p {
+  @include gl-media-breakpoint-up(sm) {
+    width: 25%;
+  }
+}
+
+@mixin gl-sm-w-30p {
+  @include gl-media-breakpoint-up(sm) {
+    width: 30%;
+  }
+}
+
+@mixin gl-sm-w-40p {
+  @include gl-media-breakpoint-up(sm) {
+    width: 40%;
+  }
+}
+
+@mixin gl-sm-w-75p {
+  @include gl-media-breakpoint-up(sm) {
+    width: 75%;
+  }
+}
+
 @mixin gl-md-w-15 {
   @include gl-media-breakpoint-up(md) {
     @include gl-w-15;

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

@@ -981,14 +981,6 @@
 * notes:
 * - Utilities should strictly follow $gl-spacing-scale
 */
-
-@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-sm-ml-3 {
   @include gl-media-breakpoint-up(sm) {
     @include gl-ml-3;
@@ -1025,6 +1017,12 @@
   }
 }
 
+@mixin gl-sm-mb-0 {
+  @include gl-media-breakpoint-up(sm) {
+    margin-bottom: 0;
+  }
+}
+
 @mixin gl-sm-mb-7 {
   @include gl-media-breakpoint-up(sm) {
     @include gl-mb-7;