fix(menu): --md-menu-item-container-color not working

This change removes the leftover md-comp-menu-list-item token set, which doesn't have a corresponding component. If you're using it, the correct token set to use is md-comp-menu-item. As a side effect of the merge, it also added the missing menu item container-color token. PiperOrigin-RevId: 601168134
material-components · Jan 24, 2024 · 86bd6f8 · 86bd6f8
1 parent 901a5cb
commit 86bd6f8
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 224 deletions.
diff --git a/menu/internal/menuitem/_menu-item.scss b/menu/internal/menuitem/_menu-item.scss
@@ -17,59 +17,41 @@
 // go/keep-sorted end
 
 @mixin theme($tokens) {
-  $list-item-supported-tokens: tokens.$md-comp-menu-list-item-supported-tokens;
   $supported-tokens: tokens.$md-comp-menu-item-supported-tokens;
 
   @each $token, $value in $tokens {
-    @if list.index($supported-tokens, $token) ==
-      null and
-      list.index($list-item-supported-tokens, $token) ==
-      null
-    {
+    @if list.index($supported-tokens, $token) == null {
       @error 'Token `#{$token}` is not a supported token.';
     }
 
     @if $value and list.index($supported-tokens, $token) == null {
       --md-menu-item-#{$token}: #{$value};
     }
-
-    @if $value and list.index($list-item-supported-tokens, $token) == null {
-      --md-list-item-#{$token}: #{$value};
-    }
   }
 }
 
 @mixin styles() {
-  $list-item-tokens: tokens.md-comp-menu-list-item-values();
-  @each $token, $value in $list-item-tokens {
-    $list-item-tokens: map.set(
-      $list-item-tokens,
-      $token,
-      var(--md-menu-item-#{$token}, #{$value})
-    );
-  }
   $tokens: tokens.md-comp-menu-item-values();
   @each $token, $value in $tokens {
     $tokens: map.set($tokens, $token, var(--md-menu-item-#{$token}, #{$value}));
   }
 
   :host {
-    border-radius: map.get($list-item-tokens, 'container-shape');
+    border-radius: map.get($tokens, 'container-shape');
     display: flex;
 
     @include ripple.theme(
       (
-        hover-color: map.get($list-item-tokens, 'hover-state-layer-color'),
-        hover-opacity: map.get($list-item-tokens, 'hover-state-layer-opacity'),
-        pressed-color: map.get($list-item-tokens, 'pressed-state-layer-color'),
-        pressed-opacity:
-          map.get($list-item-tokens, 'pressed-state-layer-opacity'),
+        hover-color: map.get($tokens, 'hover-state-layer-color'),
+        hover-opacity: map.get($tokens, 'hover-state-layer-opacity'),
+        pressed-color: map.get($tokens, 'pressed-state-layer-color'),
+        pressed-opacity: map.get($tokens, 'pressed-state-layer-opacity'),
       )
     );
   }
 
   :host([disabled]) {
-    opacity: map.get($list-item-tokens, 'disabled-opacity');
+    opacity: map.get($tokens, 'disabled-opacity');
     pointer-events: none;
   }
 
@@ -121,55 +103,52 @@
   md-item {
     border-radius: inherit;
     flex: 1;
-    color: map.get($list-item-tokens, 'label-text-color');
-    font-family: map.get($list-item-tokens, 'label-text-font');
-    font-size: map.get($list-item-tokens, 'label-text-size');
-    line-height: map.get($list-item-tokens, 'label-text-line-height');
-    font-weight: map.get($list-item-tokens, 'label-text-weight');
-    min-height: map.get($list-item-tokens, 'one-line-container-height');
-    padding-top: map.get($list-item-tokens, 'top-space');
-    padding-bottom: map.get($list-item-tokens, 'bottom-space');
-    padding-inline-start: map.get($list-item-tokens, 'leading-space');
-    padding-inline-end: map.get($list-item-tokens, 'trailing-space');
+    color: map.get($tokens, 'label-text-color');
+    font-family: map.get($tokens, 'label-text-font');
+    font-size: map.get($tokens, 'label-text-size');
+    line-height: map.get($tokens, 'label-text-line-height');
+    font-weight: map.get($tokens, 'label-text-weight');
+    min-height: map.get($tokens, 'one-line-container-height');
+    padding-top: map.get($tokens, 'top-space');
+    padding-bottom: map.get($tokens, 'bottom-space');
+    padding-inline-start: map.get($tokens, 'leading-space');
+    padding-inline-end: map.get($tokens, 'trailing-space');
   }
 
   md-item[multiline] {
-    min-height: map.get($list-item-tokens, 'two-line-container-height');
+    min-height: map.get($tokens, 'two-line-container-height');
   }
 
   [slot='supporting-text'] {
-    color: map.get($list-item-tokens, 'supporting-text-color');
-    font-family: map.get($list-item-tokens, 'supporting-text-font');
-    font-size: map.get($list-item-tokens, 'supporting-text-size');
-    line-height: map.get($list-item-tokens, 'supporting-text-line-height');
-    font-weight: map.get($list-item-tokens, 'supporting-text-weight');
+    color: map.get($tokens, 'supporting-text-color');
+    font-family: map.get($tokens, 'supporting-text-font');
+    font-size: map.get($tokens, 'supporting-text-size');
+    line-height: map.get($tokens, 'supporting-text-line-height');
+    font-weight: map.get($tokens, 'supporting-text-weight');
   }
 
   [slot='trailing-supporting-text'] {
-    color: map.get($list-item-tokens, 'trailing-supporting-text-color');
-    font-family: map.get($list-item-tokens, 'trailing-supporting-text-font');
-    font-size: map.get($list-item-tokens, 'trailing-supporting-text-size');
-    line-height: map.get(
-      $list-item-tokens,
-      'trailing-supporting-text-line-height'
-    );
-    font-weight: map.get($list-item-tokens, 'trailing-supporting-text-weight');
+    color: map.get($tokens, 'trailing-supporting-text-color');
+    font-family: map.get($tokens, 'trailing-supporting-text-font');
+    font-size: map.get($tokens, 'trailing-supporting-text-size');
+    line-height: map.get($tokens, 'trailing-supporting-text-line-height');
+    font-weight: map.get($tokens, 'trailing-supporting-text-weight');
   }
 
   :is([slot='start'], [slot='end'])::slotted(*) {
     fill: currentColor;
   }
 
   [slot='start'] {
-    color: map.get($list-item-tokens, 'leading-icon-color');
+    color: map.get($tokens, 'leading-icon-color');
   }
 
   [slot='end'] {
-    color: map.get($list-item-tokens, 'trailing-icon-color');
+    color: map.get($tokens, 'trailing-icon-color');
   }
 
   .list-item {
-    background-color: map.get($list-item-tokens, 'container-color');
+    background-color: map.get($tokens, 'container-color');
   }
 
   .list-item.selected {

diff --git a/tokens/_index.scss b/tokens/_index.scss
@@ -36,7 +36,6 @@
 @forward './md-comp-list-item' as md-comp-list-item-*;
 @forward './md-comp-menu' as md-comp-menu-*;
 @forward './md-comp-menu-item' as md-comp-menu-item-*;
-@forward './md-comp-menu-list-item' as md-comp-menu-list-item-*;
 @forward './md-comp-navigation-bar' as md-comp-navigation-bar-*;
 @forward './md-comp-navigation-drawer' as md-comp-navigation-drawer-*;
 @forward './md-comp-outlined-button' as md-comp-outlined-button-*;

diff --git a/tokens/_md-comp-list-item.scss b/tokens/_md-comp-list-item.scss
@@ -20,8 +20,6 @@ $supported-tokens: (
   // go/keep-sorted start
   'bottom-space',
   'disabled-opacity',
-  'focus-state-layer-color',
-  'focus-state-layer-opacity',
   'hover-state-layer-color',
   'hover-state-layer-opacity',
   'label-text-color',
@@ -74,6 +72,8 @@ $unsupported-tokens: (
   'dragged-trailing-icon-icon-color',
   'focus-label-text-color',
   'focus-leading-icon-icon-color',
+  'focus-state-layer-color',
+  'focus-state-layer-opacity',
   'focus-trailing-icon-icon-color',
   'hover-label-text-color',
   'hover-leading-icon-icon-color',

diff --git a/tokens/_md-comp-menu-item.scss b/tokens/_md-comp-menu-item.scss
@@ -10,17 +10,48 @@
 // go/keep-sorted end
 // go/keep-sorted start
 @use './internal/validate';
+@use './md-comp-list-item';
 @use './md-sys-color';
 @use './md-sys-elevation';
 @use './md-sys-shape';
+@use './md-sys-state';
+@use './md-sys-typescale';
 @use './v0_192/md-comp-menu';
 // go/keep-sorted end
 
 $supported-tokens: (
   // go/keep-sorted start
+  'bottom-space',
   'container-color',
+  'disabled-opacity',
+  'hover-state-layer-color',
+  'hover-state-layer-opacity',
+  'label-text-color',
+  'label-text-font',
+  'label-text-line-height',
+  'label-text-size',
+  'label-text-weight',
+  'leading-icon-color',
+  'leading-space',
+  'one-line-container-height',
+  'pressed-state-layer-color',
+  'pressed-state-layer-opacity',
   'selected-container-color',
   'selected-label-text-color',
+  'supporting-text-color',
+  'supporting-text-font',
+  'supporting-text-line-height',
+  'supporting-text-size',
+  'supporting-text-weight',
+  'top-space',
+  'trailing-icon-color',
+  'trailing-space',
+  'trailing-supporting-text-color',
+  'trailing-supporting-text-font',
+  'trailing-supporting-text-line-height',
+  'trailing-supporting-text-size',
+  'trailing-supporting-text-weight',
+  'two-line-container-height',
   // go/keep-sorted end
 );
 
@@ -29,27 +60,52 @@ $unsupported-tokens: (
   'container-elevation',
   'container-shadow-color',
   'container-shape',
-  'list-item-selected-with-leading-icon-trailing-icon-color',
-  'menu-list-item-with-leading-icon-icon-color',
+  'selected-with-leading-icon-trailing-icon-color',
+  'with-leading-icon-icon-color',
   // go/keep-sorted end
 );
 
 $_default: (
   'md-sys-color': md-sys-color.values-light(),
   'md-sys-elevation': md-sys-elevation.values(),
   'md-sys-shape': md-sys-shape.values(),
+  'md-sys-state': md-sys-state.values(),
+  'md-sys-typescale': md-sys-typescale.values(),
 );
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
+  $tokens: md-comp-menu.values($deps);
+
+  // Like list items, menu items use their parent menu for their container
+  // color. However, menu items can have a selected background color, so we
+  // change its default unselected background color to transparent to inherit
+  // from its parent menu.
+  $tokens: map.set($tokens, 'container-color', transparent);
+
   $tokens: validate.values(
-    md-comp-menu.values($deps),
+    $tokens,
     $supported-tokens: $supported-tokens,
     $unsupported-tokens: $unsupported-tokens,
-    $renamed-tokens: (
-      'list-item-selected-container-color': 'selected-container-color',
-      'list-item-selected-label-text-color': 'selected-label-text-color',
-    )
+    $new-tokens: md-comp-list-item.values($deps),
+    $renamed-tokens: _get-renamed-tokens($tokens)
   );
 
   @return $tokens;
 }
+
+// remove list-item prefix from tokens
+@function _get-renamed-tokens($tokens) {
+  $keys: map.keys($tokens);
+  $renamed-tokens: ();
+
+  @each $key in $keys {
+    @each $prefix in ('list-item-', 'menu-list-item-') {
+      @if string.index($key, $prefix) == 1 {
+        $renamed-key: string.slice($key, string.length($prefix) + 1);
+        $renamed-tokens: map.set($renamed-tokens, $key, $renamed-key);
+      }
+    }
+  }
+
+  @return $renamed-tokens;
+}