@gitlab/ui 43.6.0 → 43.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "43.6.0",
+  "version": "43.8.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -104,7 +104,7 @@
     "bootstrap": "4.5.3",
     "cypress": "^6.6.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.21.0",
+    "eslint": "8.22.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-storybook": "0.6.4",

package/scss_to_js/scss_variables.js

@@ -308,6 +308,9 @@ export const glIconChevronLeft = ''
 export const glIconChevronRight = ''
 export const glIconChevronDown = ''
 export const glIconSelectChevronDown = ''
+export const glIconCheck = ''
+export const glIconIndeterminate = ''
+export const glIconRadio = ''
 export const defaultIconSize = '1rem'
 export const glIconSizes = '8 12 14 16 24 32 48 72'
 export const glDropdownWidth = '15rem'

package/scss_to_js/scss_variables.json

@@ -1629,6 +1629,42 @@
       ],
       "compiledValue": ""
     },
+    {
+      "name": "$gl-icon-check",
+      "value": "data:image/svg+xml,%3Csvg width=\"8\" height=\"7\" viewBox=\"0 0 8 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M1 3.05299L2.99123 5L7 1\" stroke=\"white\" stroke-width=\"2\"/%3E%3C/svg%3E%0A",
+      "mapValue": [
+        {
+          "name": "data",
+          "value": "image",
+          "compiledValue": "image"
+        }
+      ],
+      "compiledValue": ""
+    },
+    {
+      "name": "$gl-icon-indeterminate",
+      "value": "data:image/svg+xml,%3Csvg width=\"8\" height=\"2\" viewBox=\"0 0 8 2\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M0 1L8 1\" stroke=\"white\" stroke-width=\"2\"/%3E%3C/svg%3E%0A",
+      "mapValue": [
+        {
+          "name": "data",
+          "value": "image",
+          "compiledValue": "image"
+        }
+      ],
+      "compiledValue": ""
+    },
+    {
+      "name": "$gl-icon-radio",
+      "value": "data:image/svg+xml,%3Csvg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Ccircle cx=\"3\" cy=\"3\" r=\"3\" fill=\"white\"/%3E%3C/svg%3E%0A",
+      "mapValue": [
+        {
+          "name": "data",
+          "value": "image",
+          "compiledValue": "image"
+        }
+      ],
+      "compiledValue": ""
+    },
     {
       "name": "$default-icon-size",
       "value": "px-to-rem(16px)",

package/src/components/base/button/button.scss

@@ -463,7 +463,7 @@
   &[disabled]:active,
   &[disabled].selected {
     @include gl-bg-gray-10;
-    @include gl-text-gray-400;
+    @include gl-text-gray-500;
     @include gl-inset-border-1-gray-100;
     @include gl-opacity-10;
     cursor: not-allowed !important;

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

@@ -79,6 +79,29 @@
       }
     }
 
