Skip to content

Commit 6fb13ca

Browse files
hahaym6164hahaym6164
committed
adding feature : feat(MENU): Native material way to maintain MatMenuTrigger pressed state angular#31014
angular#31014, by adding css to class 'stay-open-while-press' and receive attributes input [pressedWhileOpen]="true" on triiger button
1 parent ee624c9 commit 6fb13ca

File tree

6 files changed

+90
-61
lines changed

6 files changed

+90
-61
lines changed

‎pnpm-lock.yaml

Lines changed: 4 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/dev-app/menu/menu-demo.html

Lines changed: 13 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,8 @@
22
<div class="demo-menu-section">
33
<p>You clicked on: {{ selected }}</p>
44

5-
<mat-toolbar>
6-
<button matIconButton [matMenuTriggerFor]="menu" aria-label="Open basic menu">
7-
<mat-icon>more_vert</mat-icon>
8-
</button>
9-
</mat-toolbar>
10-
5+
<button mat-button [pressedWhileOpen]="true" [matMenuTriggerFor]="menu">Menu</button>
6+
<!-- <button mat-button [matMenuTriggerFor]="menu">Menu</button> -->
117
<mat-menu #menu="matMenu">
128
@for (item of items; track item) {
139
<button mat-menu-item (click)="select(item.text)" [disabled]="item.disabled">
@@ -20,7 +16,12 @@
2016
<p>Menu with divider</p>
2117

2218
<mat-toolbar>
23-
<button matIconButton [matMenuTriggerFor]="divider" aria-label="Open basic menu">
19+
<button
20+
matIconButton
21+
[pressedWhileOpen]="true"
22+
[matMenuTriggerFor]="divider"
23+
aria-label="Open basic menu"
24+
>
2425
<mat-icon>more_vert</mat-icon>
2526
</button>
2627
</mat-toolbar>
@@ -38,7 +39,7 @@
3839
<p>Nested menu</p>
3940

4041
<mat-toolbar>
41-
<button matIconButton [matMenuTriggerFor]="animals">
42+
<button matIconButton [pressedWhileOpen]="true" [matMenuTriggerFor]="animals">
4243
<mat-icon>more_vert</mat-icon>
4344
</button>
4445
</mat-toolbar>
@@ -105,9 +106,7 @@
105106
</mat-menu>
106107
</div>
107108
<div class="demo-menu-section">
108-
<p>
109-
Position x: before
110-
</p>
109+
<p>Position x: before</p>
111110
<mat-toolbar class="demo-end-icon">
112111
<button matIconButton [matMenuTriggerFor]="posXMenu" aria-label="Open x-positioned menu">
113112
<mat-icon>more_vert</mat-icon>
@@ -124,9 +123,7 @@
124123
</mat-menu>
125124
</div>
126125
<div class="demo-menu-section">
127-
<p>
128-
Position y: above
129-
</p>
126+
<p>Position y: above</p>
130127
<mat-toolbar>
131128
<button matIconButton [matMenuTriggerFor]="posYMenu" aria-label="Open y-positioned menu">
132129
<mat-icon>more_vert</mat-icon>
@@ -158,9 +155,7 @@
158155
</mat-menu>
159156
</div>
160157
<div class="demo-menu-section">
161-
<p>
162-
Position x: before, overlapTrigger: true
163-
</p>
158+
<p>Position x: before, overlapTrigger: true</p>
164159
<mat-toolbar class="demo-end-icon">
165160
<button matIconButton [mat-menu-trigger-for]="posXMenuOverlay">
166161
<mat-icon>more_vert</mat-icon>
@@ -177,9 +172,7 @@
177172
</mat-menu>
178173
</div>
179174
<div class="demo-menu-section">
180-
<p>
181-
Position y: above, overlapTrigger: true
182-
</p>
175+
<p>Position y: above, overlapTrigger: true</p>
183176
<mat-toolbar>
184177
<button matIconButton [mat-menu-trigger-for]="posYMenuOverlay">
185178
<mat-icon>more_vert</mat-icon>

‎src/material/button/_button-base.scss

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,9 +58,12 @@
5858
}
5959

