@momentum-design/components 0.102.0 → 0.102.2

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

@@ -32,6 +32,8 @@ declare const ListItem_base: import("../../utils/mixins/index.types").Constructo
  * @slot trailing-text-side-header - slot for list item side header text.
  * @slot trailing-text-subline - slot for list item subline text.
  * @slot trailing-controls - slot for list item controls to appear of trailing end.
+ * @slot content - content slot can be used to override the content completely. Be aware that
+ * this will override the default content of the list item.
  *
  * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.
  * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.
@@ -42,7 +44,11 @@ declare const ListItem_base: import("../../utils/mixins/index.types").Constructo
  *  - Allows customization of the secondary and tertiary label text slot color.
  * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.
  * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.
- * @cssproperty --mdc-listitem-padding-left-and-right - Allows customization of padding left and right.
+ * @cssproperty --mdc-listitem-padding-left-right - Allows customization of padding left and right.
+ * @cssproperty --mdc-listitem-padding-top-bottom - Allows customization of padding top and bottom.
+ * @cssproperty --mdc-listitem-cursor - Allows customization of the cursor.
+ * @cssproperty --mdc-listitem-width - Allows customization of the width of the list item.
+ * @cssproperty --mdc-listitem-height - Allows customization of the height of the list item.
  *
  * @event click - (React: onClick) This event is dispatched when the listitem is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.

package/dist/components/listitem/listitem.component.js

@@ -48,6 +48,8 @@ import { ListItemEventManager } from './listitem.events';
  * @slot trailing-text-side-header - slot for list item side header text.
  * @slot trailing-text-subline - slot for list item subline text.
  * @slot trailing-controls - slot for list item controls to appear of trailing end.
+ * @slot content - content slot can be used to override the content completely. Be aware that
+ * this will override the default content of the list item.
  *
  * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.
  * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.
@@ -58,7 +60,11 @@ import { ListItemEventManager } from './listitem.events';
  *  - Allows customization of the secondary and tertiary label text slot color.
  * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.
  * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.
- * @cssproperty --mdc-listitem-padding-left-and-right - Allows customization of padding left and right.
+ * @cssproperty --mdc-listitem-padding-left-right - Allows customization of padding left and right.
+ * @cssproperty --mdc-listitem-padding-top-bottom - Allows customization of padding top and bottom.
+ * @cssproperty --mdc-listitem-cursor - Allows customization of the cursor.
+ * @cssproperty --mdc-listitem-width - Allows customization of the width of the list item.
+ * @cssproperty --mdc-listitem-height - Allows customization of the height of the list item.
  *
  * @event click - (React: onClick) This event is dispatched when the listitem is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.
@@ -252,21 +258,23 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
     }
     render() {
         return html `
-      <div part="leading">
-        ${this.renderLeadingControls()}
-        <div part="leading-text">
-          ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
-          ${this.getText('leading-text-secondary-label', TYPE.BODY_SMALL_REGULAR, this.secondaryLabel)}
-          ${this.getText('leading-text-tertiary-label', TYPE.BODY_SMALL_REGULAR, this.tertiaryLabel)}
+      <slot name="content">
+        <div part="leading">
+          ${this.renderLeadingControls()}
+          <div part="leading-text">
+            ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
+            ${this.getText('leading-text-secondary-label', TYPE.BODY_SMALL_REGULAR, this.secondaryLabel)}
+            ${this.getText('leading-text-tertiary-label', TYPE.BODY_SMALL_REGULAR, this.tertiaryLabel)}
+          </div>
         </div>
-      </div>
-      <div part="trailing">
-        <div part="trailing-text">
-          ${this.getText('trailing-text-side-header', TYPE.BODY_MIDSIZE_REGULAR, this.sideHeaderText)}
-          ${this.getText('trailing-text-subline', TYPE.BODY_SMALL_REGULAR, this.sublineText)}
+        <div part="trailing">
+          <div part="trailing-text">
+            ${this.getText('trailing-text-side-header', TYPE.BODY_MIDSIZE_REGULAR, this.sideHeaderText)}
+            ${this.getText('trailing-text-subline', TYPE.BODY_SMALL_REGULAR, this.sublineText)}
+          </div>
+          ${this.renderTrailingControls()}
         </div>
-        ${this.renderTrailingControls()}
-      </div>
+      </slot>
     `;
     }
 }

package/dist/components/listitem/listitem.styles.js

@@ -9,16 +9,21 @@ const styles = css `
     --mdc-listitem-secondary-label-color: var(--mds-color-theme-text-secondary-normal);
     --mdc-listitem-disabled-color: var(--mds-color-theme-text-primary-disabled);
     --mdc-listitem-column-gap: 0.75rem;
-    --mdc-listitem-padding-left-and-right: 0.75rem;
+    --mdc-listitem-padding-left-right: 0.75rem;
+    --mdc-listitem-padding-top-bottom: 0.5rem;
+    --mdc-listitem-cursor: pointer;
+    --mdc-listitem-width: 100%;
+    --mdc-listitem-height: auto;
   }
   :host {
     background-color: var(--mdc-listitem-default-background-color);
     column-gap: var(--mdc-listitem-column-gap);
-    cursor: pointer;
     display: flex;
     flex-direction: row;
-    padding: 0.5rem var(--mdc-listitem-padding-left-and-right);
-    width: 100%;
+    cursor: var(--mdc-listitem-cursor);
+    padding: var(--mdc-listitem-padding-top-bottom) var(--mdc-listitem-padding-left-right);
+    width: var(--mdc-listitem-width);
+    height: var(--mdc-listitem-height);
   }
   :host([variant='inset-rectangle']) {
     border-radius: 0.5rem;
@@ -29,7 +34,7 @@ const styles = css `
   :host::part(leading-text) {
     flex: 1;
     /** 2x of column gap on both ends of the listitem - 100% width */
-    width: calc(100% - (2 * var(--mdc-listitem-padding-left-and-right)));
+    width: calc(100% - (2 * var(--mdc-listitem-padding-left-right)));
   }
   :host::part(leading-text-primary-label),
   :host::part(leading-text-secondary-label),