Skip to content

Commit e8bfb86

Browse files
amysortoamysorto
authored
fix(material/menu): Update token values and styles for M3 (#28470)
1 parent 3f08925 commit e8bfb86

File tree

4 files changed

+67
-28
lines changed

4 files changed

+67
-28
lines changed

‎src/material-experimental/theming/_custom-tokens.scss

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -856,9 +856,13 @@
856856
@return mat.private-merge-all(
857857
_generate-typography-tokens($systems, item-label-text, label-large),
858858
(
859-
container-shape: _hardcode(4px, $exclude-hardcoded),
859+
container-shape: map.get($systems, md-sys-shape, corner-extra-small),
860+
divider-color: map.get($systems, md-sys-color, surface-variant),
861+
divider-bottom-spacing: _hardcode(8px, $exclude-hardcoded),
862+
divider-top-spacing: _hardcode(8px, $exclude-hardcoded),
860863
item-label-text-color: map.get($systems, md-sys-color, on-surface),
861864
item-icon-color: map.get($systems, md-sys-color, on-surface-variant),
865+
item-icon-size: _hardcode(24px, $exclude-hardcoded),
862866
item-hover-state-layer-color: mat.private-safe-color-change(
863867
map.get($systems, md-sys-color, on-surface),
864868
$alpha: map.get($systems, md-sys-state, hover-state-layer-opacity)
@@ -867,6 +871,11 @@
867871
map.get($systems, md-sys-color, on-surface),
868872
$alpha: map.get($systems, md-sys-state, focus-state-layer-opacity)
869873
),
874+
item-spacing: _hardcode(12px, $exclude-hardcoded),
875+
item-leading-spacing: _hardcode(12px, $exclude-hardcoded),
876+
item-trailing-spacing: _hardcode(12px, $exclude-hardcoded),
877+
item-with-icon-leading-spacing: _hardcode(12px, $exclude-hardcoded),
878+
item-with-icon-trailing-spacing: _hardcode(12px, $exclude-hardcoded),
870879
container-color: map.get($systems, md-sys-color, surface-container),
871880
)
872881
);

‎src/material/core/style/_menu-common.scss

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -59,29 +59,16 @@ $icon-margin: 16px !default;
5959
}
6060
}
6161

62-
@mixin item-submenu-trigger($side-padding) {
63-
// Increase the side padding to prevent the indicator from overlapping the text.
64-
padding-right: $side-padding * 2;
65-
66-
[dir='rtl'] & {
67-
padding-right: $side-padding;
68-
padding-left: $side-padding * 2;
69-
}
70-
}
71-
72-
@mixin item-submenu-icon($side-padding) {
73-
position: absolute;
74-
top: 50%;
75-
right: $side-padding;
76-
transform: translateY(-50%);
77-
width: 5px;
62+
@mixin item-submenu-icon($item-spacing, $icon-size) {
63+
width: $icon-size;
7864
height: 10px;
7965
fill: currentColor;
66+
padding-left: $item-spacing;
8067

8168
[dir='rtl'] & {
8269
right: auto;
83-
left: $side-padding;
84-
transform: translateY(-50%) scaleX(-1);
70+
padding-right: $item-spacing;
71+
padding-left: 0;
8572
}
8673

8774
// Fix for Chromium-based browsers blending in the `currentColor` with the background.

‎src/material/core/tokens/m2/mat/_menu.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,14 @@ $prefix: (mat, menu);
1010
@function get-unthemable-tokens() {
1111
@return (
1212
container-shape: 4px,
13+
divider-bottom-spacing: 0,
14+
divider-top-spacing: 0,
15+
item-spacing: 16px,
16+
item-icon-size: 24px,
17+
item-leading-spacing: 16px,
18+
item-trailing-spacing: 16px,
19+
item-with-icon-leading-spacing: 16px,
20+
item-with-icon-trailing-spacing: 16px,
1321
);
1422
}
1523

@@ -26,6 +34,7 @@ $prefix: (mat, menu);
2634
item-hover-state-layer-color: $active-state-layer-color,
2735
item-focus-state-layer-color: $active-state-layer-color,
2836
container-color: inspection.get-theme-color($theme, background, card),
37+
divider-color: inspection.get-theme-color($theme, foreground, divider),
2938
);
3039
}
3140

