@gitlab/ui 43.18.0 → 43.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "43.18.0",
+  "version": "43.20.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -79,7 +79,7 @@
     "@arkweid/lefthook": "0.7.7",
     "@babel/core": "^7.19.1",
     "@babel/preset-env": "^7.19.1",
-    "@gitlab/eslint-plugin": "17.0.0",
+    "@gitlab/eslint-plugin": "18.0.0",
     "@gitlab/stylelint-config": "4.1.0",
     "@gitlab/svgs": "3.3.0",
     "@rollup/plugin-commonjs": "^11.1.0",
@@ -104,7 +104,7 @@
     "bootstrap": "4.5.3",
     "cypress": "^10.8.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.23.0",
+    "eslint": "8.23.1",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-storybook": "0.6.4",

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

@@ -397,7 +397,7 @@ describe('datepicker component', () => {
     ${'2021-09-27'} | ${new Date(2021, 8, 27)}
     ${'2021/09/27'} | ${new Date(2021, 8, 27)}
     ${'foobarbaz'}  | ${currentDate}
-  `('it parses $dateString correctly', ({ dateString, parsedDate }) => {
+  `('parses $dateString correctly', ({ dateString, parsedDate }) => {
     mountWithOptions();
 
     const config = pikadayConfig();

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

@@ -237,7 +237,7 @@ describe('Modal component', () => {
     });
   });
 
-  it('it binds visible property to the BModal visible property', async () => {
+  it('binds visible property to the BModal visible property', async () => {
     createComponent({ stubModal: false });
 
     expect(wrapper.props().visible).toBe(false);

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

@@ -102,7 +102,7 @@ describe('GlListbox', () => {
             selected: [mockOptions[1].value, mockOptions[2].value],
             items: mockOptions,
           });
-        }).toThrowError('To allow multi-selection, please, set "multiple" property to "true"');
+        }).toThrow('To allow multi-selection, please, set "multiple" property to "true"');
         expect(wrapper).toHaveLoggedVueErrors();
       });
 

package/src/scss/utilities.scss

