@gitlab/ui 63.0.0 → 63.1.0

package/package.json

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

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

@@ -32,6 +32,7 @@
   }
 
   .gl-new-dropdown-contents {
+    @include gl-relative;
     @include gl-flex-grow-1;
     @include gl-overflow-y-auto;
     @include gl-pl-0;
@@ -101,4 +102,69 @@
       @include gl-mx-0;
     }
   }
+
+  $dropdown-content-padding: 0.25rem;
+
+  // Scrim overlay related styles (the shadow that appears above and below the content) indicating that the content is scrollable
+  .gl-new-dropdown-contents-with-scrim-overlay {
+    padding: 0;
+  }
+
+  .gl-new-dropdown-contents {
+    .top-scrim-wrapper,
+    .bottom-scrim-wrapper {
+      height: $dropdown-content-padding;
+      opacity: 0;
+      position: sticky;
+      z-index: 1;
+      display: block;
+      overflow: visible;
+      left: 1px;
+      right: 1px;
+      pointer-events: none;
+      transition: opacity 0.1s;
+    }
+
+    .top-scrim-wrapper {
+      top: 0;
+
+      .top-scrim {
+        left: 0;
+        right: 0;
+
+        &.top-scrim-light {
+          height: 2.25rem;
+          border-radius: 0.375rem 0.375rem 0 0;
+          background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0));
+        }
+
+        &.top-scrim-dark {
+          height: 0.25rem;
+          background: linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0%, rgba(255, 255, 255, 0) 100%);
+        }
+      }
+    }
+
+    .bottom-scrim-wrapper {
+      bottom: 0;
+      height: $dropdown-content-padding;
+
+      .bottom-scrim {
+        height: 0;
+        position: relative;
+        top: calc(-2.25rem + #{$dropdown-content-padding});
+        border-radius: 0 0 0.375rem 0.375rem;
+        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1));
+      }
+    }
+
+    &.top-scrim-visible .top-scrim-wrapper,
+    &.bottom-scrim-visible .bottom-scrim-wrapper {
+      opacity: 1;
+    }
+
+    &.bottom-scrim-visible .bottom-scrim {
+      height: 2.25rem;
+    }
+  }
 }

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

@@ -3,11 +3,16 @@
   @include gl-px-2;
   @include gl-my-1;
 
-  &:first-child {
+  /* when there is a scrim `li` items inside the list, the first and last real items
+  do not match the selector `:first-child` and `:last-child`,
+  that's why we have to target them with a different selector */
+  &:first-child,
+  .gl-new-dropdown-contents-with-scrim-overlay > &:nth-child(3):not(:last-child) {
     @include gl-mt-0;
   }
 
-  &:last-child {
+  &:last-child,
+  .gl-new-dropdown-contents-with-scrim-overlay > &:nth-last-child(3):not(:first-child) {
     @include gl-mb-0;
   }
 

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

@@ -314,6 +314,8 @@ export default {
       listboxId: uniqueId('listbox-'),
       nextFocusedItemIndex: null,
       searchStr: '',
+      topBoundaryVisible: true,
+      bottomBoundaryVisible: true,
     };
   },
   computed: {
@@ -321,6 +323,15 @@ export default {
       if (this.items.length === 0 || isOption(this.items[0])) return 'ul';
       return 'div';
     },
+    listboxClasses() {
+      return {
+        'top-scrim-visible': !this.topBoundaryVisible,
+        'bottom-scrim-visible': !this.bottomBoundaryVisible,
+      };
+    },
+    itemTag() {
+      return this.listboxTag === 'ul' ? 'li' : 'div';
+    },
     flattenedOptions() {
       return flattenedOptions(this.items);
     },
@@ -379,6 +390,12 @@ export default {
       }
       return toggleClasses;
     },
+    hasHeader() {
+      return this.headerText || this.searchable;
+    },
+    hasFooter() {
+      return Boolean(this.$scopedSlots.footer);
+    },
   },
   watch: {
     selected: {
@@ -394,6 +411,15 @@ export default {
         }
       },
     },
+    items: {
+      handler() {
+        this.$nextTick(() => {
+          /* Every time the list of items changes (on search),
+           * the observed elements are recreated, thus we need to start obesrving them again */
+          this.observeScroll();
+        });
+      },
+    },
     ...(process.env.NODE_ENV !== 'production'
       ? {
           resetButtonLabel: {
@@ -419,6 +445,12 @@ export default {
         }
       : {}),
   },
+  mounted() {
+    this.observeScroll();
+  },
+  beforeDestroy() {
+    this.scrollObserver?.disconnect();
+  },
   methods: {
     open() {
       this.$refs.baseDropdown.open();
@@ -581,6 +613,35 @@ export default {
         'aria-posinset': index + 1,
       };
     },
+    observeScroll() {
+      const root = this.$refs.list;
+
+      const options = {
+        rootMargin: '8px',
+        root,
+        threshold: 1.0,
+      };
+
+      this.scrollObserver?.disconnect();
+
+      const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          this[entry.target?.$__visibilityProp] = entry.isIntersecting;
+        });
+      }, options);
+
+      const topBoundary = this.$refs['top-boundary'];
+      const bottomBoundary = this.$refs['bottom-boundary'];
+      if (topBoundary) {
+        topBoundary.$__visibilityProp = 'topBoundaryVisible';
+        observer.observe(topBoundary);
+      }
+      if (bottomBoundary) {
+        bottomBoundary.$__visibilityProp = 'bottomBoundaryVisible';
+        observer.observe(bottomBoundary);
+      }
+      this.scrollObserver = observer;
+    },
     isOption,
   },
 };
@@ -663,10 +724,18 @@ export default {
       ref="list"
       :aria-labelledby="listAriaLabelledBy || headerId || toggleId"
       role="listbox"
-      class="gl-new-dropdown-contents"
+      class="gl-new-dropdown-contents gl-new-dropdown-contents-with-scrim-overlay"
+      :class="listboxClasses"
       tabindex="-1"
       @keydown="onKeydown"
     >
+      <component :is="itemTag" class="top-scrim-wrapper" aria-hidden="true" data-testid="top-scrim">
+        <div
+          class="top-scrim"
+          :class="{ 'top-scrim-light': !hasHeader, 'top-scrim-dark': hasHeader }"
+        ></div>
+      </component>
+      <component :is="itemTag" ref="top-boundary" aria-hidden="true" />
       <template v-for="(item, index) in items">
         <template v-if="isOption(item)">
           <gl-listbox-item
@@ -714,13 +783,22 @@ export default {
           </gl-listbox-group>
         </template>
       </template>
-      <component :is="listboxTag === 'ul' ? 'li' : 'div'" v-if="infiniteScrollLoading">
+      <component :is="itemTag" v-if="infiniteScrollLoading">
         <gl-loading-icon data-testid="listbox-infinite-scroll-loader" size="md" class="gl-my-3" />
       </component>
       <gl-intersection-observer
         v-if="showIntersectionObserver"
         @appear="onIntersectionObserverAppear"
       />
+      <component :is="itemTag" ref="bottom-boundary" aria-hidden="true" />
+      <component
+        :is="itemTag"
+        class="bottom-scrim-wrapper"
+        aria-hidden="true"
+        data-testid="bottom-scrim"
+      >
+        <div class="bottom-scrim" :class="{ 'gl-rounded-0!': hasFooter }"></div>
+      </component>
     </component>
     <span
       v-if="announceSRSearchResults"