@gitlab/ui 42.18.0 → 42.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "42.18.0",
+  "version": "42.20.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -57,7 +57,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.2",
     "bootstrap-vue": "2.20.1",
-    "dompurify": "^2.3.8",
+    "dompurify": "^2.3.9",
     "echarts": "^5.3.2",
     "iframe-resizer": "^4.3.2",
     "lodash": "^4.17.20",
@@ -81,7 +81,7 @@
     "@arkweid/lefthook": "0.7.7",
     "@babel/core": "^7.10.2",
     "@babel/preset-env": "^7.10.2",
-    "@gitlab/eslint-plugin": "13.0.0",
+    "@gitlab/eslint-plugin": "13.1.0",
     "@gitlab/stylelint-config": "4.1.0",
     "@gitlab/svgs": "2.26.0",
     "@rollup/plugin-commonjs": "^11.1.0",
@@ -108,7 +108,7 @@
     "eslint": "8.19.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-storybook": "0.5.13",
+    "eslint-plugin-storybook": "0.6.1",
     "file-loader": "^4.2.0",
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",

package/scss_to_js/scss_variables.js

@@ -308,6 +308,7 @@ export const chartTooltipMaxWidth = '32rem'
 export const glIconChevronLeft = '#{'data:image/svg+xml}'
 export const glIconChevronRight = '#{'data:image/svg+xml}'
 export const glIconChevronDown = '#{'data:image/svg+xml}'
+export const glIconSelectChevronDown = 'data'
 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

@@ -1622,6 +1622,18 @@
       ],
       "compiledValue": "#{'data:image/svg+xml}"
     },
+    {
+      "name": "$gl-icon-select-chevron-down",
+      "value": "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",
+      "mapValue": [
+        {
+          "name": "data",
+          "value": "image",
+          "compiledValue": "image"
+        }
+      ],
+      "compiledValue": "data"
+    },
     {
       "name": "$default-icon-size",
       "value": "px-to-rem(16px)",

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

@@ -21,8 +21,8 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
   @include gl-border-none;
   @include gl-appearance-none;
   @include gl-text-truncate;
+  background-image: url($gl-icon-select-chevron-down);
 
-  &:active,
   &:focus,
   &:focus:active {
     @include gl-focus($color: $gray-900, $important: true);
@@ -37,10 +37,11 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
 
   &.is-valid,
   &.is-invalid {
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
+    padding-right: $gl-spacing-scale-2 + $gl-spacing-scale-6;
+    background-image: url($gl-icon-select-chevron-down);
   }
 
-  &.is-invalid {
+  &.is-invalid:not(:disabled) {
     @include gl-inset-border-1-red-400;
 
     &:focus {

package/src/scss/utilities.scss

@@ -3040,6 +3040,14 @@
   display: table-cell !important;
   }
 }
+
+.gl-display-contents {
+  display: contents;
+}
+
+.gl-display-contents\! {
+  display: contents !important;
+}
 .gl-align-items-baseline {
   align-items: baseline;
 }

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

@@ -204,3 +204,7 @@
     @include gl-display-table-cell;
   }
 }
+
+@mixin gl-display-contents {
+  display: contents;
+}

package/src/scss/variables.scss

@@ -441,6 +441,7 @@ $chart-tooltip-max-width: px-to-rem(512px);
 $gl-icon-chevron-left: '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="M5.293 7.293a1 1 0 0 0 0 1.414l3 3a1 1 0 0 0 1.414-1.414L7.414 8l2.293-2.293a1 1 0 0 0-1.414-1.414l-3 3z"/></svg>';
 $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';
 
 // Icons
 $default-icon-size: px-to-rem(16px);