@gitlab/ui 42.18.1 → 42.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "42.18.1",
+  "version": "42.21.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -81,9 +81,9 @@
     "@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",
+    "@gitlab/svgs": "2.27.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -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.6.0",
+    "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/alert/alert.vue

@@ -94,6 +94,7 @@ export default {
       return alertVariantIconMap[this.variant];
     },
     shouldRenderActions() {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.$slots.actions || this.actionButtons.length);
     },
     actionButtons() {

package/src/components/base/badge/badge.vue

@@ -44,6 +44,7 @@ export default {
   },
   computed: {
     hasIconOnly() {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.icon && Object.keys(this.$slots).length === 0);
     },
     role() {

package/src/components/base/button/button.vue

@@ -74,6 +74,7 @@ export default {
       return this.icon !== '';
     },
     hasIconOnly() {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Object.keys(this.$slots).length === 0 && this.hasIcon;
     },
     isButtonDisabled() {
@@ -111,6 +112,7 @@ export default {
     },
   },
   mounted() {
+    // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
     if (!this.$slots.default && !this.$attrs['aria-label'] && !this.$props.label) {
       logWarning('[gl-button]: Accessible name missing. Please add inner text or aria-label.');
     }

package/src/components/base/carousel/carousel.vue

@@ -10,6 +10,7 @@ export default {
 </script>
 <template>
   <b-carousel v-bind="$attrs" v-on="$listeners">
+    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
     <template v-for="slot in Object.keys($slots)" #[slot]>
       <slot :name="slot"></slot>
     </template>

package/src/components/base/carousel/carousel_slide.vue

@@ -9,6 +9,7 @@ export default {
 </script>
 <template>
   <b-carousel-slide v-bind="$attrs" v-on="$listeners">
+    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
     <template v-for="slot in Object.keys($slots)" #[slot]>
       <slot :name="slot"></slot>
     </template>

package/src/components/base/drawer/drawer.vue

@@ -57,6 +57,7 @@ export default {
       };
     },
     shouldRenderFooter() {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.$slots.footer);
     },
     variantClass() {

package/src/components/base/dropdown/dropdown.vue

@@ -202,6 +202,7 @@ export default {
   },
   methods: {
     hasSlotContents(slotName) {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.$slots[slotName]);
     },
     show(...args) {

package/src/components/base/filtered_search/filtered_search_token_segment.vue

@@ -118,6 +118,7 @@ export default {
     },
 
     hasOptionsOrSuggestions() {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return this.options?.length || this.$slots.suggestions;
     },
 

package/src/components/base/form/form_group/form_group.vue

@@ -48,6 +48,7 @@ export default {
       return defaultClass;
     },
     hasLabelDescription() {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.labelDescription || this.$slots['label-description']);
     },
   },
@@ -67,6 +68,7 @@ export default {
       </gl-form-text>
     </template>
 
+    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
     <template v-for="slot in Object.keys($slots)" #[slot]>
       <slot :name="slot"></slot>
     </template>

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

@@ -21,8 +21,9 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
   @include gl-border-none;
   @include gl-appearance-none;
   @include gl-text-truncate;
+  @include gl-bg-no-repeat;
+  background-image: url($gl-icon-select-chevron-down);
 
-  &:active,
   &:focus,
   &:focus:active {
     @include gl-focus($color: $gray-900, $important: true);
@@ -37,10 +38,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/components/base/form/form_select/form_select.vue

@@ -10,6 +10,7 @@ export default {
 </script>
 <template>
   <b-form-select class="gl-form-select" v-bind="$attrs" v-on="$listeners">
+    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
     <template v-for="slot in Object.keys($slots)" #[slot]>
       <slot :name="slot"></slot>
     </template>

package/src/components/base/modal/modal.vue

@@ -88,9 +88,11 @@ export default {
   },
   computed: {
     shouldRenderModalOk() {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.$slots['modal-ok']);
     },
     shouldRenderModalCancel() {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.$slots['modal-cancel']);
     },
     shouldRenderModalFooter() {
@@ -98,6 +100,7 @@ export default {
         this.actionCancel ||
           this.actionSecondary ||
           this.actionPrimary ||
+          // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
           this.$slots['modal-footer']
       );
     },

package/src/components/base/tabs/tab/tab.vue

@@ -48,6 +48,7 @@ export default {
     v-bind="$attrs"
     v-on="$listeners"
   >
+    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
     <template v-for="slot in Object.keys($slots)" #[slot]>
       <slot :name="slot"></slot>
     </template>

package/src/components/base/tabs/tabs/scrollable_tabs.vue

@@ -107,6 +107,7 @@ export default {
     v-bind="passthroughAttrs"
     v-on="$listeners"
   >
+    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
     <template v-for="slot in Object.keys($slots)" #[slot]>
       <slot :name="slot"></slot>
     </template>

package/src/components/base/tabs/tabs/tabs.vue

@@ -221,6 +221,7 @@ export default {
     v-bind="$attrs"
     v-on="listeners"
   >
+    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
     <template v-for="slot in Object.keys($slots)" #[slot]>
       <slot :name="slot"></slot>
     </template>

package/src/components/base/toggle/toggle.vue

@@ -82,6 +82,7 @@ export default {
   },
   computed: {
     shouldRenderHelp() {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.$slots.help || this.help);
     },
     icon() {

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