@gitlab/ui 71.8.0 → 71.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "71.8.0",
+  "version": "71.9.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -122,7 +122,7 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
-    "cypress": "13.6.0",
+    "cypress": "13.6.1",
     "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.0.0",

package/src/components/base/avatars_inline/avatars_inline.scss

@@ -3,15 +3,9 @@
 
   &-child {
     @include gl-display-inline-flex;
-    @include gl-mr-3;
-  }
-
-  &.collapsed {
-    @include gl-relative;
 
-    .gl-avatars-inline-child {
-      @include gl-absolute;
-      @include gl-mr-0;
+    &:not(:last-child) {
+      @include gl-mr-3;
     }
   }
 

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

@@ -33,12 +33,6 @@ describe('avatars inline', () => {
     expect(wrapper.findAllComponents(Avatar).length).toBe(avatars.length);
   });
 
-  it('adds collapsed class selector when collapsed=true', () => {
-    buildWrapper({ avatars, maxVisible: 2, avatarSize: 24, collapsed: true });
-
-    expect(wrapper.classes()).toContain('collapsed');
-  });
-
   describe('when component is collapsed and maxVisible is the number of avatars', () => {
     beforeEach(() => {
       buildWrapper({ avatars, maxVisible: avatars.length, avatarSize: 24, collapsed: true });

package/src/components/base/avatars_inline/avatars_inline.vue

@@ -55,12 +55,6 @@ export default {
     visibleAvatars() {
       return this.collapsed ? this.avatars.slice(0, this.maxVisible) : this.avatars;
     },
-    containerSizeStyles() {
-      return {
-        width: `${this.avatarSize * this.visibleAvatars.length}px`,
-        height: `${this.avatarSize}px`,
-      };
-    },
     badgeSize() {
       return this.avatarSize === 24 ? 'md' : 'lg';
     },
@@ -84,25 +78,31 @@ export default {
     },
   },
   methods: {
-    calcAvatarPosition(avatarIndex) {
+    calcAvatarStyles(avatarIndex) {
       // According to pajamas, overlap is 25% of the avatar height
-      const overlapDistance = this.avatarSize * 0.75;
+      const overlap = this.avatarSize * 0.25;
+
+      const marginRight =
+        avatarIndex === this.maxVisible ||
+        avatarIndex === this.avatars.length - 1 ||
+        !this.collapsed
+          ? undefined
+          : `-${overlap}px`;
 
       return {
-        left: `${overlapDistance * avatarIndex}px`,
-        zIndex: this.maxVisible + (avatarIndex - 1),
+        marginRight,
       };
     },
   },
 };
 </script>
 <template>
-  <div :class="['gl-avatars-inline', { collapsed: collapsed }]" :style="containerSizeStyles">
+  <div class="gl-avatars-inline">
     <div
       v-for="(avatar, index) in visibleAvatars"
       :key="index"
       class="gl-avatars-inline-child"
-      :style="calcAvatarPosition(index)"
+      :style="calcAvatarStyles(index)"
     >
       <slot name="avatar" :avatar="avatar">
         <gl-avatar v-bind="avatar" :size="avatarSize" />
@@ -111,7 +111,7 @@ export default {
     <div
       v-if="collapsed && collapsable"
       class="gl-avatars-inline-child"
-      :style="calcAvatarPosition(visibleAvatars.length)"
+      :style="calcAvatarStyles(visibleAvatars.length)"
     >
       <gl-tooltip v-if="badgeTooltipProp" :target="() => $refs.badge">
         {{ badgeTooltipTitle }}

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;
 }