@gitlab/ui 54.1.1 → 54.2.0

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

@@ -28,7 +28,7 @@ import { isOption, itemsValidator, flattenedOptions } from './utils';
 
 export const ITEM_SELECTOR = '[role="option"]';
 const HEADER_ITEMS_BORDER_CLASSES = ['gl-border-b-1', 'gl-border-b-solid', 'gl-border-b-gray-200'];
-const GROUP_TOP_BORDER_CLASSES = ['gl-border-t', 'gl-pt-3', 'gl-mt-3'];
+const GROUP_TOP_BORDER_CLASSES = ['gl-border-t', 'gl-pt-1', 'gl-mt-2'];
 export const SEARCH_INPUT_SELECTOR = '.gl-listbox-search-input';
 
 export default {
@@ -592,7 +592,7 @@ export default {
       <gl-button
         v-if="showResetButton"
         category="tertiary"
-        class="gl-focus-inset-border-2-blue-400! gl-flex-shrink-0 gl-font-sm! gl-px-2! gl-py-2!"
+        class="gl-focus-inset-border-2-blue-400! gl-flex-shrink-0 gl-font-sm! gl-px-2! gl-py-2! gl-w-auto! gl-m-0!"
         data-testid="listbox-reset-button"
         @click="onResetButtonClicked"
       >
@@ -625,7 +625,7 @@ export default {
       ref="list"
       :aria-labelledby="listAriaLabelledBy || headerId || toggleId"
       role="listbox"
-      class="gl-dropdown-contents gl-list-style-none gl-pl-0 gl-mb-0"
+      class="gl-new-dropdown-contents"
       tabindex="-1"
       @keydown="onKeydown"
     >
@@ -692,7 +692,7 @@ export default {
     <div
       v-else-if="showNoResultsText"
       aria-live="assertive"
-      class="gl-pl-7 gl-pr-5 gl-pt-3 gl-font-base gl-text-gray-600"
+      class="gl-pl-7 gl-pr-5 gl-py-3 gl-font-base gl-text-gray-600"
       data-testid="listbox-no-results-text"
     >
       {{ noResultsText }}

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