@gitlab/ui 122.11.0 → 122.12.1

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

@@ -38,14 +38,19 @@ import {
 import { OutsideDirective } from '../../../../directives/outside/outside';
 import GlButton from '../../button/button.vue';
 import GlIcon from '../../icon/icon.vue';
+import DropdownContainer from './dropdown_container';
 import { ARROW_X_MINIMUM, DEFAULT_OFFSET, FIXED_WIDTH_CLASS } from './constants';
 
-export const BASE_DROPDOWN_CLASS = 'gl-new-dropdown';
+const BASE_DROPDOWN_CLASS = 'gl-new-dropdown';
+const DROPDOWN_CONTAINER_CLASS = 'gl-new-dropdown-container';
 
 export default {
   name: 'BaseDropdown',
+  expose: ['open', 'close', 'closeAndFocus', 'containsElement'],
   BASE_DROPDOWN_CLASS,
+  DROPDOWN_CONTAINER_CLASS,
   components: {
+    DropdownContainer,
     GlButton,
     GlIcon,
   },
@@ -477,8 +482,22 @@ export default {
       if (!this.visible) {
         return;
       }
+
       this.toggle(event);
     },
+    clickedToggle(event) {
+      return (
+        this.$refs.toggle.contains?.(event.target) ||
+        this.$refs.toggle.$el?.contains?.(event.target)
+      );
+    },
+    handleClickOutside(event) {
+      // Ignore "click outside" events if the toggle was clicked
+      if (this.clickedToggle(event)) {
+        return;
+      }
+      this.close(event);
+    },
     /**
      * Closes the dropdown and returns the focus to the toggle unless it has has moved outside
      * of the dropdown, meaning that the consumer needed to put some other element in focus.
@@ -549,15 +568,25 @@ export default {
       this.nonScrollableContentHeight =
         floatingElementBoundingBox.height - scrollableAreaBoundingBox.height;
     },
+    /**
+     * Public method which returns `true` if the given element is in the DOM tree of this component,
+     * and `false` otherwise.
+     *
+     * Useful for checking whether an event was dispatched against something in this dropdown,
+     * e.g., pressing <kbd>Esc</kbd>.
+     */
+    containsElement(element) {
+      return (
+        element.closest(`.${BASE_DROPDOWN_CLASS}`) === this.$el ||
+        element.closest(`.${DROPDOWN_CONTAINER_CLASS}`) === this.$refs.dropdownContainer
+      );
+    },
   },
 };
 </script>
 
 <template>
-  <div
-    v-outside.click.focusin="close"
-    :class="[$options.BASE_DROPDOWN_CLASS, { '!gl-block': block }]"
-  >
+  <div :class="[$options.BASE_DROPDOWN_CLASS, { '!gl-block': block }]">
     <component
       :is="toggleComponent"
       v-bind="toggleAttributes"
