@gitlab/ui 64.23.0 → 64.24.1

package/package.json

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

package/src/components/base/carousel/carousel.scss

@@ -5,3 +5,26 @@
     @include gl-focus;
   }
 }
+
+// Make size of focus border on indicator and prev/next button equal to themselves
+.carousel-indicators li {
+  @include gl-border-top-0;
+  @include gl-border-bottom-0;
+  margin-bottom: 10px;
+}
+
+.carousel-control-prev {
+  margin-left: 7%;
+}
+
+.carousel-control-next {
+  margin-right: 7%;
+}
+
+.carousel-control-prev,
+.carousel-control-next {
+  width: auto;
+  top: 50%;
+  bottom: auto;
+  transform: translateY(-50%);
+}

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

@@ -216,6 +216,18 @@ export default {
         },
       };
     },
+    toggleListeners() {
+      return this.toggleOptions.listeners;
+    },
+
+    toggleAttributes() {
+      const { listeners, is, ...attributes } = this.toggleOptions;
+
+      return attributes;
+    },
+    toggleComponent() {
+      return this.toggleOptions.is;
+    },
     toggleElement() {
       return this.$refs.toggle.$el || this.$refs.toggle?.firstElementChild;
     },
@@ -400,12 +412,12 @@ export default {
 <template>
   <div v-outside="close" class="gl-new-dropdown" :class="{ 'gl-display-block!': block }">
     <component
-      :is="toggleOptions.is"
-      v-bind="toggleOptions"
+      :is="toggleComponent"
+      v-bind="toggleAttributes"
       :id="toggleId"
       ref="toggle"
       data-testid="base-dropdown-toggle"
-      v-on="toggleOptions.listeners"
+      v-on="toggleListeners"
     >
       <!-- @slot Custom toggle button content -->
       <slot name="toggle">

package/src/components/base/tabs/tabs/tabs.scss

@@ -51,13 +51,12 @@
 .gl-tab-nav-item-active {
   @include gl-font-weight-bold;
   @include gl-text-gray-900;
-  @include gl-inset-border-b-2-theme-accent;
+  @include gl-inset-border-b-2-blue-500;
 
   &:active,
   &:focus,
   &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 var(--gl-theme-accent, $theme-indigo-500),
-      $focus-ring;
+    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $blue-500, $focus-ring;
     @include gl-outline-none;
   }
 }

package/src/scss/utilities.scss

@@ -2048,6 +2048,14 @@
   box-shadow: inset 0 0 0 $gl-border-size-1 $blue-600 !important
 }
 
+.gl-inset-border-b-2-blue-500 {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $blue-500
+}
+
+.gl-inset-border-b-2-blue-500\! {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $blue-500 !important
+}
+
 .gl-inset-border-1-green-500 {
   box-shadow: inset 0 0 0 $gl-border-size-1 $green-500
 }

package/src/scss/utility-mixins/box-shadow.scss

@@ -85,6 +85,10 @@
   box-shadow: inset 0 0 0 $gl-border-size-1 $blue-600;
 }
 
+@mixin gl-inset-border-b-2-blue-500 {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $blue-500;
+}
+
 @mixin gl-inset-border-1-green-500 {
   box-shadow: inset 0 0 0 $gl-border-size-1 $green-500;
 }