.gitlab-ci.yml

@@ -90,14 +90,8 @@ workflow:
     # Commits on default branch
     - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH
       when: always
-      variables:
-        PAGES_ENV_NAME: "pages"
-        PAGES_PREFIX: "" # no prefix
     # MR-Pipelines
     - if: $CI_MERGE_REQUEST_IID
-      variables:
-        PAGES_ENV_NAME: "review/mr-$CI_MERGE_REQUEST_IID"
-        PAGES_PREFIX: '${CI_ENVIRONMENT_SLUG}'
       when: always
     - when: never
 
@@ -397,29 +391,43 @@ update_screenshots:
   script:
     - ./bin/update-screenshots.sh
 
-pages:
-  rules:
-    - !reference ['.rules:gitlab-ui-default-branch', rules]
-    - !reference ['.rules:gitlab-ui-mr', rules]
+.pages:
   stage: deploy
   needs:
     - build_storybook
     - build_storybook_vue3
     - build_tailwind_config_viewer
-  pages:
-    path_prefix: "${PAGES_PREFIX}"
   script:
     - echo "Deploying to Pages"
     - echo "Pages accessible through ${CI_ENVIRONMENT_URL}"
     - mv ./tailwind-config-viewer-static ./public/tailwind-config-viewer
   environment:
-    name: "${PAGES_ENV_NAME}"
-    url: "${CI_PAGES_URL}/${PAGES_PREFIX}"
+    url: "${CI_PAGES_URL}"
   publish: public
   artifacts:
     paths:
       - public
 
+pages:
+  extends:
+    - .pages
+    - .rules:gitlab-ui-default-branch
+  pages:
+    expire_in: never
+  environment:
+    name: "pages"
+
+review-app:
+  extends:
+    - .pages
+    - .rules:gitlab-ui-mr
+  pages:
+    path_prefix: '$CI_ENVIRONMENT_SLUG'
+    expire_in: "2 weeks"
+  environment:
+    name: "review/mr-$CI_MERGE_REQUEST_IID"
+    auto_stop_in: "2 weeks"
+
 create_integration_branch:
   extends:
     - .node

CHANGELOG.md

