From 305f3a68e5d1990440ad4a91192c0ea84ab1ae0b Mon Sep 17 00:00:00 2001
From: Zach Arend <zachzach@google.com>
Date: Mon, 12 Feb 2024 22:12:38 +0000
Subject: [PATCH] fix(material/list): tokenize active-indicator

Add active state for MatNavList. Implement active state by implementing 2
tokens under mat prefix.

 - mat-list-active-indicator-color
 - mat-list-active-indicator-shape

Does not intend to make visual changes to M2.
---
 src/dev-app/list/list-demo.html                      |  4 ++--
 src/dev-app/list/list-demo.ts                        | 11 ++++++++---
 .../theming/_custom-tokens.scss                      | 12 ++++++++++++
 src/material-experimental/theming/_m3-tokens.scss    |  5 +++++
 src/material/core/tokens/m2/mat/_list.scss           |  5 ++++-
 src/material/list/list.scss                          |  8 ++++++++
 6 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/dev-app/list/list-demo.html b/src/dev-app/list/list-demo.html
index 6886c33806cf..16fcdf8af0d0 100644
--- a/src/dev-app/list/list-demo.html
+++ b/src/dev-app/list/list-demo.html
@@ -110,7 +110,7 @@ <h2>Dense lists</h2>
     <h2>Nav lists</h2>
     <mat-nav-list>
       @for (link of links; track link) {
-        <a mat-list-item [href]="link.href" [activated]="isActivated(link.href)">
+        <a mat-list-item [href]="link.href" [activated]="isActivated(link)">
           {{ link.name }}
         </a>
       }
@@ -120,7 +120,7 @@ <h2>Nav lists</h2>
     }
     <mat-nav-list>
       @for (link of links; track link; let last = $last) {
-        <a mat-list-item [href]="link.href" [activated]="isActivated(link.href)">
+        <a mat-list-item [href]="link.href" [activated]="isActivated(link)">
           <mat-icon matListItemIcon>folder</mat-icon>
           <span matListItemTitle>{{ link.name }}</span>
         </a>
diff --git a/src/dev-app/list/list-demo.ts b/src/dev-app/list/list-demo.ts
index 30ff2459576f..ddd2f7c93f5d 100644
--- a/src/dev-app/list/list-demo.ts
+++ b/src/dev-app/list/list-demo.ts
@@ -13,6 +13,11 @@ import {MatListModule, MatListOptionTogglePosition} from '@angular/material/list
 import {MatIconModule} from '@angular/material/icon';
 import {CommonModule} from '@angular/common';
 
+interface Link {
+  name: string;
+  href: string;
+}
+
 @Component({
   selector: 'list-demo',
   templateUrl: 'list-demo.html',
@@ -52,7 +57,7 @@ export class ListDemo {
     },
   ];
 
-  links: {name: string; href: string}[] = [
+  links: Link[] = [
     {name: 'Inbox', href: '/list#inbox'},
     {name: 'Outbox', href: '/list#outbox'},
     {name: 'Spam', href: '/list#spam'},
@@ -85,7 +90,7 @@ export class ListDemo {
     alert(msg);
   }
 
-  isActivated(href: string) {
-    return window.location.href === new URL(href, window.location.href).toString();
+  isActivated(link: Link) {
+    return `${window.location.pathname}${window.location.hash}` === link.href;
   }
 }
diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss
index 7a0002fc360d..f8db14b26435 100644
--- a/src/material-experimental/theming/_custom-tokens.scss
+++ b/src/material-experimental/theming/_custom-tokens.scss
@@ -653,6 +653,18 @@
   ));
 }
 
+/// Generates custom tokens for the mat-list.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-list
+@function list-active-indicator($systems, $exclude-hardcoded) {
+  // TODO: remove debug code
+  @return (
+    active-indicator-color: map.get($systems, md-sys-color, secondary-container),
+    active-indicator-shape: map.get($systems, md-sys-shape, corner-full),
+  );
+}
+
 /// Generates custom tokens for the mat-button.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
diff --git a/src/material-experimental/theming/_m3-tokens.scss b/src/material-experimental/theming/_m3-tokens.scss
index f288634bce55..f8fbdba79c8d 100644
--- a/src/material-experimental/theming/_m3-tokens.scss
+++ b/src/material-experimental/theming/_m3-tokens.scss
@@ -829,6 +829,11 @@
       custom-tokens.filled-button($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mat, list),
+      custom-tokens.list-active-indicator($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       // Note: in M3 the "protected" button is called "elevated".
       (mat, protected-button),
diff --git a/src/material/core/tokens/m2/mat/_list.scss b/src/material/core/tokens/m2/mat/_list.scss
index f53d06515d51..426b00890b54 100644
--- a/src/material/core/tokens/m2/mat/_list.scss
+++ b/src/material/core/tokens/m2/mat/_list.scss
@@ -12,7 +12,10 @@ $prefix: (mat, list);
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  @return ();
+  @return (
+    active-indicator-color: transparent,
+    active-indicator-shape: 0,
+  );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
diff --git a/src/material/list/list.scss b/src/material/list/list.scss
index 9291984fee05..3ae4fb55f892 100644
--- a/src/material/list/list.scss
+++ b/src/material/list/list.scss
@@ -199,4 +199,12 @@ mat-action-list button {
     @include token-utils.create-token-slot(margin-inline-start, list-item-leading-icon-start-space);
     @include token-utils.create-token-slot(margin-inline-end, list-item-leading-icon-end-space);
   }
+
+  a.mdc-list-item.mdc-list-item--activated {
+    @include token-utils.create-token-slot(background-color, active-indicator-color);
+    // active-indicator-shape overrides list-item-container-shape
+    &.mdc-list-item {
+      @include token-utils.create-token-slot(border-radius, active-indicator-shape);
+    }
+  }
 }