From a03c4de530fe0e5f17b13c4e61d0e48ad79d3ce7 Mon Sep 17 00:00:00 2001
From: Maryia Radchuk <maryia.radchuk@justeattakeaway.com>
Date: Thu, 21 Dec 2023 15:11:38 +0000
Subject: [PATCH] fix(pie-icon-button): DSW-1539 icon display and size override
 variables

---
 .changeset/chilled-snails-cry.md                     |  5 +++++
 .../components/pie-icon-button/src/iconButton.scss   | 12 ++++++------
 2 files changed, 11 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/chilled-snails-cry.md

diff --git a/.changeset/chilled-snails-cry.md b/.changeset/chilled-snails-cry.md
new file mode 100644
index 0000000000..c4144e4b8a
--- /dev/null
+++ b/.changeset/chilled-snails-cry.md
@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/pie-icon-button": patch
+---
+
+[Changed] - `--btn-icon-display`, `--btn-icon-size` and `--btn-icon-size-default` to `--icon-display-override` and `--icon-size-override` variables
diff --git a/packages/components/pie-icon-button/src/iconButton.scss b/packages/components/pie-icon-button/src/iconButton.scss
index 47c4d0c7ee..4f529439ed 100644
--- a/packages/components/pie-icon-button/src/iconButton.scss
+++ b/packages/components/pie-icon-button/src/iconButton.scss
@@ -6,7 +6,7 @@
     --btn-dimension-default: 48px;
 
     // Sizing is set to Medium button icon size, as that is the default
-    --btn-icon-size-default: 24px;
+    --icon-size-override: 24px;
 }
 
 // Base button styles
@@ -14,7 +14,7 @@
     --btn-border-radius: var(--dt-radius-rounded-e);
     --btn-bg-color: var(--dt-color-interactive-brand);
     --btn-icon-fill: var(--dt-color-content-interactive-primary);
-    --btn-icon-display: block;
+    --icon-display-override: block;
 
     block-size: var(--btn-dimension, var(--btn-dimension-default));
     inline-size: var(--btn-dimension, var(--btn-dimension-default));
@@ -37,8 +37,8 @@
     }
 
     svg {
-        height: var(--btn-icon-size, var(--btn-icon-size-default));
-        width: var(--btn-icon-size, var(--btn-icon-size-default));
+        height: var(--icon-size-override);
+        width: var(--icon-size-override);
     }
 
     &[variant='primary'] {
@@ -109,7 +109,7 @@
 
     &[size='xsmall'] {
         --btn-dimension: 32px;
-        --btn-icon-size: 20px;
+        --icon-size-override: 20px;
     }
 
     &[size='small'] {
@@ -122,7 +122,7 @@
 
     &[size='large'] {
         --btn-dimension: 56px;
-        --btn-icon-size: 28px;
+        --icon-size-override: 28px;
     }
 }