From 56c748ca1ce6887550df3e85524b3c3a56a81a27 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Tue, 1 Apr 2025 10:51:12 +0200
Subject: [PATCH] fix(GlAnimatedIcon): Fix size in product

Adds class gl-button-icon to fix usage in GlButton in product
which gets rendered at a 15px size.
---
 .../base/animated_icon/animated_chevron_down_up_icon.vue        | 1 +
 .../base/animated_icon/animated_chevron_lg_down_up_icon.vue     | 1 +
 .../base/animated_icon/animated_chevron_lg_right_down_icon.vue  | 1 +
 .../base/animated_icon/animated_chevron_right_down_icon.vue     | 1 +
 src/components/base/animated_icon/animated_duo_chat_icon.vue    | 1 +
 src/components/base/animated_icon/animated_icon.spec.js         | 2 ++
 src/components/base/animated_icon/animated_loader_icon.vue      | 1 +
 .../base/animated_icon/animated_notifications_icon.vue          | 1 +
 src/components/base/animated_icon/animated_sidebar_icon.vue     | 1 +
 src/components/base/animated_icon/animated_smile_icon.vue       | 1 +
 src/components/base/animated_icon/animated_sort_icon.vue        | 2 +-
 src/components/base/animated_icon/animated_star_icon.vue        | 1 +
 src/components/base/animated_icon/animated_todo_icon.vue        | 1 +
 src/components/base/animated_icon/animated_upload_icon.vue      | 1 +
 src/components/base/animated_icon/base_animated_icon.vue        | 1 +
 15 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/base/animated_icon/animated_chevron_down_up_icon.vue b/src/components/base/animated_icon/animated_chevron_down_up_icon.vue
