From dee7d0fbff16070208681503ece77378375ff17a Mon Sep 17 00:00:00 2001 From: Zach Arend Date: Mon, 12 Feb 2024 22:12:38 +0000 Subject: [PATCH 1/2] 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. --- src/dev-app/list/list-demo.html | 4 ++-- src/dev-app/list/list-demo.ts | 11 ++++++++--- src/material-experimental/theming/_custom-tokens.scss | 11 +++++++++++ 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, 38 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 @@

Dense lists

Nav lists

@for (link of links; track link) { - + {{ link.name }} } @@ -120,7 +120,7 @@

Nav lists

} @for (link of links; track link; let last = $last) { - + folder {{ link.name }} 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..cf1a35070403 100644 --- a/src/material-experimental/theming/_custom-tokens.scss +++ b/src/material-experimental/theming/_custom-tokens.scss @@ -653,6 +653,17 @@ )); } +/// 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) { + @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); + } + } } From a5cabf120429f00d7e9bea3c9955d80af82ac327 Mon Sep 17 00:00:00 2001 From: Zach Arend Date: Wed, 14 Feb 2024 18:56:04 +0000 Subject: [PATCH 2/2] !fixup fix(material/list): tokenize active-indicator --- src/material-experimental/theming/_custom-tokens.scss | 2 +- src/material-experimental/theming/_m3-tokens.scss | 2 +- src/material/core/tokens/m2/mat/_list.scss | 11 ++++++----- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss index cf1a35070403..6e2625b92455 100644 --- a/src/material-experimental/theming/_custom-tokens.scss +++ b/src/material-experimental/theming/_custom-tokens.scss @@ -657,7 +657,7 @@ /// @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) { +@function list($systems, $exclude-hardcoded) { @return ( active-indicator-color: map.get($systems, md-sys-color, secondary-container), active-indicator-shape: map.get($systems, md-sys-shape, corner-full), diff --git a/src/material-experimental/theming/_m3-tokens.scss b/src/material-experimental/theming/_m3-tokens.scss index f8fbdba79c8d..f871ca1ff542 100644 --- a/src/material-experimental/theming/_m3-tokens.scss +++ b/src/material-experimental/theming/_m3-tokens.scss @@ -831,7 +831,7 @@ ), _namespace-tokens( (mat, list), - custom-tokens.list-active-indicator($systems, $exclude-hardcoded), + custom-tokens.list($systems, $exclude-hardcoded), $token-slots ), _namespace-tokens( diff --git a/src/material/core/tokens/m2/mat/_list.scss b/src/material/core/tokens/m2/mat/_list.scss index 426b00890b54..c6fb8c2f0d19 100644 --- a/src/material/core/tokens/m2/mat/_list.scss +++ b/src/material/core/tokens/m2/mat/_list.scss @@ -7,17 +7,18 @@ $prefix: (mat, list); // Tokens that can't be configured through Angular Material's current theming API, // but may be in a future version of the theming API. @function get-unthemable-tokens() { - @return (); -} - -// Tokens that can be configured through Angular Material's color theming API. -@function get-color-tokens($theme) { @return ( + // active indicator themable with M3 active-indicator-color: transparent, active-indicator-shape: 0, ); } +// Tokens that can be configured through Angular Material's color theming API. +@function get-color-tokens($theme) { + @return (); +} + // Tokens that can be configured through Angular Material's typography theming API. @function get-typography-tokens($theme) { @return ();