‎src/material/menu/menu.scss

Lines changed: 43 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ mat-menu {
2020
&,
2121
.mat-mdc-menu-item .mat-mdc-menu-item-text {
2222
@include mdc-typography.smooth-font();
23+
flex: 1;
2324
white-space: normal;
2425

2526
@include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) {
@@ -64,11 +65,37 @@ mat-menu {
6465
}
6566
}
6667

68+
.mat-divider {
69+
// Use margin instead of padding since divider uses border-top for line
70+
@include token-utils.use-tokens(
71+
tokens-mat-menu.$prefix,
72+
tokens-mat-menu.get-token-slots()
73+
) {
74+
color: var(#{token-utils.get-token-variable(divider-color)});
75+
margin-bottom: var(#{token-utils.get-token-variable(divider-bottom-spacing)});
76+
margin-top: var(#{token-utils.get-token-variable(divider-top-spacing)});
77+
}
78+
}
79+
6780
.mat-mdc-menu-item {
6881
@include mdc-helpers.disable-mdc-fallback-declarations {
6982
@include mdc-list-mixins.item-base;
70-
@include mdc-list-mixins.item-spacing(
71-
mdc-list-variables.$side-padding, $query: mdc-helpers.$mdc-base-styles-query);
83+
@include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) {
84+
@include mdc-list-mixins.item-spacing(
85+
var(#{token-utils.get-token-variable(item-leading-spacing)}),
86+
var(#{token-utils.get-token-variable(item-trailing-spacing)}),
87+
$query: mdc-helpers.$mdc-base-styles-query
88+
);
89+
90+
// stylelint-disable-next-line selector-class-pattern
91+
&:has(.material-icons, mat-icon, [matButtonIcon]) {
92+
@include mdc-list-mixins.item-spacing(
93+
var(#{token-utils.get-token-variable(item-with-icon-leading-spacing)}),
94+
var(#{token-utils.get-token-variable(item-with-icon-trailing-spacing)}),
95+
$query: mdc-helpers.$mdc-base-styles-query
96+
);
97+
}
98+
}
7299
}
73100

74101
// MDC's menu items are `<li>` nodes which don't need resets, however ours
@@ -129,22 +156,24 @@ mat-menu {
129156

130157
.mat-icon {
131158
flex-shrink: 0;
132-
margin-right: mdc-list-variables.$side-padding;
159+
@include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) {
160+
margin-right: var(#{token-utils.get-token-variable(item-spacing)});
161+
height: var(#{token-utils.get-token-variable(item-icon-size)});
162+
width: var(#{token-utils.get-token-variable(item-icon-size)});
163+
}
133164
}
134165

135166
[dir='rtl'] & {
136167
text-align: right;
137168

138169
.mat-icon {
139170
margin-right: 0;
140-
margin-left: mdc-list-variables.$side-padding;
171+
@include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) {
172+
margin-left: var(#{token-utils.get-token-variable(item-spacing)});
173+
}
141174
}
142175
}
143176

144-
&.mat-mdc-menu-item-submenu-trigger {
145-
@include menu-common.item-submenu-trigger(mdc-list-variables.$side-padding);
146-
}
147-
148177
&:not([disabled]) {
149178
@include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) {
150179
&:hover {
@@ -169,7 +198,12 @@ mat-menu {
169198
}
170199

171200
.mat-mdc-menu-submenu-icon {
172-
@include menu-common.item-submenu-icon(mdc-list-variables.$side-padding);
201+
@include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) {
202+
@include menu-common.item-submenu-icon(
203+
var(#{token-utils.get-token-variable(item-spacing)}),
204+
var(#{token-utils.get-token-variable(item-icon-size)})
205+
);
206+
}
173207
}
174208

175209
// Increase specificity because ripple styles are part of the `mat-core` mixin and can

0 commit comments

Comments
 (0)