Skip to content

Commit 86bd6f8

Browse files
asynclizcopybara-github
asyncliz
authored and
copybara-github
committed
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
1 parent 901a5cb commit 86bd6f8

File tree

5 files changed

+96
-224
lines changed

5 files changed

+96
-224
lines changed

‎menu/internal/menuitem/_menu-item.scss‎

Lines changed: 31 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -17,59 +17,41 @@
1717
// go/keep-sorted end
1818

1919
@mixin theme($tokens) {
20-
$list-item-supported-tokens: tokens.$md-comp-menu-list-item-supported-tokens;
2120
$supported-tokens: tokens.$md-comp-menu-item-supported-tokens;
2221

2322
@each $token, $value in $tokens {
24-
@if list.index($supported-tokens, $token) ==
25-
null and
26-
list.index($list-item-supported-tokens, $token) ==
27-
null
28-
{
23+
@if list.index($supported-tokens, $token) == null {
2924
@error 'Token `#{$token}` is not a supported token.';
3025
}
3126

3227
@if $value and list.index($supported-tokens, $token) == null {
3328
--md-menu-item-#{$token}: #{$value};
3429
}
35-
36-
@if $value and list.index($list-item-supported-tokens, $token) == null {
37-
--md-list-item-#{$token}: #{$value};
38-
}
3930
}
4031
}
4132

4233
@mixin styles() {
43-
$list-item-tokens: tokens.md-comp-menu-list-item-values();
44-
@each $token, $value in $list-item-tokens {
45-
$list-item-tokens: map.set(
46-
$list-item-tokens,
47-
$token,
48-
var(--md-menu-item-#{$token}, #{$value})
49-
);
50-
}
5134
$tokens: tokens.md-comp-menu-item-values();
5235
@each $token, $value in $tokens {
5336
$tokens: map.set($tokens, $token, var(--md-menu-item-#{$token}, #{$value}));
5437
}
5538

5639
:host {
57-
border-radius: map.get($list-item-tokens, 'container-shape');
40+
border-radius: map.get($tokens, 'container-shape');
5841
display: flex;
5942

6043
@include ripple.theme(
6144
(
62-
hover-color: map.get($list-item-tokens, 'hover-state-layer-color'),
63-
hover-opacity: map.get($list-item-tokens, 'hover-state-layer-opacity'),
64-
pressed-color: map.get($list-item-tokens, 'pressed-state-layer-color'),
65-
pressed-opacity:
66-
map.get($list-item-tokens, 'pressed-state-layer-opacity'),
45+
hover-color: map.get($tokens, 'hover-state-layer-color'),
46+
hover-opacity: map.get($tokens, 'hover-state-layer-opacity'),
47+
pressed-color: map.get($tokens, 'pressed-state-layer-color'),
48+
pressed-opacity: map.get($tokens, 'pressed-state-layer-opacity'),
6749
)
6850
);
6951
}
7052

7153
:host([disabled]) {
72-
opacity: map.get($list-item-tokens, 'disabled-opacity');
54+
opacity: map.get($tokens, 'disabled-opacity');
7355
pointer-events: none;
7456
}
7557

@@ -121,55 +103,52 @@
121103
md-item {
122104
border-radius: inherit;
123105
flex: 1;
124-
color: map.get($list-item-tokens, 'label-text-color');
125-
font-family: map.get($list-item-tokens, 'label-text-font');
126-
font-size: map.get($list-item-tokens, 'label-text-size');
127-
line-height: map.get($list-item-tokens, 'label-text-line-height');
128-
font-weight: map.get($list-item-tokens, 'label-text-weight');
129-
min-height: map.get($list-item-tokens, 'one-line-container-height');
130-
padding-top: map.get($list-item-tokens, 'top-space');
131-
padding-bottom: map.get($list-item-tokens, 'bottom-space');
132-
padding-inline-start: map.get($list-item-tokens, 'leading-space');
133-
padding-inline-end: map.get($list-item-tokens, 'trailing-space');
106+
color: map.get($tokens, 'label-text-color');
107+
font-family: map.get($tokens, 'label-text-font');
108+
font-size: map.get($tokens, 'label-text-size');
109+
line-height: map.get($tokens, 'label-text-line-height');
110+
font-weight: map.get($tokens, 'label-text-weight');
111+
min-height: map.get($tokens, 'one-line-container-height');
112+
padding-top: map.get($tokens, 'top-space');
113+
padding-bottom: map.get($tokens, 'bottom-space');
114+
padding-inline-start: map.get($tokens, 'leading-space');
115+
padding-inline-end: map.get($tokens, 'trailing-space');
134116
}
135117

136118
md-item[multiline] {
137-
min-height: map.get($list-item-tokens, 'two-line-container-height');
119+
min-height: map.get($tokens, 'two-line-container-height');
138120
}
139121

140122
[slot='supporting-text'] {
141-
color: map.get($list-item-tokens, 'supporting-text-color');
142-
font-family: map.get($list-item-tokens, 'supporting-text-font');
143-
font-size: map.get($list-item-tokens, 'supporting-text-size');
144-
line-height: map.get($list-item-tokens, 'supporting-text-line-height');
145-
font-weight: map.get($list-item-tokens, 'supporting-text-weight');
123+
color: map.get($tokens, 'supporting-text-color');
124+
font-family: map.get($tokens, 'supporting-text-font');
125+
font-size: map.get($tokens, 'supporting-text-size');
126+
line-height: map.get($tokens, 'supporting-text-line-height');
127+
font-weight: map.get($tokens, 'supporting-text-weight');
146128
}
147129

148130
[slot='trailing-supporting-text'] {
149-
color: map.get($list-item-tokens, 'trailing-supporting-text-color');
150-
font-family: map.get($list-item-tokens, 'trailing-supporting-text-font');
151-
font-size: map.get($list-item-tokens, 'trailing-supporting-text-size');
152-
line-height: map.get(
153-
$list-item-tokens,
154-
'trailing-supporting-text-line-height'
155-
);
156-
font-weight: map.get($list-item-tokens, 'trailing-supporting-text-weight');
131+
color: map.get($tokens, 'trailing-supporting-text-color');
132+
font-family: map.get($tokens, 'trailing-supporting-text-font');
133+
font-size: map.get($tokens, 'trailing-supporting-text-size');
134+
line-height: map.get($tokens, 'trailing-supporting-text-line-height');
135+
font-weight: map.get($tokens, 'trailing-supporting-text-weight');
157136
}
158137

159138
:is([slot='start'], [slot='end'])::slotted(*) {
160139
fill: currentColor;
161140
}
162141

163142
[slot='start'] {
164-
color: map.get($list-item-tokens, 'leading-icon-color');
143+
color: map.get($tokens, 'leading-icon-color');
165144
}
166145

167146
[slot='end'] {
168-
color: map.get($list-item-tokens, 'trailing-icon-color');
147+
color: map.get($tokens, 'trailing-icon-color');
169148
}
170149

171150
.list-item {
172-
background-color: map.get($list-item-tokens, 'container-color');
151+
background-color: map.get($tokens, 'container-color');
173152
}
174153

175154
.list-item.selected {

‎tokens/_index.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@
3636
@forward './md-comp-list-item' as md-comp-list-item-*;
3737
@forward './md-comp-menu' as md-comp-menu-*;
3838
@forward './md-comp-menu-item' as md-comp-menu-item-*;
39-
@forward './md-comp-menu-list-item' as md-comp-menu-list-item-*;
4039
@forward './md-comp-navigation-bar' as md-comp-navigation-bar-*;
4140
@forward './md-comp-navigation-drawer' as md-comp-navigation-drawer-*;
4241
@forward './md-comp-outlined-button' as md-comp-outlined-button-*;

‎tokens/_md-comp-list-item.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,6 @@ $supported-tokens: (
2020
// go/keep-sorted start
2121
'bottom-space',
2222
'disabled-opacity',
23-
'focus-state-layer-color',
24-
'focus-state-layer-opacity',
2523
'hover-state-layer-color',
2624
'hover-state-layer-opacity',
2725
'label-text-color',
@@ -74,6 +72,8 @@ $unsupported-tokens: (
7472
'dragged-trailing-icon-icon-color',
7573
'focus-label-text-color',
7674
'focus-leading-icon-icon-color',
75+
'focus-state-layer-color',
76+
'focus-state-layer-opacity',
7777
'focus-trailing-icon-icon-color',
7878
'hover-label-text-color',
7979
'hover-leading-icon-icon-color',

‎tokens/_md-comp-menu-item.scss‎

Lines changed: 63 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,48 @@
1010
// go/keep-sorted end
1111
// go/keep-sorted start
1212
@use './internal/validate';
13+
@use './md-comp-list-item';
1314
@use './md-sys-color';
1415
@use './md-sys-elevation';
1516
@use './md-sys-shape';
17+
@use './md-sys-state';
18+
@use './md-sys-typescale';
1619
@use './v0_192/md-comp-menu';
1720
// go/keep-sorted end
1821

1922
$supported-tokens: (
2023
// go/keep-sorted start
24+
'bottom-space',
2125
'container-color',
26+
'disabled-opacity',
27+
'hover-state-layer-color',
28+
'hover-state-layer-opacity',
29+
'label-text-color',
30+
'label-text-font',
31+
'label-text-line-height',
32+
'label-text-size',
33+
'label-text-weight',
34+
'leading-icon-color',
35+
'leading-space',
36+
'one-line-container-height',
37+
'pressed-state-layer-color',
38+
'pressed-state-layer-opacity',
2239
'selected-container-color',
2340
'selected-label-text-color',
41+
'supporting-text-color',
42+
'supporting-text-font',
43+
'supporting-text-line-height',
44+
'supporting-text-size',
45+
'supporting-text-weight',
46+
'top-space',
47+
'trailing-icon-color',
48+
'trailing-space',
49+
'trailing-supporting-text-color',
50+
'trailing-supporting-text-font',
51+
'trailing-supporting-text-line-height',
52+
'trailing-supporting-text-size',
53+
'trailing-supporting-text-weight',
54+
'two-line-container-height',
2455
// go/keep-sorted end
2556
);
2657

@@ -29,27 +60,52 @@ $unsupported-tokens: (
2960
'container-elevation',
3061
'container-shadow-color',
3162
'container-shape',
32-
'list-item-selected-with-leading-icon-trailing-icon-color',
33-
'menu-list-item-with-leading-icon-icon-color',
63+
'selected-with-leading-icon-trailing-icon-color',
64+
'with-leading-icon-icon-color',
3465
// go/keep-sorted end
3566
);
3667

3768
$_default: (
3869
'md-sys-color': md-sys-color.values-light(),
3970
'md-sys-elevation': md-sys-elevation.values(),
4071
'md-sys-shape': md-sys-shape.values(),
72+
'md-sys-state': md-sys-state.values(),
73+
'md-sys-typescale': md-sys-typescale.values(),
4174
);
4275

4376
@function values($deps: $_default, $exclude-hardcoded-values: false) {
77+
$tokens: md-comp-menu.values($deps);
78+
79+
// Like list items, menu items use their parent menu for their container
80+
// color. However, menu items can have a selected background color, so we
81+
// change its default unselected background color to transparent to inherit
82+
// from its parent menu.
83+
$tokens: map.set($tokens, 'container-color', transparent);
84+
4485
$tokens: validate.values(
45-
md-comp-menu.values($deps),
86+
$tokens,
4687
$supported-tokens: $supported-tokens,
4788
$unsupported-tokens: $unsupported-tokens,
48-
$renamed-tokens: (
49-
'list-item-selected-container-color': 'selected-container-color',
50-
'list-item-selected-label-text-color': 'selected-label-text-color',
51-
)
89+
$new-tokens: md-comp-list-item.values($deps),
90+
$renamed-tokens: _get-renamed-tokens($tokens)
5291
);
5392

5493
@return $tokens;
5594
}
95+
96+
// remove list-item prefix from tokens
97+
@function _get-renamed-tokens($tokens) {
98+
$keys: map.keys($tokens);
99+
$renamed-tokens: ();
100+
101+
@each $key in $keys {
102+
@each $prefix in ('list-item-', 'menu-list-item-') {
103+
@if string.index($key, $prefix) == 1 {
104+
$renamed-key: string.slice($key, string.length($prefix) + 1);
105+
$renamed-tokens: map.set($renamed-tokens, $key, $renamed-key);
106+
}
107+
}
108+
}
109+
110+
@return $renamed-tokens;
111+
}

0 commit comments

Comments
 (0)