@momentum-design/components 0.54.0 → 0.54.2

package/dist/components/button/button.component.d.ts

@@ -80,11 +80,11 @@ declare class Button extends Buttonsimple {
     /**
      * @internal
      */
-    private prevPrefixIcon?;
+    private prefixFilledIconName?;
     /**
      * @internal
      */
-    private prevPostfixIcon?;
+    private postfixFilledIconName?;
     update(changedProperties: PropertyValues): void;
     /**
      * Modifies the icon name based on the active state.
@@ -94,7 +94,7 @@ declare class Button extends Buttonsimple {
      *
      * @param active - The active state.
      */
-    private modifyIconName;
+    private inferFilledIconName;
     /**
      * Sets the variant attribute for the button component.
      * If the provided variant is not included in the BUTTON_VARIANTS,

package/dist/components/button/button.component.js

@@ -83,7 +83,7 @@ class Button extends Buttonsimple {
     update(changedProperties) {
         super.update(changedProperties);
         if (changedProperties.has('active')) {
-            this.modifyIconName(this.active);
+            this.inferFilledIconName(this.active);
         }
         if (changedProperties.has('size')) {
             this.setSize(this.size);
@@ -99,6 +99,7 @@ class Button extends Buttonsimple {
             this.setSize(this.size);
         }
         if (changedProperties.has('prefixIcon') || changedProperties.has('postfixIcon')) {
+            this.inferFilledIconName(this.active);
             this.inferButtonType();
         }
     }
@@ -110,24 +111,18 @@ class Button extends Buttonsimple {
      *
      * @param active - The active state.
      */
-    modifyIconName(active) {
+    inferFilledIconName(active) {
         if (active) {
             if (this.prefixIcon) {
-                this.prevPrefixIcon = this.prefixIcon;
-                this.prefixIcon = `${getIconNameWithoutStyle(this.prefixIcon)}-filled`;
+                this.prefixFilledIconName = `${getIconNameWithoutStyle(this.prefixIcon)}-filled`;
             }
             if (this.postfixIcon) {
-                this.prevPostfixIcon = this.postfixIcon;
-                this.postfixIcon = `${getIconNameWithoutStyle(this.postfixIcon)}-filled`;
+                this.postfixFilledIconName = `${getIconNameWithoutStyle(this.postfixIcon)}-filled`;
             }
         }
         else {
-            if (this.prevPrefixIcon) {
-                this.prefixIcon = this.prevPrefixIcon;
-            }
-            if (this.prevPostfixIcon) {
-                this.postfixIcon = this.prevPostfixIcon;
-            }
+            this.prefixFilledIconName = this.prefixIcon;
+            this.postfixFilledIconName = this.postfixIcon;
         }
     }
     /**
@@ -191,10 +186,12 @@ class Button extends Buttonsimple {
     }
     render() {
         return html `
-      ${this.prefixIcon ? html ` <mdc-icon name="${this.prefixIcon}" part="prefix-icon"></mdc-icon>` : ''}
+      ${this.prefixFilledIconName
+            ? html ` <mdc-icon name="${this.prefixFilledIconName}" part="prefix-icon"></mdc-icon>`
+            : ''}
       <slot @slotchange=${this.inferButtonType}></slot>
-      ${this.postfixIcon
-            ? html ` <mdc-icon name="${this.postfixIcon}" part="postfix-icon"></mdc-icon>`
+      ${this.postfixFilledIconName
+            ? html ` <mdc-icon name="${this.postfixFilledIconName}" part="postfix-icon"></mdc-icon>`
             : ''}
     `;
     }
@@ -228,4 +225,12 @@ __decorate([
     state(),
     __metadata("design:type", String)
 ], Button.prototype, "typeInternal", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], Button.prototype, "prefixFilledIconName", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], Button.prototype, "postfixFilledIconName", void 0);
 export default Button;

package/dist/components/buttonsimple/buttonsimple.component.js

@@ -75,8 +75,10 @@ class Buttonsimple extends TabIndexMixin(DisabledMixin(Component)) {
             this.setSoftDisabled(this, this.softDisabled);
         }
         if (changedProperties.has('active')) {
-            if (this.active) {
-                // if active is true and no ariaStateKey is provided, set it to the default (= aria-pressed)
+            if (this.active !== undefined) {
+                // if active is not undefined and no ariaStateKey is provided, set it to the default (= aria-pressed)
+                // this will make sure that if active is set to true or false regardless
+                // the ariaStateKey fallback will still work
                 this.ariaStateKey = this.ariaStateKey || DEFAULTS.ARIA_STATE_KEY;
             }
             this.setActive(this, this.active);