@gitlab/ui 54.1.2 → 54.2.0

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;
-  }
-}