@gitlab/ui 62.7.0 → 62.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "62.7.0",
+  "version": "62.9.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/components/base/broadcast_message/broadcast_message.vue

@@ -81,6 +81,7 @@ export default {
         <gl-icon :name="iconName" />
       </div>
       <div class="gl-my-n1">
+        <h2 class="gl-sr-only">Admin message</h2>
         <!-- @slot The broadcast message's text -->
         <slot></slot>
       </div>

package/src/scss/utilities.scss

@@ -8231,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/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;