@gitlab/ui 49.9.1 → 49.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "49.9.1",
+  "version": "49.10.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -60,7 +60,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.2",
-    "bootstrap-vue": "2.23.1",
+    "bootstrap-vue": "2.20.1",
     "dompurify": "^2.4.1",
     "echarts": "^5.3.2",
     "iframe-resizer": "^4.3.2",
@@ -109,7 +109,8 @@
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-require-context-hook": "^1.0.0",
     "babel-preset-vue": "^2.0.2",
-    "bootstrap": "4.6.2",
+    "bootstrap": "4.5.3",
+    "bootstrap-vue-vue3": "npm:bootstrap-vue@2.23.1",
     "cypress": "^10.11.0",
     "emoji-regex": "^10.0.0",
     "eslint": "8.27.0",

package/src/components/base/daterange_picker/daterange_picker.scss

@@ -5,16 +5,9 @@
 
   label {
     @include gl-font-weight-bold;
-    @include gl-mr-2;
-    @include gl-ml-2;
-  }
-
-  > div:first-of-type label {
-    @include gl-ml-0;
   }
 
   .gl-datepicker-input {
-    @include gl-w-full;
     @include gl-border-gray-100;
     @include gl-text-gray-900;
   }

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

@@ -248,7 +248,7 @@ describe('Daterange Picker', () => {
     it('does not show default slot or tooltip icon by default', () => {
       factory();
 
-      expect(findDateRangeIndicator().text()).toBe('');
+      expect(findDateRangeIndicator().exists()).toBe(false);
       expect(findTooltipIcon().exists()).toBe(false);
     });
 
@@ -271,9 +271,19 @@ describe('Daterange Picker', () => {
     });
 
     it('adds the indicator class when provided', () => {
-      factory({ dateRangeIndicatorClass });
+      factory({ dateRangeIndicatorClass }, slots);
 
       expect(wrapper.find(`.${dateRangeIndicatorClass}`).exists()).toBe(true);
     });
   });
+
+  it.each`
+    prop                  | value                 | testid
+    ${'startPickerClass'} | ${'gl-text-blue-500'} | ${'daterange-picker-start-container'}
+    ${'endPickerClass'}   | ${'gl-text-red-500'}  | ${'daterange-picker-end-container'}
+  `('adds the provided $value class to $testid', ({ prop, value, testid }) => {
+    factory({ [prop]: value });
+
+    expect(wrapper.find(`[data-testid="${testid}"]`).classes()).toContain(value);
+  });
 });

package/src/components/base/daterange_picker/daterange_picker.vue

@@ -4,6 +4,14 @@ import { getDayDifference, getDateInPast, getDateInFuture } from '../../../utils
 import GlDatepicker from '../datepicker/datepicker.vue';
 import GlIcon from '../icon/icon.vue';
 
