@gitlab/ui 45.0.0 → 46.0.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_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_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;

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

@@ -1060,20 +1060,6 @@
 * - Utilities should strictly follow $gl-spacing-scale
 */
 
-@mixin gl-sm-pr-0 {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
-    @include gl-pr-0;
-  }
-}
-
-@mixin gl-sm-pr-1 {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
-    @include gl-pr-1;
-  }
-}
-
 @mixin gl-sm-pr-2 {
   // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
@@ -1088,13 +1074,6 @@
   }
 }
 
-@mixin gl-sm-pr-4 {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
-    @include gl-pr-4;
-  }
-}
-
 @mixin gl-sm-pr-5 {
   // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
@@ -1102,48 +1081,6 @@
   }
 }
 
-@mixin gl-sm-pb-0 {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
-    @include gl-pb-0;
-  }
-}
-
-@mixin gl-sm-pb-1 {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
-    @include gl-pb-1;
-  }
-}
-
-@mixin gl-sm-pb-2 {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
-    @include gl-pb-2;
-  }
-}
-
-@mixin gl-sm-pb-3 {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
-    @include gl-pb-3;
-  }
-}
-
-@mixin gl-sm-pb-4 {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
-    @include gl-pb-4;
-  }
-}
-
-@mixin gl-sm-pb-5 {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
-    @include gl-pb-5;
-  }
-}
-
 @mixin gl-sm-pl-0 {
   // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {
@@ -1151,34 +1088,6 @@
   }
 }
 
-@mixin gl-sm-pl-1 {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
-    @include gl-pl-1;
-  }
-}
-
-@mixin gl-sm-pl-2 {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
-    @include gl-pl-2;
-  }
-}
-
-@mixin gl-sm-pl-3 {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
-    @include gl-pl-3;
-  }
-}
-
-@mixin gl-sm-pl-4 {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
-    @include gl-pl-4;
-  }
-}
-
 @mixin gl-sm-pl-5 {
   // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {