From 2f331df405dbf4d9e288d927cbc74531bda98a05 Mon Sep 17 00:00:00 2001
From: Matthew Oliveira <m4olivei@gmail.com>
Date: Fri, 6 Dec 2024 09:44:58 -0500
Subject: [PATCH 1/3] fix(button): fix disable state of the button

---
 .../src/components/button/button.ts           | 34 +++++++++++--------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/packages/web-components/src/components/button/button.ts b/packages/web-components/src/components/button/button.ts
index f0fc96070f7..ccab95996b5 100644
--- a/packages/web-components/src/components/button/button.ts
+++ b/packages/web-components/src/components/button/button.ts
@@ -34,8 +34,8 @@ class C4DButton extends CTAMixin(StableSelectorMixin(CDSButton)) {
   @query('a')
   _linkNode;
 
-  @property()
-  iconDiv;
+  @query(`slot[name='icon']`)
+  iconSlot?: HTMLElement;
 
   @property()
   span;
@@ -75,7 +75,7 @@ class C4DButton extends CTAMixin(StableSelectorMixin(CDSButton)) {
     const { ctaType } = this;
     const icon = icons[`${ctaType}-${document.dir}`] ?? icons[ctaType];
     return `
-        <span class="${prefix}--visually-hidden" part="visually-hidden-span">${
+        <span class="matt ${prefix}--visually-hidden" part="visually-hidden-span">${
       ariaLabels[ctaType]
     }</span>
         ${icon?.()?.strings?.join()}
@@ -135,17 +135,23 @@ class C4DButton extends CTAMixin(StableSelectorMixin(CDSButton)) {
 
   updated(changedProperties) {
     super.updated(changedProperties);
-
-    if (changedProperties.has('ctaType')) {
-      if (!this.iconDiv) {
-        this.iconDiv = this.shadowRoot?.querySelector("slot[name='icon']");
-      }
-
-      const { iconDiv } = this;
-
-      iconDiv.querySelector('svg')?.remove();
-      iconDiv.innerHTML = this._renderButtonIcon();
-      iconDiv
+    const updateIconForProperties = [
+      'ctaType',
+      'disabled',
+      'tooltipText',
+      'href',
+    ];
+
+    // Note that the parent may render a different <slot name="icon">
+    // based on changes to either disabled, tooltipText, or href, so we make
+    // sure to re-render the icon if any of those change, in addition to the
+    // ctaType.
+    if (updateIconForProperties.some((prop) => changedProperties.has(prop))) {
+      const { iconSlot } = this;
+
+      iconSlot.querySelector('svg')?.remove();
+      iconSlot.innerHTML = this._renderButtonIcon();
+      iconSlot
         ?.querySelector('svg')
         ?.classList.add(`${prefix}--card__cta`, `${c4dPrefix}-ce--cta__icon`);
     }

From 5ac56f7a9961cace077461a0e2dfb0a5f7be0b92 Mon Sep 17 00:00:00 2001
From: Matthew Oliveira <m4olivei@gmail.com>
Date: Fri, 6 Dec 2024 09:57:39 -0500
Subject: [PATCH 2/3] chore(button): remove my namesake

---
 packages/web-components/src/components/button/button.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-components/src/components/button/button.ts b/packages/web-components/src/components/button/button.ts
index ccab95996b5..7bbfa87a6f6 100644
--- a/packages/web-components/src/components/button/button.ts
+++ b/packages/web-components/src/components/button/button.ts
@@ -75,7 +75,7 @@ class C4DButton extends CTAMixin(StableSelectorMixin(CDSButton)) {
     const { ctaType } = this;
     const icon = icons[`${ctaType}-${document.dir}`] ?? icons[ctaType];
     return `
-        <span class="matt ${prefix}--visually-hidden" part="visually-hidden-span">${
+        <span class="${prefix}--visually-hidden" part="visually-hidden-span">${
       ariaLabels[ctaType]
     }</span>
         ${icon?.()?.strings?.join()}

From a554a11aad06aa0df300f4f26e8de596988c595f Mon Sep 17 00:00:00 2001
From: Matthew Oliveira <m4olivei@gmail.com>
Date: Fri, 6 Dec 2024 13:45:38 -0500
Subject: [PATCH 3/3] fix(button): make typescript happy

---
 .../web-components/src/components/button/button.ts     | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/web-components/src/components/button/button.ts b/packages/web-components/src/components/button/button.ts
index 7bbfa87a6f6..3ea0eb2a6c0 100644
--- a/packages/web-components/src/components/button/button.ts
+++ b/packages/web-components/src/components/button/button.ts
@@ -141,18 +141,20 @@ class C4DButton extends CTAMixin(StableSelectorMixin(CDSButton)) {
       'tooltipText',
       'href',
     ];
+    const { iconSlot } = this;
 
     // Note that the parent may render a different <slot name="icon">
     // based on changes to either disabled, tooltipText, or href, so we make
     // sure to re-render the icon if any of those change, in addition to the
     // ctaType.
-    if (updateIconForProperties.some((prop) => changedProperties.has(prop))) {
-      const { iconSlot } = this;
-
+    if (
+      iconSlot &&
+      updateIconForProperties.some((prop) => changedProperties.has(prop))
+    ) {
       iconSlot.querySelector('svg')?.remove();
       iconSlot.innerHTML = this._renderButtonIcon();
       iconSlot
-        ?.querySelector('svg')
+        .querySelector('svg')
         ?.classList.add(`${prefix}--card__cta`, `${c4dPrefix}-ce--cta__icon`);
     }
   }