@gitlab/ui 63.3.0 → 64.0.0

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

@@ -11,6 +11,7 @@ import {
   END,
   ARROW_DOWN,
   ARROW_UP,
+  GL_DROPDOWN_CONTENTS_CLASS,
 } from '../constants';
 import {
   buttonCategoryOptions,
@@ -300,13 +301,13 @@ export default {
       default: false,
     },
     /**
-     * Options to be passed to the underlying Popper.js instance.
-     * Overrides built-in options.
+     * Custom offset to be applied to Floating UI's offset middleware.
+     * https://floating-ui.com/docs/offset
      */
-    popperOptions: {
-      type: Object,
+    dropdownOffset: {
+      type: [Number, Object],
       required: false,
-      default: () => ({}),
+      default: undefined,
     },
     /**
      * Lets the dropdown extend to match its content's width, up to a maximum width
@@ -338,6 +339,7 @@ export default {
       return {
         'top-scrim-visible': !this.topBoundaryVisible,
         'bottom-scrim-visible': !this.bottomBoundaryVisible,
+        [GL_DROPDOWN_CONTENTS_CLASS]: true,
       };
     },
     itemTag() {
@@ -705,7 +707,7 @@ export default {
     :loading="loading"
     :no-caret="noCaret"
     :placement="placement"
-    :popper-options="popperOptions"
+    :offset="dropdownOffset"
     :fluid-width="fluidWidth"
     @[$options.events.GL_DROPDOWN_SHOWN]="onShow"
     @[$options.events.GL_DROPDOWN_HIDDEN]="onHide"

package/src/scss/utilities.scss

@@ -6745,18 +6745,90 @@
 .gl-gap-7\! {
   gap: $gl-spacing-scale-7 !important;
 }
+.gl-column-gap-1 {
+  column-gap: $gl-spacing-scale-1;
+}
+.gl-column-gap-1\! {
+  column-gap: $gl-spacing-scale-1 !important;
+}
+.gl-column-gap-2 {
+  column-gap: $gl-spacing-scale-2;
+}
+.gl-column-gap-2\! {
+  column-gap: $gl-spacing-scale-2 !important;
+}
+.gl-column-gap-3 {
+  column-gap: $gl-spacing-scale-3;
+}
+.gl-column-gap-3\! {
+  column-gap: $gl-spacing-scale-3 !important;
+}
+.gl-column-gap-4 {
+  column-gap: $gl-spacing-scale-4;
+}
+.gl-column-gap-4\! {
+  column-gap: $gl-spacing-scale-4 !important;
+}
+.gl-column-gap-5 {
+  column-gap: $gl-spacing-scale-5;
+}
+.gl-column-gap-5\! {
+  column-gap: $gl-spacing-scale-5 !important;
+}
 .gl-column-gap-6 {
   column-gap: $gl-spacing-scale-6;
 }
 .gl-column-gap-6\! {
   column-gap: $gl-spacing-scale-6 !important;
 }
+.gl-column-gap-7 {
+  column-gap: $gl-spacing-scale-7;
+}
+.gl-column-gap-7\! {
+  column-gap: $gl-spacing-scale-7 !important;
+}
+.gl-row-gap-1 {
+  row-gap: $gl-spacing-scale-1;
+}
+.gl-row-gap-1\! {
+  row-gap: $gl-spacing-scale-1 !important;
+}
+.gl-row-gap-2 {
+  row-gap: $gl-spacing-scale-2;
+}
+.gl-row-gap-2\! {
+  row-gap: $gl-spacing-scale-2 !important;
+}
+.gl-row-gap-3 {
+  row-gap: $gl-spacing-scale-3;
+}
+.gl-row-gap-3\! {
+  row-gap: $gl-spacing-scale-3 !important;
+}
+.gl-row-gap-4 {
+  row-gap: $gl-spacing-scale-4;
+}
+.gl-row-gap-4\! {
+  row-gap: $gl-spacing-scale-4 !important;
+}
+.gl-row-gap-5 {
+  row-gap: $gl-spacing-scale-5;
+}
+.gl-row-gap-5\! {
+  row-gap: $gl-spacing-scale-5 !important;
+}
 .gl-row-gap-6 {
   row-gap: $gl-spacing-scale-6;
 }
 .gl-row-gap-6\! {
   row-gap: $gl-spacing-scale-6 !important;
 }
+.gl-row-gap-7 {
+  row-gap: $gl-spacing-scale-7;
+}
+.gl-row-gap-7\! {
+  row-gap: $gl-spacing-scale-7 !important;
+}
 .gl-xs-mb-3 {
   @include gl-media-breakpoint-down(sm) {
   margin-bottom: $gl-spacing-scale-3;

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

@@ -886,10 +886,34 @@
 * - Utilities should strictly follow $gl-spacing-scale
 */
 
+@mixin gl-column-gap-1 {
+  column-gap: $gl-spacing-scale-1;
+}
+
+@mixin gl-column-gap-2 {
+  column-gap: $gl-spacing-scale-2;
+}
+
+@mixin gl-column-gap-3 {
+  column-gap: $gl-spacing-scale-3;
+}
+
+@mixin gl-column-gap-4 {
+  column-gap: $gl-spacing-scale-4;
+}
+
+@mixin gl-column-gap-5 {
+  column-gap: $gl-spacing-scale-5;
+}
+
 @mixin gl-column-gap-6 {
   column-gap: $gl-spacing-scale-6;
 }
 
+@mixin gl-column-gap-7 {
+  column-gap: $gl-spacing-scale-7;
+}
+
 /**
 * Row gap utilities
 *
@@ -898,10 +922,34 @@
 * - Utilities should strictly follow $gl-spacing-scale
 */
 
+@mixin gl-row-gap-1 {
+  row-gap: $gl-spacing-scale-1;
+}
+
+@mixin gl-row-gap-2 {
+  row-gap: $gl-spacing-scale-2;
+}
+
+@mixin gl-row-gap-3 {
+  row-gap: $gl-spacing-scale-3;
+}
+
+@mixin gl-row-gap-4 {
+  row-gap: $gl-spacing-scale-4;
+}
+
+@mixin gl-row-gap-5 {
+  row-gap: $gl-spacing-scale-5;
+}
+
 @mixin gl-row-gap-6 {
   row-gap: $gl-spacing-scale-6;
 }
 
+@mixin gl-row-gap-7 {
+  row-gap: $gl-spacing-scale-7;
+}
+
 /**
 * Responsive margin utilities.
 *