Skip to content

Commit d030725

Browse files
crisbetocrisbeto
committed
fix(aria/menu): align output naming with styleguide
Removes the `on` prefixs from outputs in the menu to align it with the styleguide. Fixes #32727.
1 parent 31ff7f2 commit d030725

File tree

8 files changed

+46
-45
lines changed

8 files changed

+46
-45
lines changed

‎goldens/aria/menu/index.api.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export class Menu<V> {
1919
readonly expansionDelay: _angular_core.InputSignal<number>;
2020
readonly id: _angular_core.InputSignal<string>;
2121
readonly _items: Signal<MenuItem<V>[]>;
22-
onSelect: _angular_core.OutputEmitterRef<V>;
22+
readonly itemSelected: _angular_core.OutputEmitterRef<V>;
2323
readonly parent: _angular_core.WritableSignal<MenuTrigger<V> | MenuItem<V> | undefined>;
2424
readonly _pattern: MenuPattern<V>;
2525
readonly tabIndex: Signal<0 | -1>;
@@ -28,7 +28,7 @@ export class Menu<V> {
2828
readonly visible: Signal<boolean>;
2929
readonly wrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
3030
// (undocumented)
31-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Menu<any>, "[ngMenu]", ["ngMenu"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "expansionDelay": { "alias": "expansionDelay"; "required": false; "isSignal": true; }; }, { "onSelect": "onSelect"; }, ["_allItems"], never, true, [{ directive: typeof DeferredContentAware; inputs: { "preserveContent": "preserveContent"; }; outputs: {}; }]>;
31+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Menu<any>, "[ngMenu]", ["ngMenu"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "expansionDelay": { "alias": "expansionDelay"; "required": false; "isSignal": true; }; }, { "itemSelected": "itemSelected"; }, ["_allItems"], never, true, [{ directive: typeof DeferredContentAware; inputs: { "preserveContent": "preserveContent"; }; outputs: {}; }]>;
3232
// (undocumented)
3333
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Menu<any>, never>;
3434
}
@@ -42,15 +42,15 @@ export class MenuBar<V> {
4242
readonly element: HTMLElement;
4343
// (undocumented)
4444
readonly _items: SignalLike<MenuItem<V>[]>;
45-
onSelect: _angular_core.OutputEmitterRef<V>;
45+
readonly itemSelected: _angular_core.OutputEmitterRef<V>;
4646
readonly _pattern: MenuBarPattern<V>;
4747
readonly softDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
4848
readonly textDirection: _angular_core.WritableSignal<_angular_cdk_bidi.Direction>;
4949
readonly typeaheadDelay: _angular_core.InputSignal<number>;
5050
readonly values: _angular_core.ModelSignal<V[]>;
5151
readonly wrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
5252
// (undocumented)
53-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MenuBar<any>, "[ngMenuBar]", ["ngMenuBar"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; }, { "values": "valuesChange"; "onSelect": "onSelect"; }, ["_allItems"], never, true, never>;
53+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MenuBar<any>, "[ngMenuBar]", ["ngMenuBar"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; }, { "values": "valuesChange"; "itemSelected": "itemSelected"; }, ["_allItems"], never, true, never>;
5454
// (undocumented)
5555
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuBar<any>, never>;
5656
}

‎goldens/aria/private/index.api.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -497,7 +497,7 @@ export class ListboxPattern<V> {
497497
// @public
498498
export interface MenuBarInputs<V> extends ListInputs<MenuItemPattern<V>, V> {
499499
items: SignalLike<MenuItemPattern<V>[]>;
500-
onSelect?: (value: V) => void;
500+
itemSelected?: (value: V) => void;
501501
textDirection: SignalLike<'ltr' | 'rtl'>;
502502
}
503503

@@ -533,7 +533,7 @@ export interface MenuInputs<V> extends Omit<ListInputs<MenuItemPattern<V>, V>, '
533533
expansionDelay: SignalLike<number>;
534534
id: SignalLike<string>;
535535
items: SignalLike<MenuItemPattern<V>[]>;
536-
onSelect?: (value: V) => void;
536+
itemSelected?: (value: V) => void;
537537
parent: SignalLike<MenuTriggerPattern<V> | MenuItemPattern<V> | undefined>;
538538
textDirection: SignalLike<'ltr' | 'rtl'>;
539539
}

‎src/aria/menu/menu-bar.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export class MenuBar<V> {
107107
private readonly _itemPatterns = signal<any[]>([]);
108108

109109
/** A callback function triggered when a menu item is selected. */
110-
onSelect = output<V>();
110+
readonly itemSelected = output<V>();
111111

112112
constructor() {
113113
this._pattern = new MenuBarPattern({
@@ -118,7 +118,7 @@ export class MenuBar<V> {
118118
focusMode: () => 'roving',
119119
orientation: () => 'horizontal',
120120
selectionMode: () => 'explicit',
121-
onSelect: (value: V) => this.onSelect.emit(value),
121+
itemSelected: (value: V) => this.itemSelected.emit(value),
122122
activeItem: signal(undefined),
123123
element: computed(() => this._elementRef.nativeElement),
124124
});

‎src/aria/menu/menu-item.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,10 @@ import type {MenuBar} from './menu-bar';
2020
* or action a user can take. They can also act as triggers for sub-menus.
2121
*
2222
* ```html
23-
* <div ngMenuItem (onSelect)="doAction()">Action Item</div>
24-
*
25-
* <div ngMenuItem [submenu]="anotherMenu">Submenu Trigger</div>
23+
* <div ngMenu (itemSelected)="doAction()">
24+
* <div ngMenuItem >Action Item</div>
25+
* <div ngMenuItem [submenu]="anotherMenu">Submenu Trigger</div>
26+
* </div>
2627
* ```
2728
*
2829
* @developerPreview 21.0

‎src/aria/menu/menu.spec.ts‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -157,49 +157,49 @@ describe('Standalone Menu Pattern', () => {
157157

158158
it('should select an item on click', () => {
159159
const banana = getItem('Banana');
160-
spyOn(fixture.componentInstance, 'onSelect');
160+
spyOn(fixture.componentInstance, 'itemSelected');
161161

162162
click(banana!);
163-
expect(fixture.componentInstance.onSelect).toHaveBeenCalledWith('Banana');
163+
expect(fixture.componentInstance.itemSelected).toHaveBeenCalledWith('Banana');
164164
});
165165

166166
it('should select an item on enter', () => {
167167
const banana = getItem('Banana');
168-
spyOn(fixture.componentInstance, 'onSelect');
168+
spyOn(fixture.componentInstance, 'itemSelected');
169169

170170
keydown(document.activeElement!, 'ArrowDown'); // Move focus to Banana
171171
expect(document.activeElement).toBe(banana);
172172

173173
keydown(banana!, 'Enter');
174-
expect(fixture.componentInstance.onSelect).toHaveBeenCalledWith('Banana');
174+
expect(fixture.componentInstance.itemSelected).toHaveBeenCalledWith('Banana');
175175
});
176176

177177
it('should select an item on space', () => {
178178
const banana = getItem('Banana');
179-
spyOn(fixture.componentInstance, 'onSelect');
179+
spyOn(fixture.componentInstance, 'itemSelected');
180180

181181
keydown(document.activeElement!, 'ArrowDown'); // Move focus to Banana
182182
expect(document.activeElement).toBe(banana);
183183

184184
keydown(banana!, ' ');
185-
expect(fixture.componentInstance.onSelect).toHaveBeenCalledWith('Banana');
185+
expect(fixture.componentInstance.itemSelected).toHaveBeenCalledWith('Banana');
186186
});
187187

188188
it('should not select a disabled item', () => {
189189
const cherry = getItem('Cherry');
190-
spyOn(fixture.componentInstance, 'onSelect');
190+
spyOn(fixture.componentInstance, 'itemSelected');
191191

192192
click(cherry!);
193-
expect(fixture.componentInstance.onSelect).not.toHaveBeenCalled();
193+
expect(fixture.componentInstance.itemSelected).not.toHaveBeenCalled();
194194

195195
keydown(document.activeElement!, 'End');
196196
expect(document.activeElement).toBe(cherry);
197197

198198
keydown(cherry!, 'Enter');
199-
expect(fixture.componentInstance.onSelect).not.toHaveBeenCalled();
199+
expect(fixture.componentInstance.itemSelected).not.toHaveBeenCalled();
200200

201201
keydown(cherry!, ' ');
202-
expect(fixture.componentInstance.onSelect).not.toHaveBeenCalled();
202+
expect(fixture.componentInstance.itemSelected).not.toHaveBeenCalled();
203203
});
204204
});
205205

@@ -317,18 +317,18 @@ describe('Standalone Menu Pattern', () => {
317317
});
318318

319319
it('should close on selecting an item on click', () => {
320-
spyOn(fixture.componentInstance, 'onSelect');
320+
spyOn(fixture.componentInstance, 'itemSelected');
321321
click(getItem('Berries')!); // open submenu
322322
expect(isSubmenuExpanded()).toBe(true);
323323

324324
click(getItem('Blueberry')!);
325325

326-
expect(fixture.componentInstance.onSelect).toHaveBeenCalledWith('Blueberry');
326+
expect(fixture.componentInstance.itemSelected).toHaveBeenCalledWith('Blueberry');
327327
expect(isSubmenuExpanded()).toBe(false);
328328
});
329329

330330
it('should close on selecting an item on enter', () => {
331-
spyOn(fixture.componentInstance, 'onSelect');
331+
spyOn(fixture.componentInstance, 'itemSelected');
332332
const apple = getItem('Apple');
333333
const banana = getItem('Banana');
334334
const berries = getItem('Berries');
@@ -342,12 +342,12 @@ describe('Standalone Menu Pattern', () => {
342342

343343
keydown(blueberry!, 'Enter');
344344

345-
expect(fixture.componentInstance.onSelect).toHaveBeenCalledWith('Blueberry');
345+
expect(fixture.componentInstance.itemSelected).toHaveBeenCalledWith('Blueberry');
346346
expect(isSubmenuExpanded()).toBe(false);
347347
});
348348

349349
it('should close on selecting an item on space', () => {
350-
spyOn(fixture.componentInstance, 'onSelect');
350+
spyOn(fixture.componentInstance, 'itemSelected');
351351
const apple = getItem('Apple');
352352
const banana = getItem('Banana');
353353
const berries = getItem('Berries');
@@ -361,7 +361,7 @@ describe('Standalone Menu Pattern', () => {
361361

362362
keydown(blueberry!, ' ');
363363

364-
expect(fixture.componentInstance.onSelect).toHaveBeenCalledWith('Blueberry');
364+
expect(fixture.componentInstance.itemSelected).toHaveBeenCalledWith('Blueberry');
365365
expect(isSubmenuExpanded()).toBe(false);
366366
});
367367

@@ -959,7 +959,7 @@ describe('Menu Bar Pattern', () => {
959959

960960
@Component({
961961
template: `
962-
<div ngMenu [expansionDelay]="0" (onSelect)="onSelect($event)">
962+
<div ngMenu [expansionDelay]="0" (itemSelected)="itemSelected($event)">
963963
<ng-template ngMenuContent>
964964
<div ngMenuItem value='Apple' searchTerm='Apple'>Apple</div>
965965
<div ngMenuItem value='Banana' searchTerm='Banana'>Banana</div>
@@ -980,7 +980,7 @@ describe('Menu Bar Pattern', () => {
980980
imports: [Menu, MenuItem, MenuContent],
981981
})
982982
class StandaloneMenuExample {
983-
onSelect(value: string) {}
983+
itemSelected(value: string) {}
984984
}
985985

986986
@Component({

‎src/aria/menu/menu.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ export class Menu<V> {
134134
readonly tabIndex = computed(() => this._pattern.tabIndex());
135135

136136
/** A callback function triggered when a menu item is selected. */
137-
onSelect = output<V>();
137+
readonly itemSelected = output<V>();
138138

139139
/** The delay in milliseconds before expanding sub-menus on hover. */
140140
readonly expansionDelay = input<number>(100); // Arbitrarily chosen.
@@ -151,7 +151,7 @@ export class Menu<V> {
151151
selectionMode: () => 'explicit',
152152
activeItem: signal(undefined),
153153
element: computed(() => this._elementRef.nativeElement),
154-
onSelect: (value: V) => this.onSelect.emit(value),
154+
itemSelected: (value: V) => this.itemSelected.emit(value),
155155
});
156156

157157
afterRenderEffect(() => {

‎src/aria/private/menu/menu.spec.ts‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -254,43 +254,43 @@ describe('Standalone Menu Pattern', () => {
254254
describe('Selection', () => {
255255
it('should select an item on click', () => {
256256
const items = menu.inputs.items();
257-
menu.inputs.onSelect = jasmine.createSpy('onSelect');
257+
menu.inputs.itemSelected = jasmine.createSpy('itemSelected');
258258
menu.onClick(clickMenuItem(items, 1));
259-
expect(menu.inputs.onSelect).toHaveBeenCalledWith('b');
259+
expect(menu.inputs.itemSelected).toHaveBeenCalledWith('b');
260260
});
261261

262262
it('should select an item on enter', () => {
263263
const items = menu.inputs.items();
264264
menu.inputs.activeItem.set(items[1]);
265-
menu.inputs.onSelect = jasmine.createSpy('onSelect');
265+
menu.inputs.itemSelected = jasmine.createSpy('itemSelected');
266266

267267
menu.onKeydown(enter());
268-
expect(menu.inputs.onSelect).toHaveBeenCalledWith('b');
268+
expect(menu.inputs.itemSelected).toHaveBeenCalledWith('b');
269269
});
270270

271271
it('should select an item on space', () => {
272272
const items = menu.inputs.items();
273273
menu.inputs.activeItem.set(items[1]);
274-
menu.inputs.onSelect = jasmine.createSpy('onSelect');
274+
menu.inputs.itemSelected = jasmine.createSpy('itemSelected');
275275

276276
menu.onKeydown(space());
277-
expect(menu.inputs.onSelect).toHaveBeenCalledWith('b');
277+
expect(menu.inputs.itemSelected).toHaveBeenCalledWith('b');
278278
});
279279

280280
it('should not select a disabled item', () => {
281281
const items = menu.inputs.items() as TestMenuItem[];
282282
items[1].inputs.disabled.set(true);
283283
menu.inputs.activeItem.set(items[1]);
284-
menu.inputs.onSelect = jasmine.createSpy('onSelect');
284+
menu.inputs.itemSelected = jasmine.createSpy('itemSelected');
285285

286286
menu.onClick(clickMenuItem(items, 1));
287-
expect(menu.inputs.onSelect).not.toHaveBeenCalled();
287+
expect(menu.inputs.itemSelected).not.toHaveBeenCalled();
288288

289289
menu.onKeydown(enter());
290-
expect(menu.inputs.onSelect).not.toHaveBeenCalled();
290+
expect(menu.inputs.itemSelected).not.toHaveBeenCalled();
291291

292292
menu.onKeydown(space());
293-
expect(menu.inputs.onSelect).not.toHaveBeenCalled();
293+
expect(menu.inputs.itemSelected).not.toHaveBeenCalled();
294294
});
295295
});
296296

‎src/aria/private/menu/menu.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export interface MenuBarInputs<V> extends ListInputs<MenuItemPattern<V>, V> {
1616
items: SignalLike<MenuItemPattern<V>[]>;
1717

1818
/** Callback function triggered when a menu item is selected. */
19-
onSelect?: (value: V) => void;
19+
itemSelected?: (value: V) => void;
2020

2121
/** The text direction of the menu bar. */
2222
textDirection: SignalLike<'ltr' | 'rtl'>;
@@ -34,7 +34,7 @@ export interface MenuInputs<V> extends Omit<ListInputs<MenuItemPattern<V>, V>, '
3434
parent: SignalLike<MenuTriggerPattern<V> | MenuItemPattern<V> | undefined>;
3535

3636
/** Callback function triggered when a menu item is selected. */
37-
onSelect?: (value: V) => void;
37+
itemSelected?: (value: V) => void;
3838

3939
/** The text direction of the menu bar. */
4040
textDirection: SignalLike<'ltr' | 'rtl'>;
@@ -370,12 +370,12 @@ export class MenuPattern<V> {
370370

371371
if (!item.submenu() && isMenuBar) {
372372
root.close();
373-
root?.inputs.onSelect?.(item.value());
373+
root?.inputs.itemSelected?.(item.value());
374374
}
375375

376376
if (!item.submenu() && isMenu) {
377377
root.inputs.activeItem()?.close({refocus: true});
378-
root?.inputs.onSelect?.(item.value());
378+
root?.inputs.itemSelected?.(item.value());
379379
}
380380
}
381381
}

0 commit comments

Comments
 (0)