@gitlab/ui 45.0.0 → 46.1.0

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

@@ -85,7 +85,7 @@ describe('sorting component', () => {
 
     selectDirectionButton().trigger('click');
 
-    expect(wrapper.emitted().sortDirectionChange[0]).toEqual([true]);
+    expect(wrapper.emitted('sortDirectionChange')[0]).toEqual([true]);
   });
 
   it('should allow custom sort tooltip to be applied', () => {

package/src/components/base/sorting/sorting_item.spec.js

@@ -36,7 +36,7 @@ describe('sorting item component', () => {
   it('does not show the check icon when the active prop is not provided', () => {
     createComponent();
 
-    expect(findActiveIcon().exists()).toBeTruthy();
+    expect(findActiveIcon().exists()).toBe(true);
     expect(findActiveIcon().classes()).toContain('inactive');
   });
 
@@ -45,7 +45,7 @@ describe('sorting item component', () => {
       active: true,
     });
 
-    expect(findActiveIcon().exists()).toBeTruthy();
+    expect(findActiveIcon().exists()).toBe(true);
     expect(findActiveIcon().classes()).not.toContain('inactive');
   });
 

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

@@ -88,7 +88,7 @@ describe('GlScrollableTabs', () => {
     });
 
     it('passes props through', () => {
-      expect(NAV_CLASS).toBeTruthy();
+      expect(NAV_CLASS).toBe('gl-scrollable-tabs-nav');
       expect(wrapper.findComponent(GlTabs).props()).toMatchObject({
         ...TEST_DEFAULT_PROPS,
         navClass: [NAV_CLASS, TEST_DEFAULT_PROPS.navClass],

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

@@ -234,9 +234,9 @@ describe('tabs component', () => {
 
             // `input` event should only be fired if the active tab changes.
             if (expectedActiveTabIndex > 0) {
-              expect(wrapper.emitted().input[1]).toEqual([expectedActiveTabIndex]);
+              expect(wrapper.emitted('input')[1]).toEqual([expectedActiveTabIndex]);
             } else {
-              expect(wrapper.emitted().input[1]).toBeUndefined();
+              expect(wrapper.emitted('input')[1]).toBeUndefined();
             }
           });
         }
@@ -339,8 +339,8 @@ describe('tabs component', () => {
 
           await nextTick();
 
-          expect(wrapper.emitted().input[0]).toEqual([1]);
-          expect(wrapper.emitted().input[1]).toEqual([1]);
+          expect(wrapper.emitted('input')[0]).toEqual([1]);
+          expect(wrapper.emitted('input')[1]).toEqual([1]);
         });
       });
     });
@@ -352,7 +352,7 @@ describe('tabs component', () => {
 
           await nextTick();
 
-          expect(wrapper.emitted().input[0]).toEqual([0]);
+          expect(wrapper.emitted('input')[0]).toEqual([0]);
         });
       });
 
@@ -363,7 +363,7 @@ describe('tabs component', () => {
           await nextTick();
           await findTabByText('Second').trigger('click');
 
-          expect(wrapper.emitted().input[1]).toEqual([1]);
+          expect(wrapper.emitted('input')[1]).toEqual([1]);
         });
       });
 

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