+    .custom-control-input[type='checkbox']:checked ~ .custom-control-label,
+    .custom-control-input[type='checkbox']:indeterminate ~ .custom-control-label,
+    .custom-control-input[type='radio']:checked ~ .custom-control-label {
+      &::after {
+        @include gl-bg-none;
+        @include gl-bg-white;
+        mask-repeat: no-repeat;
+        mask-position: center center;
+      }
+    }
+
+    .custom-control-input[type='checkbox']:checked ~ .custom-control-label::after {
+      mask-image: url($gl-icon-check);
+    }
+
+    .custom-control-input[type='checkbox']:indeterminate ~ .custom-control-label::after {
+      mask-image: url($gl-icon-indeterminate);
+    }
+
+    .custom-control-input[type='radio']:checked ~ .custom-control-label::after {
+      mask-image: url($gl-icon-radio);
+    }
+
     .custom-control-input:not(:disabled):checked ~ .custom-control-label:hover,
     .custom-control-input:not(:disabled):focus:checked ~ .custom-control-label {
       &::before {
@@ -88,19 +111,15 @@
     }
 
     &.custom-checkbox {
-      .custom-control-input:indeterminate ~ .custom-control-label {
-        &::before {
-          @include gl-bg-blue-500;
-          @include gl-border-blue-500;
-        }
+      .custom-control-input:indeterminate ~ .custom-control-label::before {
+        @include gl-bg-blue-500;
+        @include gl-border-blue-500;
       }
 
-      .custom-control-input:not(:disabled):indeterminate ~ .custom-control-label:hover,
-      .custom-control-input:not(:disabled):focus:indeterminate ~ .custom-control-label {
-        &::before {
-          @include gl-bg-blue-700;
-          @include gl-border-blue-700;
-        }
+      .custom-control-input:not(:disabled):indeterminate ~ .custom-control-label:hover::before,
+      .custom-control-input:not(:disabled):focus:indeterminate ~ .custom-control-label::before {
+        @include gl-bg-blue-700;
+        @include gl-border-blue-700;
       }
     }
 
@@ -108,10 +127,23 @@
       @include gl-cursor-not-allowed;
 
       &::before {
-        @include gl-opacity-5;
+        @include gl-bg-gray-50;
+        @include gl-border-gray-100;
         @include gl-pointer-events-auto;
       }
     }
+
+    .custom-control-input:checked:disabled ~ .custom-control-label,
+    .custom-control-input:indeterminate:disabled ~ .custom-control-label {
+      &::before {
+        @include gl-bg-gray-100;
+        @include gl-border-gray-100;
+      }
+
+      &::after {
+        @include gl-bg-gray-500;
+      }
+    }
   }
 
   .help-text {

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

@@ -21,7 +21,7 @@
 
   &:disabled {
     @include gl-cursor-not-allowed;
-    @include gl-text-gray-400;
+    @include gl-text-gray-500;
   }
 
   &:not(.form-control-plaintext):focus {

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

@@ -32,7 +32,7 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
   &:disabled {
     @include gl-bg-gray-10;
     @include gl-inset-border-1-gray-100;
-    @include gl-text-gray-400;
+    @include gl-text-gray-500;
     @include gl-cursor-not-allowed;
   }
 

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

package/src/scss/variables.scss

@@ -438,6 +438,9 @@ $gl-icon-chevron-left: 'data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="
 $gl-icon-chevron-right: 'data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill-rule="evenodd" d="M10.707 7.293a1 1 0 0 1 0 1.414l-3 3a1 1 0 0 1-1.414-1.414L8.586 8 6.293 5.707a1 1 0 0 1 1.414-1.414l3 3z"/></svg>';
 $gl-icon-chevron-down: 'data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill-rule="evenodd" d="M7.293 10.707a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L8 8.586 5.707 6.293a1 1 0 0 0-1.414 1.414l3 3z"/></svg>';
 $gl-icon-select-chevron-down: 'data:image/svg+xml,%3Csvg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M0.21967 0.21967C0.512563 -0.0732232 0.987437 -0.0732232 1.28033 0.21967L4 2.93934L6.71967 0.21967C7.01256 -0.073223 7.48744 -0.0732229 7.78033 0.21967C8.07322 0.512563 8.07322 0.987437 7.78033 1.28033L4.53033 4.53033C4.23744 4.82322 3.76256 4.82322 3.46967 4.53033L0.21967 1.28033C-0.0732233 0.987437 -0.0732233 0.512563 0.21967 0.21967Z" fill="%23666666"/%3E%3C/svg%3E%0A';
+$gl-icon-check: 'data:image/svg+xml,%3Csvg width="8" height="7" viewBox="0 0 8 7" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1 3.05299L2.99123 5L7 1" stroke="white" stroke-width="2"/%3E%3C/svg%3E%0A';
+$gl-icon-indeterminate: 'data:image/svg+xml,%3Csvg width="8" height="2" viewBox="0 0 8 2" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 1L8 1" stroke="white" stroke-width="2"/%3E%3C/svg%3E%0A';
+$gl-icon-radio: 'data:image/svg+xml,%3Csvg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="3" cy="3" r="3" fill="white"/%3E%3C/svg%3E%0A';
 
 // Icons
 $default-icon-size: px-to-rem(16px);