From d9c52b718d85584f49f25888f36012e01d172887 Mon Sep 17 00:00:00 2001
From: Baz Utsahajit <baz.utsahajit@play.co>
Date: Fri, 22 Mar 2024 14:23:12 +0000
Subject: [PATCH 1/6] Fix: Adjust Fancy Button Content Fitting

---
 src/FancyButton.ts                               | 16 ++++++++++++++++
 .../FancyButtonNineSlicePlaneSprite.stories.ts   |  7 +++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/FancyButton.ts b/src/FancyButton.ts
index c4879dff..71fe23a2 100644
--- a/src/FancyButton.ts
+++ b/src/FancyButton.ts
@@ -64,6 +64,7 @@ export type ButtonOptions = ViewsInput & {
     iconOffset?: Offset;
     animations?: StateAnimations;
     nineSlicePlane?: [number, number, number, number];
+    ignoreRefitting?: boolean;
 };
 
 /**
@@ -136,6 +137,9 @@ export class FancyButton extends ButtonContainer
     /** Anchor point of the button. */
     anchor: ObservablePoint;
 
+    protected _textBaseScale = 1;
+    protected _iconBaseScale = 1;
+
     /**
      * Creates a button with a lot of tweaks.
      * @param {object} options - Button options.
@@ -298,6 +302,7 @@ export class FancyButton extends ButtonContainer
     protected createTextView(text: AnyText)
     {
         this._views.textView = getTextView(text);
+        this._textBaseScale = this._views.textView.scale.x;
         this._views.textView.anchor.set(0);
         this.innerView.addChild(this._views.textView);
 
@@ -373,6 +378,11 @@ export class FancyButton extends ButtonContainer
 
         if (activeView)
         {
+            if (!this.options.ignoreRefitting)
+            {
+                this._views.textView.scale.set(this._textBaseScale);
+            }
+
             fitToView(activeView, this._views.textView, this.padding);
 
             this._views.textView.x = activeView.x + (activeView.width / 2);
@@ -402,6 +412,11 @@ export class FancyButton extends ButtonContainer
             return;
         }
 
+        if (!this.options.ignoreRefitting)
+        {
+            this._views.iconView.scale.set(this._iconBaseScale);
+        }
+
         fitToView(activeView, this._views.iconView, this.padding);
 
         (this._views.iconView as Sprite).anchor?.set(0);
@@ -626,6 +641,7 @@ export class FancyButton extends ButtonContainer
         }
 
         this._views.iconView = getView(view);
+        this._iconBaseScale = this._views.iconView.scale.x;
 
         if (!this._views.iconView.parent)
         {
diff --git a/src/stories/fancyButton/FancyButtonNineSlicePlaneSprite.stories.ts b/src/stories/fancyButton/FancyButtonNineSlicePlaneSprite.stories.ts
index 11ff6ce9..1fb180bc 100644
--- a/src/stories/fancyButton/FancyButtonNineSlicePlaneSprite.stories.ts
+++ b/src/stories/fancyButton/FancyButtonNineSlicePlaneSprite.stories.ts
@@ -80,13 +80,16 @@ export const UseNineSlicePlane = ({
             },
         });
 
-        button.iconView = new MaskedFrame({
+        const buttonIcon = new MaskedFrame({
             target: `avatar-01.png`,
             mask: `avatar_mask.png`,
             borderWidth: 10,
             borderColor: 0xFFFFFF
         });
-        button.iconView.scale.set(0.2);
+
+        buttonIcon.scale.set(0.2);
+
+        button.iconView = buttonIcon;
         button.iconOffset = { x: -100, y: -7 };
 
         button.anchor.set(anchorX, anchorY);

From 7a0d5f34a0d40c28aea33da3599df3fb7b175971 Mon Sep 17 00:00:00 2001
From: Baz Utsahajit <baz.utsahajit@play.co>
Date: Fri, 22 Mar 2024 19:59:04 +0000
Subject: [PATCH 2/6] Address Feedback

---
 src/FancyButton.ts                            | 88 ++++++++++++++++---
 ...FancyButtonNineSlicePlaneSprite.stories.ts | 20 ++---
 src/utils/helpers/fit.ts                      | 30 +++++--
 3 files changed, 111 insertions(+), 27 deletions(-)

diff --git a/src/FancyButton.ts b/src/FancyButton.ts
index 71fe23a2..3c82e61e 100644
--- a/src/FancyButton.ts
+++ b/src/FancyButton.ts
@@ -62,6 +62,8 @@ export type ButtonOptions = ViewsInput & {
     offset?: Offset;
     textOffset?: Offset;
     iconOffset?: Offset;
+    textScale?: Pos | number;
+    iconScale?: Pos | number;
     animations?: StateAnimations;
     nineSlicePlane?: [number, number, number, number];
     ignoreRefitting?: boolean;
@@ -137,8 +139,11 @@ export class FancyButton extends ButtonContainer
     /** Anchor point of the button. */
     anchor: ObservablePoint;
 
