@gitlab/ui 52.7.0 → 52.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "52.7.0",
+  "version": "52.7.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -91,14 +91,14 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.5.14",
-    "@storybook/addon-docs": "6.5.14",
-    "@storybook/addon-essentials": "6.5.14",
-    "@storybook/addon-storyshots": "6.5.14",
-    "@storybook/addon-storyshots-puppeteer": "6.5.14",
-    "@storybook/addon-viewport": "6.5.14",
-    "@storybook/theming": "6.5.14",
-    "@storybook/vue": "6.5.14",
+    "@storybook/addon-a11y": "6.5.15",
+    "@storybook/addon-docs": "6.5.15",
+    "@storybook/addon-essentials": "6.5.15",
+    "@storybook/addon-storyshots": "6.5.15",
+    "@storybook/addon-storyshots-puppeteer": "6.5.15",
+    "@storybook/addon-viewport": "6.5.15",
+    "@storybook/theming": "6.5.15",
+    "@storybook/vue": "6.5.15",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",

package/scss_to_js/scss_variables.js

@@ -327,7 +327,6 @@ export const glDropdownWidth = '15rem'
 export const glDropdownWidthNarrow = '10rem'
 export const glDropdownWidthWide = '25rem'
 export const glMaxDropdownMaxHeight = '19.5rem'
-export const glBroadcastMessageTextMaxWidth = '58.375rem'
 export const glBroadcastMessageNotificationMaxWidth = '18.75rem'
 export const glModalSmallWidth = '32rem'
 export const glModalMediumWidth = '48rem'

package/scss_to_js/scss_variables.json

@@ -1745,11 +1745,6 @@
       "value": "px-to-rem(312px)",
       "compiledValue": "19.5rem"
     },
-    {
-      "name": "$gl-broadcast-message-text-max-width",
-      "value": "px-to-rem(934px)",
-      "compiledValue": "58.375rem"
-    },
     {
       "name": "$gl-broadcast-message-notification-max-width",
       "value": "px-to-rem(300px)",

package/src/components/base/broadcast_message/broadcast_message.scss

@@ -68,10 +68,6 @@
     @include gl-justify-content-center;
   }
 
-  &-text {
-    max-width: $gl-broadcast-message-text-max-width;
-  }
-
   &-icon {
     @include gl-mr-5;
 

package/src/components/base/broadcast_message/broadcast_message.vue

@@ -79,7 +79,7 @@ export default {
       <div class="gl-broadcast-message-icon gl-line-height-normal">
         <gl-icon :name="iconName" />
       </div>
-      <div class="gl-broadcast-message-text gl-my-n1">
+      <div class="gl-my-n1">
         <!-- @slot The broadcast message's text -->
         <slot></slot>
       </div>

package/src/components/base/new_dropdowns/listbox/listbox.spec.js

@@ -561,4 +561,31 @@ describe('GlListbox', () => {
       expect(findIntersectionObserver().exists()).toBe(false);
     });
   });
+
+  describe('items test IDs without groups', () => {
+    beforeEach(() => {
+      buildWrapper({
+        items: mockOptions,
+      });
+    });
+
+    it.each(mockOptions)('sets the test ID for %s', (option) => {
+      expect(wrapper.find(`[data-testid="listbox-item-${option.value}"]`).exists()).toBe(true);
+    });
+  });
+
+  describe('items test IDs with groups', () => {
+    beforeEach(() => {
+      buildWrapper({
+        items: mockGroups,
+      });
+    });
+
+    it.each([...mockGroups[0].options, ...mockGroups[1].options])(
+      'sets the test ID for %s',
+      (option) => {
+        expect(wrapper.find(`[data-testid="listbox-item-${option.value}"]`).exists()).toBe(true);
+      }
+    );
+  });
 });

package/src/components/base/new_dropdowns/listbox/listbox.stories.js

@@ -590,5 +590,8 @@ export const InfiniteScroll = (
 InfiniteScroll.argTypes = {
   ...disableControls(['infiniteScroll', 'infiniteScrollLoading', 'items']),
 };
+InfiniteScroll.parameters = {
+  storyshots: { disable: true },
+};
 InfiniteScroll.args = generateProps();
 InfiniteScroll.decorators = [makeContainer({ height: '370px' })];

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -614,6 +614,7 @@ export default {
         <template v-if="isOption(item)">
           <gl-listbox-item
             :key="item.value"
+            :data-testid="`listbox-item-${item.value}`"
             :is-selected="isSelected(item)"
             :is-focused="isFocused(item)"
             :is-check-centered="isCheckCentered"
@@ -637,6 +638,7 @@ export default {
             <gl-listbox-item
               v-for="option in item.options"
               :key="option.value"
+              :data-testid="`listbox-item-${option.value}`"
               :is-selected="isSelected(option)"
               :is-focused="isFocused(option)"
               :is-check-centered="isCheckCentered"

package/src/components/base/new_dropdowns/listbox/listbox_search_input.spec.js

@@ -53,11 +53,9 @@ describe('listbox search input component', () => {
       expect(findInput().element.value).toEqual(newSearchValue);
     });
 
-    it(`emits ${modelEvent} event when input value changes`, () => {
+    it(`emits ${modelEvent} event when input value changes`, async () => {
       findInput().setValue(newSearchValue);
-      jest.advanceTimersByTime(199);
-      expect(wrapper.emitted('input')).toEqual(undefined);
-      jest.advanceTimersByTime(1);
+      await nextTick();
       expect(wrapper.emitted('input')).toEqual([[newSearchValue]]);
     });
   });

package/src/components/base/new_dropdowns/listbox/listbox_search_input.vue

@@ -1,5 +1,4 @@
 <script>
-import debounce from 'lodash/debounce';
 import GlClearIconButton from '../../../shared_components/clear_icon_button/clear_icon_button.vue';
 import GlIcon from '../../icon/icon.vue';
 
@@ -37,9 +36,9 @@ export default {
     inputListeners() {
       return {
         ...this.$listeners,
-        input: debounce((event) => {
+        input: (event) => {
           this.$emit('input', event.target.value);
-        }, 200),
+        },
       };
     },
   },

package/src/scss/variables.scss

@@ -462,7 +462,6 @@ $gl-dropdown-width-wide: px-to-rem(400px);
 $gl-max-dropdown-max-height: px-to-rem(312px);
 
 // Broadcast messages
-$gl-broadcast-message-text-max-width: px-to-rem(934px);
 $gl-broadcast-message-notification-max-width: px-to-rem(300px);
 
 // Modal Widths