From cf952f71cb27416f0062a79a8077e54152c8c172 Mon Sep 17 00:00:00 2001
From: Maryia Radchuk <maryia.radchuk@justeattakeaway.com>
Date: Fri, 22 Dec 2023 13:16:04 +0000
Subject: [PATCH] feat(pie-button): DSW-1539 wip assigning size prop to an icon
 slot

---
 .changeset/chilled-snails-cry.md            |  5 -----
 .changeset/cyan-islands-compete.md          |  5 +++++
 .changeset/fluffy-dolls-flash.md            |  5 -----
 .changeset/hip-files-wash.md                |  5 -----
 packages/components/pie-button/src/index.ts | 21 ++++++++++++++++++++-
 5 files changed, 25 insertions(+), 16 deletions(-)
 delete mode 100644 .changeset/chilled-snails-cry.md
 create mode 100644 .changeset/cyan-islands-compete.md
 delete mode 100644 .changeset/fluffy-dolls-flash.md
 delete mode 100644 .changeset/hip-files-wash.md

diff --git a/.changeset/chilled-snails-cry.md b/.changeset/chilled-snails-cry.md
deleted file mode 100644
index c4144e4b8a..0000000000
--- a/.changeset/chilled-snails-cry.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@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/.changeset/cyan-islands-compete.md b/.changeset/cyan-islands-compete.md
new file mode 100644
index 0000000000..0f1f9becc1
--- /dev/null
+++ b/.changeset/cyan-islands-compete.md
@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/pie-button": minor
+---
+
+[Added] - assigning size prop for the icon slot
diff --git a/.changeset/fluffy-dolls-flash.md b/.changeset/fluffy-dolls-flash.md
deleted file mode 100644
index 22b8c26dcf..0000000000
--- a/.changeset/fluffy-dolls-flash.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@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
deleted file mode 100644
index f7d85d3ccb..0000000000
--- a/.changeset/hip-files-wash.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@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/index.ts b/packages/components/pie-button/src/index.ts
index 5c8a74342d..7e6a67ba7a 100644
--- a/packages/components/pie-button/src/index.ts
+++ b/packages/components/pie-button/src/index.ts
@@ -1,7 +1,7 @@
 import {
     LitElement, html, unsafeCSS, nothing, PropertyValues, TemplateResult,
 } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, queryAssignedElements } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { validPropertyValues, defineCustomElement, FormControlMixin } from '@justeattakeaway/pie-webc-core';
 import {
@@ -41,6 +41,22 @@ export class PieButton extends FormControlMixin(LitElement) implements ButtonPro
     updated (changedProperties: PropertyValues<this>): void {
         super.updated(changedProperties);
 
+        // Making sure that icon passed in a slot has the correct icon size
+        const [iconElement] = this._iconSlotElement;
+
+        if (iconElement) {
+            if (this.size === 'xsmall') {
+                iconElement.setAttribute('size', 'xs');
+            }
+            if (this.size === 'small-expressive' || this.size === 'small-productive') {
+                iconElement.setAttribute('size', 's');
+            }
+
+            if (this.size === 'medium' || this.size === 'large') {
+                iconElement.setAttribute('size', 'm');
+            }
+        }
+
         if (changedProperties.has('type')) {
             // If the new type is "submit", add the keydown event listener
             if (this.type === 'submit') {
@@ -103,6 +119,9 @@ export class PieButton extends FormControlMixin(LitElement) implements ButtonPro
     @property({ type: String })
     public responsiveSize?: ButtonProps['responsiveSize'];
 
+    @queryAssignedElements({ slot: 'icon' })
+        _iconSlotElement!: Array<HTMLElement>;
+
     /**
      * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.
      * This is done so that we trigger native form actions, such as submit and reset in the browser. The performance impact of adding and removing a single button to the DOM