@gitlab/ui 39.6.0 → 39.7.1

package/package.json

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

package/scss_to_js/scss_variables.js

@@ -318,7 +318,7 @@ export const glModalLargeWidth = '61.875rem'
 export const modalHeaderBorderColor = '#bfbfbf'
 export const modalFooterBorderColor = '#bfbfbf'
 export const modalTitleLineHeight = '1.25rem'
-export const modalBackdrop = '#000'
+export const modalBackdropBg = '#000'
 export const modalBackdropOpacity = '0.64'
 export const bodyColor = '#303030'
 export const secondary = '#f0f0f0'

package/scss_to_js/scss_variables.json

@@ -1673,7 +1673,7 @@
       "compiledValue": "1.25rem"
     },
     {
-      "name": "$modal-backdrop",
+      "name": "$modal-backdrop-bg",
       "value": "#000",
       "compiledValue": "#000"
     },

package/src/components/base/infinite_scroll/infinite_scroll.spec.js

@@ -73,7 +73,7 @@ describe('Infinite Scroll component', () => {
 
     expect(wrapper.emitted('bottomReached')).toBeFalsy();
 
-    mockScrollTo({ top: INITIAL_HEIGHT });
+    mockScrollTo({ top: INITIAL_HEIGHT - 0.5 });
     expect(wrapper.emitted('bottomReached')).toBeTruthy();
   });
 

package/src/components/base/infinite_scroll/infinite_scroll.vue

@@ -7,6 +7,7 @@ const throttleDuration = 1000;
  * Values in pixels, should be a small amount.
  */
 export const adjustScrollGap = 5;
+const THRESHOLD = 1;
 
 export default {
   props: {
@@ -138,9 +139,9 @@ export default {
       return this.$refs.infiniteContainer.scrollTop;
     },
     handleScroll: throttle(function handleScrollThrottled() {
-      if (this.scrollTop() + this.maxListHeight >= this.itemsListHeight()) {
+      if (Math.abs(this.itemsListHeight() - this.maxListHeight - this.scrollTop()) < THRESHOLD) {
         this.bottomReached();
-      } else if (this.scrollTop() === 0) {
+      } else if (this.scrollTop() <= THRESHOLD) {
         this.topReached();
       }
     }),

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

@@ -37,7 +37,6 @@
 
   > .gl-tab-counter-badge {
     font-weight: inherit;
-    color: inherit;
     @include gl-ml-2;
   }
 }

package/src/components/base/tabs/tabs/tabs.stories.js

@@ -1,5 +1,6 @@
 import { range } from 'lodash';
 import { GlTabs, GlTab, GlScrollableTabs, GlBadge } from '../../../../index';
+import { badgeVariantOptions } from '../../../../utils/constants';
 import readme from './tabs.md';
 
 const components = {
@@ -152,28 +153,18 @@ export const WithCounterBadges = (_args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { ...components, GlBadge },
   template: wrap(`
-    <gl-tab>
+    <gl-tab 
+      v-for="variant in $options.badgeVariantOptions"
+      :key="variant"
+    >
       <template #title>
         <span>Tab</span>
-        <gl-badge size="sm" class="gl-tab-counter-badge">500</gl-badge>
+        <gl-badge size="sm" class="gl-tab-counter-badge" :variant="variant">500</gl-badge>
         <span class="sr-only">items</span>
       </template>
-      Tab panel 1
-    </gl-tab>
-    <gl-tab>
-      <template #title>
-        <span>Tab</span>
-        <gl-badge size="sm" class="gl-tab-counter-badge">250</gl-badge>
-        <span class="sr-only">items</span>
-      </template>
-      Tab panel 2
-    </gl-tab>
-    <gl-tab>
-      <template #title>
-        <span>Tab</span>
-      </template>
-      Tab panel 3
+      Tab panel {{ variant }}
     </gl-tab>`),
+  badgeVariantOptions,
 });
 
 export const WithActions = (_args, { argTypes }) => ({

package/src/scss/variables.scss

@@ -461,7 +461,7 @@ $gl-modal-large-width: px-to-rem(990px);
 $modal-header-border-color: $gray-200;
 $modal-footer-border-color: $gray-200;
 $modal-title-line-height: $gl-line-height-20;
-$modal-backdrop: #000;
+$modal-backdrop-bg: #000;
 $modal-backdrop-opacity: 0.64;
 
 // Bootstrap overrides