Merge branch 'release/v2.16.0' into feat/video-player-muted

carbon-design-system · Dec 6, 2024 · a163e31 · a163e31
2 parents 39d702a + 3616719
commit a163e31
Show file tree

Hide file tree

Showing 3 changed files with 157 additions and 78 deletions.
diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss
@@ -555,14 +555,15 @@
   }
 
   :host(#{$c4d-prefix}-card)[color-scheme='inverse']:not([disabled]),
-  :host(#{$c4d-prefix}-card-group-item)[color-scheme='inverse']:not([disabled])
-    .#{$prefix}--card {
+  :host(#{$c4d-prefix}-card-group-item)[color-scheme='inverse']:not(
+      [disabled]
+    ) {
     .#{$prefix}--tile {
       border-color: $background-inverse;
       background-color: $background-inverse;
 
       &:hover {
-        #{$c4d-prefix}-image,
+        .#{$c4d-prefix}-image,
         ::slotted(#{$c4d-prefix}-image),
         ::slotted(#{$c4d-prefix}-card-cta-image) {
           filter: brightness(108%);

diff --git 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;
@@ -135,18 +135,26 @@ 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
-        ?.querySelector('svg')
+    const updateIconForProperties = [
+      'ctaType',
+      'disabled',
+      '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 (
+      iconSlot &&
+      updateIconForProperties.some((prop) => changedProperties.has(prop))
+    ) {
+      iconSlot.querySelector('svg')?.remove();
+      iconSlot.innerHTML = this._renderButtonIcon();
+      iconSlot
+        .querySelector('svg')
         ?.classList.add(`${prefix}--card__cta`, `${c4dPrefix}-ce--cta__icon`);
     }
   }