@gitlab/ui 86.7.0 → 86.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "86.7.0",
+  "version": "86.8.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/label/label.scss

@@ -33,10 +33,9 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
     @include gl-overflow-hidden;
     @include gl-reset-color;
     @include gl-max-w-full;
-    @include gl-text-decoration-none;
 
-    &:focus,
     &:hover,
+    &:focus,
     &:focus:active {
       @include gl-reset-color;
       @include gl-shadow-none;
@@ -44,6 +43,19 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
     }
   }
 
+  .gl-label-link-underline {
+    text-decoration: none;
+
+    &:hover,
+    &:focus,
+    &:focus:active {
+      .gl-label-text,
+      .gl-label-text-scoped {
+        text-decoration: underline;
+      }
+    }
+  }
+
   .gl-label-text,
   .gl-label-text-scoped {
     @include gl-display-block;

package/src/components/base/label/label.vue

@@ -125,6 +125,7 @@ export default {
       ref="labelTitle"
       :href="target ? target : false"
       class="gl-label-link"
+      :class="{ 'gl-label-link-underline': target }"
       tabindex="0"
     >
       <span class="gl-label-text">

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue

@@ -21,10 +21,10 @@ import {
   POSITION_FIXED,
 } from '../constants';
 import { logWarning, isElementTabbable, isElementFocusable } from '../../../../utils/utils';
-
 import GlButton from '../../button/button.vue';
 import GlIcon from '../../icon/icon.vue';
-import { OutsideDirective } from '../../../../directives/outside/outside';
+import BaseDropdownDeprecatedWrapper from './base_dropdown_deprecated_wrapper.vue';
+import BaseDropdownImprovedWrapper from './base_dropdown_improved_wrapper.vue';
 import { DEFAULT_OFFSET, FIXED_WIDTH_CLASS } from './constants';
 
 export const BASE_DROPDOWN_CLASS = 'gl-new-dropdown';
@@ -35,8 +35,9 @@ export default {
   components: {
     GlButton,
     GlIcon,
+    BaseDropdownDeprecatedWrapper,
+    BaseDropdownImprovedWrapper,
   },
-  directives: { Outside: OutsideDirective },
   props: {
     toggleText: {
       type: String,
@@ -160,6 +161,14 @@ export default {
       default: POSITION_ABSOLUTE,
       validator: (strategy) => [POSITION_ABSOLUTE, POSITION_FIXED].includes(strategy),
     },
+    /**
+     * Whether to use the deprecated or improved wrapper
+     */
+    improvedHideHeuristics: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -169,6 +178,11 @@ export default {
     };
   },
   computed: {
+    wrapperComponent() {
+      return this.improvedHideHeuristics
+        ? BaseDropdownImprovedWrapper
+        : BaseDropdownDeprecatedWrapper;
+    },
     hasNoVisibleToggleText() {
       return !this.toggleText?.length || this.textSrOnly;
     },
@@ -462,7 +476,11 @@ export default {
 </script>
 
 <template>
-  <div v-outside="close" :class="[$options.BASE_DROPDOWN_CLASS, { 'gl-display-block!': block }]">
+  <component
+    :is="wrapperComponent"
+    :class="[$options.BASE_DROPDOWN_CLASS, { 'gl-display-block!': block }]"
+    @close="close"
+  >
     <component
       :is="toggleComponent"
       v-bind="toggleAttributes"
@@ -497,5 +515,5 @@ export default {
         <slot></slot>
       </div>
     </div>
-  </div>
+  </component>
 </template>

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown_deprecated_wrapper.vue

@@ -0,0 +1,14 @@
+<script>
+import { OutsideDirective } from '../../../../directives/outside/outside';
+
+export default {
+  name: 'BaseDropdownDeprecatedWrapper',
+  directives: { Outside: OutsideDirective },
+};
+</script>
+
+<template>
+  <div v-outside="(event) => $emit('close', event)">
+    <slot></slot>
+  </div>
+</template>

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown_improved_wrapper.vue

@@ -0,0 +1,14 @@
+<script>
+import { OutsideDirective } from '../../../../directives/outside/outside';
+
+export default {
+  name: 'BaseDropdownImprovedWrapper',
+  directives: { Outside: OutsideDirective },
+};
+</script>
+
+<template>
+  <div v-outside.click.focusin="(event) => $emit('close', event)">
+    <slot></slot>
+  </div>
+</template>

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue

@@ -228,6 +228,15 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Whether to use an improved hide
+     * functionality for the dropdown.
+     */
+    improvedHideHeuristics: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -378,6 +387,7 @@ export default {
     :offset="dropdownOffset"
     :fluid-width="fluidWidth"
     :positioning-strategy="positioningStrategy"
+    :improved-hide-heuristics="improvedHideHeuristics"
     class="gl-disclosure-dropdown"
     @[$options.events.GL_DROPDOWN_SHOWN]="onShow"
     @[$options.events.GL_DROPDOWN_HIDDEN]="onHide"

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -349,6 +349,15 @@ export default {
         '%d results'
       ),
     },
+    /**
+     * Whether to use an improved hide
+     * functionality for the dropdown.
+     */
+    improvedHideHeuristics: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -770,6 +779,7 @@ export default {
     :offset="dropdownOffset"
     :fluid-width="fluidWidth"
     :positioning-strategy="positioningStrategy"
+    :improved-hide-heuristics="improvedHideHeuristics"
     @[$options.events.GL_DROPDOWN_SHOWN]="onShow"
     @[$options.events.GL_DROPDOWN_HIDDEN]="onHide"
   >

package/src/directives/outside/outside.js

@@ -98,9 +98,13 @@ function parseBinding({ arg, value, modifiers }) {
       );
     }
 
-    if (modifiersList.some((modifier) => !supportedEventTypes.includes(modifier))) {
+    const unsupportedModifiers = modifiersList.filter(
+      (modifier) => !supportedEventTypes.includes(modifier)
+    );
+
+    if (unsupportedModifiers.length > 0) {
       throw new Error(
-        `[GlOutsideDirective] Cannot bind ${modifiersList} events; supported event types are: ${supportedEventTypes.join(
+        `[GlOutsideDirective] Cannot bind ${unsupportedModifiers.join(', ')} events; supported event types are: ${supportedEventTypes.join(
           ', '
         )}`
       );