feat(list): Add component styles to match spec layout

PiperOrigin-RevId: 461802303
material-components · Jul 19, 2022 · a6ddbaa · a6ddbaa
1 parent aaa6f63
commit a6ddbaa
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 22 deletions.
diff --git a/list/lib/_list-item-theme.scss b/list/lib/_list-item-theme.scss
@@ -18,7 +18,9 @@ $selectors: (
 );
 
 $light-theme: (
-  list-item-container-height: 56px,
+  list-item-one-line-container-height: 56px,
+  list-item-two-line-container-height: 72px,
+  list-item-three-line-container-height: 88px,
   list-item-container-color: transparent,
   list-item-label-text-font: string.unquote('Roboto, sans-serif'),
   list-item-label-text-size: 16px,
@@ -38,7 +40,7 @@ $light-theme: (
   list-item-leading-icon-color: #444746,
   list-item-container-shape: null,
   list-item-label-text-line-height: null,
-  list-item-supporting-text-line-height: null,
+  list-item-supporting-text-line-height: 20px,
   list-item-overline-color: null,
   list-item-overline-font: null,
   list-item-overline-line-height: null,
@@ -62,8 +64,8 @@ $light-theme: (
   list-item-leading-image-height: null,
   list-item-leading-image-shape: null,
   list-item-trailing-supporting-text-line-height: null,
-  list-item-trailing-icon-color: null,
-  list-item-trailing-icon-size: null,
+  list-item-trailing-icon-color: #444746,
+  list-item-trailing-icon-size: 24px,
   list-item-selected-trailing-icon-color: null,
   list-item-unselected-trailing-icon-color: null,
   list-item-disabled-label-text-color: null,
@@ -165,7 +167,15 @@ $light-theme: (
     )
   );
 
-  @include _set-height(map.get($theme, list-item-container-height));
+  @include _set-one-line-container-height(
+    map.get($theme, list-item-one-line-container-height)
+  );
+  @include _set-two-line-container-height(
+    map.get($theme, list-item-two-line-container-height)
+  );
+  @include _set-three-line-container-height(
+    map.get($theme, list-item-three-line-container-height)
+  );
   @include _set-container-shape(map.get($theme, list-item-container-shape));
   @include _set-leading-icon-size(map.get($theme, list-item-leading-icon-size));
   @include _set-trailing-icon-size(
@@ -289,8 +299,22 @@ $light-theme: (
   }
 }
 
-@mixin _set-height($height) {
-  height: $height;
+@mixin _set-one-line-container-height($height) {
+  &.md3-list-item--with-one-line {
+    height: $height;
+  }
+}
+
+@mixin _set-two-line-container-height($height) {
+  &.md3-list-item--with-two-line {
+    height: $height;
+  }
+}
+
+@mixin _set-three-line-container-height($height) {
+  &.md3-list-item--with-three-line {
+    height: $height;
+  }
 }
 
 @mixin _set-container-background-color($color) {

diff --git a/list/lib/_list-item.scss b/list/lib/_list-item.scss
@@ -19,6 +19,10 @@
     @include icon-item-root;
   }
 
+  .md3-list-item__end {
+    padding-inline-start: 16px;
+  }
+
   .md3-list-item--with-leading-avatar {
     @include avatar-item-root;
   }
@@ -45,61 +49,74 @@
 }
 
 @mixin item-root() {
+  align-items: flex-start;
+  box-sizing: border-box;
   display: flex;
-  flex-flow: row nowrap;
+  padding-block-end: 12px;
+  padding-block-start: 12px;
+  padding-inline-end: 24px;
   width: 100%;
-  justify-content: space-evenly;
-  align-items: center;
 
   .md3-list-item__start {
     flex: 0 0 auto;
   }
 
   .md3-list-item__body {
-    flex: 1 1 100%;
+    flex: 1 0 0;
+    padding-inline-start: 16px;
   }
 
   .md3-list-item__end {
     flex: 0 0 auto;
   }
 
   .md3-list-item__label-text {
-    display: block;
+    display: flex;
   }
 
   .md3-list-item__supporting-text {
-    display: block;
-    margin-block-start: 4px;
+    display: flex;
+    padding-block-start: 4px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .md3-list-item__supporting-text--multi-line {
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    overflow: hidden;
+    white-space: normal;
   }
 }
 
 @mixin icon-item-root() {
   .md3-list-item__start {
-    margin-inline-end: 16px;
+    padding-inline-start: 16px;
   }
 }
 
 @mixin avatar-item-root() {
   .md3-list-item__start {
-    margin-inline-end: 16px;
+    padding-inline-start: 16px;
   }
 }
 
 @mixin thumbnail-item-root() {
   .md3-list-item__start {
-    margin-inline-end: 16px;
+    padding-inline-start: 16px;
   }
 }
 
 @mixin image-item-root() {
   .md3-list-item__start {
-    margin-inline-end: 16px;
+    padding-inline-start: 16px;
   }
 }
 
 @mixin video-item-root() {
   .md3-list-item__start {
-    margin-inline-end: 8px;
+    padding-inline-start: 0;
   }
 }
 

diff --git a/list/lib/list-item.ts b/list/lib/list-item.ts
@@ -12,6 +12,7 @@ import {ClassInfo, classMap} from 'lit/directives/class-map';
 /** @soyCompatible */
 export class ListItem extends LitElement {
   @property({type: String}) supportingText = '';
+  @property({type: String}) multiLineSupportingText = '';
   @property({type: String}) trailingSupportingText = '';
 
   @queryAssignedElements(
@@ -46,8 +47,11 @@ export class ListItem extends LitElement {
   /** @soyTemplate */
   protected getRenderClasses(): ClassInfo {
     return {
-      'md3-list-item--with-one-line': this.supportingText === '',
-      'md3-list-item--with-two-lines': this.supportingText !== '',
+      'md3-list-item--with-one-line':
+          this.supportingText === '' && this.multiLineSupportingText === '',
+      'md3-list-item--with-two-line':
+          this.supportingText !== '' && this.multiLineSupportingText === '',
+      'md3-list-item--with-three-line': this.multiLineSupportingText !== '',
       'md3-list-item--with-leading-icon': this.hasLeadingIcon,
       'md3-list-item--with-trailing-icon': this.hasTrailingIcon,
     };
@@ -66,7 +70,11 @@ export class ListItem extends LitElement {
        --><span class="md3-list-item__label-text"><!--
           --><slot @slotchange=${this.handleSlotChange}></slot><!--
        --></span><!--
-        -->${this.supportingText !== '' ? this.renderSupportingText() : ''}<!--
+        -->${
+        this.multiLineSupportingText !== '' ?
+            this.renderMultiLineSupportingText() :
+            this.supportingText !== '' ? this.renderSupportingText() :
+                                         ''}<!--
     --></div>`;
   }
 
@@ -77,6 +85,13 @@ export class ListItem extends LitElement {
        --></span>`;
   }
 
+  /** @soyTemplate */
+  protected renderMultiLineSupportingText(): TemplateResult {
+    return html`<span class="md3-list-item__supporting-text md3-list-item__supporting-text--multi-line"><!--
+          -->${this.multiLineSupportingText}<!--
+       --></span>`;
+  }
+
   /** @soyTemplate */
   protected renderEnd(): TemplateResult {
     return html`<div class="md3-list-item__end"><!--