Skip to content

feat(cdk/menu): move experimental CDK menu into stable #24826

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 23, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .github/CODEOWNERS
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@
/src/cdk/drag-drop/** @crisbeto
/src/cdk/keycodes/** @andrewseguin
/src/cdk/layout/** @andrewseguin
/src/cdk/menu/** @mmalerba @crisbeto
/src/cdk/observers/** @andrewseguin @crisbeto
/src/cdk/overlay/** @jelbourn @crisbeto
/src/cdk/platform/** @andrewseguin @devversion
Expand Down Expand Up @@ -132,7 +133,6 @@
/src/cdk-experimental/* @andrewseguin
/src/cdk-experimental/column-resize/** @andrewseguin
/src/cdk-experimental/combobox/** @jelbourn
/src/cdk-experimental/menu/** @jelbourn
/src/cdk-experimental/popover-edit/** @andrewseguin
/src/cdk-experimental/scrolling/** @mmalerba
/src/cdk-experimental/table-scroll-container/** @andrewseguin
Expand All @@ -156,7 +156,6 @@
/src/dev-app/cdk-dialog/** @crisbeto
/src/dev-app/cdk-experimental-combobox/** @jelbourn
/src/dev-app/cdk-experimental-listbox/** @jelbourn
/src/dev-app/cdk-experimental-menu/** @jelbourn
/src/dev-app/checkbox/** @jelbourn @devversion
/src/dev-app/chips/** @andrewseguin
/src/dev-app/clipboard/** @andrewseguin
Expand All @@ -178,6 +177,7 @@
/src/dev-app/icon/** @andrewseguin
/src/dev-app/input/** @mmalerba
/src/dev-app/layout/** @andrewseguin
/src/dev-app/cdk-menu/** @mmalerba @crisbeto
/src/dev-app/input-modality/** @jelbourn
/src/dev-app/list/** @andrewseguin @crisbeto @devversion
/src/dev-app/live-announcer/** @jelbourn
Expand Down
2 changes: 1 addition & 1 deletion .ng-dev/commit-message.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ export const commitMessage: CommitMessageConfig = {
'cdk-experimental/column-resize',
'cdk-experimental/combobox',
'cdk-experimental/listbox',
'cdk-experimental/menu',
'cdk-experimental/popover-edit',
'cdk-experimental/scrolling',
'cdk-experimental/selection',
Expand All @@ -27,6 +26,7 @@ export const commitMessage: CommitMessageConfig = {
'cdk/drag-drop',
'cdk/keycodes',
'cdk/layout',
'cdk/menu',
'cdk/observers',
'cdk/overlay',
'cdk/platform',
Expand Down
1 change: 0 additions & 1 deletion src/cdk-experimental/config.bzl
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
CDK_EXPERIMENTAL_ENTRYPOINTS = [
"column-resize",
"combobox",
"menu",
"listbox",
"popover-edit",
"scrolling",
Expand Down
1 change: 1 addition & 0 deletions src/cdk/config.bzl
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ CDK_ENTRYPOINTS = [
"drag-drop",
"keycodes",
"layout",
"menu",
"observers",
"overlay",
"platform",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
load(
"//tools:defaults.bzl",
"markdown_to_html",
"ng_module",
"ng_test_library",
"ng_web_test_suite",
)

package(default_visibility = ["//visibility:public"])

Expand Down Expand Up @@ -41,3 +47,13 @@ ng_web_test_suite(
name = "unit_tests",
deps = [":unit_test_sources"],
)

markdown_to_html(
name = "overview",
srcs = [":menu.md"],
)

filegroup(
name = "source-files",
srcs = glob(["**/*.ts"]),
)
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {CdkMenuModule} from './menu-module';
import {TestBed, waitForAsync, ComponentFixture} from '@angular/core/testing';
import {CdkMenu} from './menu';
import {CdkContextMenuTrigger} from './context-menu-trigger';
import {dispatchKeyboardEvent, dispatchMouseEvent} from '../../cdk/testing/private';
import {dispatchKeyboardEvent, dispatchMouseEvent} from '@angular/cdk/testing/private';
import {By} from '@angular/platform-browser';
import {CdkMenuItem} from './menu-item';
import {CdkMenuTrigger} from './menu-trigger';
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {CdkMenuModule} from './menu-module';
import {CdkMenuItemCheckbox} from './menu-item-checkbox';
import {CDK_MENU} from './menu-interface';
import {CdkMenu} from './menu';
import {MENU_STACK, MenuStack} from '@angular/cdk-experimental/menu/menu-stack';
import {MENU_STACK, MenuStack} from './menu-stack';

