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 Only affects list items that are anchor tags. Does not intend to make visual changes to M2.
zarend · Feb 13, 2024 · ed3ea57 · ed3ea57
1 parent 83b6ebc
commit ed3ea57
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);
+    }
+  }
 }