6060
@mixin mat-private-button-ripple(
61-
$ripple-color-token, $state-layer-color-token, $disabled-state-layer-color-token,
62-
$hover-state-layer-opacity-token, $focus-state-layer-opacity-token,
63-
$pressed-state-layer-opacity-token
61+
$ripple-color-token,
62+
$state-layer-color-token,
63+
$disabled-state-layer-color-token,
64+
$hover-state-layer-opacity-token,
65+
$focus-state-layer-opacity-token,
66+
$pressed-state-layer-opacity-token
6467
) {
6568
.mat-ripple-element {
6669
background-color: token-utils.slot($ripple-color-token);
@@ -131,7 +134,10 @@
131134
}
132135

133136
@mixin mat-private-button-horizontal-layout(
134-
$icon-spacing-token, $icon-offset-token, $with-icon-horizontal-padding-token: null) {
137+
$icon-spacing-token,
138+
$icon-offset-token,
139+
$with-icon-horizontal-padding-token: null
140+
) {
135141
$icon-spacing: token-utils.slot($icon-spacing-token, true);
136142
$icon-offset: token-utils.slot($icon-offset-token, true);
137143

‎src/material/button/button.scss

Lines changed: 61 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,8 @@
6363
text-transform: token-utils.slot(text-label-text-transform);
6464
font-weight: token-utils.slot(text-label-text-weight);
6565

66-
&, .mdc-button__ripple {
66+
&,
67+
.mdc-button__ripple {
6768
border-radius: token-utils.slot(text-container-shape);
6869
}
6970

@@ -78,11 +79,18 @@
7879
}
7980

8081
@include button-base.mat-private-button-horizontal-layout(
81-
text-icon-spacing, text-icon-offset, text-with-icon-horizontal-padding);
82+
text-icon-spacing,
83+
text-icon-offset,
84+
text-with-icon-horizontal-padding
85+
);
8286
@include button-base.mat-private-button-ripple(
83-
text-ripple-color, text-state-layer-color, text-disabled-state-layer-color,
84-
text-hover-state-layer-opacity, text-focus-state-layer-opacity,
85-
text-pressed-state-layer-opacity);
87+
text-ripple-color,
88+
text-state-layer-color,
89+
text-disabled-state-layer-color,
90+
text-hover-state-layer-opacity,
91+
text-focus-state-layer-opacity,
92+
text-pressed-state-layer-opacity
93+
);
8694
@include button-base.mat-private-button-touch-target(false, text-touch-target-display);
8795
}
8896

@@ -97,19 +105,26 @@
97105
padding: 0 #{token-utils.slot(filled-horizontal-padding, true)};
98106

99107
@include button-base.mat-private-button-horizontal-layout(
100-
filled-icon-spacing, filled-icon-offset);
108+
filled-icon-spacing,
109+
filled-icon-offset
110+
);
101111
@include button-base.mat-private-button-ripple(
102-
filled-ripple-color, filled-state-layer-color, filled-disabled-state-layer-color,
103-
filled-hover-state-layer-opacity, filled-focus-state-layer-opacity,
104-
filled-pressed-state-layer-opacity);
112+
filled-ripple-color,
113+
filled-state-layer-color,
114+
filled-disabled-state-layer-color,
115+
filled-hover-state-layer-opacity,
116+
filled-focus-state-layer-opacity,
117+
filled-pressed-state-layer-opacity
118+
);
105119
@include button-base.mat-private-button-touch-target(false, filled-touch-target-display);
106120

107121
&:not(:disabled) {
108122
color: token-utils.slot(filled-label-text-color);
109123
background-color: token-utils.slot(filled-container-color);
110124
}
111125

112-
&, .mdc-button__ripple {
126+
&,
127+
.mdc-button__ripple {
113128
border-radius: token-utils.slot(filled-container-shape);
114129
}
115130

@@ -133,19 +148,26 @@
133148
padding: 0 #{token-utils.slot(protected-horizontal-padding, true)};
134149

135150
@include button-base.mat-private-button-horizontal-layout(
136-
protected-icon-spacing, protected-icon-offset);
151+
protected-icon-spacing,
152+
protected-icon-offset
153+
);
137154
@include button-base.mat-private-button-ripple(
138-
protected-ripple-color, protected-state-layer-color, protected-disabled-state-layer-color,
139-
protected-hover-state-layer-opacity, protected-focus-state-layer-opacity,
140-
protected-pressed-state-layer-opacity);
155+
protected-ripple-color,
156+
protected-state-layer-color,
157+
protected-disabled-state-layer-color,
158+
protected-hover-state-layer-opacity,
159+
protected-focus-state-layer-opacity,
160+
protected-pressed-state-layer-opacity
161+
);
141162
@include button-base.mat-private-button-touch-target(false, protected-touch-target-display);
142163