@@ -579,18 +608,26 @@ export default {
       </slot>
     </component>
 
-    <div
-      :id="baseDropdownId"
-      ref="content"
-      data-testid="base-dropdown-menu"
-      class="gl-new-dropdown-panel"
-      :class="panelClasses"
-      @keydown.esc.stop.prevent="closeAndFocus"
-    >
-      <div ref="dropdownArrow" class="gl-new-dropdown-arrow"></div>
-      <div class="gl-new-dropdown-inner">
-        <slot :visible="visible"></slot>
+    <dropdown-container :positioning-strategy="positioningStrategy">
+      <div
+        ref="dropdownContainer"
+        v-outside.click.focusin="handleClickOutside"
+        :class="$options.DROPDOWN_CONTAINER_CLASS"
+      >
+        <div
+          :id="baseDropdownId"
+          ref="content"
+          data-testid="base-dropdown-menu"
+          class="gl-new-dropdown-panel"
+          :class="panelClasses"
+          @keydown.esc.stop.prevent="closeAndFocus"
+        >
+          <div ref="dropdownArrow" class="gl-new-dropdown-arrow"></div>
+          <div class="gl-new-dropdown-inner">
+            <slot :visible="visible"></slot>
+          </div>
+        </div>
       </div>
-    </div>
+    </dropdown-container>
   </div>
 </template>

package/src/components/base/new_dropdowns/base_dropdown/dropdown_container.js

@@ -0,0 +1,34 @@
+/* eslint-disable import/no-default-export */
+import { MountingPortal } from 'portal-vue';
+import { POSITION_ABSOLUTE, POSITION_FIXED } from '../constants';
+
+export default {
+  props: {
+    /**
+     * Strategy to be applied by computePosition. If this is set to fixed, the dropdown's position
+     * needs to be set to fixed in CSS as well.
+     * https://floating-ui.com/docs/computePosition#strategy
+     */
+    positioningStrategy: {
+      type: String,
+      required: false,
+      default: POSITION_ABSOLUTE,
+      validator: (strategy) => [POSITION_ABSOLUTE, POSITION_FIXED].includes(strategy),
+    },
+  },
+  render(createElement) {
+    if (this.positioningStrategy === POSITION_FIXED) {
+      return createElement(
+        MountingPortal,
+        {
+          props: {
+            mountTo: 'body',
+            append: true,
+          },
+        },
+        [this.$scopedSlots.default()],
+      );
+    }
+    return this.$scopedSlots.default();
+  },
+};

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

@@ -24,12 +24,11 @@ import {
   dropdownPlacements,
   dropdownVariantOptions,
 } from '../../../../utils/constants';
-import GlBaseDropdown, { BASE_DROPDOWN_CLASS } from '../base_dropdown/base_dropdown.vue';
+import GlBaseDropdown from '../base_dropdown/base_dropdown.vue';
 import GlDisclosureDropdownItem, { ITEM_CLASS } from './disclosure_dropdown_item.vue';
 import GlDisclosureDropdownGroup from './disclosure_dropdown_group.vue';
 import { itemsValidator, isItem, hasOnlyListItems } from './utils';
 
-export const DROPDOWN_SELECTOR = `.${BASE_DROPDOWN_CLASS}`;
 export const ITEM_SELECTOR = `.${ITEM_CLASS}`;
 
 export default {
@@ -348,7 +347,7 @@ export default {
       if (
         this.autoClose &&
         e.target.closest(ITEM_SELECTOR) &&
-        e.target.closest(DROPDOWN_SELECTOR) === this.$refs.baseDropdown.$el
+        this.$refs.baseDropdown.containsElement(e.target)
       ) {
         this.closeAndFocus();
       }

package/src/components/base/new_dropdowns/dropdown.scss

@@ -2,18 +2,6 @@
   @apply gl-inline-flex;
   @apply gl-align-middle;
 
-  .gl-new-dropdown-arrow {
-    width: 8px;
-    height: 8px;
-
-    // blend in with the dropdown background
-    background: var(--gl-dropdown-background-color);
-    // these create the 45deg cutoff angle at the base of the caret
-    border-bottom: 1px solid var(--gl-dropdown-background-color);
-    border-right: 1px solid var(--gl-dropdown-background-color);
-    position: absolute;
-  }
-
   .gl-new-dropdown-custom-toggle {
     *:first-child {
       @apply gl-cursor-pointer;
@@ -24,42 +12,6 @@
     }
   }
 
-  .gl-new-dropdown-panel {
-    @apply gl-hidden;
-    @apply gl-bg-dropdown;
-    border-radius: var(--gl-dropdown-border-radius);
-    @apply gl-drop-shadow-md;
-    top: 0;
-    left: 0;
-    min-width: $gl-new-dropdown-min-width;
-    max-width: $gl-new-dropdown-max-width;
-    z-index: 1000;
-  }
-
-  .gl-new-dropdown-inner {
-    @apply gl-flex;
-    @apply gl-flex-col;
-    max-height: $gl-max-dropdown-max-height;
-  }
-
-  .gl-new-dropdown-contents {
-    position: relative;
-    @apply gl-grow;
-    @apply gl-overflow-y-auto;
-    @apply gl-pl-0;
-    @apply gl-mb-0;
-    @apply gl-py-2;
-    @apply gl-list-none;
-
-    &:focus-visible {
-      @apply gl-focus;
-    }
-
-    ul {
-      @apply gl-list-none;
-    }
-  }
-
   .gl-new-dropdown-toggle {
     // optically align the caret
     &.gl-button:not(.gl-new-dropdown-toggle-no-caret, .btn-icon) {
@@ -137,6 +89,57 @@
       @apply gl-pl-0;
     }
   }
+}
+
+.gl-new-dropdown-container {
+  .gl-new-dropdown-arrow {
+    width: 8px;
+    height: 8px;
+
+    // blend in with the dropdown background
+    background: var(--gl-dropdown-background-color);
+    // these create the 45deg cutoff angle at the base of the caret
+    border-bottom: 1px solid var(--gl-dropdown-background-color);
+    border-right: 1px solid var(--gl-dropdown-background-color);
+
+    position: absolute;
+  }
+
+  .gl-new-dropdown-panel {
+    @apply gl-hidden;
+    @apply gl-bg-dropdown;
+    border-radius: var(--gl-dropdown-border-radius);
+    @apply gl-drop-shadow-md;
+    top: 0;
+    left: 0;
+    min-width: $gl-new-dropdown-min-width;
+    max-width: $gl-new-dropdown-max-width;
+    z-index: 1000;
+  }
+
+  .gl-new-dropdown-inner {
+    @apply gl-flex;
+    @apply gl-flex-col;
+    max-height: $gl-max-dropdown-max-height;
+  }
+
+  .gl-new-dropdown-contents {
+    position: relative;
+    @apply gl-grow;
+    @apply gl-overflow-y-auto;
+    @apply gl-pl-0;
+    @apply gl-mb-0;
+    @apply gl-py-2;
+    @apply gl-list-none;
+
+    &:focus-visible {
+      @apply gl-focus;
+    }
+
+    ul {
+      @apply gl-list-none;
+    }
+  }
 
   $dropdown-content-padding: 0.25rem;
 

package/src/tokens/build/css/tokens.css

@@ -240,6 +240,17 @@
   --gl-line-height-42: 2.625rem;
   --gl-line-height-44: 2.75rem;
   --gl-line-height-52: 3.25rem;
+  --gl-opacity-0: 0;
+  --gl-opacity-1: .1;
+  --gl-opacity-2: .2;
+  --gl-opacity-3: .3;
+  --gl-opacity-4: .4;
+  --gl-opacity-5: .5;
+  --gl-opacity-6: .6;
+  --gl-opacity-7: .7;
+  --gl-opacity-8: .8;
+  --gl-opacity-9: .9;
+  --gl-opacity-10: 1;
   --gl-spacing-scale-0: 0;
   --gl-spacing-scale-1: 0.125rem;
   --gl-spacing-scale-2: 0.25rem;

package/src/tokens/build/css/tokens.dark.css

@@ -240,6 +240,17 @@
   --gl-line-height-42: 2.625rem;
   --gl-line-height-44: 2.75rem;
   --gl-line-height-52: 3.25rem;
+  --gl-opacity-0: 0;
+  --gl-opacity-1: .1;
+  --gl-opacity-2: .2;
+  --gl-opacity-3: .3;
+  --gl-opacity-4: .4;
+  --gl-opacity-5: .5;
+  --gl-opacity-6: .6;
+  --gl-opacity-7: .7;
+  --gl-opacity-8: .8;
+  --gl-opacity-9: .9;
+  --gl-opacity-10: 1;
   --gl-spacing-scale-0: 0;
   --gl-spacing-scale-1: 0.125rem;
   --gl-spacing-scale-2: 0.25rem;

package/src/tokens/build/docs/tokens-tailwind-docs.dark.json

@@ -44058,5 +44058,282 @@
       ],
       "cssWithValue": "var(--gl-control-border-radius, var(--gl-border-radius-default, 0.25rem))"
     }
+  },
+  "opacity": {
+    "0": {
+      "key": "{opacity.0}",
+      "$value": "0",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "0",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.0}"
+      },
+      "name": "OPACITY_0",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "0"
+      ],
+      "cssWithValue": "var(--gl-opacity-0, 0)"
+    },
+    "1": {
+      "key": "{opacity.1}",
+      "$value": ".1",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": ".1",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.1}"
+      },
+      "name": "OPACITY_1",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "1"
+      ],
+      "cssWithValue": "var(--gl-opacity-1, .1)"
+    },
+    "2": {
+      "key": "{opacity.2}",
+      "$value": ".2",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": ".2",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.2}"
+      },
+      "name": "OPACITY_2",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "2"
+      ],
+      "cssWithValue": "var(--gl-opacity-2, .2)"
+    },
+    "3": {
+      "key": "{opacity.3}",
+      "$value": ".3",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": ".3",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.3}"
+      },
+      "name": "OPACITY_3",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "3"
+      ],
+      "cssWithValue": "var(--gl-opacity-3, .3)"
+    },
+    "4": {
+      "key": "{opacity.4}",
+      "$value": ".4",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": ".4",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.4}"
+      },
+      "name": "OPACITY_4",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "4"
+      ],
+      "cssWithValue": "var(--gl-opacity-4, .4)"
+    },
+    "5": {
+      "key": "{opacity.5}",
+      "$value": ".5",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": ".5",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.5}"
+      },
+      "name": "OPACITY_5",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "5"
+      ],
+      "cssWithValue": "var(--gl-opacity-5, .5)"
+    },
+    "6": {
+      "key": "{opacity.6}",
+      "$value": ".6",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": ".6",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.6}"
+      },
+      "name": "OPACITY_6",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "6"
+      ],
+      "cssWithValue": "var(--gl-opacity-6, .6)"
+    },
+    "7": {
+      "key": "{opacity.7}",
+      "$value": ".7",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": ".7",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.7}"
+      },
+      "name": "OPACITY_7",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "7"
+      ],
+      "cssWithValue": "var(--gl-opacity-7, .7)"
+    },
+    "8": {
+      "key": "{opacity.8}",
+      "$value": ".8",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": ".8",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.8}"
+      },
+      "name": "OPACITY_8",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "8"
+      ],
+      "cssWithValue": "var(--gl-opacity-8, .8)"
+    },
+    "9": {
+      "key": "{opacity.9}",
+      "$value": ".9",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": ".9",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.9}"
+      },
+      "name": "OPACITY_9",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "9"
+      ],
+      "cssWithValue": "var(--gl-opacity-9, .9)"
+    },
+    "10": {
+      "key": "{opacity.10}",
+      "$value": "1",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/opacity.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "1",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{opacity.10}"
+      },
+      "name": "OPACITY_10",
+      "attributes": {},
+      "path": [
+        "opacity",
+        "10"
+      ],
+      "cssWithValue": "var(--gl-opacity-10, 1)"
+    }
   }
 }