@@ -17,7 +17,7 @@ describe('Token component', () => {
   it('emits close when "x" is clicked', () => {
     wrapper = createComponent();
     findIcon(wrapper).vm.$emit('click');
-    expect(wrapper.emitted().close).toBeTruthy();
+    expect(wrapper.emitted('close')).toHaveLength(1);
   });
 
   it('hides the icon when view-only', () => {

package/src/components/base/token_selector/token_container.spec.js

@@ -205,7 +205,7 @@ describe('GlTokenContainer', () => {
     describe('when escape key is pressed', () => {
       it('fires `cancel-focus` event', async () => {
         await setup(0, keyboard.escape);
-        expect(wrapper.emitted('cancel-focus')).toBeTruthy();
+        expect(wrapper.emitted('cancel-focus')).toHaveLength(1);
       });
     });
 

package/src/components/base/token_selector/token_container.vue

@@ -128,54 +128,57 @@ export default {
 </script>
 
 <template>
-  <div
-    ref="tokenContainer"
-    class="gl-display-flex gl-flex-wrap gl-align-items-center gl-my-n1 gl-mx-n1 gl-w-full"
-    role="listbox"
-    aria-multiselectable="false"
-    aria-orientation="horizontal"
-    :aria-invalid="state === false && 'true'"
-    @keydown.left="handleLeftArrow"
-    @keydown.right="handleRightArrow"
-    @keydown.home="handleHome"
-    @keydown.end="handleEnd"
-    @keydown.delete="handleDelete"
-    @keydown.esc="handleEscape"
-    @keydown.tab.exact.prevent="handleTab"
-  >
+  <div class="gl-display-flex gl-flex-wrap-nowrap gl-align-items-flex-start gl-w-full">
     <div
-      v-for="(token, index) in tokens"
-      ref="tokens"
-      :key="token.id"
-      :data-token-id="token.id"
-      class="gl-token-selector-token-container gl-px-1 gl-py-1 gl-outline-none"
-      role="option"
-      tabindex="-1"
-      @focus="bindFocusEvent ? handleTokenFocus(index) : null"
+      ref="tokenContainer"
+      class="gl-display-flex gl-flex-wrap gl-align-items-center gl-my-n1 gl-mx-n1 gl-w-full"
+      role="listbox"
+      aria-multiselectable="false"
+      aria-orientation="horizontal"
+      :aria-invalid="state === false && 'true'"
+      @keydown.left="handleLeftArrow"
+      @keydown.right="handleRightArrow"
+      @keydown.home="handleHome"
+      @keydown.end="handleEnd"
+      @keydown.delete="handleDelete"
+      @keydown.esc="handleEscape"
+      @keydown.tab.exact.prevent="handleTab"
     >
-      <gl-token
-        class="gl-cursor-default"
-        :class="token.class"
-        :style="token.style"
-        :view-only="viewOnly"
-        @close="handleClose(token)"
+      <div
+        v-for="(token, index) in tokens"
+        ref="tokens"
+        :key="token.id"
+        :data-token-id="token.id"
+        class="gl-token-selector-token-container gl-px-1 gl-py-2 gl-outline-none"
+        role="option"
+        tabindex="-1"
+        @focus="bindFocusEvent ? handleTokenFocus(index) : null"
       >
-        <slot name="token-content" :token="token">
-          <span>
-            {{ token.name }}
-          </span>
-        </slot>
-      </gl-token>
+        <gl-token
+          class="gl-cursor-default"
+          :class="token.class"
+          :style="token.style"
+          :view-only="viewOnly"
+          @close="handleClose(token)"
+        >
+          <slot name="token-content" :token="token">
+            <span>
+              {{ token.name }}
+            </span>
+          </slot>
+        </gl-token>
+      </div>
+      <slot name="text-input"></slot>
+    </div>
+    <div v-if="showClearAllButton" class="gl-ml-3 gl-p-1">
+      <gl-button
+        size="small"
+        aria-label="Clear all"
+        icon="clear"
+        category="tertiary"
+        data-testid="clear-all-button"
+        @click.stop="$emit('clear-all')"
+      />
     </div>
-    <slot name="text-input"></slot>
-    <gl-button
-      v-if="showClearAllButton"
-      size="small"
-      aria-label="Clear all"
-      icon="clear"
-      category="tertiary"
-      data-testid="clear-all-button"
-      @click.stop="$emit('clear-all')"
-    />
   </div>
 </template>

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

@@ -398,7 +398,7 @@ describe('GlTokenSelector', () => {
       });
 
       it('fires `focus` event', () => {
-        expect(wrapper.emitted('focus')).toBeTruthy();
+        expect(wrapper.emitted('focus')).toHaveLength(1);
       });
     });
 
@@ -414,7 +414,7 @@ describe('GlTokenSelector', () => {
       });
 
       it('fires `blur` event', () => {
-        expect(wrapper.emitted('blur')).toBeTruthy();
+        expect(wrapper.emitted('blur')).toHaveLength(1);
       });
 
       it('removes focus class from main container', () => {
@@ -566,7 +566,7 @@ describe('GlTokenSelector', () => {
 
         textInput.trigger('keydown');
 
-        expect(wrapper.emitted('keydown')).toBeTruthy();
+        expect(wrapper.emitted('keydown')).toHaveLength(1);
       });
     });
   });
@@ -624,7 +624,7 @@ describe('GlTokenSelector', () => {
 
       container.trigger('click');
 
-      expect(wrapper.emitted('focus')).toBeTruthy();
+      expect(wrapper.emitted('focus')).toHaveLength(1);
     });
   });
 

package/src/components/base/token_selector/token_selector.vue

@@ -415,7 +415,7 @@ export default {
           <input
             ref="textInput"
             type="text"
-            class="gl-token-selector-input gl-bg-none gl-font-regular gl-font-base gl-line-height-normal gl-px-1 gl-h-auto gl-text-gray-900 gl-border-none gl-outline-none gl-flex-grow-1"
+            class="gl-token-selector-input gl-bg-none gl-font-regular gl-font-base gl-line-height-normal gl-px-1 gl-h-auto gl-text-gray-900 gl-border-none gl-outline-none gl-flex-grow-1 gl-w-40p"
             :value="inputText"
             :autocomplete="autocomplete"
             :aria-labelledby="ariaLabelledby"

package/src/components/base/token_selector/token_selector_dropdown.spec.js

@@ -314,7 +314,7 @@ describe('GlTokenSelectorDropdown', () => {
 
         dropdownEventHandlers.handleDownArrow();
 
-        expect(wrapper.emitted('show')).toBeTruthy();
+        expect(wrapper.emitted('show')).toHaveLength(1);
       });
     });
 

