@gitlab/ui 54.1.2 → 54.2.1

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

@@ -15,8 +15,12 @@ export default {
 </script>
 
 <template>
-  <ul role="group" :aria-labelledby="nameId" class="gl-mb-0 gl-pl-0 gl-list-style-none">
-    <li :id="nameId" role="presentation" class="gl-pl-5! gl-py-2! gl-font-sm gl-font-weight-bold">
+  <ul role="group" :aria-labelledby="nameId" class="gl-mb-0 gl-pl-0">
+    <li
+      :id="nameId"
+      role="presentation"
+      class="gl-pl-4 gl-pt-3 gl-pb-2 gl-font-sm gl-font-weight-bold"
+    >
       <slot name="group-label">{{ name }}</slot>
     </li>
     <slot></slot>

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

@@ -51,24 +51,24 @@ export default {
 
 <template>
   <li
-    class="gl-dropdown-item gl-focusable-dropdown-item"
+    class="gl-new-dropdown-item"
     role="option"
     :tabindex="isFocused ? 0 : -1"
     :aria-selected="isSelected"
     @click="toggleSelection"
     @keydown="onKeydown"
   >
-    <span class="dropdown-item">
+    <span class="gl-new-dropdown-item-content" :class="{ 'gl-bg-gray-50!': isSelected }">
       <gl-icon
         name="mobile-issue-close"
         data-testid="dropdown-item-checkbox"
         :class="[
-          'gl-dropdown-item-check-icon',
+          'gl-new-dropdown-item-check-icon',
           { 'gl-visibility-hidden': !isSelected },
           checkedClasses,
         ]"
       />
-      <span class="gl-dropdown-item-text-wrapper">
+      <span class="gl-new-dropdown-item-text-wrapper">
         <slot></slot>
       </span>
     </span>

package/src/scss/components.scss

@@ -75,6 +75,6 @@
 @import '../components/charts/tooltip/tooltip';
 @import '../components/shared_components/charts/tooltip_default_format';
 @import '../components/utilities/truncate/truncate';
-@import '../components/base/new_dropdowns/base_dropdown/base_dropdown';
 @import '../components/base/new_dropdowns/dropdown';
+@import '../components/base/new_dropdowns/dropdown_item';
 @import '../components/base/new_dropdowns/listbox/listbox';

package/src/scss/variables.scss

@@ -458,6 +458,7 @@ $gl-icon-sizes: 8 12 14 16 24 32 48 72;
 
 // Dropdowns
 $gl-dropdown-width: px-to-rem(240px);
+$gl-new-dropdown-width: px-to-rem(256px);
 $gl-dropdown-width-narrow: px-to-rem(160px);
 $gl-dropdown-width-wide: px-to-rem(400px);
 $gl-max-dropdown-max-height: px-to-rem(312px);

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

@@ -1,5 +0,0 @@
-.gl-dropdown-custom-toggle {
-  &:focus {
-    @include gl-focus;
-  }
-}