@momentum-design/components 0.53.2 → 0.53.3

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

@@ -76,8 +76,6 @@ declare class Button extends Buttonsimple {
     role: string;
     /** @internal */
     private typeInternal;
-    /** @internal */
-    private iconSize;
     /**
      * @internal
      */

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

@@ -12,7 +12,7 @@ import { property, state } from 'lit/decorators.js';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
 import { BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_VARIANTS, DEFAULTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './button.constants';
 import styles from './button.styles';
-import { getIconNameWithoutStyle, getIconSize } from './button.utils';
+import { getIconNameWithoutStyle } from './button.utils';
 /**
  * `mdc-button` is a component that can be configured in various ways to suit different use cases.
  *
@@ -79,8 +79,6 @@ class Button extends Buttonsimple {
         this.role = 'button';
         /** @internal */
         this.typeInternal = DEFAULTS.TYPE_INTERNAL;
-        /** @internal */
-        this.iconSize = 1;
     }
     update(changedProperties) {
         super.update(changedProperties);
@@ -156,7 +154,6 @@ class Button extends Buttonsimple {
                 && !(size === ICON_BUTTON_SIZES[20] && this.variant !== BUTTON_VARIANTS.TERTIARY)
             : Object.values(PILL_BUTTON_SIZES).includes(size);
         this.setAttribute('size', isValidSize ? `${size}` : `${DEFAULTS.SIZE}`);
-        this.iconSize = getIconSize(size);
     }
     /**
      * Sets the color attribute for the button.
@@ -198,7 +195,6 @@ class Button extends Buttonsimple {
             ? html ` <mdc-icon
             name="${this.prefixIcon}"
             part="prefix-icon"
-            size=${this.iconSize}
             length-unit="rem"
           >
           </mdc-icon>`
@@ -208,7 +204,6 @@ class Button extends Buttonsimple {
             ? html ` <mdc-icon
             name="${this.postfixIcon}"
             part="postfix-icon"
-            size=${this.iconSize}
             length-unit="rem"
           >
           </mdc-icon>`
@@ -245,8 +240,4 @@ __decorate([
     state(),
     __metadata("design:type", String)
 ], Button.prototype, "typeInternal", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], Button.prototype, "iconSize", void 0);
 export default Button;

package/dist/components/button/button.styles.js

@@ -31,6 +31,33 @@ const styles = css `
     --mdc-button-line-height-size-32: var(--mds-font-lineheight-body-large);
     --mdc-button-line-height-size-28: var(--mds-font-lineheight-body-midsize);
     --mdc-button-line-height-size-24: var(--mds-font-lineheight-body-small);
+
+    --mdc-button-prefix-icon-size: 1rem;
+    --mdc-button-postfix-icon-size: 1rem;
+  }
+
+  :host([size="64"]) {
+    --mdc-button-prefix-icon-size: 2rem;
+    --mdc-button-postfix-icon-size: 2rem;
+  }
+
+  :host([size="52"]) {
+    --mdc-button-prefix-icon-size: 1.75rem;
+    --mdc-button-postfix-icon-size: 1.75rem;
+  }
+
+  :host([size="40"]) {
+    --mdc-button-prefix-icon-size: 1.25rem;
+    --mdc-button-postfix-icon-size: 1.25rem;
+  }
+
+  /* Apply icon size for prefix and postfix icons */
+  :host::part(prefix-icon) {
+    --mdc-icon-size: var(--mdc-button-prefix-icon-size);
+  }
+
+  :host::part(postfix-icon) {
+    --mdc-icon-size: var(--mdc-button-postfix-icon-size);
   }
 
   :host([active]){

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

@@ -1,11 +1,3 @@
-import { IconButtonSize } from './button.types';
-/**
- * Returns the icon size multiplier based on the provided button size.
- *
- * @param size - The size of the button.
- * @returns The multiplier for the icon size.
- */
-declare const getIconSize: (size: IconButtonSize) => number;
 /**
  * Returns the name of the icon without the style suffix.
  *
@@ -13,4 +5,4 @@ declare const getIconSize: (size: IconButtonSize) => number;
  * @returns The name of the icon without the suffix.
  */
 declare const getIconNameWithoutStyle: (iconName: string) => string;
-export { getIconSize, getIconNameWithoutStyle };
+export { getIconNameWithoutStyle };

package/dist/components/button/button.utils.js

@@ -1,18 +1,3 @@
-import { ICON_BUTTON_SIZES } from './button.constants';
-/**
- * Returns the icon size multiplier based on the provided button size.
- *
- * @param size - The size of the button.
- * @returns The multiplier for the icon size.
- */
-const getIconSize = (size) => {
-    switch (size) {
-        case ICON_BUTTON_SIZES[64]: return 2;
-        case ICON_BUTTON_SIZES[52]: return 1.75;
-        case ICON_BUTTON_SIZES[40]: return 1.25;
-        default: return 1;
-    }
-};
 /**
  * Returns the name of the icon without the style suffix.
  *
@@ -24,4 +9,4 @@ const getIconNameWithoutStyle = (iconName) => {
     const variants = ['bold', 'filled', 'regular', 'light'];
     return iconParts.filter((part) => !variants.includes(part)).join('-');
 };
-export { getIconSize, getIconNameWithoutStyle };
+export { getIconNameWithoutStyle };

package/package.json

@@ -39,5 +39,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.53.2"
+  "version": "0.53.3"
 }