@gitlab/ui 62.6.0 → 62.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "62.6.0",
+  "version": "62.8.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -139,7 +139,6 @@
     "postcss-scss": "4.0.4",
     "prettier": "2.6.2",
     "puppeteer": "15.5.0",
-    "raw-loader": "^0.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^2.53.1",

package/scss_to_js/scss_variables.js

@@ -311,6 +311,7 @@ export const glBorderRadius7 = '2rem'
 export const glBorderRadiusFull = '50%'
 export const glTransitionDurationSlow = '0.4s'
 export const glTransitionDurationMedium = '0.2s'
+export const glTransitionDurationFast = '0.1s'
 export const outlineOffset = '1px'
 export const outlineWidth = '2px'
 export const outline = '3px'

package/scss_to_js/scss_variables.json

@@ -1616,6 +1616,11 @@
       "value": "0.2s",
       "compiledValue": "0.2s"
     },
+    {
+      "name": "$gl-transition-duration-fast",
+      "value": "0.1s",
+      "compiledValue": "0.1s"
+    },
     {
       "name": "$outline-offset",
       "value": "1px",

package/src/scss/utilities.scss

@@ -6745,6 +6745,12 @@
 .gl-column-gap-6\! {
   column-gap: $gl-spacing-scale-6 !important;
 }
+.gl-row-gap-6 {
+  row-gap: $gl-spacing-scale-6;
+}
+.gl-row-gap-6\! {
+  row-gap: $gl-spacing-scale-6 !important;
+}
 .gl-xs-mb-3 {
   @include gl-media-breakpoint-down(sm) {
   margin-bottom: $gl-spacing-scale-3;
@@ -8225,6 +8231,14 @@
   transition-duration: $gl-transition-duration-medium !important
 }
 
+.gl-transition-duration-fast {
+  transition-duration: $gl-transition-duration-fast
+}
+
+.gl-transition-duration-fast\! {
+  transition-duration: $gl-transition-duration-fast !important
+}
+
 .gl-transition-timing-function-ease {
   transition-timing-function: ease
 }

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

@@ -890,6 +890,18 @@
   column-gap: $gl-spacing-scale-6;
 }
 
+/**
+* Row gap utilities
+*
+* naming convention: gl-row-gap-{spacing-scale-index}
+* notes:
+* - Utilities should strictly follow $gl-spacing-scale
+*/
+
+@mixin gl-row-gap-6 {
+  row-gap: $gl-spacing-scale-6;
+}
+
 /**
 * Responsive margin utilities.
 *

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

@@ -27,6 +27,10 @@
   transition-duration: $gl-transition-duration-medium;
 }
 
+@mixin gl-transition-duration-fast {
+  transition-duration: $gl-transition-duration-fast;
+}
+
 @mixin gl-transition-timing-function-ease {
   transition-timing-function: ease;
 }

package/src/scss/variables.scss

@@ -431,6 +431,7 @@ $gl-border-radius-full: 50%;
 // transition parameters
 $gl-transition-duration-slow: 0.4s;
 $gl-transition-duration-medium: 0.2s;
+$gl-transition-duration-fast: 0.1s;
 
 // Focus ring
 $outline-offset: 1px;