Skip to content

Commit 26c9aec

Browse files
williamernestwilliamernest
authored
chore(menu): Rename SimpleMenu to Menu (material-components#2061)
BREAKING CHANGE: Renames MDCSimpleMenu to MDCMenu. Renames all mdc-simple-menu classes to mdc-menu. JS and SASS file paths for the menu have changed.
1 parent dd41b60 commit 26c9aec

24 files changed

+445
-476
lines changed

‎demos/index.html

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,13 @@
128128
</span>
129129
</a>
130130

131+
<a href="menu.html" role="listitem" class="mdc-list-item">
132+
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_menu_24px.svg" /></span>
133+
<span class="mdc-list-item__text">
134+
Menu
135+
<span class="mdc-list-item__secondary-text">Pop over menus</span>
136+
</span>
137+
</a>
131138

132139
<a href="radio.html" role="listitem" class="mdc-list-item">
133140
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_radio_button_24px.svg" /></span>
@@ -153,14 +160,6 @@
153160
</span>
154161
</a>
155162

156-
<a href="simple-menu.html" role="listitem" class="mdc-list-item">
157-
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_menu_24px.svg" /></span>
158-
<span class="mdc-list-item__text">
159-
Simple Menu
160-
<span class="mdc-list-item__secondary-text">Pop over menus</span>
161-
</span>
162-
</a>
163-
164163
<a href="slider.html" role="listitem" class="mdc-list-item">
165164
<span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/slider.svg" /></span>
166165
<span class="mdc-list-item__text">

‎demos/simple-menu.html renamed to ‎demos/menu.html

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@
1717
<html>
1818
<head>
1919
<meta charset="utf-8">
20-
<title>Simple Menu - Material Components Catalog</title>
20+
<title>Menu - Material Components Catalog</title>
2121
<meta name="viewport" content="width=device-width, initial-scale=1">
2222
<link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
23-
<link rel="stylesheet" href="/assets/simple-menu.css">
23+
<link rel="stylesheet" href="/assets/menu.css">
2424
<script src="/ready.js"></script>
2525
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
2626
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
@@ -33,7 +33,7 @@
3333
flex-direction: column;
3434
}
3535