+const CONTAINER_CLASSES = [
+  'gl-display-flex',
+  'gl-align-items-baseline',
+  'gl-flex-wrap',
+  'gl-sm-flex-wrap-nowrap',
+  'gl-sm-gap-3',
+];
+
 export default {
   components: {
     GlDatepicker,
@@ -165,6 +173,15 @@ export default {
       const numberOfDays = getDayDifference(this.startDate, this.endDate);
       return this.sameDaySelection ? numberOfDays + 1 : numberOfDays;
     },
+    startContainerClasses() {
+      return [this.startPickerClass, ...CONTAINER_CLASSES];
+    },
+    endContainerClasses() {
+      return [this.endPickerClass, ...CONTAINER_CLASSES];
+    },
+    showIndicator() {
+      return Boolean(this.$scopedSlots.default || this.tooltip);
+    },
   },
   watch: {
     value(val) {
@@ -229,8 +246,8 @@ export default {
 </script>
 
 <template>
-  <div class="gl-daterange-picker">
-    <div :class="startPickerClass">
+  <div class="gl-daterange-picker gl-gap-5 gl-display-flex">
+    <div :class="startContainerClasses" data-testid="daterange-picker-start-container">
       <label :class="labelClass">{{ fromLabel }}</label>
 
       <gl-datepicker
@@ -248,7 +265,7 @@ export default {
         @close="onStartPickerClose"
       />
     </div>
-    <div :class="endPickerClass">
+    <div :class="endContainerClasses" data-testid="daterange-picker-end-container">
       <label :class="labelClass">{{ toLabel }}</label>
       <gl-datepicker
         :key="numericStartTime"
@@ -269,20 +286,14 @@ export default {
       />
     </div>
     <div
+      v-if="showIndicator"
       :class="dateRangeIndicatorClass"
       data-testid="daterange-picker-indicator"
-      class="gl-display-flex gl-flex-direction-row gl-align-items-center gl-text-gray-500 gl-ml-2"
+      class="gl-display-flex gl-flex-direction-row gl-align-items-center gl-text-gray-500 gl-gap-3"
     >
       <!-- @slot Content to display for days selected. The value is -1 when no date range is selected.-->
       <slot v-bind="{ daysSelected: numberOfDays }"></slot>
-      <gl-icon
-        v-if="tooltip"
-        v-gl-tooltip
-        name="information-o"
-        :title="tooltip"
-        :size="16"
-        class="gl-ml-2"
-      />
+      <gl-icon v-if="tooltip" v-gl-tooltip name="information-o" :title="tooltip" :size="16" />
     </div>
   </div>
 </template>

package/src/components/base/form/form_checkbox/form_checkbox_group.vue

@@ -1,6 +1,6 @@
 <script>
 import { BFormCheckboxGroup } from 'bootstrap-vue';
-import { formOptionsMixin } from 'bootstrap-vue/src/mixins/form-options';
+import formOptionsMixin from 'bootstrap-vue/src/mixins/form-options';
 import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/safe_html';
 import GlFormCheckbox from './form_checkbox.vue';
 

package/src/components/base/form/form_radio_group/form_radio_group.vue

@@ -1,6 +1,6 @@
 <script>
 import { BFormRadioGroup } from 'bootstrap-vue';
-import { formOptionsMixin } from 'bootstrap-vue/src/mixins/form-options';
+import formOptionsMixin from 'bootstrap-vue/src/mixins/form-options';
 import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/safe_html';
 import GlFormRadio from '../form_radio/form_radio.vue';
 

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

@@ -45,11 +45,6 @@ export default {
       required: false,
       default: popoverPlacements.top,
     },
-    boundaryPadding: {
-      type: [Number, String],
-      required: false,
-      default: 5,
-    },
   },
   computed: {
     customClass() {
@@ -79,7 +74,6 @@ export default {
     :triggers="triggers"
     :title="title"
     :placement="placement"
-    :boundary-padding="boundaryPadding"
     v-bind="$attrs"
     v-on="$listeners"
   >

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

@@ -341,8 +341,7 @@ describe('tabs component', () => {
           await nextTick();
           await nextTick();
 
-          expect(wrapper.emitted().input[0]).toEqual([0]);
-          expect(wrapper.emitted().input[1]).toEqual([1]);
+          expect(wrapper.emitted().input.pop()).toEqual([1]);
         });
       });
     });

package/src/scss/utilities.scss

@@ -3256,6 +3256,18 @@
   flex-wrap: nowrap !important;
 }
 
+.gl-sm-flex-wrap-nowrap {
+  @include gl-media-breakpoint-up(sm) {
+  flex-wrap: nowrap;
+  }
+}
+
+.gl-sm-flex-wrap-nowrap\! {
+  @include gl-media-breakpoint-up(sm) {
+  flex-wrap: nowrap !important;
+  }
+}
+
 .gl-flex-nowrap {
   flex-wrap: nowrap;
 }
@@ -6312,6 +6324,16 @@
 .gl-gap-3\! {
   gap: $gl-spacing-scale-3 !important;
 }
+.gl-sm-gap-3 {
+  @include gl-media-breakpoint-up(sm) {
+  gap: $gl-spacing-scale-3;
+  }
+}
+.gl-sm-gap-3\! {
+  @include gl-media-breakpoint-up(sm) {
+  gap: $gl-spacing-scale-3 !important;
+  }
+}
 .gl-gap-5 {
   gap: $gl-spacing-scale-5;
 }

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

@@ -122,6 +122,12 @@
   flex-wrap: nowrap;
 }
 
+@mixin gl-sm-flex-wrap-nowrap {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-flex-wrap-nowrap;
+  }
+}
+
 /**
 * `gl-flex-nowrap` is deprecated; use `gl-flex-wrap-nowrap` instead.
 * TODO: delete `gl-flex-wrap-nowrap` utility class, see

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

@@ -823,6 +823,12 @@
   gap: $gl-spacing-scale-3;
 }
 
+@mixin gl-sm-gap-3 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-gap-3;
+  }
+}
+
 @mixin gl-gap-5 {
   gap: $gl-spacing-scale-5;
 }