@gitlab/ui 43.18.0 → 43.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "43.18.0",
+  "version": "43.19.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -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/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;

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.
 *