@gitlab/ui 128.5.1 → 128.6.0

package/package.json

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

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

@@ -196,6 +196,14 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Allows the dropdown panel to match the width of the trigger element
+     */
+    panelMatchTriggerWidth: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     /**
      * 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.
@@ -362,7 +370,8 @@ export default {
     panelClasses() {
       return {
         '!gl-block': this.visible,
-        [FIXED_WIDTH_CLASS]: !this.fluidWidth,
+        [FIXED_WIDTH_CLASS]: !this.fluidWidth && !this.panelMatchTriggerWidth,
+        'gl-new-dropdown-panel-fluid-width': this.fluidWidth && !this.panelMatchTriggerWidth,
         'gl-fixed': this.openedYet && this.isFixed,
         'gl-absolute': this.openedYet && !this.isFixed,
       };
@@ -397,6 +406,11 @@ export default {
                     maxWidth: `${Math.max(0, availableWidth)}px`,
                   }
                 : {};
+              const triggerWidth = this.panelMatchTriggerWidth
+                ? {
+                    minWidth: `${this.toggleElement.getBoundingClientRect().width}px`,
+                  }
+                : {};
 
               Object.assign(
                 contentsEl.style,
@@ -404,6 +418,7 @@ export default {
                   maxHeight: `${Math.max(contentsAvailableHeight, 0)}px`,
                 },
                 maxWidth,
+                triggerWidth,
               );
             },
           }),

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

@@ -112,9 +112,12 @@
     @apply gl-drop-shadow-md;
     top: 0;
     left: 0;
+    z-index: 1000;
+  }
+
+  .gl-new-dropdown-panel-fluid-width {
     min-width: $gl-new-dropdown-min-width;
     max-width: $gl-new-dropdown-max-width;
-    z-index: 1000;
   }
 
   .gl-new-dropdown-inner {

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

@@ -346,6 +346,14 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Allows the dropdown panel to match the width of the trigger element
+     */
+    panelMatchTriggerWidth: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     /**
      * Strategy to be applied by computePosition. If the dropdown's container is too short for it to
      * fit in, setting this to fixed will let it position itself above its container.
@@ -980,6 +988,7 @@ export default {
     :placement="placement"
     :offset="dropdownOffset"
     :fluid-width="fluidWidth"
+    :panel-match-trigger-width="panelMatchTriggerWidth"
     :positioning-strategy="positioningStrategy"
     @[$options.events.GL_DROPDOWN_FOCUS_CONTENT]="onFocusContent"
     @[$options.events.GL_DROPDOWN_SHOWN]="onShow"