@momentum-design/components 0.122.13 → 0.122.14

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

@@ -1,6 +1,7 @@
 import { CSSResult } from 'lit';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
 import type { VariantType } from './alertchip.types';
+declare const AlertChip_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Buttonsimple;
 /**
  * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.
  *
@@ -27,7 +28,7 @@ import type { VariantType } from './alertchip.types';
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.
  * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.
  */
-declare class AlertChip extends Buttonsimple {
+declare class AlertChip extends AlertChip_base {
     /**
      * The variant of the alertchip. It supports 5 variants
      * - neutral

package/dist/components/alertchip/alertchip.component.js

@@ -11,6 +11,7 @@ import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { Component } from '../../models';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
+import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
 import styles from './alertchip.styles';
 import { DEFAULTS } from './alertchip.constants';
 import { getAlertIcon } from './alertchip.utils';
@@ -40,7 +41,7 @@ import { getAlertIcon } from './alertchip.utils';
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.
  * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.
  */
-class AlertChip extends Buttonsimple {
+class AlertChip extends IconNameMixin(Buttonsimple) {
     constructor() {
         super(...arguments);
         /**
@@ -72,7 +73,7 @@ class AlertChip extends Buttonsimple {
     }
     render() {
         return html `
-      <mdc-icon part="icon" name="${getAlertIcon(this.variant)}" length-unit="rem" size="1"></mdc-icon>
+      <mdc-icon part="icon" name="${this.iconName || getAlertIcon(this.variant)}" length-unit="rem" size="1"></mdc-icon>
       ${this.label
             ? html `<mdc-text part="label" type="${DEFAULTS.TEXT_TYPE}" tagname="${DEFAULTS.TAG_NAME}"
             >${this.label}</mdc-text

package/dist/components/alertchip/alertchip.styles.js

@@ -21,10 +21,14 @@ const styles = css `
 
   :host::part(label) {
     color: var(--mdc-chip-color);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
   }
 
   :host::part(icon) {
     color: var(--mdc-chip-icon-color);
+    flex-shrink: 0;
   }
 
   :host([variant='neutral']:hover) {

package/dist/components/chip/chip.component.js

@@ -83,7 +83,7 @@ class Chip extends IconNameMixin(Buttonsimple) {
     renderIcon() {
         if (!this.iconName)
             return nothing;
-        return html ` <mdc-icon name="${this.iconName}" length-unit="rem" size="1"></mdc-icon> `;
+        return html ` <mdc-icon part="icon" name="${this.iconName}" length-unit="rem" size="1"></mdc-icon> `;
     }
     render() {
         return html `

package/dist/components/staticchip/staticchip.component.js

@@ -65,7 +65,7 @@ class StaticChip extends IconNameMixin(Component) {
     renderIcon() {
         if (!this.iconName)
             return nothing;
-        return html ` <mdc-icon name="${this.iconName}" length-unit="rem" size="1"></mdc-icon> `;
+        return html ` <mdc-icon part="icon" name="${this.iconName}" length-unit="rem" size="1"></mdc-icon> `;
     }
     render() {
         return html `

package/dist/components/staticchip/staticchip.styles.js

@@ -18,6 +18,16 @@ const styles = css `
     background-color: var(--mdc-chip-background-color);
   }
 
+  :host::part(icon) {
+    flex-shrink: 0;
+  }
+
+  :host::part(label) {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
   :host([color='cobalt']) {
     --mdc-chip-border-color: var(--mds-color-theme-outline-theme-normal);
     --mdc-chip-background-color: var(--mds-color-theme-background-label-cobalt-normal);