@gitlab/ui 66.7.1 → 66.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "66.7.1",
+  "version": "66.9.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/skeleton_loader/skeleton_loader.md

@@ -9,6 +9,29 @@ loading animation. Any skeleton state components should be created with
 `<gl-skeleton-loader></gl-skeleton-loader>`. If no shape is passed via the slot the default skeleton
 will be used. See "Default" and "Default With Custom Props" examples.
 
+**NOTE:** Skeleton loaders can also be composed with a `.gl-animate-skeleton-loader`
+CSS class. This CSS-based approach is easier to make responsive and match mocked elements.
+Feel free to use this approach if it suits your use case and please leave your
+feedback in this [Feedback for css-based skeleton loading
+indicator](https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2319) issue.
+To improve developer experience and simplify matching Pajamas styles we're considering
+several improvements in the future, including adding more CSS util classes for
+this animation, or creating a dedicated component.  Here is an example of how
+you could replicate the default `<gl-skeleton-loader />` behavior with the
+CSS-based approach:
+
+```html
+<div>
+  <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-3 gl-max-w-20!"></div>
+  <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-3 gl-max-w-30!"></div>
+  <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-3 gl-max-w-26!"></div>
+</div>
+```
+
+See
+[animation.scss](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/scss/utility-mixins/animation.scss#L17)
+to learn more.
+
 ## Progressive Loading
 
 Determine if progressive loading is available, if it is break apart the skeleton to load data as it

package/src/scss/utilities.scss

@@ -60,6 +60,19 @@
   }
 }
 
+$gl-animate-skeleton-loader-max-width: 64 * $grid-size;
+
+@keyframes gl-keyframes-skeleton-loader {
+
+  0% {
+    background-position-x: -$gl-animate-skeleton-loader-max-width;
+  }
+
+  100% {
+    background-position-x: $gl-animate-skeleton-loader-max-width;
+  }
+}
+
 .gl-spin {
   animation: gl-spinner-rotate 2s infinite linear;
 }
@@ -67,6 +80,48 @@
 .gl-spin\! {
   animation: gl-spinner-rotate 2s infinite linear !important;
 }
+
+.gl-animate-skeleton-loader {
+  $max-width: $gl-animate-skeleton-loader-max-width;
+
+  overflow: hidden;
+  max-width: $max-width;
+  background-size: $max-width 100%;
+  background-position: -$max-width 0;
+  background-color: $gray-100;
+  background-image: linear-gradient(to right,
+  $gray-100 0,
+  $gray-50 23%,
+  $gray-50 27%,
+  $gray-100 50%);
+  background-repeat: no-repeat;
+  @media (prefers-reduced-motion: no-preference) {
+    animation: gl-keyframes-skeleton-loader 2.5s linear;
+    animation-delay: inherit;
+    animation-iteration-count: 3;
+  }
+}
+
+.gl-animate-skeleton-loader\! {
+  $max-width: $gl-animate-skeleton-loader-max-width !important;
+
+  overflow: hidden !important;
+  max-width: $max-width !important;
+  background-size: $max-width 100% !important;
+  background-position: -$max-width 0 !important;
+  background-color: $gray-100 !important;
+  background-image: linear-gradient(to right,
+  $gray-100 0,
+  $gray-50 23%,
+  $gray-50 27%,
+  $gray-100 50%) !important;
+  background-repeat: no-repeat !important;
+  @media (prefers-reduced-motion: no-preference) {
+    animation: gl-keyframes-skeleton-loader 2.5s linear !important;
+    animation-delay: inherit !important;
+    animation-iteration-count: 3 !important;
+  }
+}
 .gl-appearance-none {
   appearance: none;
   -moz-appearance: none;
@@ -5396,6 +5451,14 @@
   max-width: $gl-spacing-scale-15 !important;
 }
 
+.gl-max-w-20 {
+  max-width: $gl-spacing-scale-20;
+}
+
+.gl-max-w-20\! {
+  max-width: $gl-spacing-scale-20 !important;
+}
+
 .gl-max-w-26 {
   max-width: $gl-spacing-scale-26;
 }
@@ -5404,6 +5467,14 @@
   max-width: $gl-spacing-scale-26 !important;
 }
 
+.gl-max-w-30 {
+  max-width: $gl-spacing-scale-30;
+}
+
+.gl-max-w-30\! {
+  max-width: $gl-spacing-scale-30 !important;
+}
+
 .gl-max-w-34 {
   max-width: $gl-spacing-scale-34;
 }
@@ -5579,6 +5650,18 @@
     max-width: 80% !important;
   }
 }
