refactor(list): Refactored leading / trailing icon styles to avoid relying on CSS class name map.

PiperOrigin-RevId: 462332002

list/lib/_tokens.scss

@@ -59,14 +59,16 @@
     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,
+    list-item-disabled-label-text-color: #1c1b1f,
-    list-item-disabled-label-text-opacity: null,
+    list-item-disabled-label-text-opacity: 0.38,
+    list-item-disabled-supporting-text-color: #1c1b1f,
+    list-item-disabled-supporting-text-opacity: 0.38,
     list-item-disabled-state-layer-color: null,
     list-item-disabled-state-layer-opacity: null,
-    list-item-disabled-leading-icon-color: null,
+    list-item-disabled-leading-icon-color: #1c1b1f,
-    list-item-disabled-leading-icon-opacity: null,
+    list-item-disabled-leading-icon-opacity: 0.38,
-    list-item-disabled-trailing-icon-color: null,
+    list-item-disabled-trailing-icon-color: #1c1b1f,
-    list-item-disabled-trailing-icon-opacity: null,
+    list-item-disabled-trailing-icon-opacity: 0.38,
     list-item-hover-state-layer-color: null,
     list-item-hover-state-layer-opacity: null,
     list-item-hover-label-text-color: null,

list/lib/icon/_list-item-icon-theme.scss

@@ -0,0 +1,32 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use 'sass:map';
+@use '@material/web/sass/theme';
+@use '../tokens';
+
+$light-theme: (
+  list-item-icon-color: #000,
+  list-item-icon-size: 0,
+  list-item-icon-opacity: 1,
+);
+
+$_custom-property-prefix: 'list-item-icon';
+
+@mixin theme($theme) {
+  $theme: theme.validate-theme($light-theme, $theme);
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($theme);
+}
+
+@mixin theme-styles($theme) {
+  $theme: theme.validate-theme($light-theme, $theme);
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
+
+  color: map.get($theme, list-item-icon-color);
+  font-size: map.get($theme, list-item-icon-size);
+  opacity: map.get($theme, list-item-icon-opacity);
+}

list/lib/icon/list-item-icon-styles.scss

@@ -3,8 +3,18 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
 @use './list-item-icon';
+@use './list-item-icon-theme';
 
 :host {
   @include list-item-icon.static-styles();
+
+  .md3-list-item__icon {
+    @include list-item-icon-theme.theme-styles(
+      list-item-icon-theme.$light-theme
+    );
+  }
 }

list/lib/listitem/_list-item-theme.scss

@@ -12,6 +12,7 @@
 @use '@material/web/compat/theme/state';
 @use '@material/web/sass/resolvers';
 @use '@material/web/sass/theme';
+@use '../icon/list-item-icon-theme';
 @use '../image/list-item-image-theme';
 @use '../video/list-item-video-theme';
 @use '../tokens';
@@ -39,7 +40,7 @@ $light-theme: tokens.md-comp-list-values();
   $theme: _resolve-theme($theme, $resolvers);
   $theme: theme.create-theme-vars($theme, list);
 
-  @include _set_container-color(
+  @include _set-container-color(
     (
       default: map.get($theme, list-item-container-color),
     )
@@ -55,11 +56,15 @@ $light-theme: tokens.md-comp-list-values();
     )
   );
 