36-
.hero .mdc-simple-menu {
36+
.hero .mdc-menu {
3737
z-index: initial;
3838
}
3939

@@ -108,16 +108,16 @@
108108
<span class="catalog-back">
109109
<a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
110110
</span>
111-
<span class="mdc-toolbar__title catalog-title">Simple Menu</span>
111+
<span class="mdc-toolbar__title catalog-title">Menu</span>
112112
</section>
113113
</div>
114114
</header>
115115

116116
<main>
117117
<div class="mdc-toolbar-fixed-adjust"></div>
118118
<section class="hero">
119-
<div class="mdc-simple-menu mdc-simple-menu--open">
120-
<ul class="mdc-simple-menu__items mdc-list">
119+
<div class="mdc-menu mdc-menu--open">
120+
<ul class="mdc-menu__items mdc-list">
121121
<li class="mdc-list-item" role="menuitem">Back</li>
122122
<li class="mdc-list-item" role="menuitem">Forward</li>
123123
<li class="mdc-list-item" role="menuitem">Reload</li>
@@ -134,8 +134,8 @@
134134
Show<span class="demo-button__normal-text"> Menu</span><span class="demo-button__long-text"> From Here Now!</span>
135135
</button>
136136

137-
<div class="mdc-simple-menu" style="position: absolute;" tabindex="-1" id="demo-menu">
138-
<ul class="mdc-simple-menu__items mdc-list" role="menu" aria-hidden="true">
137+
<div class="mdc-menu" style="position: absolute;" tabindex="-1" id="demo-menu">
138+
<ul class="mdc-menu__items mdc-list" role="menu" aria-hidden="true">
139139
<li class="mdc-list-item" role="menuitem" tabindex="0">Back</li>
140140
<li class="mdc-list-item" role="menuitem" tabindex="0">Forward</li>
141141
<li class="mdc-list-item" role="menuitem" tabindex="0">Reload</li>
@@ -259,7 +259,7 @@
259259
<script>
260260
demoReady(function() {
261261
var menuEl = document.querySelector('#demo-menu');
262-
var menu = new mdc.menu.MDCSimpleMenu(menuEl);
262+
var menu = new mdc.menu.MDCMenu(menuEl);
263263
var menuButtonEl = document.querySelector('#menu-button');
264264
menuButtonEl.addEventListener('click', function() {
265265
menu.open = !menu.open;
@@ -270,10 +270,10 @@
270270
var contentEl = document.querySelector('.demo-content');
271271
if (evt.target.checked) {
272272
contentEl.classList.add('mdc-theme--dark');
273-
menuEl.classList.add('mdc-simple-menu--theme-dark');
273+
menuEl.classList.add('mdc-menu--theme-dark');
274274
} else {
275275
contentEl.classList.remove('mdc-theme--dark');
276-
menuEl.classList.remove('mdc-simple-menu--theme-dark');
276+
menuEl.classList.remove('mdc-menu--theme-dark');
277277
}
278278
});
279279

@@ -310,16 +310,16 @@
310310
if (evt.target.checked) {
311311
switch (evt.target.value) {
312312
case "top start":
313-
menu.setAnchorCorner(mdc.menu.MDCSimpleMenuFoundation.Corner.TOP_START);
313+
menu.setAnchorCorner(mdc.menu.MDCMenuFoundation.Corner.TOP_START);
314314
break;
315315
case "bottom start":
316-
menu.setAnchorCorner(mdc.menu.MDCSimpleMenuFoundation.Corner.BOTTOM_START);
316+
menu.setAnchorCorner(mdc.menu.MDCMenuFoundation.Corner.BOTTOM_START);
317317
break;
318318
case "top end":
319-
menu.setAnchorCorner(mdc.menu.MDCSimpleMenuFoundation.Corner.TOP_END);
319+
menu.setAnchorCorner(mdc.menu.MDCMenuFoundation.Corner.TOP_END);
320320
break;
321321
case "bottom end":
322-
menu.setAnchorCorner(mdc.menu.MDCSimpleMenuFoundation.Corner.BOTTOM_END);
322+
menu.setAnchorCorner(mdc.menu.MDCMenuFoundation.Corner.BOTTOM_END);
323323
break;
324324
}
325325
}
@@ -397,7 +397,7 @@
397397
}
398398

399399
var lastSelected = document.getElementById('last-selected');
400-
menuEl.addEventListener('MDCSimpleMenu:selected', function(evt) {
400+
menuEl.addEventListener('MDCMenu:selected', function(evt) {
401401
var detail = evt.detail;
402402
lastSelected.textContent = '"' + detail.item.textContent.trim() +
403403
'" at index ' + detail.index;

‎demos/simple-menu.scss renamed to ‎demos/menu.scss

File renamed without changes.

‎demos/select.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,8 @@
7272
<div class="mdc-select__selected-text"></div>
7373
<div class="mdc-select__bottom-line"></div>
7474
</div>
75-
<div class="mdc-simple-menu mdc-select__menu">
76-
<ul class="mdc-list mdc-simple-menu__items">
75+
<div class="mdc-menu mdc-select__menu">
76+
<ul class="mdc-list mdc-menu__items">
7777
<li class="mdc-list-item" role="option" tabindex="0">
7878
Bread, Cereal, Rice, and Pasta
7979
</li>
@@ -106,8 +106,8 @@ <h2 class="mdc-typography--title">Fully-Featured Component</h2>
106106
<div class="mdc-select__selected-text"></div>
107107
<div class="mdc-select__bottom-line"></div>
108108
</div>
109-
<div class="mdc-simple-menu mdc-select__menu">
110-
<ul class="mdc-list mdc-simple-menu__items">
109+
<div class="mdc-menu mdc-select__menu">
110+
<ul class="mdc-list mdc-menu__items">
111111
<li class="mdc-list-item" role="option" id="fruit-roll-ups" tabindex="0">
112112
Fruit Roll Ups
113113
</li>

‎demos/theme/index.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@
4444
<span class="demo-theme-color-radio__inner"></span>
4545
</i>
4646
</button>
47-
<div class="mdc-simple-menu demo-theme-menu" style="position: absolute;" tabindex="-1" id="theme-color-menu">
48-
<ul class="mdc-simple-menu__items mdc-list demo-theme-list"
47+
<div class="mdc-menu demo-theme-menu" style="position: absolute;" tabindex="-1" id="theme-color-menu">
48+
<ul class="mdc-menu__items mdc-list demo-theme-list"
4949
role="menu"
5050
aria-hidden="true"
5151
style="list-style-type: none"><!-- Inline style needed to fix IE 11 rendering bug (see https://stackoverflow.com/a/23717689/467582) -->
@@ -687,8 +687,8 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
687687
<div class="mdc-select__selected-text"></div>
688688
<div class="mdc-select__bottom-line"></div>
689689
</div>
690-
<div class="mdc-simple-menu mdc-select__menu">
691-
<ul class="mdc-list mdc-simple-menu__items">
690+
<div class="mdc-menu mdc-select__menu">
691+
<ul class="mdc-list mdc-menu__items">
692692
<li class="mdc-list-item" role="option" id="none" aria-disabled="true">
693693
Pick a food group
694694
</li>

‎demos/theme/index.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const ids = {
3939
};
4040

4141
const events = {
42-
MDC_SIMPLE_MENU_SELECTED: 'MDCSimpleMenu:selected',
42+
MDC_MENU_SELECTED: 'MDCMenu:selected',
4343
};
4444

4545
class Permalinker extends InteractivityProvider {
@@ -132,14 +132,14 @@ class ThemePicker extends InteractivityProvider {
132132

133133
/** @private */
134134
registerThemeMenuOpenHandler_() {
135-
const menu = new mdc.menu.MDCSimpleMenu(this.themeMenuEl_);
135+
const menu = new mdc.menu.MDCMenu(this.themeMenuEl_);
136136
const actionEl = this.root_.getElementById(ids.THEME_COLOR_MENU_ACTION);
137137
actionEl.addEventListener('click', () => menu.open = !menu.open);
138138
}
139139

140140
/** @private */
141141
registerThemeMenuChangeHandler_() {
142-
this.themeMenuEl_.addEventListener(events.MDC_SIMPLE_MENU_SELECTED, (evt) => {
142+
this.themeMenuEl_.addEventListener(events.MDC_MENU_SELECTED, (evt) => {
143143
const safeNewTheme = getSafeDemoTheme(evt.detail.item.getAttribute(attributes.THEME_NAME));
144144
this.swapTheme_(safeNewTheme);
145145
this.pushHistoryState_(safeNewTheme);

‎demos/toolbar/menu-toolbar.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@
4343
<a href="#" class="material-icons mdc-toolbar__icon" aria-label="Print this page" alt="Print this page">print</a>
4444
<a href="#" class="material-icons mdc-toolbar__icon toggle" aria-label="More" alt="More">more_vert</a>
4545
<div class="mdc-menu-anchor">
46-
<div class="mdc-simple-menu" tabindex="-1" id="demo-menu">
47-
<ul class="mdc-simple-menu__items mdc-list" role="menu" aria-hidden="true" style="transform: scale(1, 1);">
46+
<div class="mdc-menu" tabindex="-1" id="demo-menu">
47+
<ul class="mdc-menu__items mdc-list" role="menu" aria-hidden="true" style="transform: scale(1, 1);">
4848
<li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.069s;">Back</li>
4949
<li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.124s;">Forward</li>
5050
<li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.179s;">Reload</li>
@@ -75,7 +75,7 @@
7575
<script>
7676
demoReady(function() {
7777
var menuEl = document.querySelector('#demo-menu');
78-
var menu = new mdc.menu.MDCSimpleMenu(menuEl);
78+
var menu = new mdc.menu.MDCMenu(menuEl);
7979
var toggle = document.querySelector('.toggle');
8080
toggle.addEventListener('click', function() {
8181
menu.open = !menu.open;

‎docs/integrating-into-frameworks.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,8 @@ case.
6363
6464
Every component comes with a complementary foundation class, which is usually called
6565
`MDCComponentFoundation`, where `MDCComponent` is the name of a component. For example, we have an
66-
[MDCSimpleMenuFoundation](../packages/mdc-menu/simple/foundation.js) that is used by our
67-
[MDCSimpleMenu](../packages/mdc-menu/simple/index.js) component, and which are both exported
66+
[MDCMenuFoundation](../packages/mdc-menu/foundation.js) that is used by our
67+
[MDCMenu](../packages/mdc-menu/index.js) component, and which are both exported
6868
publicly.
6969

7070
In order to implement a component via a foundation, take the following steps:

‎packages/material-components-web/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ autoInit.register('MDCSnackbar', snackbar.MDCSnackbar);
4949
autoInit.register('MDCTab', tabs.MDCTab);
5050
autoInit.register('MDCTabBar', tabs.MDCTabBar);
5151
autoInit.register('MDCTextField', textField.MDCTextField);
52-
autoInit.register('MDCSimpleMenu', menu.MDCSimpleMenu);
52+
autoInit.register('MDCMenu', menu.MDCMenu);
5353
autoInit.register('MDCSelect', select.MDCSelect);
5454
autoInit.register('MDCSlider', slider.MDCSlider);
5555
autoInit.register('MDCToolbar', toolbar.MDCToolbar);

0 commit comments

Comments
 (0)