index a245777eb3..0459c67790 100644
--- a/src/components/base/animated_icon/animated_chevron_down_up_icon.vue
+++ b/src/components/base/animated_icon/animated_chevron_down_up_icon.vue
@@ -9,6 +9,7 @@ export default {
 <template>
   <svg
     :class="[iconStateClass, iconVariantClass]"
+    class="gl-button-icon"
     :aria-label="ariaLabel"
     width="16"
     height="16"
diff --git a/src/components/base/animated_icon/animated_chevron_lg_down_up_icon.vue b/src/components/base/animated_icon/animated_chevron_lg_down_up_icon.vue
index e31b65af5a..c4dc177b72 100644
--- a/src/components/base/animated_icon/animated_chevron_lg_down_up_icon.vue
+++ b/src/components/base/animated_icon/animated_chevron_lg_down_up_icon.vue
@@ -9,6 +9,7 @@ export default {
 <template>
   <svg
     :class="[iconStateClass, iconVariantClass]"
+    class="gl-button-icon"
     :aria-label="ariaLabel"
     width="16"
     height="16"
diff --git a/src/components/base/animated_icon/animated_chevron_lg_right_down_icon.vue b/src/components/base/animated_icon/animated_chevron_lg_right_down_icon.vue
index f914fc29e1..75a1031c9f 100644
--- a/src/components/base/animated_icon/animated_chevron_lg_right_down_icon.vue
+++ b/src/components/base/animated_icon/animated_chevron_lg_right_down_icon.vue
@@ -9,6 +9,7 @@ export default {
 <template>
   <svg
     :class="[iconStateClass, iconVariantClass]"
+    class="gl-button-icon"
     :aria-label="ariaLabel"
     width="16"
     height="16"
diff --git a/src/components/base/animated_icon/animated_chevron_right_down_icon.vue b/src/components/base/animated_icon/animated_chevron_right_down_icon.vue
index fed560c900..15bf8013d6 100644
--- a/src/components/base/animated_icon/animated_chevron_right_down_icon.vue
+++ b/src/components/base/animated_icon/animated_chevron_right_down_icon.vue
@@ -9,6 +9,7 @@ export default {
 <template>
   <svg
     :class="[iconStateClass, iconVariantClass]"
+    class="gl-button-icon"
     :aria-label="ariaLabel"
     width="16"
     height="16"
diff --git a/src/components/base/animated_icon/animated_duo_chat_icon.vue b/src/components/base/animated_icon/animated_duo_chat_icon.vue
index d65af881b3..9c161c6cf6 100644
--- a/src/components/base/animated_icon/animated_duo_chat_icon.vue
+++ b/src/components/base/animated_icon/animated_duo_chat_icon.vue
@@ -9,6 +9,7 @@ export default {
 <template>
   <svg
     :class="[iconStateClass, iconVariantClass]"
+    class="gl-button-icon"
     :aria-label="ariaLabel"
     width="16"
     height="16"
diff --git a/src/components/base/animated_icon/animated_icon.spec.js b/src/components/base/animated_icon/animated_icon.spec.js
index 5b49936a28..a476262f9c 100644
--- a/src/components/base/animated_icon/animated_icon.spec.js
+++ b/src/components/base/animated_icon/animated_icon.spec.js
@@ -19,6 +19,7 @@ describe('GlBaseAnimatedIcon component', () => {
       createComponent({ propsData: { isOn } });
 
       expect(wrapper.classes()).toStrictEqual([
+        'gl-button-icon',
         'gl-animated-icon',
         expectedClass,
         'gl-animated-icon-current',
@@ -52,6 +53,7 @@ describe('GlBaseAnimatedIcon component', () => {
       createComponent({ propsData: { variant } });
 
       expect(wrapper.classes()).toStrictEqual([
+        'gl-button-icon',
         'gl-animated-icon',
         'gl-animated-icon-off',
         expectedClass,
diff --git a/src/components/base/animated_icon/animated_loader_icon.vue b/src/components/base/animated_icon/animated_loader_icon.vue
index 3d850ef68c..6c6c0f5ba3 100644
--- a/src/components/base/animated_icon/animated_loader_icon.vue
+++ b/src/components/base/animated_icon/animated_loader_icon.vue
@@ -9,6 +9,7 @@ export default {
 <template>
   <svg
     :class="[iconStateClass, iconVariantClass]"
+    class="gl-button-icon"
     :aria-label="ariaLabel"
     width="16"
     height="16"
diff --git a/src/components/base/animated_icon/animated_notifications_icon.vue b/src/components/base/animated_icon/animated_notifications_icon.vue
index 71e31a164c..bcf30808b1 100644
--- a/src/components/base/animated_icon/animated_notifications_icon.vue
+++ b/src/components/base/animated_icon/animated_notifications_icon.vue
@@ -9,6 +9,7 @@ export default {
 <template>
   <svg
     :class="[iconStateClass, iconVariantClass]"
+    class="gl-button-icon"
     :aria-label="ariaLabel"
     width="16"
     height="16"
diff --git a/src/components/base/animated_icon/animated_sidebar_icon.vue b/src/components/base/animated_icon/animated_sidebar_icon.vue
index 81c3b0ff36..299ba0f4b6 100644
--- a/src/components/base/animated_icon/animated_sidebar_icon.vue
+++ b/src/components/base/animated_icon/animated_sidebar_icon.vue
@@ -9,6 +9,7 @@ export default {
 <template>
   <svg
     :class="[iconStateClass, iconVariantClass]"
+    class="gl-button-icon"
     :aria-label="ariaLabel"
     width="16"
     height="16"
diff --git a/src/components/base/animated_icon/animated_smile_icon.vue b/src/components/base/animated_icon/animated_smile_icon.vue
index 6bdfc2b927..cf56fda13e 100644
--- a/src/components/base/animated_icon/animated_smile_icon.vue
+++ b/src/components/base/animated_icon/animated_smile_icon.vue
@@ -9,6 +9,7 @@ export default {
 <template>
   <svg
     :class="[iconStateClass, iconVariantClass]"
+    class="gl-button-icon"
     :aria-label="ariaLabel"
     width="16"
     height="16"
diff --git a/src/components/base/animated_icon/animated_sort_icon.vue b/src/components/base/animated_icon/animated_sort_icon.vue
index 84478a834a..39a4938743 100644
--- a/src/components/base/animated_icon/animated_sort_icon.vue
+++ b/src/components/base/animated_icon/animated_sort_icon.vue
@@ -9,7 +9,7 @@ export default {
 <template>
   <svg
     :class="[iconStateClass, iconVariantClass]"
-    class="gl-animated-sort-icon"
+    class="gl-button-icon gl-animated-sort-icon"
     :aria-label="ariaLabel"
     width="16"
     height="16"
diff --git a/src/components/base/animated_icon/animated_star_icon.vue b/src/components/base/animated_icon/animated_star_icon.vue
index f913b1d2a2..097f9fd1d3 100644
--- a/src/components/base/animated_icon/animated_star_icon.vue
+++ b/src/components/base/animated_icon/animated_star_icon.vue
@@ -9,6 +9,7 @@ export default {
 <template>
   <svg
     :class="[iconStateClass, iconVariantClass]"
+    class="gl-button-icon"
     :aria-label="ariaLabel"
     width="16"
     height="16"
diff --git a/src/components/base/animated_icon/animated_todo_icon.vue b/src/components/base/animated_icon/animated_todo_icon.vue
index eb6436ae59..0054f9f956 100644
--- a/src/components/base/animated_icon/animated_todo_icon.vue
+++ b/src/components/base/animated_icon/animated_todo_icon.vue
@@ -9,6 +9,7 @@ export default {
 <template>
   <svg
     :class="[iconStateClass, iconVariantClass]"
+    class="gl-button-icon"
     :aria-label="ariaLabel"
     width="16"
     height="16"
diff --git a/src/components/base/animated_icon/animated_upload_icon.vue b/src/components/base/animated_icon/animated_upload_icon.vue
index 15a89861f2..4d70e7b0b4 100644
--- a/src/components/base/animated_icon/animated_upload_icon.vue
+++ b/src/components/base/animated_icon/animated_upload_icon.vue
@@ -9,6 +9,7 @@ export default {
 <template>
   <svg
     :class="[iconStateClass, iconVariantClass]"
+    class="gl-button-icon"
     :aria-label="ariaLabel"
     width="16"
     height="16"
diff --git a/src/components/base/animated_icon/base_animated_icon.vue b/src/components/base/animated_icon/base_animated_icon.vue
index 396bd8258c..a9591ef105 100644
--- a/src/components/base/animated_icon/base_animated_icon.vue
+++ b/src/components/base/animated_icon/base_animated_icon.vue
@@ -43,6 +43,7 @@ export default {
 <template>
   <svg
     :class="[iconStateClass, iconVariantClass]"
+    class="gl-button-icon"
     :aria-label="ariaLabel"
     width="16"
     height="16"
-- 
GitLab