@gitlab/ui 43.7.0 → 43.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "43.7.0",
+  "version": "43.8.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/table/table.scss

@@ -64,6 +64,10 @@ table.gl-table {
           @include gl-border-t-solid;
           @include gl-border-t-1;
         }
+
+        &:not(:first-child) {
+          @include gl-border-t-none;
+        }
       }
 
       div {

package/src/scss/utilities.scss

@@ -3216,6 +3216,66 @@
   }
 }
 
+.gl-flex-wrap-wrap {
+  flex-wrap: wrap;
+}
+
+.gl-flex-wrap-wrap\! {
+  flex-wrap: wrap !important;
+}
+
+.gl-lg-flex-wrap-wrap {
+  @include gl-media-breakpoint-up(lg) {
+  flex-wrap: wrap;
+  }
+}
+
+.gl-lg-flex-wrap-wrap\! {
+  @include gl-media-breakpoint-up(lg) {
+  flex-wrap: wrap !important;
+  }
+}
+
+.gl-xl-flex-wrap-wrap {
+  @include gl-media-breakpoint-up(xl) {
+  flex-wrap: wrap;
+  }
+}
+
+.gl-xl-flex-wrap-wrap\! {
+  @include gl-media-breakpoint-up(xl) {
+  flex-wrap: wrap !important;
+  }
+}
+
+.gl-sm-flex-wrap-wrap {
+  @include gl-media-breakpoint-up(sm) {
+  flex-wrap: wrap;
+  }
+}
+
+.gl-sm-flex-wrap-wrap\! {
+  @include gl-media-breakpoint-up(sm) {
+  flex-wrap: wrap !important;
+  }
+}
+
+.gl-flex-wrap-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+.gl-flex-wrap-wrap-reverse\! {
+  flex-wrap: wrap-reverse !important;
+}
+
+.gl-flex-wrap-nowrap {
+  flex-wrap: nowrap;
+}
+
+.gl-flex-wrap-nowrap\! {
+  flex-wrap: nowrap !important;
+}
+
 .gl-flex-nowrap {
   flex-wrap: nowrap;
 }

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

@@ -1,5 +1,7 @@
 /**
 * Flexbox utilities
+*
+* Naming convention: gl-{breakpoint?}-{property}-{value}
 */
 @mixin gl-align-items-baseline {
   align-items: baseline;
@@ -63,6 +65,11 @@
   }
 }
 
+/**
+* `gl-*flex-wrap` is deprecated; use `gl-*flex-wrap-wrap` instead.
+* TODO: delete `gl-*flex-wrap` utilities classes, see
+* https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1951
+*/
 @mixin gl-flex-wrap {
   flex-wrap: wrap;
 }
@@ -85,6 +92,41 @@
   }
 }
 
+@mixin gl-flex-wrap-wrap {
+  flex-wrap: wrap;
+}
+
+@mixin gl-lg-flex-wrap-wrap {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-flex-wrap-wrap;
+  }
+}
+
+@mixin gl-xl-flex-wrap-wrap {
+  @include gl-media-breakpoint-up(xl) {
+    @include gl-flex-wrap-wrap;
+  }
+}
+
+@mixin gl-sm-flex-wrap-wrap {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-flex-wrap-wrap;
+  }
+}
+
+@mixin gl-flex-wrap-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+@mixin gl-flex-wrap-nowrap {
+  flex-wrap: nowrap;
+}
+
+/**
+* `gl-flex-nowrap` is deprecated; use `gl-flex-wrap-nowrap` instead.
+* TODO: delete `gl-flex-wrap-nowrap` utility class, see
+* https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1951
+*/
 @mixin gl-flex-nowrap {
   flex-wrap: nowrap;
 }