+# [108.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v108.2.0...v108.3.0) (2025-02-12)
+
+
+### Features
+
+* **GlAnimatedIcon:** Add variant prop ([a1f1d8f](https://gitlab.com/gitlab-org/gitlab-ui/commit/a1f1d8f2151d8dbb6c158873329a0b8df37c1d15))
+
 # [108.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v108.1.0...v108.2.0) (2025-02-10)
 
 

package.json

 {
   "name": "@gitlab/ui",
-  "version": "108.2.0",
+  "version": "108.3.0",
   "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",

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"

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"

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

src/components/base/animated_icon/animated_icon.spec.js

@@ -18,7 +18,11 @@ describe('GlBaseAnimatedIcon component', () => {
     `('adds the $expectedClass when isOn is $isOn', ({ isOn, expectedClass }) => {
       createComponent({ propsData: { isOn } });
 
-      expect(wrapper.classes()).toStrictEqual(['gl-animated-icon', expectedClass]);
+      expect(wrapper.classes()).toStrictEqual([
+        'gl-animated-icon',
+        expectedClass,
+        'gl-animated-icon-current',
+      ]);
     });
   });
 
@@ -30,4 +34,28 @@ describe('GlBaseAnimatedIcon component', () => {
       expect(wrapper.attributes('aria-label')).toBe(ariaLabel);
     });
   });
+
+  describe('variant', () => {
+    it.each`
+      variant       | expectedClass
+      ${'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'}
+    `('adds the $expectedClass class when variant is $variant', ({ variant, expectedClass }) => {
+      createComponent({ propsData: { variant } });
+
+      expect(wrapper.classes()).toStrictEqual([
+        'gl-animated-icon',
+        'gl-animated-icon-off',
+        expectedClass,
+      ]);
+    });
+  });
 });

src/components/base/animated_icon/animated_icon.stories.js

 import GlButton from '../button/button.vue';
+import { animatedIconVariantOptions } from '../../../utils/constants';
 import GlBaseAnimatedIcon from './base_animated_icon.vue';
 import GlAnimatedChevronRightDownIcon from './animated_chevron_right_down_icon.vue';
 import GlAnimatedDuoChatIcon from './animated_duo_chat_icon.vue';
@@ -32,31 +33,31 @@ const MorphTemplate = (args, { argTypes }) => ({
   template: `
   <div class="gl-flex gl-gap-5 gl-flex-wrap hover:gl-cursor-pointer" @click="animationsOn = !animationsOn">
     <div class="gl-p-4 gl-border gl-rounded-base gl-flex gl-flex-col gl-items-center gl-gap-2">
-      <gl-animated-todo-icon :aria-label="ariaLabel" name="todo" aria-label="todo checkmark icon" :isOn="animationsOn" />
+      <gl-animated-todo-icon :variant="variant" :aria-label="ariaLabel" name="todo" :isOn="animationsOn" />
       todo
     </div>
     <div class="gl-p-4 gl-border gl-rounded-base gl-flex gl-flex-col gl-items-center gl-gap-2">
-      <gl-animated-star-icon :aria-label="ariaLabel" name="star" aria-label="favourite star icon" :isOn="animationsOn" />
+      <gl-animated-star-icon :variant="variant" :aria-label="ariaLabel" name="star" :isOn="animationsOn" />
       star
     </div>
     <div class="gl-p-4 gl-border gl-rounded-base gl-flex gl-flex-col gl-items-center gl-gap-2">
-      <gl-animated-sort-icon :aria-label="ariaLabel" name="sort" :isOn="animationsOn" />
+      <gl-animated-sort-icon :variant="variant" :aria-label="ariaLabel" name="sort" :isOn="animationsOn" />
       sort
     </div>
     <div class="gl-p-4 gl-border gl-rounded-base gl-flex gl-flex-col gl-items-center gl-gap-2">
-      <gl-animated-smile-icon :aria-label="ariaLabel" name="smile" :isOn="animationsOn" />
+      <gl-animated-smile-icon :variant="variant" :aria-label="ariaLabel" name="smile" :isOn="animationsOn" />
       smile
     </div>
     <div class="gl-p-4 gl-border gl-rounded-base gl-flex gl-flex-col gl-items-center gl-gap-2">
-      <gl-animated-sidebar-icon :aria-label="ariaLabel" name="sidebar" :isOn="animationsOn" />
+      <gl-animated-sidebar-icon :variant="variant" :aria-label="ariaLabel" name="sidebar" :isOn="animationsOn" />
       sidebar
     </div>
     <div class="gl-py-4 gl-px-5 gl-border gl-rounded-base gl-flex gl-flex-col gl-items-center gl-gap-2">
-      <gl-animated-notification-icon :aria-label="ariaLabel" name="notifications" aria-label="notification bell icon" :isOn="animationsOn" />
+      <gl-animated-notification-icon :variant="variant" :aria-label="ariaLabel" name="notifications" :isOn="animationsOn" />
       notifications
     </div>
     <div class="gl-p-4 gl-border gl-rounded-base gl-flex gl-flex-col gl-items-center gl-gap-2">
-      <gl-animated-chevron-right-down-icon :aria-label="ariaLabel" name="chevron_right_down" :isOn="animationsOn" />
+      <gl-animated-chevron-right-down-icon :variant="variant" :aria-label="ariaLabel" name="chevron_right_down" :isOn="animationsOn" />
       chevron-right-down
     </div>
   </div>`,
@@ -80,15 +81,15 @@ const InfiniteTemplate = (args, { argTypes }) => ({
   template: `
   <div class="gl-flex gl-gap-5 gl-flex-wrap">
     <div class="gl-py-4 gl-px-5 gl-border gl-rounded-base gl-flex gl-flex-col gl-items-center gl-gap-2" @mouseenter="animationsOn = true" @mouseleave="animationsOn = false">
-      <gl-animated-upload-icon :aria-label="ariaLabel" name="upload" :isOn="animationsOn" />
+      <gl-animated-upload-icon :variant="variant" :aria-label="ariaLabel" name="upload" :isOn="animationsOn" />
       upload
     </div>
     <div class="gl-py-4 gl-px-5 gl-border gl-rounded-base gl-flex gl-flex-col gl-items-center gl-gap-2" @mouseenter="animationsOn = true" @mouseleave="animationsOn = false">
-      <gl-animated-duo-chat-icon :aria-label="ariaLabel" name="duo_chat" :isOn="animationsOn" />
+      <gl-animated-duo-chat-icon :variant="variant" :aria-label="ariaLabel" name="duo_chat" :isOn="animationsOn" />
       duo-chat
     </div>
     <div class="gl-py-4 gl-px-5 gl-border gl-rounded-base gl-flex gl-flex-col gl-items-center gl-gap-2" @mouseenter="animationsOn = true" @mouseleave="animationsOn = false">
-      <gl-animated-loader-icon :aria-label="ariaLabel" name="loader" :isOn="animationsOn" />
+      <gl-animated-loader-icon :variant="variant" :aria-label="ariaLabel" name="loader" :isOn="animationsOn" />
       loader
     </div>
   </div>`,
@@ -114,5 +115,9 @@ export default {
     ariaLabel: {
       control: { disable: true },
     },
+    variant: {
+      options: Object.keys(animatedIconVariantOptions),
+      control: 'select',
+    },
   },
 };

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"

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"

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"

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"

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"

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"

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"

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"

src/components/base/animated_icon/base_animated_icon.vue

 <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"

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',