@gitlab/ui 108.2.0 → 108.3.1

package/dist/utils/constants.js

@@ -159,6 +159,18 @@ const iconVariantOptions = {
   danger: 'gl-fill-icon-danger',
   success: 'gl-fill-icon-success'
 };
+const animatedIconVariantOptions = {
+  current: 'gl-animated-icon-current',
+  default: 'gl-animated-icon-default',
+  subtle: 'gl-animated-icon-subtle',
+  strong: 'gl-animated-icon-strong',
+  disabled: 'gl-animated-icon-disabled',
+  link: 'gl-animated-icon-link',
+  info: 'gl-animated-icon-info',
+  warning: 'gl-animated-icon-warning',
+  danger: 'gl-animated-icon-danger',
+  success: 'gl-animated-icon-success'
+};
 const triggerVariantOptions = {
   click: 'click',
   hover: 'hover',
@@ -299,4 +311,4 @@ const loadingIconVariants = {
   dots: 'dots'
 };
 
-export { COMMA, CONTRAST_LEVELS, HEX_REGEX, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, breadCrumbSizeOptions, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownItemVariantOptions, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, formStateOptions, iconSizeOptions, iconVariantOptions, keyboard, labelColorOptions, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, progressBarVariantOptions, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, viewModeOptions };
+export { COMMA, CONTRAST_LEVELS, HEX_REGEX, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, animatedIconVariantOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, breadCrumbSizeOptions, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownItemVariantOptions, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, formStateOptions, iconSizeOptions, iconVariantOptions, keyboard, labelColorOptions, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, progressBarVariantOptions, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, viewModeOptions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "108.2.0",
+  "version": "108.3.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -100,10 +100,10 @@
     "jackspeak": "2.1.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.7",
+    "@babel/core": "^7.26.8",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.26.7",
+    "@babel/preset-env": "^7.26.8",
     "@babel/preset-react": "^7.26.3",
     "@cypress/grep": "^4.0.1",
     "@gitlab/eslint-plugin": "20.7.1",
@@ -155,7 +155,7 @@
     "eslint-formatter-gitlab": "^5.1.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "3.6.0",
-    "eslint-plugin-storybook": "0.11.1",
+    "eslint-plugin-storybook": "0.11.2",
     "fuse.js": "^7.0.0",
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "10.3.3",

package/src/components/base/animated_icon/animated_chevron_right_down_icon.vue

@@ -8,7 +8,7 @@ export default {
 </script>
 <template>
   <svg
-    :class="iconStateClass"
+    :class="[iconStateClass, iconVariantClass]"
     :aria-label="ariaLabel"
     width="16"
     height="16"

package/src/components/base/animated_icon/animated_duo_chat_icon.vue

@@ -8,7 +8,7 @@ export default {
 </script>
 <template>
   <svg
-    :class="iconStateClass"
+    :class="[iconStateClass, iconVariantClass]"
     :aria-label="ariaLabel"
     width="16"
     height="16"

package/src/components/base/animated_icon/animated_icon.scss

@@ -13,6 +13,46 @@
   }
 }
 
+/* * * * * * * * * * * * * * * * *
+ * Color variants.
+ * * * * * * * * * * * * * * * * */
+
+.gl-animated-icon-default {
+  color: var(--gl-icon-color-default);
+}
+
+.gl-animated-icon-subtle {
+  color: var(--gl-icon-color-subtle);
+}
+
+.gl-animated-icon-strong {
+  color: var(--gl-icon-color-strong);
+}
+
+.gl-animated-icon-disabled {
+  color: var(--gl-icon-color-disabled);
+}
+
+.gl-animated-icon-link {
+  color: var(--gl-icon-color-link);
+}
+
+.gl-animated-icon-info {
+  color: var(--gl-icon-color-info);
+}
+
+.gl-animated-icon-warning {
+  color: var(--gl-icon-color-warning);
+}
+
+.gl-animated-icon-danger {
+  color: var(--gl-icon-color-danger);
+}
+
+.gl-animated-icon-success {
+  color: var(--gl-icon-color-success);
+}
+
 /* * * * * * * * * * * * * * * * *
  * animated_chevron_right_down_icon.vue
  * * * * * * * * * * * * * * * * */

package/src/components/base/animated_icon/animated_loader_icon.vue

@@ -8,7 +8,7 @@ export default {
 </script>
 <template>
   <svg
-    :class="iconStateClass"
+    :class="[iconStateClass, iconVariantClass]"
     :aria-label="ariaLabel"
     width="16"
     height="16"

package/src/components/base/animated_icon/animated_notifications_icon.vue

@@ -8,7 +8,7 @@ export default {
 </script>
 <template>
   <svg
-    :class="iconStateClass"
+    :class="[iconStateClass, iconVariantClass]"
     :aria-label="ariaLabel"
     width="16"
     height="16"

package/src/components/base/animated_icon/animated_sidebar_icon.vue

@@ -8,7 +8,7 @@ export default {
 </script>
 <template>
   <svg
-    :class="iconStateClass"
+    :class="[iconStateClass, iconVariantClass]"
     :aria-label="ariaLabel"
     width="16"
     height="16"

package/src/components/base/animated_icon/animated_smile_icon.vue

@@ -8,7 +8,7 @@ export default {
 </script>
 <template>
   <svg
-    :class="iconStateClass"
+    :class="[iconStateClass, iconVariantClass]"
     :aria-label="ariaLabel"
     width="16"
     height="16"

package/src/components/base/animated_icon/animated_sort_icon.vue

@@ -8,7 +8,7 @@ export default {
 </script>
 <template>
   <svg
-    :class="iconStateClass"
+    :class="[iconStateClass, iconVariantClass]"
     class="gl-animated-sort-icon"
     :aria-label="ariaLabel"
     width="16"

package/src/components/base/animated_icon/animated_star_icon.vue

@@ -8,7 +8,7 @@ export default {
 </script>
 <template>
   <svg
-    :class="iconStateClass"
+    :class="[iconStateClass, iconVariantClass]"
     :aria-label="ariaLabel"
     width="16"
     height="16"

package/src/components/base/animated_icon/animated_todo_icon.vue

@@ -8,7 +8,7 @@ export default {
 </script>
 <template>
   <svg
-    :class="iconStateClass"
+    :class="[iconStateClass, iconVariantClass]"
     :aria-label="ariaLabel"
     width="16"
     height="16"

package/src/components/base/animated_icon/animated_upload_icon.vue

@@ -8,7 +8,7 @@ export default {
 </script>
 <template>
   <svg
-    :class="iconStateClass"
+    :class="[iconStateClass, iconVariantClass]"
     :aria-label="ariaLabel"
     width="16"
     height="16"

package/src/components/base/animated_icon/base_animated_icon.vue

@@ -1,4 +1,6 @@
 <script>
+import { animatedIconVariantOptions } from '../../../utils/constants';
+
 export default {
   name: 'GlBaseAnimatedIcon',
   props: {
@@ -11,6 +13,15 @@ export default {
       required: false,
       default: undefined,
     },
+    /**
+     * Icon variant
+     */
+    variant: {
+      type: String,
+      required: false,
+      default: 'current',
+      validator: (value) => Object.keys(animatedIconVariantOptions).includes(value),
+    },
     isOn: {
       type: Boolean,
       required: false,
@@ -23,12 +34,15 @@ export default {
         ? 'gl-animated-icon gl-animated-icon-on'
         : 'gl-animated-icon gl-animated-icon-off';
     },
+    iconVariantClass() {
+      return this.variant ? animatedIconVariantOptions[this.variant] : '';
+    },
   },
 };
 </script>
 <template>
   <svg
-    :class="iconStateClass"
+    :class="[iconStateClass, iconVariantClass]"
     :aria-label="ariaLabel"
     width="16"
     height="16"

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.vue

@@ -80,7 +80,6 @@ export default {
     <div
       v-if="showHeader"
       :id="nameId"
-      aria-hidden="true"
       class="gl-py-2 gl-pl-4 gl-text-sm gl-font-bold gl-text-strong"
     >
       <slot name="group-label">{{ group.name }}</slot>

package/src/utils/constants.js

@@ -190,6 +190,19 @@ export const iconVariantOptions = {
   success: 'gl-fill-icon-success',
 };
 
+export const animatedIconVariantOptions = {
+  current: 'gl-animated-icon-current',
+  default: 'gl-animated-icon-default',
+  subtle: 'gl-animated-icon-subtle',
+  strong: 'gl-animated-icon-strong',
+  disabled: 'gl-animated-icon-disabled',
+  link: 'gl-animated-icon-link',
+  info: 'gl-animated-icon-info',
+  warning: 'gl-animated-icon-warning',
+  danger: 'gl-animated-icon-danger',
+  success: 'gl-animated-icon-success',
+};
+
 export const triggerVariantOptions = {
   click: 'click',
   hover: 'hover',