+
+.gl-lg-max-w-50p {
+  @include gl-media-breakpoint-up(lg) {
+    max-width: 50%;
+  }
+}
+
+.gl-lg-max-w-50p\! {
+  @include gl-media-breakpoint-up(lg) {
+    max-width: 50% !important;
+  }
+}
 .gl-p-0 {
   padding: 0;
 }

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

@@ -11,3 +11,80 @@
 @mixin gl-spin {
   animation: gl-spinner-rotate 2s infinite linear;
 }
+
+$gl-animate-skeleton-loader-max-width: 64 * $grid-size;
+// Adds a sliding shining wave to element's background to indicate loading
+//
+// USAGE NOTES: if you're using `gl-max-w-xx` you'll need to add
+// important (e.g. `gl-max-w-20!`). This is because `.gl-animate-skeleton-loader` already
+// has a `max-width` statement, and we need to override it. You can override it
+// only with lower numbers. Width rules (`gl-w-xx`) don't need an override, you
+// can use them as-is. If you want to "synchronize" two elements next to each
+// other, try adding `animation-delay` to offset elements.
+//
+// Simple example:
+// ```html
+// <div>
+//   <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-3"></div>
+//   <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-3"></div>
+//   <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-3"></div>
+// </div>
+// ```
+//
+// More complex example:
+// (with different shapes and an animation delay for offset elements):
+// ```html
+// <div class="gl-display-flex gl-flex-direction-column gl-gap-2 gl-w-30">
+//   <div class="gl-animate-skeleton-loader gl-h-8 gl-rounded-base gl-mb-4"></div>
+//   <div class="gl-display-flex gl-flex-direction-row gl-gap-2">
+//     <div class="gl-animate-skeleton-loader gl-h-8 gl-w-8 gl-rounded-full"></div>
+//     <div class="gl-flex-grow-1" style="animation-delay: 100ms">
+//       <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-2"></div>
+//       <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-2"></div>
+//       <div class="gl-animate-skeleton-loader gl-display-inline-block gl-h-4 gl-w-10 gl-rounded-base gl-my-2"></div>
+//       <div class="gl-animate-skeleton-loader gl-display-inline-block gl-h-4 gl-w-10 gl-rounded-base gl-my-2" style="animation-delay: 250ms"></div>
+//     </div>
+//   </div>
+// </div>
+// ```
+@mixin gl-animate-skeleton-loader {
+  $max-width: $gl-animate-skeleton-loader-max-width;
+
+  overflow: hidden;
+  max-width: $max-width;
+  background-size: $max-width 100%;
+  background-position: -$max-width 0;
+  background-color: $gray-100;
+  background-image: linear-gradient(to right,
+  $gray-100 0,
+  $gray-50 23%,
+  $gray-50 27%,
+  $gray-100 50%);
+  background-repeat: no-repeat;
+
+  // Enable animation only for users who don't have a preference
+  // for reduced animation
+  @media (prefers-reduced-motion: no-preference) {
+    animation: gl-keyframes-skeleton-loader 2.5s linear;
+    animation-delay: inherit;
+    animation-iteration-count: 3;
+  }
+}
+
+@keyframes gl-keyframes-skeleton-loader {
+  // Skeleton loader animation basically moves background from `x=-100%` to
+  // `x=+100%`, so that at the beginning and at the end of the animation loop no
+  // gradient is leaking to the visible part. But we can't use percent-based
+  // positioning, for animation speed would be different for elements with
+  // different width. So we use a predefined max-width for
+  // `.gl-animate-skeleton-loader`, and use its value for `-100%` and `+100%`
+  // positioning.
+
+  0% {
+    background-position-x: -$gl-animate-skeleton-loader-max-width;
+  }
+
+  100% {
+    background-position-x: $gl-animate-skeleton-loader-max-width;
+  }
+}

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

@@ -428,10 +428,18 @@
   max-width: $gl-spacing-scale-15;
 }
 
+@mixin gl-max-w-20 {
+  max-width: $gl-spacing-scale-20;
+}
+
 @mixin gl-max-w-26 {
   max-width: $gl-spacing-scale-26;
 }
 
+@mixin gl-max-w-30 {
+  max-width: $gl-spacing-scale-30;
+}
+
 @mixin gl-max-w-34 {
   max-width: $gl-spacing-scale-34;
 }
@@ -527,3 +535,9 @@
     max-width: 80%;
   }
 }
+
+@mixin gl-lg-max-w-50p {
+  @include gl-media-breakpoint-up(lg) {
+    max-width: 50%;
+  }
+}