143164
&:not(:disabled) {
144165
color: token-utils.slot(protected-label-text-color);
145166
background-color: token-utils.slot(protected-container-color);
146167
}
147168

148-
&, .mdc-button__ripple {
169+
&,
170+
.mdc-button__ripple {
149171
border-radius: token-utils.slot(protected-container-shape);
150172
}
151173

@@ -157,7 +179,8 @@
157179
box-shadow: token-utils.slot(protected-focus-container-elevation-shadow);
158180
}
159181

160-
&:active, &:focus:active {
182+
&:active,
183+
&:focus:active {
161184
box-shadow: token-utils.slot(protected-pressed-container-elevation-shadow);
162185
}
163186

@@ -187,11 +210,17 @@
187210
padding: 0 #{token-utils.slot(outlined-horizontal-padding, true)};
188211

189212
@include button-base.mat-private-button-horizontal-layout(
190-
outlined-icon-spacing, outlined-icon-offset);
213+
outlined-icon-spacing,
214+
outlined-icon-offset
215+
);
191216
@include button-base.mat-private-button-ripple(
192-
outlined-ripple-color, outlined-state-layer-color, outlined-disabled-state-layer-color,
193-
outlined-hover-state-layer-opacity, outlined-focus-state-layer-opacity,
194-
outlined-pressed-state-layer-opacity);
217+
outlined-ripple-color,
218+
outlined-state-layer-color,
219+
outlined-disabled-state-layer-color,
220+
outlined-hover-state-layer-opacity,
221+
outlined-focus-state-layer-opacity,
222+
outlined-pressed-state-layer-opacity
223+
);
195224
@include button-base.mat-private-button-touch-target(false, outlined-touch-target-display);
196225

197226
&:not(:disabled) {
@@ -222,7 +251,8 @@
222251
background-color: token-utils.slot(tonal-container-color);
223252
}
224253

225-
&, .mdc-button__ripple {
254+
&,
255+
.mdc-button__ripple {
226256
border-radius: token-utils.slot(tonal-container-shape);
227257
}
228258

@@ -234,11 +264,17 @@
234264
}
235265

236266
@include button-base.mat-private-button-horizontal-layout(
237-
tonal-icon-spacing, tonal-icon-offset);
267+
tonal-icon-spacing,
268+
tonal-icon-offset
269+
);
238270
@include button-base.mat-private-button-ripple(
239-
tonal-ripple-color, tonal-state-layer-color, tonal-disabled-state-layer-color,
240-
tonal-hover-state-layer-opacity, tonal-focus-state-layer-opacity,
241-
tonal-pressed-state-layer-opacity);
271+
tonal-ripple-color,
272+
tonal-state-layer-color,
273+
tonal-disabled-state-layer-color,
274+
tonal-hover-state-layer-opacity,
275+
tonal-focus-state-layer-opacity,
276+
tonal-pressed-state-layer-opacity
277+
);
242278
@include button-base.mat-private-button-touch-target(false, tonal-touch-target-display);
243279
}
244280
}

‎src/material/menu/menu.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@
1414
(animationcancel)="_onAnimationDone($event.animationName)"
1515
[attr.aria-label]="ariaLabel || null"
1616
[attr.aria-labelledby]="ariaLabelledby || null"
17-
[attr.aria-describedby]="ariaDescribedby || null">
17+
[attr.aria-describedby]="ariaDescribedby || null"
18+
>
1819
<div class="mat-mdc-menu-content">
1920
<ng-content></ng-content>
2021
</div>

‎src/material/menu/menu.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,6 @@ export class MatMenu implements AfterContentInit, MatMenuPanel<MatMenuItem>, OnI
168168

169169
/** aria-describedby for the menu panel. */
170170
@Input('aria-describedby') ariaDescribedby: string;
171-
172171
/** Position of the menu in the X axis. */
173172
@Input()
174173
get xPosition(): MenuPositionX {
@@ -540,7 +539,6 @@ export class MatMenu implements AfterContentInit, MatMenuPanel<MatMenuItem>, OnI
540539
// the items and walking up the DOM.
541540
menuPanel = this._directDescendantItems.first!._getHostElement().closest('[role="menu"]');
542541
}
543-
544542
return menuPanel;
545543
}
546544
}

0 commit comments

Comments
 (0)