-    protected _textBaseScale = 1;
-    protected _iconBaseScale = 1;
+    /** Base text scaling to take into account when fitting inside the button */
+    protected _textBaseScale: Pos = { x: 1, y: 1 };
+
+    /** Base icon scaling to take into account when fitting inside the button */
+    protected _iconBaseScale: Pos = { x: 1, y: 1 };
 
     /**
      * Creates a button with a lot of tweaks.
@@ -177,6 +182,8 @@ export class FancyButton extends ButtonContainer
             offset,
             textOffset,
             iconOffset,
+            textScale,
+            iconScale,
             scale,
             anchor,
             anchorX,
@@ -194,6 +201,8 @@ export class FancyButton extends ButtonContainer
         this.offset = offset;
         this.textOffset = textOffset;
         this.iconOffset = iconOffset;
+        this.textBaseScale = textScale;
+        this.iconBaseScale = iconScale;
         this.scale.set(scale ?? 1);
 
         if (animations)
@@ -302,7 +311,15 @@ export class FancyButton extends ButtonContainer
     protected createTextView(text: AnyText)
     {
         this._views.textView = getTextView(text);
-        this._textBaseScale = this._views.textView.scale.x;
+
+        // If text scale has not manually been set, we will overwrite the base scale with the new text view scale.
+        if (this.options?.textScale === undefined)
+        {
+            const { x, y } = this._views.textView.scale;
+
+            this._textBaseScale = { x, y };
+        }
+
         this._views.textView.anchor.set(0);
         this.innerView.addChild(this._views.textView);
 
@@ -378,12 +395,12 @@ export class FancyButton extends ButtonContainer
 
         if (activeView)
         {
-            if (!this.options.ignoreRefitting)
+            if (this.options && !this.options.ignoreRefitting)
             {
-                this._views.textView.scale.set(this._textBaseScale);
+                this._views.textView.scale.set(this._textBaseScale.x, this._textBaseScale.y);
             }
 
-            fitToView(activeView, this._views.textView, this.padding);
+            fitToView(activeView, this._views.textView, this.padding, false);
 
             this._views.textView.x = activeView.x + (activeView.width / 2);
             this._views.textView.y = activeView.y + (activeView.height / 2);
@@ -412,12 +429,12 @@ export class FancyButton extends ButtonContainer
             return;
         }
 
-        if (!this.options.ignoreRefitting)
+        if (this.options && !this.options.ignoreRefitting)
         {
-            this._views.iconView.scale.set(this._iconBaseScale);
+            this._views.iconView.scale.set(this._iconBaseScale.x, this._iconBaseScale.y);
         }
 
-        fitToView(activeView, this._views.iconView, this.padding);
+        fitToView(activeView, this._views.iconView, this.padding, false);
 
         (this._views.iconView as Sprite).anchor?.set(0);
 
@@ -641,7 +658,14 @@ export class FancyButton extends ButtonContainer
         }
 
         this._views.iconView = getView(view);
-        this._iconBaseScale = this._views.iconView.scale.x;
+
+        // If icon scale has not manually been set, we will overwrite the base scale with the new icon view scale.
+        if (this.options?.iconScale === undefined)
+        {
+            const { x, y } = this._views.iconView.scale;
+
+            this._iconBaseScale = { x, y };
+        }
 
         if (!this._views.iconView.parent)
         {
@@ -811,6 +835,50 @@ export class FancyButton extends ButtonContainer
         return this._textOffset;
     }
 
+    /**
+     * Sets the base scale for the text view to take into account when fitting inside the button.
+     * @param {Pos | number} scale - base scale of the text view.
+     */
+    set textBaseScale(scale: Pos | number)
+    {
+        // Apply to the options so that the manual scale is prioritized.
+        this.options.textScale = scale;
+        if (scale === undefined) return;
+        const isNumber = typeof scale === 'number';
+
+        this._textBaseScale.x = isNumber ? scale : scale.x ?? 1;
+        this._textBaseScale.y = isNumber ? scale : scale.y ?? 1;
+        this.adjustTextView(this.state);
+    }
+
+    /** Returns the text view base scale. */
+    get textBaseScale(): Pos
+    {
+        return this.textBaseScale;
+    }
+
+    /**
+     * Sets the base scale for the icon view to take into account when fitting inside the button.
+     * @param {Pos | number} scale - base scale of the icon view.
+     */
+    set iconBaseScale(scale: Pos | number)
+    {
+        // Apply to the options so that the manual scale is prioritized.
+        this.options.iconScale = scale;
+        if (scale === undefined) return;
+        const isNumber = typeof scale === 'number';
+
+        this._iconBaseScale.x = isNumber ? scale : scale.x ?? 1;
+        this._iconBaseScale.y = isNumber ? scale : scale.y ?? 1;
+        this.adjustIconView(this.state);
+    }
+
+    /** Returns the icon view base scale. */
+    get iconBaseScale(): Pos
+    {
+        return this.iconBaseScale;
+    }
+
     /**
      * Sets width of a FancyButtons state views.
      * If nineSlicePlane is set, then width will be set to nineSlicePlanes of a views.
diff --git a/src/stories/fancyButton/FancyButtonNineSlicePlaneSprite.stories.ts b/src/stories/fancyButton/FancyButtonNineSlicePlaneSprite.stories.ts
index 1fb180bc..48f8658a 100644
--- a/src/stories/fancyButton/FancyButtonNineSlicePlaneSprite.stories.ts
+++ b/src/stories/fancyButton/FancyButtonNineSlicePlaneSprite.stories.ts
@@ -60,8 +60,16 @@ export const UseNineSlicePlane = ({
                 ...defaultTextStyle,
                 fill: textColor || defaultTextStyle.fill
             }),
+            icon: new MaskedFrame({
+                target: `avatar-01.png`,
+                mask: `avatar_mask.png`,
+                borderWidth: 10,
+                borderColor: 0xFFFFFF
+            }),
             padding,
             textOffset: { x: 30, y: -5 },
+            iconOffset: { x: -100, y: -7 },
+            iconScale: 0.2,
             animations: {
                 hover: {
                     props: {
@@ -80,18 +88,6 @@ export const UseNineSlicePlane = ({
             },
         });
 
-        const buttonIcon = new MaskedFrame({
-            target: `avatar-01.png`,
-            mask: `avatar_mask.png`,
-            borderWidth: 10,
-            borderColor: 0xFFFFFF
-        });
-
-        buttonIcon.scale.set(0.2);
-
-        button.iconView = buttonIcon;
-        button.iconOffset = { x: -100, y: -7 };
-
         button.anchor.set(anchorX, anchorY);
 
         if (disabled)
diff --git a/src/utils/helpers/fit.ts b/src/utils/helpers/fit.ts
index 578a0386..d83c6bba 100644
--- a/src/utils/helpers/fit.ts
+++ b/src/utils/helpers/fit.ts
@@ -1,6 +1,6 @@
 import { Container } from '@pixi/display';
 
-export function fitToView(parent: Container, child: Container, padding = 0)
+export function fitToView(parent: Container, child: Container, padding = 0, uniformScaling = true)
 {
     let scaleX = child.scale.x;
     let scaleY = child.scale.y;
@@ -18,18 +18,38 @@ export function fitToView(parent: Container, child: Container, padding = 0)
 
     if (widthOverflow < 0)
     {
-        scaleX = maxWidth / (child.width * scaleX);
+        scaleX = maxWidth / (child.width / scaleX);
     }
 
     if (heightOverflow < 0)
     {
-        scaleY = maxHeight / (child.height * scaleY);
+        scaleY = maxHeight / (child.height / scaleY);
     }
 
     if (scaleX <= 0 || scaleY <= 0)
     {
-        child.visible = false;
+        child.scale.set(0);
+
+        return;
     }
 
-    child.scale.set(Math.min(scaleX, scaleY));
+    if (uniformScaling || child.scale.x === child.scale.y)
+    {
+        const scale = Math.min(scaleX, scaleY);
+
+        child.scale.set(scale, scale);
+    }
+    else
+    {
+        const ratio = child.scale.x / child.scale.y;
+
+        if (widthOverflow < heightOverflow)
+        {
+            child.scale.set(scaleX, scaleX / ratio);
+        }
+        else
+        {
+            child.scale.set(scaleY * ratio, scaleY);
+        }
+    }
 }

From 70298dba3a9915d5c51e0622f76f23adf267ebed Mon Sep 17 00:00:00 2001
From: Baz Utsahajit <baz.utsahajit@play.co>
Date: Fri, 22 Mar 2024 20:04:03 +0000
Subject: [PATCH 3/6] Hotfix

---
 src/FancyButton.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/FancyButton.ts b/src/FancyButton.ts
index 3c82e61e..7652c0bb 100644
--- a/src/FancyButton.ts
+++ b/src/FancyButton.ts
@@ -841,6 +841,7 @@ export class FancyButton extends ButtonContainer
      */
     set textBaseScale(scale: Pos | number)
     {
+        if (!this.options) return;
         // Apply to the options so that the manual scale is prioritized.
         this.options.textScale = scale;
         if (scale === undefined) return;
@@ -863,6 +864,7 @@ export class FancyButton extends ButtonContainer
      */
     set iconBaseScale(scale: Pos | number)
     {
+        if (!this.options) return;
         // Apply to the options so that the manual scale is prioritized.
         this.options.iconScale = scale;
         if (scale === undefined) return;

From 5137057b33b7a79fa2f71a944d883b9b4f1fe718 Mon Sep 17 00:00:00 2001
From: Zyie <24736175+Zyie@users.noreply.github.com>
Date: Thu, 4 Apr 2024 10:11:52 +0100
Subject: [PATCH 4/6] update

---
 src/FancyButton.ts                                 | 12 +++++-------
 .../FancyButtonDynamicUpdate.stories.ts            | 14 +++++++-------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/FancyButton.ts b/src/FancyButton.ts
index 7652c0bb..e8bd1f78 100644
--- a/src/FancyButton.ts
+++ b/src/FancyButton.ts
@@ -170,7 +170,7 @@ export class FancyButton extends ButtonContainer
     {
         super();
 
-        this.options = options;
+        this.options = options ?? {};
 
         const {
             defaultView,
@@ -395,7 +395,7 @@ export class FancyButton extends ButtonContainer
 
         if (activeView)
         {
-            if (this.options && !this.options.ignoreRefitting)
+            if (!this.options?.ignoreRefitting)
             {
                 this._views.textView.scale.set(this._textBaseScale.x, this._textBaseScale.y);
             }
@@ -429,7 +429,7 @@ export class FancyButton extends ButtonContainer
             return;
         }
 
-        if (this.options && !this.options.ignoreRefitting)
+        if (!this.options?.ignoreRefitting)
         {
             this._views.iconView.scale.set(this._iconBaseScale.x, this._iconBaseScale.y);
         }
@@ -841,10 +841,9 @@ export class FancyButton extends ButtonContainer
      */
     set textBaseScale(scale: Pos | number)
     {
-        if (!this.options) return;
+        if (scale === undefined) return;
         // Apply to the options so that the manual scale is prioritized.
         this.options.textScale = scale;
-        if (scale === undefined) return;
         const isNumber = typeof scale === 'number';
 
         this._textBaseScale.x = isNumber ? scale : scale.x ?? 1;
@@ -864,10 +863,9 @@ export class FancyButton extends ButtonContainer
      */
     set iconBaseScale(scale: Pos | number)
     {
-        if (!this.options) return;
+        if (scale === undefined) return;
         // Apply to the options so that the manual scale is prioritized.
         this.options.iconScale = scale;
-        if (scale === undefined) return;
         const isNumber = typeof scale === 'number';
 
         this._iconBaseScale.x = isNumber ? scale : scale.x ?? 1;
diff --git a/src/stories/fancyButton/FancyButtonDynamicUpdate.stories.ts b/src/stories/fancyButton/FancyButtonDynamicUpdate.stories.ts
index 490cacd5..6eb6b2fe 100644
--- a/src/stories/fancyButton/FancyButtonDynamicUpdate.stories.ts
+++ b/src/stories/fancyButton/FancyButtonDynamicUpdate.stories.ts
@@ -1,13 +1,13 @@
+import { Container } from '@pixi/display';
+import { Sprite } from '@pixi/sprite';
+import { Text } from '@pixi/text';
 import { FancyButton } from '../../FancyButton';
-import { action } from '@storybook/addon-actions';
-import { argTypes, getDefaultArgs } from '../utils/argTypes';
-import { preload } from '../utils/loader';
 import { centerView } from '../../utils/helpers/resize';
-import { Container } from '@pixi/display';
 import { defaultTextStyle } from '../../utils/helpers/styles';
-import { Text } from '@pixi/text';
+import { argTypes, getDefaultArgs } from '../utils/argTypes';
+import { preload } from '../utils/loader';
 import { randomItem } from '../utils/random';
-import { Sprite } from '@pixi/sprite';
+import { action } from '@storybook/addon-actions';
 
 const args = {
     text: 'Click me!',
@@ -45,7 +45,7 @@ export const DynamicUpdate = ({
         let icon = avatars[0];
 
         button.iconView = Sprite.from(icon);
-        button.iconView.scale.set(0.2);
+        button.iconBaseScale = 0.2;
         button.iconOffset = { x: -100, y: -7 };
 
         button.textView = new Text(text, {

From c84a6e2522223d54e757d1247db06f4313ad466e Mon Sep 17 00:00:00 2001
From: Zyie <24736175+Zyie@users.noreply.github.com>
Date: Thu, 4 Apr 2024 10:16:59 +0100
Subject: [PATCH 5/6] update names

---
 src/FancyButton.ts                            | 54 ++++++++++---------
 .../FancyButtonDynamicUpdate.stories.ts       |  2 +-
 ...FancyButtonNineSlicePlaneSprite.stories.ts |  2 +-
 3 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/src/FancyButton.ts b/src/FancyButton.ts
index e8bd1f78..809a16c9 100644
--- a/src/FancyButton.ts
+++ b/src/FancyButton.ts
@@ -62,8 +62,8 @@ export type ButtonOptions = ViewsInput & {
     offset?: Offset;
     textOffset?: Offset;
     iconOffset?: Offset;
-    textScale?: Pos | number;
-    iconScale?: Pos | number;
+    defaultTextScale?: Pos | number;
+    defaultIconScale?: Pos | number;
     animations?: StateAnimations;
     nineSlicePlane?: [number, number, number, number];
     ignoreRefitting?: boolean;
@@ -140,10 +140,10 @@ export class FancyButton extends ButtonContainer
     anchor: ObservablePoint;
 
     /** Base text scaling to take into account when fitting inside the button */
-    protected _textBaseScale: Pos = { x: 1, y: 1 };
+    protected _defaultTextScale: Pos = { x: 1, y: 1 };
 
     /** Base icon scaling to take into account when fitting inside the button */
-    protected _iconBaseScale: Pos = { x: 1, y: 1 };
+    protected _defaultIconScale: Pos = { x: 1, y: 1 };
 
     /**
      * Creates a button with a lot of tweaks.
@@ -161,6 +161,8 @@ export class FancyButton extends ButtonContainer
      * @param {Point} options.iconOffset - Offset of the icon view.
      * @param {number} options.scale - Scale of the button. Scale will be applied to a main container,
      * when all animations scales will be applied to the inner view.
+     * @param {number} options.defaultTextScale - Base text scaling to take into account when fitting inside the button.
+     * @param {number} options.defaultIconScale - Base icon scaling to take into account when fitting inside the button.
      * @param {number} options.anchor - Anchor point of the button.
      * @param {number} options.anchorX - Horizontal anchor point of the button.
      * @param {number} options.anchorY - Vertical anchor point of the button.
@@ -182,8 +184,8 @@ export class FancyButton extends ButtonContainer
             offset,
             textOffset,
             iconOffset,
-            textScale,
-            iconScale,
+            defaultTextScale: textScale,
+            defaultIconScale: iconScale,
             scale,
             anchor,
             anchorX,
@@ -201,8 +203,8 @@ export class FancyButton extends ButtonContainer
         this.offset = offset;
         this.textOffset = textOffset;
         this.iconOffset = iconOffset;
-        this.textBaseScale = textScale;
-        this.iconBaseScale = iconScale;
+        this.defaultTextScale = textScale;
+        this.defaultIconScale = iconScale;
         this.scale.set(scale ?? 1);
 
         if (animations)
@@ -313,11 +315,11 @@ export class FancyButton extends ButtonContainer
         this._views.textView = getTextView(text);
 
         // If text scale has not manually been set, we will overwrite the base scale with the new text view scale.
-        if (this.options?.textScale === undefined)
+        if (this.options?.defaultTextScale === undefined)
         {
             const { x, y } = this._views.textView.scale;
 
-            this._textBaseScale = { x, y };
+            this._defaultTextScale = { x, y };
         }
 
         this._views.textView.anchor.set(0);
@@ -397,7 +399,7 @@ export class FancyButton extends ButtonContainer
         {
             if (!this.options?.ignoreRefitting)
             {
-                this._views.textView.scale.set(this._textBaseScale.x, this._textBaseScale.y);
+                this._views.textView.scale.set(this._defaultTextScale.x, this._defaultTextScale.y);
             }
 
             fitToView(activeView, this._views.textView, this.padding, false);
@@ -431,7 +433,7 @@ export class FancyButton extends ButtonContainer
 
         if (!this.options?.ignoreRefitting)
         {
-            this._views.iconView.scale.set(this._iconBaseScale.x, this._iconBaseScale.y);
+            this._views.iconView.scale.set(this._defaultIconScale.x, this._defaultIconScale.y);
         }
 
         fitToView(activeView, this._views.iconView, this.padding, false);
@@ -660,11 +662,11 @@ export class FancyButton extends ButtonContainer
         this._views.iconView = getView(view);
 
         // If icon scale has not manually been set, we will overwrite the base scale with the new icon view scale.
-        if (this.options?.iconScale === undefined)
+        if (this.options?.defaultIconScale === undefined)
         {
             const { x, y } = this._views.iconView.scale;
 
-            this._iconBaseScale = { x, y };
+            this._defaultIconScale = { x, y };
         }
 
         if (!this._views.iconView.parent)
@@ -839,44 +841,44 @@ export class FancyButton extends ButtonContainer
      * Sets the base scale for the text view to take into account when fitting inside the button.
      * @param {Pos | number} scale - base scale of the text view.
      */
-    set textBaseScale(scale: Pos | number)
+    set defaultTextScale(scale: Pos | number)
     {
         if (scale === undefined) return;
         // Apply to the options so that the manual scale is prioritized.
-        this.options.textScale = scale;
+        this.options.defaultTextScale = scale;
         const isNumber = typeof scale === 'number';
 
-        this._textBaseScale.x = isNumber ? scale : scale.x ?? 1;
-        this._textBaseScale.y = isNumber ? scale : scale.y ?? 1;
+        this._defaultTextScale.x = isNumber ? scale : scale.x ?? 1;
+        this._defaultTextScale.y = isNumber ? scale : scale.y ?? 1;
         this.adjustTextView(this.state);
     }
 
     /** Returns the text view base scale. */
-    get textBaseScale(): Pos
+    get defaultTextScale(): Pos
     {
-        return this.textBaseScale;
+        return this.defaultTextScale;
     }
 
     /**
      * Sets the base scale for the icon view to take into account when fitting inside the button.
      * @param {Pos | number} scale - base scale of the icon view.
      */
-    set iconBaseScale(scale: Pos | number)
+    set defaultIconScale(scale: Pos | number)
     {
         if (scale === undefined) return;
         // Apply to the options so that the manual scale is prioritized.
-        this.options.iconScale = scale;
+        this.options.defaultIconScale = scale;
         const isNumber = typeof scale === 'number';
 
-        this._iconBaseScale.x = isNumber ? scale : scale.x ?? 1;
-        this._iconBaseScale.y = isNumber ? scale : scale.y ?? 1;
+        this._defaultIconScale.x = isNumber ? scale : scale.x ?? 1;
+        this._defaultIconScale.y = isNumber ? scale : scale.y ?? 1;
         this.adjustIconView(this.state);
     }
 
     /** Returns the icon view base scale. */
-    get iconBaseScale(): Pos
+    get defaultIconScale(): Pos
     {
-        return this.iconBaseScale;
+        return this.defaultIconScale;
     }
 
     /**
diff --git a/src/stories/fancyButton/FancyButtonDynamicUpdate.stories.ts b/src/stories/fancyButton/FancyButtonDynamicUpdate.stories.ts
index 6eb6b2fe..4af52e44 100644
--- a/src/stories/fancyButton/FancyButtonDynamicUpdate.stories.ts
+++ b/src/stories/fancyButton/FancyButtonDynamicUpdate.stories.ts
@@ -45,7 +45,7 @@ export const DynamicUpdate = ({
         let icon = avatars[0];
 
         button.iconView = Sprite.from(icon);
-        button.iconBaseScale = 0.2;
+        button.defaultIconScale = 0.2;
         button.iconOffset = { x: -100, y: -7 };
 
         button.textView = new Text(text, {
diff --git a/src/stories/fancyButton/FancyButtonNineSlicePlaneSprite.stories.ts b/src/stories/fancyButton/FancyButtonNineSlicePlaneSprite.stories.ts
index 48f8658a..4429f52c 100644
--- a/src/stories/fancyButton/FancyButtonNineSlicePlaneSprite.stories.ts
+++ b/src/stories/fancyButton/FancyButtonNineSlicePlaneSprite.stories.ts
@@ -69,7 +69,7 @@ export const UseNineSlicePlane = ({
             padding,
             textOffset: { x: 30, y: -5 },
             iconOffset: { x: -100, y: -7 },
-            iconScale: 0.2,
+            defaultIconScale: 0.2,
             animations: {
                 hover: {
                     props: {

From de62d5a9c03c4025ebfdbe1123cefc7ddd85255d Mon Sep 17 00:00:00 2001
From: Baz Utsahajit <baz.utsahajit@play.co>
Date: Fri, 5 Apr 2024 12:39:13 +0100
Subject: [PATCH 6/6] Expose default scale options on examples

---
 src/stories/fancyButton/FancyButtonBitmapText.stories.ts | 3 +++
 .../fancyButton/FancyButtonDynamicUpdate.stories.ts      | 7 ++++++-
 src/stories/fancyButton/FancyButtonGraphics.stories.ts   | 6 ++++++
 src/stories/fancyButton/FancyButtonHTMLText.stories.ts   | 3 +++
 src/stories/fancyButton/FancyButtonIcon.stories.ts       | 3 +++
 .../FancyButtonNineSlicePlaneSprite.stories.ts           | 9 +++++++--
 src/stories/fancyButton/FancyButtonSprite.stories.ts     | 3 +++
 7 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/stories/fancyButton/FancyButtonBitmapText.stories.ts b/src/stories/fancyButton/FancyButtonBitmapText.stories.ts
index ce050ca3..32ebfcbb 100644
--- a/src/stories/fancyButton/FancyButtonBitmapText.stories.ts
+++ b/src/stories/fancyButton/FancyButtonBitmapText.stories.ts
@@ -13,6 +13,7 @@ const args = {
     padding: 11,
     textOffsetX: 0,
     textOffsetY: -7,
+    defaultTextScale: 0.99,
     anchorX: 0.5,
     anchorY: 0.5,
     animationDuration: 100,
@@ -28,6 +29,7 @@ export const UsingSpriteAndBitmapText = ({
     padding,
     textOffsetX,
     textOffsetY,
+    defaultTextScale,
     anchorX,
     anchorY,
     animationDuration
@@ -55,6 +57,7 @@ export const UsingSpriteAndBitmapText = ({
             text: title,
             padding,
             textOffset: { x: textOffsetX, y: textOffsetY },
+            defaultTextScale,
             animations: {
                 hover: {
                     props: {
diff --git a/src/stories/fancyButton/FancyButtonDynamicUpdate.stories.ts b/src/stories/fancyButton/FancyButtonDynamicUpdate.stories.ts
index 4af52e44..eac8ccd1 100644
--- a/src/stories/fancyButton/FancyButtonDynamicUpdate.stories.ts
+++ b/src/stories/fancyButton/FancyButtonDynamicUpdate.stories.ts
@@ -12,6 +12,8 @@ import { action } from '@storybook/addon-actions';
 const args = {
     text: 'Click me!',
     textColor: '#FFFFFF',
+    defaultTextScale: 0.99,
+    defaultIconScale: 0.2,
     padding: 11,
     anchorX: 0.5,
     anchorY: 0.5,
@@ -22,6 +24,8 @@ const args = {
 export const DynamicUpdate = ({
     text,
     textColor,
+    defaultTextScale,
+    defaultIconScale,
     disabled,
     onPress,
     padding,
@@ -45,13 +49,14 @@ export const DynamicUpdate = ({
         let icon = avatars[0];
 
         button.iconView = Sprite.from(icon);
-        button.defaultIconScale = 0.2;
+        button.defaultIconScale = defaultIconScale;
         button.iconOffset = { x: -100, y: -7 };
 
         button.textView = new Text(text, {
             ...defaultTextStyle,
             fill: textColor || defaultTextStyle.fill
         });
+        button.defaultTextScale = defaultTextScale;
         button.textOffset = { x: 30, y: -7 };
 
         button.padding = padding;
diff --git a/src/stories/fancyButton/FancyButtonGraphics.stories.ts b/src/stories/fancyButton/FancyButtonGraphics.stories.ts
index 9e9ff021..dc5ef2b4 100644
--- a/src/stories/fancyButton/FancyButtonGraphics.stories.ts
+++ b/src/stories/fancyButton/FancyButtonGraphics.stories.ts
@@ -26,6 +26,8 @@ const args = {
     iconOffsetY: -30,
     textOffsetX: 0,
     textOffsetY: 140,
+    defaultTextScale: 0.99,
+    defaultIconScale: 0.99,
     defaultOffsetY: 0,
     hoverOffsetY: -1,
     pressedOffsetY: 5,
@@ -55,6 +57,8 @@ export const UseGraphics = ({
     iconOffsetY,
     textOffsetX,
     textOffsetY,
+    defaultTextScale,
+    defaultIconScale,
     defaultOffsetY,
     hoverOffsetY,
     pressedOffsetY,
@@ -111,6 +115,8 @@ export const UseGraphics = ({
                 x: iconOffsetX,
                 y: iconOffsetY
             },
+            defaultTextScale,
+            defaultIconScale,
             animations: {
                 default: {
                     props: {
diff --git a/src/stories/fancyButton/FancyButtonHTMLText.stories.ts b/src/stories/fancyButton/FancyButtonHTMLText.stories.ts
index 7eda9101..4dee2754 100644
--- a/src/stories/fancyButton/FancyButtonHTMLText.stories.ts
+++ b/src/stories/fancyButton/FancyButtonHTMLText.stories.ts
@@ -13,6 +13,7 @@ const args = {
     padding: 11,
     textOffsetX: 0,
     textOffsetY: -7,
+    defaultTextScale: 0.99,
     anchorX: 0.5,
     anchorY: 0.5,
     animationDuration: 100,
@@ -28,6 +29,7 @@ export const UsingSpriteAndHTMLText = ({
     padding,
     textOffsetX,
     textOffsetY,
+    defaultTextScale,
     anchorX,
     anchorY,
     animationDuration
@@ -53,6 +55,7 @@ export const UsingSpriteAndHTMLText = ({
             text: title,
             padding,
             textOffset: { x: textOffsetX, y: textOffsetY },
+            defaultTextScale,
             animations: {
                 hover: {
                     props: {
diff --git a/src/stories/fancyButton/FancyButtonIcon.stories.ts b/src/stories/fancyButton/FancyButtonIcon.stories.ts
index 6fd95c22..e1947fc8 100644
--- a/src/stories/fancyButton/FancyButtonIcon.stories.ts
+++ b/src/stories/fancyButton/FancyButtonIcon.stories.ts
@@ -20,6 +20,7 @@ const args = {
     radius: 200,
     iconOffsetX: 0,
     iconOffsetY: 0,
+    defaultIconScale: 0.99,
     defaultOffset: 0,
     hoverOffset: -1,
     pressedOffset: 5,
@@ -43,6 +44,7 @@ export const UseIcon = ({
     padding,
     iconOffsetX,
     iconOffsetY,
+    defaultIconScale,
     defaultOffset,
     hoverOffset,
     pressedOffset,
@@ -80,6 +82,7 @@ export const UseIcon = ({
             pressedView: new Graphics().beginFill(pressedColor).drawRoundedRect(0, 0, width, height, radius),
             disabledView: new Graphics().beginFill(disabledColor).drawRoundedRect(0, 0, width, height, radius),
             icon,
+            defaultIconScale,
             padding,
             offset: {
                 default: { y: defaultOffset },
diff --git a/src/stories/fancyButton/FancyButtonNineSlicePlaneSprite.stories.ts b/src/stories/fancyButton/FancyButtonNineSlicePlaneSprite.stories.ts
index 4429f52c..9b898f2a 100644
--- a/src/stories/fancyButton/FancyButtonNineSlicePlaneSprite.stories.ts
+++ b/src/stories/fancyButton/FancyButtonNineSlicePlaneSprite.stories.ts
@@ -14,6 +14,8 @@ const args = {
     padding: 11,
     width: 300,
     height: 137,
+    defaultTextScale: 0.99,
+    defaultIconScale: 0.2,
     anchorX: 0.5,
     anchorY: 0.5,
     animationDuration: 100,
@@ -31,7 +33,9 @@ export const UseNineSlicePlane = ({
     anchorY,
     animationDuration,
     width,
-    height
+    height,
+    defaultTextScale,
+    defaultIconScale,
 }: any) =>
 {
     const view = new Container();
@@ -69,7 +73,8 @@ export const UseNineSlicePlane = ({
             padding,
             textOffset: { x: 30, y: -5 },
             iconOffset: { x: -100, y: -7 },
-            defaultIconScale: 0.2,
+            defaultTextScale,
+            defaultIconScale,
             animations: {
                 hover: {
                     props: {
diff --git a/src/stories/fancyButton/FancyButtonSprite.stories.ts b/src/stories/fancyButton/FancyButtonSprite.stories.ts
index bdd61f24..3786525a 100644
--- a/src/stories/fancyButton/FancyButtonSprite.stories.ts
+++ b/src/stories/fancyButton/FancyButtonSprite.stories.ts
@@ -13,6 +13,7 @@ const args = {
     padding: 11,
     textOffsetX: 0,
     textOffsetY: -7,
+    defaultTextScale: 0.99,
     anchorX: 0.5,
     anchorY: 0.5,
     animationDuration: 100,
@@ -28,6 +29,7 @@ export const UseSprite = ({
     padding,
     textOffsetX,
     textOffsetY,
+    defaultTextScale,
     anchorX,
     anchorY,
     animationDuration
@@ -51,6 +53,7 @@ export const UseSprite = ({
             }),
             padding,
             textOffset: { x: textOffsetX, y: textOffsetY },
+            defaultTextScale,
             animations: {
                 hover: {
                     props: {