package/src/components/charts/column/column_chart.spec.js

@@ -55,7 +55,7 @@ describe('column chart component', () => {
   it('emits "created" when onCreated is called', () => {
     wrapper.vm.onCreated(wrapper.vm.chart);
 
-    expect(wrapper.emitted('created')).toBeTruthy();
+    expect(wrapper.emitted('created')).toHaveLength(1);
   });
 
   it('calls event listener when "chartItemClicked" is emitted on the Chart component', () => {

package/src/components/charts/sparkline/sparkline.spec.js

@@ -119,7 +119,7 @@ describe('sparkline chart component', () => {
   });
 
   it('shows the tooltip when mousing over an axis point in the component', async () => {
-    expect(getTooltip().attributes('show')).toBeFalsy();
+    expect(getTooltip().attributes('show')).toBe(undefined);
 
     const mockData = { seriesData: [{ data: [5, 8] }] };
     getXAxisLabelFormatter()(mockData);
@@ -137,7 +137,7 @@ describe('sparkline chart component', () => {
     wrapper.trigger('mouseleave');
     await wrapper.vm.$nextTick();
 
-    expect(getTooltip().attributes('show')).toBeFalsy();
+    expect(getTooltip().attributes('show')).toBe(undefined);
   });
 
   it('adds the right content to the tooltip', async () => {

package/src/directives/resize_observer/resize_observer.spec.js

@@ -76,15 +76,15 @@ describe('resize observer directive', () => {
     });
 
     expect(observersCount()).toBe(1);
-    expect(wrapper.element.glResizeHandler).not.toBeFalsy();
+    expect(wrapper.element.glResizeHandler).not.toBe(undefined);
 
     await wrapper.setData({ isEnabled: false });
 
-    expect(wrapper.element.glResizeHandler).toBeFalsy();
+    expect(wrapper.element.glResizeHandler).toBe(undefined);
 
     await wrapper.setData({ isEnabled: true });
 
-    expect(wrapper.element.glResizeHandler).not.toBeFalsy();
+    expect(wrapper.element.glResizeHandler).not.toBe(undefined);
   });
 
   it('does a clean up when the component is destroyed', () => {
@@ -92,11 +92,11 @@ describe('resize observer directive', () => {
 
     const { element } = wrapper;
 
-    expect(element.glResizeHandler).not.toBeFalsy();
+    expect(element.glResizeHandler).not.toBe(undefined);
 
     wrapper.destroy();
 
-    expect(element.glResizeHandler).toBeFalsy();
+    expect(element.glResizeHandler).toBe(undefined);
   });
 
   describe('check directive value', () => {

package/src/scss/utilities.scss

@@ -2701,18 +2701,6 @@
   display: flex !important;
 }
 
-.gl-xs-display-flex {
-  @include gl-media-breakpoint-down(sm) {
-  display: flex;
-  }
-}
-
-.gl-xs-display-flex\! {
-  @include gl-media-breakpoint-down(sm) {
-  display: flex !important;
-  }
-}
-
 .gl-sm-display-flex {
   @include gl-media-breakpoint-up(sm) {
   display: flex;
@@ -2757,18 +2745,6 @@
   display: inline-flex !important;
 }
 
-.gl-xs-display-inline-flex {
-  @include gl-media-breakpoint-down(sm) {
-  display: inline-flex;
-  }
-}
-
-.gl-xs-display-inline-flex\! {
-  @include gl-media-breakpoint-down(sm) {
-  display: inline-flex !important;
-  }
-}
-
 .gl-sm-display-inline-flex {
   @include gl-media-breakpoint-up(sm) {
   display: inline-flex;
@@ -2813,18 +2789,6 @@
   display: block !important;
 }
 
-.gl-xs-display-block {
-  @include gl-media-breakpoint-down(sm) {
-  display: block;
-  }
-}
-
-.gl-xs-display-block\! {
-  @include gl-media-breakpoint-down(sm) {
-  display: block !important;
-  }
-}
-
 .gl-sm-display-block {
   @include gl-media-breakpoint-up(sm) {
   display: block;
@@ -2869,18 +2833,6 @@
   display: inline !important;
 }
 
-.gl-xs-display-inline {
-  @include gl-media-breakpoint-down(sm) {
-  display: inline;
-  }
-}
-
-.gl-xs-display-inline\! {
-  @include gl-media-breakpoint-down(sm) {
-  display: inline !important;
-  }
-}
-
 .gl-sm-display-inline {
   @include gl-media-breakpoint-up(sm) {
   display: inline;
@@ -2925,18 +2877,6 @@
   display: inline-block !important;
 }
 
-.gl-xs-display-inline-block {
-  @include gl-media-breakpoint-down(sm) {
-  display: inline-block;
-  }
-}
-
-.gl-xs-display-inline-block\! {
-  @include gl-media-breakpoint-down(sm) {
-  display: inline-block !important;
-  }
-}
-
 .gl-sm-display-inline-block {
   @include gl-media-breakpoint-up(sm) {
   display: inline-block;
@@ -3088,18 +3028,6 @@
   align-items: stretch !important;
 }
 
-.gl-xs-align-items-baseline {
-  @include gl-media-breakpoint-down(sm) {
-  align-items: baseline;
-  }
-}
-
-.gl-xs-align-items-baseline\! {
-  @include gl-media-breakpoint-down(sm) {
-  align-items: baseline !important;
-  }
-}
-
 .gl-lg-align-items-baseline {
   @include gl-media-breakpoint-up(lg) {
   align-items: baseline;
@@ -6704,26 +6632,6 @@
   margin-top: $gl-spacing-scale-5 !important;
   }
 }
-.gl-sm-pr-0 {
-  @include gl-media-breakpoint-down(sm) {
-  padding-right: 0;
-  }
-}
-.gl-sm-pr-0\! {
-  @include gl-media-breakpoint-down(sm) {
-  padding-right: 0 !important;
-  }
-}
-.gl-sm-pr-1 {
-  @include gl-media-breakpoint-down(sm) {
-  padding-right: $gl-spacing-scale-1;
-  }
-}
-.gl-sm-pr-1\! {
-  @include gl-media-breakpoint-down(sm) {
-  padding-right: $gl-spacing-scale-1 !important;
-  }
-}
 .gl-sm-pr-2 {
   @include gl-media-breakpoint-down(sm) {
   padding-right: $gl-spacing-scale-2;
@@ -6744,16 +6652,6 @@
   padding-right: $gl-spacing-scale-3 !important;
   }
 }
-.gl-sm-pr-4 {
-  @include gl-media-breakpoint-down(sm) {
-  padding-right: $gl-spacing-scale-4;
-  }
-}
-.gl-sm-pr-4\! {
-  @include gl-media-breakpoint-down(sm) {
-  padding-right: $gl-spacing-scale-4 !important;
-  }
-}
 .gl-sm-pr-5 {
   @include gl-media-breakpoint-down(sm) {
   padding-right: $gl-spacing-scale-5;
@@ -6764,66 +6662,6 @@
   padding-right: $gl-spacing-scale-5 !important;
   }
 }
-.gl-sm-pb-0 {
-  @include gl-media-breakpoint-down(sm) {
-  padding-bottom: 0;
-  }
-}
-.gl-sm-pb-0\! {
-  @include gl-media-breakpoint-down(sm) {
-  padding-bottom: 0 !important;
-  }
-}
-.gl-sm-pb-1 {
-  @include gl-media-breakpoint-down(sm) {
-  padding-bottom: $gl-spacing-scale-1;
-  }
-}
-.gl-sm-pb-1\! {
-  @include gl-media-breakpoint-down(sm) {
-  padding-bottom: $gl-spacing-scale-1 !important;
-  }
-}
-.gl-sm-pb-2 {
-  @include gl-media-breakpoint-down(sm) {
-  padding-bottom: $gl-spacing-scale-2;
-  }
-}
-.gl-sm-pb-2\! {
-  @include gl-media-breakpoint-down(sm) {
-  padding-bottom: $gl-spacing-scale-2 !important;
-  }
-}
-.gl-sm-pb-3 {
-  @include gl-media-breakpoint-down(sm) {
-  padding-bottom: $gl-spacing-scale-3;
-  }
-}
-.gl-sm-pb-3\! {
-  @include gl-media-breakpoint-down(sm) {
-  padding-bottom: $gl-spacing-scale-3 !important;
-  }
-}
-.gl-sm-pb-4 {
-  @include gl-media-breakpoint-down(sm) {
-  padding-bottom: $gl-spacing-scale-4;
-  }
-}
-.gl-sm-pb-4\! {
-  @include gl-media-breakpoint-down(sm) {
-  padding-bottom: $gl-spacing-scale-4 !important;
-  }
-}
-.gl-sm-pb-5 {
-  @include gl-media-breakpoint-down(sm) {
-  padding-bottom: $gl-spacing-scale-5;
-  }
-}
-.gl-sm-pb-5\! {
-  @include gl-media-breakpoint-down(sm) {
-  padding-bottom: $gl-spacing-scale-5 !important;
-  }
-}
 .gl-sm-pl-0 {
   @include gl-media-breakpoint-down(sm) {
   padding-left: 0;
@@ -6834,46 +6672,6 @@
   padding-left: 0 !important;
   }
 }
-.gl-sm-pl-1 {
-  @include gl-media-breakpoint-down(sm) {
-  padding-left: $gl-spacing-scale-1;
-  }
-}
-.gl-sm-pl-1\! {
-  @include gl-media-breakpoint-down(sm) {
-  padding-left: $gl-spacing-scale-1 !important;
-  }
-}
-.gl-sm-pl-2 {
-  @include gl-media-breakpoint-down(sm) {
-  padding-left: $gl-spacing-scale-2;
-  }
-}
-.gl-sm-pl-2\! {
-  @include gl-media-breakpoint-down(sm) {
-  padding-left: $gl-spacing-scale-2 !important;
-  }
-}
-.gl-sm-pl-3 {
-  @include gl-media-breakpoint-down(sm) {
-  padding-left: $gl-spacing-scale-3;
-  }
-}
-.gl-sm-pl-3\! {
-  @include gl-media-breakpoint-down(sm) {
-  padding-left: $gl-spacing-scale-3 !important;
-  }
-}
-.gl-sm-pl-4 {
-  @include gl-media-breakpoint-down(sm) {
-  padding-left: $gl-spacing-scale-4;
-  }
-}
-.gl-sm-pl-4\! {
-  @include gl-media-breakpoint-down(sm) {
-  padding-left: $gl-spacing-scale-4 !important;
-  }
-}
 .gl-sm-pl-5 {
   @include gl-media-breakpoint-down(sm) {
   padding-left: $gl-spacing-scale-5;

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

@@ -36,13 +36,6 @@
   display: flex;
 }
 
-@mixin gl-xs-display-flex {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
-    @include gl-display-flex;
-  }
-}
-
 @mixin gl-sm-display-flex {
   @include gl-media-breakpoint-up(sm) {
     @include gl-display-flex;
@@ -65,13 +58,6 @@
   display: inline-flex;
 }
 
-@mixin gl-xs-display-inline-flex {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
-    @include gl-display-inline-flex;
-  }
-}
-
 @mixin gl-sm-display-inline-flex {
   @include gl-media-breakpoint-up(sm) {
     @include gl-display-inline-flex;
@@ -94,13 +80,6 @@
   display: block;
 }
 
-@mixin gl-xs-display-block {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
-    @include gl-display-block;
-  }
-}
-
 @mixin gl-sm-display-block {
   @include gl-media-breakpoint-up(sm) {
     @include gl-display-block;
@@ -123,13 +102,6 @@
   display: inline;
 }
 
-@mixin gl-xs-display-inline {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
-    @include gl-display-inline;
-  }
-}
-
 @mixin gl-sm-display-inline {
   @include gl-media-breakpoint-up(sm) {
     @include gl-display-inline;
@@ -152,13 +124,6 @@
   display: inline-block;
 }
 
-@mixin gl-xs-display-inline-block {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
-    @include gl-display-inline-block;
-  }
-}
-
 @mixin gl-sm-display-inline-block {
   @include gl-media-breakpoint-up(sm) {
     @include gl-display-inline-block;

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

@@ -23,13 +23,6 @@
   align-items: stretch;
 }
 
-@mixin gl-xs-align-items-baseline {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
-    @include gl-align-items-baseline;
-  }
-}
-
 @mixin gl-lg-align-items-baseline {
   @include gl-media-breakpoint-up(lg) {
     @include gl-align-items-baseline;