-  @include _set_label-text-ink-color(
+  @include _set-label-text-ink-color(
     (
       default: map.get($theme, list-item-label-text-color),
+      disabled: map.get($theme, list-item-disabled-label-text-color),
     )
   );
+  @include _set-disabled-label-text-opacity(
+    map.get($theme, list-item-disabled-label-text-opacity)
+  );
 
   @include _set-supporting-text-typography(
     (
@@ -71,11 +76,15 @@ $light-theme: tokens.md-comp-list-values();
     )
   );
 
-  @include _set_supporting-text-ink-color(
+  @include _set-supporting-text-ink-color(
     (
       default: map.get($theme, list-item-supporting-text-color),
+      disabled: map.get($theme, list-item-disabled-supporting-text-color),
     )
   );
+  @include _set-disabled-supporting-text-opacity(
+    map.get($theme, list-item-disabled-supporting-text-opacity)
+  );
 
   @include _set-trailing-supporting-text-typography(
     (
@@ -88,24 +97,12 @@ $light-theme: tokens.md-comp-list-values();
     )
   );
 
-  @include _set_trailing-supporting-text-ink-color(
+  @include _set-trailing-supporting-text-ink-color(
     (
       default: map.get($theme, trailing-supporting-text-color),
     )
   );
 
-  @include _set-leading-icon-color(
-    (
-      default: map.get($theme, list-item-leading-icon-color),
-    )
-  );
-
-  @include _set-trailing-icon-color(
-    (
-      default: map.get($theme, list-item-trailing-icon-color),
-    )
-  );
-
   @include _set-one-line-container-height(
     map.get($theme, list-item-one-line-container-height)
   );
@@ -116,10 +113,6 @@ $light-theme: tokens.md-comp-list-values();
     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(
-    map.get($theme, list-item-trailing-icon-size)
-  );
   @include list-item-image-theme.theme(
     (
       list-item-leading-image-height:
@@ -140,21 +133,75 @@ $light-theme: tokens.md-comp-list-values();
         map.get($theme, list-item-leading-video-shape),
     )
   );
-}
 
-@mixin _set-leading-icon-size($size) {
+  .md3-list-item__start {
-  &.md3-list-item--with-leading-icon .md3-list-item__start {
+    @include list-item-icon-theme.theme(
-    font-size: $size;
+      (
-    height: $size;
+        list-item-icon-color: map.get($theme, list-item-leading-icon-color),
-    width: $size;
+        list-item-icon-size: map.get($theme, list-item-leading-icon-size),
+      )
+    );
+  }
+
+  .md3-list-item__end {
+    @include list-item-icon-theme.theme(
+      (
+        list-item-icon-color: map.get($theme, list-item-trailing-icon-color),
+        list-item-icon-size: map.get($theme, list-item-trailing-icon-size),
+      )
+    );
+  }
+
+  &.md3-list-item--disabled .md3-list-item__start {
+    @include list-item-icon-theme.theme(
+      (
+        list-item-icon-color:
+          map.get($theme, list-item-disabled-leading-icon-color),
+        list-item-icon-opacity:
+          map.get($theme, list-item-disabled-leading-icon-opacity),
+      )
+    );
+  }
+
+  &.md3-list-item--disabled .md3-list-item__end {
+    @include list-item-icon-theme.theme(
+      (
+        list-item-icon-color:
+          map.get($theme, list-item-disabled-trailing-icon-color),
+        list-item-icon-opacity:
+          map.get($theme, list-item-disabled-trailing-icon-opacity),
+      )
+    );
+  }
+
+  &:hover .md3-list-item__start {
+    @include list-item-icon-theme.theme(
+      (
+        list-item-icon-color:
+          map.get($theme, list-item-hover-leading-icon-color),
+      )
+    );
+  }
+
+  &:hover .md3-list-item__end {
+    @include list-item-icon-theme.theme(
+      (
+        list-item-icon-color:
+          map.get($theme, list-item-hover-trailing-icon-color),
+      )
+    );
   }
 }
 
-@mixin _set-trailing-icon-size($size) {
+@mixin _set-disabled-label-text-opacity($opacity) {
-  &.md3-list-item--with-trailing-icon .md3-list-item__end {
+  &.md3-list-item--disabled .md3-list-item__label-text {
-    font-size: $size;
+    opacity: $opacity;
-    height: $size;
+  }
-    width: $size;
+}
+
+@mixin _set-disabled-supporting-text-opacity($opacity) {
+  &.md3-list-item--disabled .md3-list-item__supporting-text {
+    opacity: $opacity;
   }
 }
 
@@ -190,6 +237,10 @@ $light-theme: tokens.md-comp-list-values();
   @include state.enabled($selectors) {
     @include _set-label-text-color(state.get-default-state($colors));
   }
+
+  &.md3-list-item--disabled {
+    @include _set-label-text-color(state.get-disabled-state($colors));
+  }
 }
 
 @mixin _set-supporting-text-typography($typography-map) {
@@ -214,6 +265,10 @@ $light-theme: tokens.md-comp-list-values();
   @include state.enabled($selectors) {
     @include _set-supporting-text-color(state.get-default-state($colors));
   }
+
+  &.md3-list-item--disabled {
+    @include _set-supporting-text-color(state.get-disabled-state($colors));
+  }
 }
 
 @mixin _set-trailing-supporting-text-typography($typography-map) {
@@ -242,22 +297,6 @@ $light-theme: tokens.md-comp-list-values();
   }
 }
 
-@mixin _set-leading-icon-color($colors) {
-  @include state.enabled($selectors) {
-    &.md3-list-item--with-leading-icon .md3-list-item__start {
-      color: state.get-default-state($colors);
-    }
-  }
-}
-
-@mixin _set-trailing-icon-color($colors) {
-  @include state.enabled($selectors) {
-    &.md3-list-item--with-trailing-icon .md3-list-item__end {
-      color: state.get-default-state($colors);
-    }
-  }
-}
-
 @mixin _set-one-line-container-height($height) {
   &.md3-list-item--with-one-line {
     height: $height;

list/lib/listitem/list-item.ts

@@ -5,8 +5,8 @@
  */
 
 import {ARIARole} from '@material/web/types/aria';
-import {html, LitElement, PropertyValues, TemplateResult} from 'lit';
+import {html, LitElement, TemplateResult} from 'lit';
-import {property, queryAssignedElements, state} from 'lit/decorators';
+import {property} from 'lit/decorators';
 import {ClassInfo, classMap} from 'lit/directives/class-map';
 
 /** @soyCompatible */
@@ -14,16 +14,7 @@ export class ListItem extends LitElement {
   @property({type: String}) supportingText = '';
   @property({type: String}) multiLineSupportingText = '';
   @property({type: String}) trailingSupportingText = '';
-
+  @property({type: Boolean}) disabled = false;
-  @queryAssignedElements(
-      {slot: 'start', flatten: true, selector: '[media=icon]'})
-  protected leadingIcon!: HTMLElement[];
-
-  @queryAssignedElements({slot: 'end', flatten: true, selector: '[media=icon]'})
-  protected trailingIcon!: HTMLElement[];
-
-  @property() hasLeadingIcon = false;
-  @property() hasTrailingIcon = false;
 
   /** @soyTemplate */
   override render(): TemplateResult {
@@ -52,8 +43,7 @@ export class ListItem extends LitElement {
       '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--disabled': this.disabled,
-      'md3-list-item--with-trailing-icon': this.hasTrailingIcon,
     };
   }
 
@@ -116,14 +106,4 @@ export class ListItem extends LitElement {
   }
 
   handleClick() {}
-
-  override update(changedProperties: PropertyValues<this>) {
-    this.updateMetadata();
-    super.update(changedProperties);
-  }
-
-  private updateMetadata() {
-    this.hasLeadingIcon = this.leadingIcon.length > 0;
-    this.hasTrailingIcon = this.trailingIcon.length > 0;
-  }
 }