@gitlab/ui 38.9.0 → 38.10.0

package/package.json

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

package/src/components/base/filtered_search/filtered_search.vue

@@ -296,11 +296,6 @@ export default {
        */
       this.$emit('submit', normalizeTokens(cloneDeep(this.tokens)));
     },
-
-    clearInput() {
-      this.tokens = initialState();
-      this.$emit('clearInput');
-    },
   },
 };
 </script>

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

@@ -1,52 +1,76 @@
 import { setStoryTimeout } from '../../../utils/test_utils';
-import { GlInfiniteScroll } from '../../../index';
+import { GlInfiniteScroll, GlLoadingIcon } from '../../../index';
 import readme from './infinite_scroll.md';
 
 const ITEMS_BATCH_SIZE = 20;
 
 const template = `
   <gl-infinite-scroll
-    :max-list-height="285"
-    :fetched-items="fetchedItems"
-    @bottomReached="bottomReached"
+    :total-items="totalItems"
+    :fetched-items="localFetchedItems"
+    :max-list-height="maxListHeight"
+    @bottomReached="onBottomReached"
     >
     <template #items>
       <ul class="list-group list-group-flushed list-unstyled">
-        <li v-for="item in fetchedItems" :key="item" class="list-group-item">Item #{{ item }}</li>
+        <li v-for="item in localFetchedItems" :key="item" class="list-group-item">Item #{{ item }}</li>
       </ul>
     </template>
 
-    <template #default>
+    <template v-if="localIsLoading" #default>
       <div class="gl-mt-3">
-        <gl-loading-icon v-if="isLoading" />
-        <span v-else>{{ fetchedItems }} items loaded</span>
+        <gl-loading-icon />
       </div>
     </template>
   </gl-infinite-scroll>
 `;
 
-const generateProps = ({ isLoading = false, fetchedItems = ITEMS_BATCH_SIZE } = {}) => ({
+const generateProps = ({
+  isLoading = false,
+  totalItems = null,
+  fetchedItems = ITEMS_BATCH_SIZE,
+  maxListHeight = 285,
+} = {}) => ({
   isLoading,
+  totalItems,
   fetchedItems,
+  maxListHeight,
 });
 
 const Template = (args, { argTypes }) => ({
   components: {
     GlInfiniteScroll,
+    GlLoadingIcon,
   },
   props: Object.keys(argTypes),
+  watch: {
+    fetchedItems: {
+      immediate: true,
+      handler(fetchedItems) {
+        this.localFetchedItems = fetchedItems;
+      },
+    },
+    isLoading: {
+      immediate: true,
+      handler(isLoading) {
+        this.localIsLoading = isLoading;
+      },
+    },
+  },
   data() {
     return {
       loadTimer: null,
+      localFetchedItems: null,
+      localIsLoading: false,
     };
   },
   methods: {
-    bottomReached() {
+    onBottomReached() {
       clearTimeout(this.loadTimer);
-      this.isLoading = true;
+      this.localIsLoading = true;
       this.loadTimer = setStoryTimeout(() => {
-        this.fetchedItems += ITEMS_BATCH_SIZE;
-        this.isLoading = false;
+        this.localFetchedItems += ITEMS_BATCH_SIZE;
+        this.localIsLoading = false;
       }, 500);
     },
   },

package/src/components/base/popover/popover.scss

@@ -67,10 +67,12 @@ $gl-popover-max-width: $grid-size * 35;
     @include gl-font-sm;
     @include gl-font-weight-bold;
     @include gl-m-0;
+    @include gl-border-bottom-0;
+    @include gl-pb-0;
   }
 
   .popover-body {
-    @include gl-py-5;
+    @include gl-py-3;
     @include gl-px-4;
 
     > .popover-hr {

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { tooltipActionEvents } from '../../../utils/constants';
+import { tooltipActionEvents, popoverPlacements } from '../../../utils/constants';
 import GlPopover from './popover.vue';
 
 describe('GlPopover', () => {
@@ -49,6 +49,20 @@ describe('GlPopover', () => {
     });
   });
 
+  describe('placement', () => {
+    it(`uses "${popoverPlacements.top}" placement by default`, () => {
+      createWrapper();
+
+      expect(findBVPopover().props('placement')).toBe(popoverPlacements.top);
+    });
+
+    it('uses a defined placement', () => {
+      createWrapper({ placement: popoverPlacements.right });
+
+      expect(findBVPopover().props('placement')).toBe(popoverPlacements.right);
+    });
+  });
+
   describe('close button', () => {
     let doCloseMock;
 

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

@@ -26,7 +26,7 @@ const getTemplate = (id, slots = '') => `
   </div>`;
 
 const generateProps = ({
-  placement = popoverPlacements.top,
+  placement = defaultValue('placement'),
   title = 'Popover',
   triggers = defaultValue('triggers'),
   cssClasses = defaultValue('cssClasses'),

package/src/components/base/popover/popover.vue

@@ -2,6 +2,7 @@
 import { BPopover } from 'bootstrap-vue';
 import tooltipMixin from '../../mixins/tooltip_mixin';
 import CloseButton from '../../shared_components/close_button/close_button.vue';
+import { popoverPlacements } from '../../../utils/constants';
 
 const popoverRefName = 'bPopover';
 
@@ -38,6 +39,11 @@ export default {
       required: false,
       default: false,
     },
+    placement: {
+      type: String,
+      required: false,
+      default: popoverPlacements.top,
+    },
   },
   computed: {
     customClass() {
@@ -66,6 +72,7 @@ export default {
     :custom-class="customClass"
     :triggers="triggers"
     :title="title"
+    :placement="placement"
     v-bind="$attrs"
     v-on="$listeners"
   >

package/src/scss/utilities.scss

@@ -2433,6 +2433,14 @@
   color: $purple-600 !important;
 }
 
+.gl-text-purple-700 {
+  color: $purple-700;
+}
+
+.gl-text-purple-700\! {
+  color: $purple-700 !important;
+}
+
 .gl-text-theme-indigo-200 {
   color: $theme-indigo-200;
 }
@@ -4495,6 +4503,30 @@
   }
 }
 
+.gl-md-w-half {
+  @include gl-media-breakpoint-up(md) {
+    width: 50%;
+  }
+}
+
+.gl-md-w-half\! {
+  @include gl-media-breakpoint-up(md) {
+    width: 50% !important;
+  }
+}
+
+.gl-lg-w-half {
+  @include gl-media-breakpoint-up(lg) {
+    width: 50%;
+  }
+}
+
+.gl-lg-w-half\! {
+  @include gl-media-breakpoint-up(lg) {
+    width: 50% !important;
+  }
+}
+
 .gl-md-w-auto {
   @include gl-media-breakpoint-up(md) {
     width: auto;

package/src/scss/utility-mixins/color.scss

@@ -185,6 +185,10 @@
   color: $purple-600;
 }
 
+@mixin gl-text-purple-700 {
+  color: $purple-700;
+}
+
 @mixin gl-text-theme-indigo-200 {
   color: $theme-indigo-200;
 }

package/src/scss/utility-mixins/sizing.scss

@@ -234,6 +234,18 @@
   }
 }
 
+@mixin gl-md-w-half {
+  @include gl-media-breakpoint-up(md) {
+    width: 50%;
+  }
+}
+
+@mixin gl-lg-w-half {
+  @include gl-media-breakpoint-up(lg) {
+    width: 50%;
+  }
+}
+
 @mixin gl-md-w-auto {
   @include gl-media-breakpoint-up(md) {
     width: auto;