@gitlab/ui 71.8.1 → 71.9.0

package/package.json

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

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

@@ -286,4 +286,22 @@ describe('Daterange Picker', () => {
 
     expect(wrapper.find(`[data-testid="${testid}"]`).classes()).toContain(value);
   });
+
+  describe('startOpened', () => {
+    beforeEach(() => {
+      factory({ startOpened: true });
+    });
+    it('sets start-opened on the from date picker', () => {
+      expect(findStartPicker().props('startOpened')).toBe(true);
+    });
+
+    it('defaults to false', () => {
+      factory();
+      expect(findStartPicker().props('startOpened')).toBe(false);
+    });
+
+    it('does not set start-opened on the end date picker', () => {
+      expect(findEndPicker().props('startOpened')).toBe(false);
+    });
+  });
 });

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

@@ -25,6 +25,7 @@ const generateProps = ({
   endPickerClass,
   labelClass,
   theme = defaultValue('theme'),
+  startOpened = false,
 } = {}) => ({
   defaultMinDate: new Date(defaultMinDate),
   defaultMaxDate: new Date(defaultMaxDate),
@@ -39,6 +40,7 @@ const generateProps = ({
   endPickerClass,
   labelClass,
   theme,
+  startOpened,
 });
 
 const Template = (template, props) => ({
@@ -79,6 +81,7 @@ const defaultTemplate = `
           :end-picker-class="endPickerClass"
           :label-class="labelClass"
           :theme="theme"
+          :start-opened="startOpened"
         /> `;
 export const Default = Template.bind({}, defaultTemplate);
 Default.args = generateProps();
@@ -97,6 +100,7 @@ const withDatesSelectedAndTooltipTemplate = `<gl-daterange-picker
                                                 :start-picker-class="startPickerClass"
                                                 :end-picker-class="endPickerClass"
                                                 :label-class="labelClass"
+                                                :start-opened="startOpened"
                                                 :theme="theme">
                                                     <template #default="{ daysSelected }">
                                                       <span v-if="daysSelected === 1">{{ daysSelected }} day selected</span>

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

@@ -128,6 +128,11 @@ export default {
       required: false,
       default: '',
     },
+    startOpened: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -261,6 +266,7 @@ export default {
         :i18n="i18n"
         :target="startPickerTarget"
         :container="startPickerContainer"
+        :start-opened="startOpened"
         @input="onStartDateSelected"
         @open="onStartPickerOpen"
         @close="onStartPickerClose"

package/src/components/base/filtered_search/filtered_search_token.spec.js

@@ -196,16 +196,23 @@ describe('Filtered search token', () => {
     expect(findOperatorSegment().props().active).toBe(true);
   });
 
-  it.each(['complete', 'split', 'submit', 'select'])(
-    'passes-through %s event when data segment emits it',
-    (event) => {
-      createComponent({ active: true, value: { operator: '=', data: 'something' } });
+  it.each([
+    ['complete', true],
+    ['split', true],
+    ['submit', false],
+    ['select', true],
+  ])('passes-through %s event when data segment emits it', (event, shouldIncludeValue) => {
+    createComponent({ active: true, value: { operator: '=', data: 'something' } });
 
-      findDataSegment().vm.$emit(event);
+    findDataSegment().vm.$emit(event, 'value');
 
-      expect(wrapper.emitted(event)).toHaveLength(1);
+    expect(wrapper.emitted(event)).toHaveLength(1);
+    if (shouldIncludeValue) {
+      expect(wrapper.emitted(event)[0][0]).toBe('value');
+    } else {
+      expect(wrapper.emitted(event)[0][0]).toBeUndefined();
     }
-  );
+  });
 
   it('keeps value when replaced by compatible token', () => {
     const originalValue = { operator: '=', data: 'something' };
@@ -323,7 +330,7 @@ describe('Filtered search token', () => {
       beforeDataInputButton.trigger('click');
 
       expect(wrapper.emitted()).toEqual({
-        complete: [[]],
+        complete: [[TEST_APPLY_VALUE]],
         select: [[TEST_APPLY_VALUE]],
       });
     });

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

@@ -304,13 +304,13 @@ export default {
       this.intendedCursorPosition = 'start';
     },
 
-    handleComplete() {
+    handleComplete(value) {
       /**
        * Emitted when the token entry has been completed.
        *
        * @event complete
        */
-      this.$emit('complete');
+      this.$emit('complete', value);
     },
 
     stopMousedownOnCloseButton(event) {

package/src/scss/utilities.scss

@@ -4388,6 +4388,14 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   top: 66vh !important;
 }
 
+.gl-top-full {
+  top: 100%;
+}
+
+.gl-top-full\! {
+  top: 100% !important;
+}
+
 .gl-right-auto {
   right: auto;
 }

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

@@ -90,6 +90,10 @@
   top: 66vh;
 }
 
+@mixin gl-top-full {
+  top: 100%;
+}
+
 @mixin gl-right-auto {
   right: auto;
 }