describe('MenuItemCheckbox', () => {
let fixture: ComponentFixture<SingleCheckboxButton>;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {CdkMenuModule} from './menu-module';
import {CdkMenuItemRadio} from './menu-item-radio';
import {CDK_MENU} from './menu-interface';
import {CdkMenu} from './menu';
import {MENU_STACK, MenuStack} from '@angular/cdk-experimental/menu/menu-stack';
import {MENU_STACK, MenuStack} from './menu-stack';

describe('MenuItemRadio', () => {
let fixture: ComponentFixture<SimpleRadioButton>;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {CdkMenuModule} from './menu-module';
import {CdkMenuItem} from './menu-item';
import {CDK_MENU} from './menu-interface';
import {CdkMenu} from './menu';
import {MENU_STACK, MenuStack} from '@angular/cdk-experimental/menu/menu-stack';
import {MENU_STACK, MenuStack} from './menu-stack';

describe('MenuItem', () => {
describe('with no complex inner elements', () => {
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
23 changes: 11 additions & 12 deletions src/cdk-experimental/menu/menu.md → src/cdk/menu/menu.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
The `@angular/cdk-experimental/menu` module provides directives to help create custom menu
The `@angular/cdk/menu` module provides directives to help create custom menu
interactions based on the [WAI ARIA specification][aria].

By using `@angular/cdk-experimental/menu` you get all of the expected behaviors for an accessible
By using `@angular/cdk/menu` you get all of the expected behaviors for an accessible
experience, including bidi layout support, keyboard interaction, and focus management. All
directives apply their associated ARIA roles to their host element.

### Supported ARIA Roles

The directives in `@angular/cdk-experimental/menu` set the appropriate roles on their host element.
The directives in `@angular/cdk/menu` set the appropriate roles on their host element.

| Directive | ARIA Role |
| ------------------- | ---------------- |
Expand Down Expand Up @@ -196,9 +196,9 @@ Finally, you can provide state for each item using the `checked` attribute.

### Smart Menu Aim

`@angular/cdk-experimental/menu` intelligently predicts when a user intends to navigate to an open
submenu and prevent premature closeouts. This functionality prevents users from having to hunt
through the open menus in a maze-like fashion to reach their destination.
`@angular/cdk/menu` intelligently predicts when a user intends to navigate to an open submenu and
prevent premature closeouts. This functionality prevents users from having to hunt through the open
menus in a maze-like fashion to reach their destination.

![menu aim diagram][diagram]

Expand All @@ -214,12 +214,11 @@ detect this intention and will trigger the next menu.

### Accessibility

The set of directives defined in `@angular/cdk-experimental/menu` follow accessibility best
practices as defined in the [ARIA spec][menubar]. Specifically, the menus are aware of left-to-right
and right-to-left layouts and opened appropriately. You should however add any necessary CSS styles.
Menu items should always have meaningful labels, whether through text content, `aria-label`, or
`aria-labelledby`. Finally, keyboard interaction is supported as defined in the [ARIA menubar
keyboard interaction spec][keyboard].
The set of directives defined in `@angular/cdk/menu` follow accessibility best practices as defined
in the [ARIA spec][menubar]. Specifically, the menus are aware of left-to-right and right-to-left
layouts and opened appropriately. You should however add any necessary CSS styles. Menu items should
always have meaningful labels, whether through text content, `aria-label`, or `aria-labelledby`.
Finally, keyboard interaction is supported as defined in the [ARIA menubar keyboard interaction spec][keyboard].

<!-- links -->

Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ ng_module(
"**/*.css",
]),
deps = [
"//src/cdk-experimental/menu",
"//src/cdk/menu",
"@npm//@angular/forms",
],
)
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {NgModule} from '@angular/core';
import {CdkMenuModule} from '@angular/cdk-experimental/menu';
import {CdkMenuModule} from '@angular/cdk/menu';
import {CdkMenuStandaloneMenuExample} from './cdk-menu-standalone-menu/cdk-menu-standalone-menu-example';
import {CdkMenuStandaloneStatefulMenuExample} from './cdk-menu-standalone-stateful-menu/cdk-menu-standalone-stateful-menu-example';
import {CdkMenuMenubarExample} from './cdk-menu-menubar/cdk-menu-menubar-example';
Expand Down
2 changes: 1 addition & 1 deletion src/components-examples/config.bzl
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@ ALL_EXAMPLES = [
"//src/components-examples/cdk/clipboard",
"//src/components-examples/cdk/a11y",
"//src/components-examples/cdk/layout",
"//src/components-examples/cdk/menu",
"//src/components-examples/cdk/overlay",
"//src/components-examples/cdk-experimental/menu",
"//src/components-examples/cdk-experimental/popover-edit",
"//src/components-examples/cdk-experimental/selection",
]
2 changes: 1 addition & 1 deletion src/dev-app/BUILD.bazel
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ ng_module(
"//src/dev-app/cdk-dialog",
"//src/dev-app/cdk-experimental-combobox",
"//src/dev-app/cdk-experimental-listbox",
"//src/dev-app/cdk-experimental-menu",
"//src/dev-app/cdk-menu",
"//src/dev-app/checkbox",
"//src/dev-app/chips",
"//src/dev-app/clipboard",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@ load("//tools:defaults.bzl", "ng_module")
package(default_visibility = ["//visibility:public"])

ng_module(
name = "cdk-experimental-menu",
name = "cdk-menu",
srcs = glob(["**/*.ts"]),
assets = [
"cdk-menu-demo.html",
"cdk-menu-demo.css",
],
deps = [
"//src/cdk-experimental/menu",
"//src/components-examples/cdk-experimental/menu",
"//src/cdk/menu",
"//src/components-examples/cdk/menu",
"@npm//@angular/router",
],
)
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {RouterModule} from '@angular/router';
import {CdkMenuModule} from '@angular/cdk-experimental/menu';
import {CdkMenuExamplesModule} from '@angular/components-examples/cdk-experimental/menu';
import {CdkMenuModule} from '@angular/cdk/menu';
import {CdkMenuExamplesModule} from '@angular/components-examples/cdk/menu';

import {CdkMenuDemo} from './cdk-menu-demo';

Expand Down
2 changes: 1 addition & 1 deletion src/dev-app/dev-app/dev-app-layout.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,9 @@ export class DevAppLayout {
{name: 'Button', route: '/button'},
{name: 'Card', route: '/card'},
{name: 'CDK Dialog', route: '/cdk-dialog'},
{name: 'CDK Menu', route: '/cdk-menu'},
{name: 'CDK Experimental Combobox', route: '/cdk-experimental-combobox'},
{name: 'CDK Experimental Listbox', route: '/cdk-experimental-listbox'},
{name: 'CDK Experimental Menu', route: '/cdk-experimental-menu'},
{name: 'Checkbox', route: '/checkbox'},
{name: 'Chips', route: '/chips'},
{name: 'Clipboard', route: '/clipboard'},
Expand Down
2 changes: 1 addition & 1 deletion src/dev-app/menubar/BUILD.bazel
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ ng_module(
":mat_menubar_demo_scss",
],
deps = [
"//src/cdk-experimental/menu",
"//src/cdk/menu",
"//src/material-experimental/menubar",
"@npm//@angular/router",
],
Expand Down
2 changes: 1 addition & 1 deletion src/dev-app/menubar/mat-menubar-demo-module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {MatMenuBarModule} from '@angular/material-experimental/menubar';
import {CdkMenuModule} from '@angular/cdk-experimental/menu';
import {CdkMenuModule} from '@angular/cdk/menu';
import {MatMenuBarDemo, DemoMenu, DemoMenuItem} from './mat-menubar-demo';

@NgModule({
Expand Down
2 changes: 1 addition & 1 deletion src/dev-app/menubar/mat-menubar-demo.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
*/

import {Component, ViewEncapsulation} from '@angular/core';
import {CdkMenu, CdkMenuItem, CdkMenuGroup, CDK_MENU} from '@angular/cdk-experimental/menu';
import {CdkMenu, CdkMenuItem, CdkMenuGroup, CDK_MENU} from '@angular/cdk/menu';

@Component({
templateUrl: 'mat-menubar-demo.html',
Expand Down
5 changes: 2 additions & 3 deletions src/dev-app/routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,8 @@ export const DEV_APP_ROUTES: Routes = [
),
},
{
path: 'cdk-experimental-menu',
loadChildren: () =>
import('./cdk-experimental-menu/cdk-menu-demo-module').then(m => m.CdkMenuDemoModule),
path: 'cdk-menu',
loadChildren: () => import('./cdk-menu/cdk-menu-demo-module').then(m => m.CdkMenuDemoModule),
},
{
path: 'checkbox',
Expand Down
4 changes: 2 additions & 2 deletions src/material-experimental/menubar/BUILD.bazel
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ ng_module(
":menubar-item.css",
] + glob(["**/*.html"]),
deps = [
"//src/cdk-experimental/menu",
"//src/cdk/menu",
"@npm//@angular/core",
],
)
Expand Down Expand Up @@ -48,8 +48,8 @@ ng_test_library(
),
deps = [
":menubar",
"//src/cdk-experimental/menu",
"//src/cdk/keycodes",
"//src/cdk/menu",
"//src/cdk/testing/private",
"@npm//@angular/platform-browser",
],
Expand Down
2 changes: 1 addition & 1 deletion src/material-experimental/menubar/menubar-item.spec.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {Component, ElementRef, ViewChild} from '@angular/core';
import {ComponentFixture, waitForAsync, TestBed} from '@angular/core/testing';
import {CdkMenuItem, CdkMenuModule, CdkMenu} from '@angular/cdk-experimental/menu';
import {CdkMenuItem, CdkMenuModule, CdkMenu} from '@angular/cdk/menu';
import {MatMenuBarItem} from './menubar-item';
import {MatMenuBarModule} from './menubar-module';

Expand Down
2 changes: 1 addition & 1 deletion src/material-experimental/menubar/menubar-item.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
*/

import {Component, ViewEncapsulation, ChangeDetectionStrategy} from '@angular/core';
import {CdkMenuItem} from '@angular/cdk-experimental/menu';
import {CdkMenuItem} from '@angular/cdk/menu';

/** Removes all icons from within the given element. */
function removeIcons(element: Element) {
Expand Down
2 changes: 1 addition & 1 deletion src/material-experimental/menubar/menubar-module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
*/

import {NgModule} from '@angular/core';
import {CdkMenuModule} from '@angular/cdk-experimental/menu';
import {CdkMenuModule} from '@angular/cdk/menu';
import {MatMenuBar} from './menubar';
import {MatMenuBarItem} from './menubar-item';

Expand Down
2 changes: 1 addition & 1 deletion src/material-experimental/menubar/menubar.spec.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {Component, ViewChild, ElementRef} from '@angular/core';
import {RIGHT_ARROW} from '@angular/cdk/keycodes';
import {CdkMenuBar} from '@angular/cdk-experimental/menu';
import {CdkMenuBar} from '@angular/cdk/menu';
import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
import {dispatchKeyboardEvent} from '../../cdk/testing/private';
import {MatMenuBarModule} from './menubar-module';
Expand Down
8 changes: 1 addition & 7 deletions src/material-experimental/menubar/menubar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,7 @@
*/

import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
import {
CDK_MENU,
CdkMenuBar,
CdkMenuGroup,
MenuStack,
MENU_STACK,
} from '@angular/cdk-experimental/menu';
import {CDK_MENU, CdkMenuBar, CdkMenuGroup, MenuStack, MENU_STACK} from '@angular/cdk/menu';

/**
* A material design Menubar adhering to the functionality of CdkMenuBar. MatMenubar
Expand Down
Loading