From dc5af10d42c3a6b19e9c86a6cfb70f266392984e Mon Sep 17 00:00:00 2001
From: Maryia Radchuk <maryia.radchuk@justeattakeaway.com>
Date: Thu, 21 Dec 2023 12:01:35 +0000
Subject: [PATCH] fix(pie-icons-webc): DSW-1539 icon display and size override
 variables

---
 .changeset/fluffy-dolls-flash.md               |  5 +++++
 .changeset/hip-files-wash.md                   |  5 +++++
 packages/components/pie-button/src/button.scss | 16 ++++++++--------
 packages/tools/pie-icons-webc/build.js         |  6 +++---
 4 files changed, 21 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/fluffy-dolls-flash.md
 create mode 100644 .changeset/hip-files-wash.md

diff --git a/.changeset/fluffy-dolls-flash.md b/.changeset/fluffy-dolls-flash.md
new file mode 100644
index 0000000000..22b8c26dcf
--- /dev/null
+++ b/.changeset/fluffy-dolls-flash.md
@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/pie-icons-webc": patch
+---
+
+[Changed] - `--btn-icon-size` and `--btn-icon-display` to `--icon-display-override` and `--icon-size-override` variable for display, width and height icon styles for `:host svg`
diff --git a/.changeset/hip-files-wash.md b/.changeset/hip-files-wash.md
new file mode 100644
index 0000000000..f7d85d3ccb
--- /dev/null
+++ b/.changeset/hip-files-wash.md
@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/pie-button": patch
+---
+
+[Changed] - `--btn-icon-display` and `--btn-icon-size` to `--icon-display-override` and `--icon-size-override` variables
diff --git a/packages/components/pie-button/src/button.scss b/packages/components/pie-button/src/button.scss
index 02befc6e51..c0b701d491 100644
--- a/packages/components/pie-button/src/button.scss
+++ b/packages/components/pie-button/src/button.scss
@@ -38,7 +38,7 @@ $breakpoint-wide: 768px;
     --btn-height--small: 40px;
     --btn-height--medium: 48px;
     --btn-height--large: 56px;
-    --btn-icon-display: block;
+    --icon-display-override: block;
 
     /**
     * Mixin for updating the button styles based on the size passed in.
@@ -50,31 +50,31 @@ $breakpoint-wide: 768px;
             --btn-padding: 6px var(--dt-spacing-b);
             --btn-font-size: #{p.font-size(--dt-font-size-14)};
             --btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);
-            --btn-icon-size: 16px;
+            --icon-size-override: 16px;
         } @else if $size == 'small-expressive' {
             --btn-height: var(--btn-height--small);
             --btn-padding: 6px var(--dt-spacing-d);
             --btn-font-size: #{p.font-size(--dt-font-size-20)};
             --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
-            --btn-icon-size: 20px;
+            --icon-size-override: 20px;
         } @else if $size == 'small-productive' {
             --btn-height: var(--btn-height--small);
             --btn-padding: 8px var(--dt-spacing-d);
             --btn-font-size: #{p.font-size(--dt-font-size-16)};
             --btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);
-            --btn-icon-size: 20px;
+            --icon-size-override: 20px;
         } @else if $size == 'medium' {
             --btn-height: var(--btn-height--medium);
             --btn-padding: 10px var(--dt-spacing-e);
             --btn-font-size: #{p.font-size(--dt-font-size-20)};
             --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
-            --btn-icon-size: 24px;
+            --icon-size-override: 24px;
         } @else if $size == 'large' {
             --btn-height: var(--btn-height--large);
             --btn-padding: 14px var(--dt-spacing-e);
             --btn-font-size: #{p.font-size(--dt-font-size-20)};
             --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
-            --btn-icon-size: 24px;
+            --icon-size-override: 24px;
         }
     }
 
@@ -255,6 +255,6 @@ $breakpoint-wide: 768px;
 
 // Used to size an SVG if one is passed in (when not using the component icons)
 ::slotted(svg) {
-    height: var(--btn-icon-size);
-    width: var(--btn-icon-size);
+    height: var(--icon-size-override);
+    width: var(--icon-size-override);
 }
diff --git a/packages/tools/pie-icons-webc/build.js b/packages/tools/pie-icons-webc/build.js
index 87e6a9c5fb..ce7c832761 100644
--- a/packages/tools/pie-icons-webc/build.js
+++ b/packages/tools/pie-icons-webc/build.js
@@ -39,9 +39,9 @@ export class ${name} extends LitElement implements IconProps {
     // The following styles make sure that the icon will be sized correctly
     static styles = css\`
         :host svg {
-            display: var(--btn-icon-display, inline);
-            width: var(--btn-icon-size, 24px);
-            height: var(--btn-icon-size, 24px);
+            display: var(--icon-display-override);
+            width: var(--icon-size-override);
+            height: var(--icon-size-override);
         }
     \`;