@momentum-design/components 0.120.7 → 0.120.9

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

@@ -38,11 +38,6 @@ declare const Badge_base: import("../../utils/mixins/index.types").Constructor<i
  *
  * @csspart badge-dot - The dot notification badge.
  * @csspart badge-icon - The icon badge.
- * @csspart badge-icon__error - The error icon badge.
- * @csspart badge-icon__primary - The primary icon badge.
- * @csspart badge-icon__secondary - The secondary icon badge.
- * @csspart badge-icon__success - The success icon badge.
- * @csspart badge-icon__warning - The warning icon badge.
  * @csspart badge-overlay - The overlay badge.
  * @csspart badge-text - The text badge.
  */
@@ -93,7 +88,6 @@ declare class Badge extends Badge_base {
     /**
      * Method to generate the badge icon.
      * @param iconName - the name of the icon from the icon set
-     * @param backgroundPartPostfix - postfix for the part to style the badge icon.
      * @returns the template result of the icon.
      */
     private getBadgeIcon;

package/dist/components/badge/badge.component.js

@@ -14,7 +14,7 @@ import { Component } from '../../models';
 import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
 import { ROLE } from '../../utils/roles';
 import { TYPE as FONT_TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
-import { DEFAULTS, ICON_NAMES_LIST, ICON_STATE, ICON_VARIANT, TYPE as BADGE_TYPE } from './badge.constants';
+import { DEFAULTS, ICON_NAMES_LIST, ICON_VARIANT, TYPE as BADGE_TYPE } from './badge.constants';
 import styles from './badge.styles';
 /**
  * The `mdc-badge` component is a versatile UI element used to
@@ -52,11 +52,6 @@ import styles from './badge.styles';
  *
  * @csspart badge-dot - The dot notification badge.
  * @csspart badge-icon - The icon badge.
- * @csspart badge-icon__error - The error icon badge.
- * @csspart badge-icon__primary - The primary icon badge.
- * @csspart badge-icon__secondary - The secondary icon badge.
- * @csspart badge-icon__success - The success icon badge.
- * @csspart badge-icon__warning - The warning icon badge.
  * @csspart badge-overlay - The overlay badge.
  * @csspart badge-text - The text badge.
  */
@@ -113,13 +108,12 @@ class Badge extends IconNameMixin(Component) {
     /**
      * Method to generate the badge icon.
      * @param iconName - the name of the icon from the icon set
-     * @param backgroundPartPostfix - postfix for the part to style the badge icon.
      * @returns the template result of the icon.
      */
-    getBadgeIcon(iconName, backgroundPartPostfix) {
+    getBadgeIcon(iconName) {
         return html `
       <mdc-icon
-        part="badge-icon ${this.overlay ? 'badge-overlay' : ''} badge-icon__${backgroundPartPostfix}"
+        part="badge-icon ${this.overlay ? 'badge-overlay' : ''}"
         name="${ifDefined(iconName)}"
         size="${DEFAULTS.ICON_SIZE}"
       ></mdc-icon>
@@ -171,18 +165,18 @@ class Badge extends IconNameMixin(Component) {
         if (this.variant && !Object.values(ICON_VARIANT).includes(this.variant)) {
             this.variant = DEFAULTS.VARIANT;
         }
-        const { iconName, type, variant } = this;
+        const { iconName, type } = this;
         switch (type) {
             case BADGE_TYPE.ICON:
-                return this.getBadgeIcon(iconName || '', variant);
+                return this.getBadgeIcon(iconName || '');
             case BADGE_TYPE.COUNTER:
                 return this.getBadgeCounterText();
             case BADGE_TYPE.SUCCESS:
-                return this.getBadgeIcon(ICON_NAMES_LIST.SUCCESS_ICON_NAME, ICON_STATE.SUCCESS);
+                return this.getBadgeIcon(ICON_NAMES_LIST.SUCCESS_ICON_NAME);
             case BADGE_TYPE.WARNING:
-                return this.getBadgeIcon(ICON_NAMES_LIST.WARNING_ICON_NAME, ICON_STATE.WARNING);
+                return this.getBadgeIcon(ICON_NAMES_LIST.WARNING_ICON_NAME);
             case BADGE_TYPE.ERROR:
-                return this.getBadgeIcon(ICON_NAMES_LIST.ERROR_ICON_NAME, ICON_STATE.ERROR);
+                return this.getBadgeIcon(ICON_NAMES_LIST.ERROR_ICON_NAME);
             case BADGE_TYPE.DOT:
             default:
                 this.type = BADGE_TYPE.DOT;

package/dist/components/badge/badge.constants.d.ts

@@ -1,3 +1,4 @@
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-badge";
 declare const TYPE: {
     readonly DOT: "dot";
@@ -8,26 +9,14 @@ declare const TYPE: {
     readonly ERROR: "error";
 };
 declare const ICON_NAMES_LIST: {
-    readonly SUCCESS_ICON_NAME: "check-circle-badge-filled";
-    readonly WARNING_ICON_NAME: "warning-badge-filled";
-    readonly ERROR_ICON_NAME: "error-legacy-badge-filled";
+    readonly SUCCESS_ICON_NAME: Extract<IconNames, "check-circle-badge-filled">;
+    readonly WARNING_ICON_NAME: Extract<IconNames, "warning-badge-filled">;
+    readonly ERROR_ICON_NAME: Extract<IconNames, "error-legacy-badge-filled">;
 };
 declare const ICON_VARIANT: {
     readonly PRIMARY: "primary";
     readonly SECONDARY: "secondary";
 };
-declare const ICON_STATE: {
-    readonly SUCCESS: "success";
-    readonly WARNING: "warning";
-    readonly ERROR: "error";
-};
-declare const BACKGROUND_STYLES: {
-    readonly SUCCESS: "success";
-    readonly WARNING: "warning";
-    readonly ERROR: "error";
-    readonly PRIMARY: "primary";
-    readonly SECONDARY: "secondary";
-};
 declare const DEFAULTS: {
     readonly TYPE: "dot";
     readonly MAX_COUNTER: 99;
@@ -35,4 +24,4 @@ declare const DEFAULTS: {
     readonly VARIANT: "primary";
     readonly ICON_SIZE: 1;
 };
-export { TAG_NAME, DEFAULTS, TYPE, ICON_STATE, ICON_VARIANT, ICON_NAMES_LIST, BACKGROUND_STYLES };
+export { TAG_NAME, DEFAULTS, TYPE, ICON_VARIANT, ICON_NAMES_LIST };

package/dist/components/badge/badge.constants.js

@@ -17,15 +17,6 @@ const ICON_VARIANT = {
     PRIMARY: 'primary',
     SECONDARY: 'secondary',
 };
-const ICON_STATE = {
-    SUCCESS: 'success',
-    WARNING: 'warning',
-    ERROR: 'error',
-};
-const BACKGROUND_STYLES = {
-    ...ICON_VARIANT,
-    ...ICON_STATE,
-};
 const DEFAULTS = {
     TYPE: TYPE.DOT,
     MAX_COUNTER: 99,
@@ -33,4 +24,4 @@ const DEFAULTS = {
     VARIANT: ICON_VARIANT.PRIMARY,
     ICON_SIZE: 1,
 };
-export { TAG_NAME, DEFAULTS, TYPE, ICON_STATE, ICON_VARIANT, ICON_NAMES_LIST, BACKGROUND_STYLES };
+export { TAG_NAME, DEFAULTS, TYPE, ICON_VARIANT, ICON_NAMES_LIST };

package/dist/components/badge/badge.styles.js

@@ -44,26 +44,26 @@ const styles = [
       padding: 2px;
       border-radius: 50%;
     }
-    :host::part(badge-icon__primary) {
+    :host([type='icon'][variant='primary'])::part(badge-icon) {
       background-color: var(--mdc-badge-primary-background-color);
       color: var(--mdc-badge-primary-foreground-color);
     }
-    :host::part(badge-icon__success) {
+    :host([type='icon'][variant='secondary'])::part(badge-icon) {
+      background-color: var(--mdc-badge-secondary-background-color);
+      color: var(--mdc-badge-secondary-foreground-color);
+    }
+    :host([type='success'])::part(badge-icon) {
       background-color: var(--mdc-badge-success-background-color);
       color: var(--mdc-badge-success-foreground-color);
     }
-    :host::part(badge-icon__warning) {
+    :host([type='warning'])::part(badge-icon) {
       background-color: var(--mdc-badge-warning-background-color);
       color: var(--mdc-badge-warning-foreground-color);
     }
-    :host::part(badge-icon__error) {
+    :host([type='error'])::part(badge-icon) {
       background-color: var(--mdc-badge-error-background-color);
       color: var(--mdc-badge-error-foreground-color);
     }
-    :host::part(badge-icon__secondary) {
-      background-color: var(--mdc-badge-secondary-background-color);
-      color: var(--mdc-badge-secondary-foreground-color);
-    }
 
     /* High Contrast Mode */
     @media (forced-colors: active) {