@@ -3909,371 +3909,383 @@
   pointer-events: auto !important
 }
 .gl-relative {
-  position: relative
+  position: relative;
 }
 
 .gl-relative\! {
-  position: relative !important
+  position: relative !important;
 }
 
 .gl-absolute {
-  position: absolute
+  position: absolute;
 }
 
 .gl-absolute\! {
-  position: absolute !important
+  position: absolute !important;
 }
 
 .gl-static {
-  position: static
+  position: static;
 }
 
 .gl-static\! {
-  position: static !important
+  position: static !important;
 }
 
 .gl-fixed {
-  position: fixed
+  position: fixed;
 }
 
 .gl-fixed\! {
-  position: fixed !important
+  position: fixed !important;
 }
 
 .gl-sticky {
-  position: sticky
+  position: sticky;
 }
 
 .gl-sticky\! {
-  position: sticky !important
+  position: sticky !important;
+}
+
+.gl-lg-sticky {
+  @include gl-media-breakpoint-up(lg) {
+  position: sticky;
+  }
+}
+
+.gl-lg-sticky\! {
+  @include gl-media-breakpoint-up(lg) {
+  position: sticky !important;
+  }
 }
 
 .gl-top-auto {
-  top: auto
+  top: auto;
 }
 
 .gl-top-auto\! {
-  top: auto !important
+  top: auto !important;
 }
 
 .gl-top-0 {
-  top: 0
+  top: 0;
 }
 
 .gl-top-0\! {
-  top: 0 !important
+  top: 0 !important;
 }
 
 .gl-top-1 {
-  top: $gl-spacing-scale-1
+  top: $gl-spacing-scale-1;
 }
 
 .gl-top-1\! {
-  top: $gl-spacing-scale-1 !important
+  top: $gl-spacing-scale-1 !important;
 }
 
 .gl-top-2 {
-  top: $gl-spacing-scale-2
+  top: $gl-spacing-scale-2;
 }
 
 .gl-top-2\! {
-  top: $gl-spacing-scale-2 !important
+  top: $gl-spacing-scale-2 !important;
 }
 
 .gl-top-3 {
-  top: $gl-spacing-scale-3
+  top: $gl-spacing-scale-3;
 }
 
 .gl-top-3\! {
-  top: $gl-spacing-scale-3 !important
+  top: $gl-spacing-scale-3 !important;
 }
 
 .gl-top-4 {
-  top: $gl-spacing-scale-4
+  top: $gl-spacing-scale-4;
 }
 
 .gl-top-4\! {
-  top: $gl-spacing-scale-4 !important
+  top: $gl-spacing-scale-4 !important;
 }
 
 .gl-top-5 {
-  top: $gl-spacing-scale-5
+  top: $gl-spacing-scale-5;
 }
 
 .gl-top-5\! {
-  top: $gl-spacing-scale-5 !important
+  top: $gl-spacing-scale-5 !important;
 }
 
 .gl-top-6 {
-  top: $gl-spacing-scale-6
+  top: $gl-spacing-scale-6;
 }
 
 .gl-top-6\! {
-  top: $gl-spacing-scale-6 !important
+  top: $gl-spacing-scale-6 !important;
 }
 
 .gl-top-7 {
-  top: $gl-spacing-scale-7
+  top: $gl-spacing-scale-7;
 }
 
 .gl-top-7\! {
-  top: $gl-spacing-scale-7 !important
+  top: $gl-spacing-scale-7 !important;
 }
 
 .gl-top-8 {
-  top: $gl-spacing-scale-8
+  top: $gl-spacing-scale-8;
 }
 
 .gl-top-8\! {
-  top: $gl-spacing-scale-8 !important
+  top: $gl-spacing-scale-8 !important;
 }
 
 .gl-top-half {
-  top: 50%
+  top: 50%;
 }
 
 .gl-top-half\! {
-  top: 50% !important
+  top: 50% !important;
 }
 
 .gl-right-auto {
-  right: auto
+  right: auto;
 }
 
 .gl-right-auto\! {
-  right: auto !important
+  right: auto !important;
 }
 
 .gl-right-0 {
-  right: 0
+  right: 0;
 }
 
 .gl-right-0\! {
-  right: 0 !important
+  right: 0 !important;
 }
 
 .gl-right-1 {
-  right: $gl-spacing-scale-1
+  right: $gl-spacing-scale-1;
 }
 
 .gl-right-1\! {
-  right: $gl-spacing-scale-1 !important
+  right: $gl-spacing-scale-1 !important;
 }
 
 .gl-right-2 {
-  right: $gl-spacing-scale-2
+  right: $gl-spacing-scale-2;
 }
 
 .gl-right-2\! {
-  right: $gl-spacing-scale-2 !important
+  right: $gl-spacing-scale-2 !important;
 }
 
 .gl-right-3 {
-  right: $gl-spacing-scale-3
+  right: $gl-spacing-scale-3;
 }
 
 .gl-right-3\! {
-  right: $gl-spacing-scale-3 !important
+  right: $gl-spacing-scale-3 !important;
 }
 
 .gl-right-4 {
-  right: $gl-spacing-scale-4
+  right: $gl-spacing-scale-4;
 }
 
 .gl-right-4\! {
-  right: $gl-spacing-scale-4 !important
+  right: $gl-spacing-scale-4 !important;
 }
 
 .gl-right-5 {
-  right: $gl-spacing-scale-5
+  right: $gl-spacing-scale-5;
 }
 
 .gl-right-5\! {
-  right: $gl-spacing-scale-5 !important
+  right: $gl-spacing-scale-5 !important;
 }
 
 .gl-right-6 {
-  right: $gl-spacing-scale-6
+  right: $gl-spacing-scale-6;
 }
 
 .gl-right-6\! {
-  right: $gl-spacing-scale-6 !important
+  right: $gl-spacing-scale-6 !important;
 }
 
 .gl-right-7 {
-  right: $gl-spacing-scale-7
+  right: $gl-spacing-scale-7;
 }
 
 .gl-right-7\! {
-  right: $gl-spacing-scale-7 !important
+  right: $gl-spacing-scale-7 !important;
 }
 
 .gl-bottom-0 {
-  bottom: 0
+  bottom: 0;
 }
 
 .gl-bottom-0\! {
-  bottom: 0 !important
+  bottom: 0 !important;
 }
 
 .gl-bottom-1 {
-  bottom: $gl-spacing-scale-1
+  bottom: $gl-spacing-scale-1;
 }
 
 .gl-bottom-1\! {
-  bottom: $gl-spacing-scale-1 !important
+  bottom: $gl-spacing-scale-1 !important;
 }
 
 .gl-bottom-2 {
-  bottom: $gl-spacing-scale-2
+  bottom: $gl-spacing-scale-2;
 }
 
 .gl-bottom-2\! {
-  bottom: $gl-spacing-scale-2 !important
+  bottom: $gl-spacing-scale-2 !important;
 }
 
 .gl-bottom-3 {
-  bottom: $gl-spacing-scale-3
+  bottom: $gl-spacing-scale-3;
 }
 
 .gl-bottom-3\! {
-  bottom: $gl-spacing-scale-3 !important
+  bottom: $gl-spacing-scale-3 !important;
 }
 
 .gl-bottom-4 {
-  bottom: $gl-spacing-scale-4
+  bottom: $gl-spacing-scale-4;
 }
 
 .gl-bottom-4\! {
-  bottom: $gl-spacing-scale-4 !important
+  bottom: $gl-spacing-scale-4 !important;
 }
 
 .gl-bottom-5 {
-  bottom: $gl-spacing-scale-5
+  bottom: $gl-spacing-scale-5;
 }
 
 .gl-bottom-5\! {
-  bottom: $gl-spacing-scale-5 !important
+  bottom: $gl-spacing-scale-5 !important;
 }
 
 .gl-bottom-6 {
-  bottom: $gl-spacing-scale-6
+  bottom: $gl-spacing-scale-6;
 }
 
 .gl-bottom-6\! {
-  bottom: $gl-spacing-scale-6 !important
+  bottom: $gl-spacing-scale-6 !important;
 }
 
 .gl-bottom-7 {
-  bottom: $gl-spacing-scale-7
+  bottom: $gl-spacing-scale-7;
 }
 
 .gl-bottom-7\! {
-  bottom: $gl-spacing-scale-7 !important
+  bottom: $gl-spacing-scale-7 !important;
 }
 
 .gl-left-auto {
-  left: auto
+  left: auto;
 }
 
 .gl-left-auto\! {
-  left: auto !important
+  left: auto !important;
 }
 
 .gl-left-0 {
-  left: 0
+  left: 0;
 }
 
 .gl-left-0\! {
-  left: 0 !important
+  left: 0 !important;
 }
 
 .gl-left-1 {
-  left: $gl-spacing-scale-1
+  left: $gl-spacing-scale-1;
 }
 
 .gl-left-1\! {
-  left: $gl-spacing-scale-1 !important
+  left: $gl-spacing-scale-1 !important;
 }
 
 .gl-left-2 {
-  left: $gl-spacing-scale-2
+  left: $gl-spacing-scale-2;
 }
 
 .gl-left-2\! {
-  left: $gl-spacing-scale-2 !important
+  left: $gl-spacing-scale-2 !important;
 }
 
 .gl-left-3 {
-  left: $gl-spacing-scale-3
+  left: $gl-spacing-scale-3;
 }
 
 .gl-left-3\! {
-  left: $gl-spacing-scale-3 !important
+  left: $gl-spacing-scale-3 !important;
 }
 
 .gl-left-4 {
-  left: $gl-spacing-scale-4
+  left: $gl-spacing-scale-4;
 }
 
 .gl-left-4\! {
-  left: $gl-spacing-scale-4 !important
+  left: $gl-spacing-scale-4 !important;
 }
 
 .gl-left-5 {
-  left: $gl-spacing-scale-5
+  left: $gl-spacing-scale-5;
 }
 
 .gl-left-5\! {
-  left: $gl-spacing-scale-5 !important
+  left: $gl-spacing-scale-5 !important;
 }
 
 .gl-left-6 {
-  left: $gl-spacing-scale-6
+  left: $gl-spacing-scale-6;
 }
 
 .gl-left-6\! {
-  left: $gl-spacing-scale-6 !important
+  left: $gl-spacing-scale-6 !important;
 }
 
 .gl-left-7 {
-  left: $gl-spacing-scale-7
+  left: $gl-spacing-scale-7;
 }
 
 .gl-left-7\! {
-  left: $gl-spacing-scale-7 !important
+  left: $gl-spacing-scale-7 !important;
 }
 
 .gl-left-50p {
-  left: 50%
+  left: 50%;
 }
 
 .gl-left-50p\! {
-  left: 50% !important
+  left: 50% !important;
 }
 
 .gl-top-n5 {
-  top: -$gl-spacing-scale-5
+  top: -$gl-spacing-scale-5;
 }
 
 .gl-top-n5\! {
-  top: -$gl-spacing-scale-5 !important
+  top: -$gl-spacing-scale-5 !important;
 }
 
 .gl-float-left {
-  float: left
+  float: left;
 }
 
 .gl-float-left\! {
-  float: left !important
+  float: left !important;
 }
 
 .gl-float-right {
-  float: right
+  float: right;
 }
 
 .gl-float-right\! {
-  float: right !important
+  float: right !important;
 }
 .gl-w-auto {
   width: auto;
@@ -6486,6 +6498,16 @@
   margin-bottom: $gl-spacing-scale-5 !important;
   }
 }
+.gl-md-ml-auto {
+  @include gl-media-breakpoint-up(md) {
+  margin-left: auto;
+  }
+}
+.gl-md-ml-auto\! {
+  @include gl-media-breakpoint-up(md) {
+  margin-left: auto !important;
+  }
+}
 .gl-md-ml-2 {
   @include gl-media-breakpoint-up(md) {
   margin-left: $gl-spacing-scale-2;

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

@@ -23,6 +23,12 @@
   position: sticky;
 }
 
+@mixin gl-lg-sticky {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-sticky;
+  }
+}
+
 /**
 * Placement utilities.
 *

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

@@ -937,6 +937,12 @@
   }
 }
 
+@mixin gl-md-ml-auto {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-ml-auto;
+  }
+}
+
 @mixin gl-md-ml-2 {
   @include gl-media-breakpoint-up(md) {
     @include gl-ml-2;